- ベストアンサー
CSSでのレイアウトについて
- CSSでのレイアウトに移行することの難しさと、tableレイアウトからの移行によるデザインの崩れへの不安について質問しています。
- 質問者が見かけたサイトのレイアウトについて質問しており、ヘッダーとフッターが100％、真ん中が80％ぐらいのレイアウトについて何というレイアウトか知りたいと述べています。
- 質問者はHTMLを学び、自身でサイトを作成しているが、レイアウトについては不安があります。tableレイアウトからCSSでのレイアウトに移行することの難しさやデザインの崩れについて質問しています。また、特定のレイアウトについて知りたいとも述べています。
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
まず、最低限参考になるサイトを Another HTML-lint gateway ( http://openlab.ring.gr.jp/k16/htmllint/htmllint.html )でチェックしてみましょう。これがすべてではありませんが、大きな参考になるでしょう。 ＞その為レイアウトをいじろうと思うと全てのファイルを修正しなければなりません。 その必要はありません。そのまま置いておきましょう。更新する必要がでてきた場合のみ、そのページだけ変えるなり、作成していけばよいです。変なページもそのまま歴史ですから・・ ＞私もいづれこのようなレイアウトにしたいのですが、 決して参考になるページではないと思います。いわゆるdivスープと揶揄されるページで、tableの代わりにdivが多用されているだけで、本質的にtableデザインと変わりません。tableをつか ・狭いディスプレイでははみ出してしまいます。最近多いi-phoneや携帯電話では無理 ・Lynxで閲覧すると極めて判読しがたいものになります。「Lynx などのテキスト ブラウザを使用して、サイトを確認します（ほとんどの検索エンジンのスパイダーには Lynx で見えるようにサイトが映ります）--google(技術に関するガイドライン) ( http://support.google.com/webmasters/bin/answer.py?hl=ja&answer=35769#2 )」 HTMLは、Hyper Text Markup Languageの略ですが、このマークアップとは、文書を構成する要素に分解して、その要素が何であるかをマークアップしていくメタ言語です。そのために使うのが、その要素が何であるかを示すタグで、<head><h1><p><blockquote>ですが、それで足りないときは<div>や<span>に、それを示すclass名やidをつけます。 『DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )』 しかし、示されたサイトのソースを見てみましたが、leftCol,rightCol,lastChild,onesoul,clearfix,naviBox,slideBox,nextgameBox,imgover,sidebarと、およそ「文書構造とは関係のない物が使われています。名称もおかしいですが、それらのidやclass名の９割はつけることすら無用です。 たとえば、HTML4なら <div class="section"> <h2>本文記事見出し</h2> <p>段落</p> <p>段落</p> <ul class="index"> <li><a href="#">目次</a></li> </ul> </div> <div class="footer"> <h2>文書情報</h2> <div class="nav"> <ul> <li><a href="./">トップ</a></li> <li><a href="./profile">自己紹介</a></li> </ul> </div> </div> 程度、文書構造を示す要素が追加されたHTML5なら <section> <h2>本文記事見出し</h2> <p>段落</p> <p>段落</p> <ul class="index"> <li><a href="#">目次</a></li> </ul> </section> <footer> <h2>文書情報</h2> <nav> <ul> <li><a href="./">トップ</a></li> <li><a href="./profile">自己紹介</a></li> </ul> </nav> </footer> 程度で、そのようなサイトのデザインは出来るはずです。そのほうがHTMLもCSSもわかりやすい。フッター内のナビゲーションのリスト一つ一つにimgoverなんてclass名をつける必要はなく。 HTM4用なら div.footer div nav ul li{} HTML５用なら footer nav ul li{} でスタイルを適用する要素を特定できます。 デザインも後日、まったく変えることも自由自在に出来ます。 サイトを評価する場合、まず ★The W3C Markup Validation Service ( http://validator.w3.org/ ) ★Another HTML-lint gateway ( http://openlab.ring.gr.jp/k16/htmllint/htmllint.html ) ★W3C CSS 検証サービス ( http://jigsaw.w3.org/css-validator/ ) でチェックして、 ★Lynx( http://lynx-win32-pata.sourceforge.jp/ ) で表示させてみるのは基本ですね。 まあ、一目でわかるポイントは「デザインのためにHTMLが書かれていないか？」書かれていればパスしましょう。それはtableでデザインされていることと同じ理由です。『構造とプレゼンテーションの分離 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.4.1 )』はHTML上達の基本です。
その他の回答 (2)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
尻切れトンボでした。 ＞本質的にtableデザインと変わりません。tableをつか tableを使わなきゃ良いだろうということで、divを多用しても意味がありません。HTML5の制定作業をウォッチしていると、しばしば「tableやdivを使った失敗をしないよう」という文言がでてきます。そのためにHTML5では<header><section><footer><article><aside><nav><figure>など新しい要素がたくさん追加されます。それによってdivを使う機会はゼロにはならないにしても、ほとんど姿を消すでしょう。
- nana76
- ベストアンサー率28% (168/583)
うーん、何が分からなくてどこまで分かっているのかがイマイチ分からないのですが・・・。 tableレイアウトからcssへのレイアウト移行は、メンドクサイと言えばメンドクサイです。 でも、私ならやっちゃいますけどね。 作りたいサイトは見ました。 とりあえず、<div>で括ってそれぞれ設定すれば良いかなぁ。と。 あとは、<float>でサイズ指定。 ％で決めるかpxで指定するかは、デザイン次第かなぁ。 どこから分からないのかがよく分からなかったので、親切な説明ができなくてごめんなさい。 （作りたいサイトのソースを見てみるのも勉強になると思いますよ。） floatの説明は、色んなサイトが存在するので探してみたら自分の知りたい情報がいくらでも出てくると思います。 （検索しても出てこなかったのは、検索するワードが間違っていたんじゃないかなぁ・・・と。）
お礼
回答ありがとうございました。
お礼
回答ありがとうございます。 お礼が遅くなり申し訳ありません。 丁寧に教えて頂きありがとうございます。 早速やってみます。