- 締切済み
HTML、CSSのチェックをお願いします。
独学でGoogleトップページのデザインを真似てみました。 ブラウザの表示領域の上部に固定されたヘッダーとセンタリングされたコンテンツといった形にしています。 自分で真似たので、表示される結果としてはイメージ通りではあるのですが 実際、回りくどい方法をとっていないか？もっと適切な方法がるのでは？といった事が分からないので チェックして頂きたいと思います。 CSSに関しては外部ファイルへ記述します。 以下のソースになります。 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <style type="text/css"> <!-- body{ margin: 0; /* ヘッダーをぴったり上部付けたいので */ } #header{ color: #DDD; background-color: black; position: fixed; width: 100%; height: 50px; /* ヘッダー内に高さ50pxの画像を配置したい為 */ z-index: 100; /* wrapperより上にかぶってほしい為。数値自体は適当 */ top: 0; } #wrapper{ width: 800px; margin: 0 auto; background-color: #dbcfc3; margin-top: 50px; height: 1300px; /* 縦スクロールを表示したい為 */ } #header h1, #header ol, #header li,#header img{ margin: 0; font-size: 17px; float: left; } #header ol{ padding: 0; list-style-type: none; } #header li{ margin-left: 5px; } #header a:visited, #header a:link{ color: #DDD; } --> </style> </head> <body> <div id="header"> <img src="" alt="てすと"><!-- srcには高さ50pxの画像を使用予定 --> <h1>あいうえお</h1><!-- SEO的にH1を使った方がいいとの記述が多い為。サイトタイトルを記入予定 --> <div> <ol> <li><a href="http://www.google.co.jp">google</a></li> <li><a href="http://www.yahoo.co.jp">yahoo</a></li> </ol> </div> </div> <div id="wrapper"> content </div> </body> </html> どんな些細な事でも構わないので、よろしくお願いします。
- みんなの回答 （2）
- 専門家の回答
みんなの回答
- ORUKA1951
- ベストアンサー率45% (5062/11036)
＞詳細度について勉強してみました。 ＞http://www6.plala.or.jp/go_west/nextcss/ref/basi … ＞ここを参照してみましたが、 そのサイトの説明はCSS2です。現在ウェブ標準として認識されているものはCSS2.1です。CSS2.1では、詳細度の値に変更があります。 →6.4.3 Calculating a selector's specificity ( http://www.w3.org/TR/CSS2/cascade.html#specificity ) 全称セレクタ,HTMLの要素での指定 詳細度 0 要素セレクタ,擬似要素セレクタ 詳細度 d=1 クラスセレクタ,擬似クラスセレクタ 詳細度 c=1 一意セレクタ 詳細度 b=1 HTMLのstyle要素 詳細度 a=1 つねに、詳細度を含めたプロパティの値,カスケーディング,継承については意識しておかなければなりません。 →Assigning property values, Cascading, and Inheritance ( http://www.w3.org/TR/CSS2/cascade.html ) 残念ながら、スタイルシートを説明している多くのサイトは、プロパティの説明に多くを裂いていて、それ以前に知っておかなければならない継承や詳細度の計算を含むカスケーディングについてはほとんど無視されているのが実情です。CSS(カスケーディングスタイルシート)と銘打つくらいカスケーディングは重要ですのに・・・ ＞一意なので#だけでよいです。 ＞こちらについても理解できませんでした。#だけでいいとは#{...}という事・・・ではないですよね。 そうです。 #headeは、CSS2では、*#headeと解釈され、詳細度は[ 0 1 0 0 ]となりますが、他のセレクタの指定方法と同じく *#heade[ 0 1 0 0 ]と書くべきなのでしょうが、所詮ページ内に一箇所しかないので、#headで良いかなと。 classはページ内のあちこちに存在しうるので、基本的に記述するほうが良いです。(後々楽と言う意味で) ＞もしあっているのならbody{margin:0;}ではなく*{margin:0;}の方がいいように思います。 これは違います。*全称セレクタは、すべての要素セレクタを示しますから、本来継承されないmarginをすべての要素に適用させてしまいますから、まずいです。継承されるプロパティについては、body{font-family:・・・・・}ですべてのbody以下の要素に適用されますから、この場合も書かなくて済む。 よく見かける *{margin:0;padding:0;} と言う指定は、ul,ol,dl,blockquote,p・・などの、ブラウザの持つデフォルトスタイルシート（default style sheet）-- http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/sample.html --を上書きしてしまいますから、これらが登場すると再設定しなければならなくなります。これはスタイルシートを煩雑にする大きな要因になることは理解できると思います。 基点となるセレクタになりうるのは、*とタイプセレクタです。CSS2では、基点となるセレクタと言う概念が導入されたため、*が追加されたと考えると良いでしょう。
- ORUKA1951
- ベストアンサー率45% (5062/11036)
まず、HTMLのほうから HTML4.01では、「構造とプレゼンテーションの分離( http://www.asahi-net.or.jp/~sd5a-ucd/rec-html401j/intro/intro.html#h-2.4.1 )」と言われながら、(文書)構造を示す要素は無くて、「DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。( http://www.asahi-net.or.jp/~sd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )」としか書かれていませんでした。そのため、wraperやcontnt,mail,leftなど、文書構造を付加するとは言い難い==プレゼンテーションの構造を付加するようなclass名が使われていました。その反省からHTML5では、意味的な(セマンティック)な要素が追加されます。その要素名こそ、HTML4.01で想定していた「文書に構造を付加するための」id、classの値です。 すなわち、文書には必ずheaderに当たる部分、section(本文)にあたる部分、footerに当たる部分かあると想定される。 HTML4で、期待されていたclass名が新たな要素として誕生した。 <div class="footer">→<header> <div class="section">→<section> <div class="footer">→<footer> それぞれがどのような意味合いであるかは ★HTML5 における HTML4 からの変更点の新しい要素 ( http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff/#new-elements ) を参照してください。 <div class="header></div> <div class="section"></div> <div class="footer"></div> が基本的な構造になるはずです。ここで、headerやsection,footerは文書内に何度も登場する可能性があるのでclass名のほうが良いでしょう。idを振るのはリンクターゲットやjavascriptのターゲットとするときに限定したほうが、スタイルシートを記述するとき便利です。(詳細度がc=1・・idだとb=1になってしまう) DOCTYPEが<!DOCTYPE html>となっていますが、これはHTML5であるのでしたら、stypeにtypeの指定は不要です。 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <style type="text/css"> でなくて、 <!doctype html> <html> <head> <meta charset="UTF-8"> <title>Example document</title> <style type="text/css"> <!-- body{ で良いです。 スタイルシート CSS2.1がウェブ標準とみなされていますが、CSS2.1では詳細度0の*(全称セレクタ)が導入され、出発点となるセレクタが書かれていない場合は、*があるとみなします。したがって、基点となるセレクタを書く癖をつけておいたほうが良いです。 一意セレクタ(id)を使う場合は、詳細度が高いうえに一意なので#だけでよいです。 続きは後ほど
お礼
詳説ありがとうございます。 <!DOCTYPE html>に関してはHTML4.01での記述をするつもりでしたが、自身のテスト用という事で簡略化してしまったものです。申し訳ありません。 また、HTML5では<meta http-equiv...が必要ないとは知りませんでした。
補足
HTML4.01からHTML5への移り変わりについてのご説明有難うございます。 hrdear,section,footerの意味合いも勉強します。 >idを振るのはリンクターゲットやjavascriptのターゲットとするときに限定したほうが... 確かにその方がいいように感じます。という事は、基本的にはclass名を設定すべきと思っていいのでしょうか？ 詳細度について勉強してみました。 http://www6.plala.or.jp/go_west/nextcss/ref/basic/cascade.htm#specificity ここを参照してみましたが、お恥ずかしい限りですが、知りませんでした。 詳細度が低いものから高いものへと上書きされていくという認識で大丈夫でしょうか？ もしあっているのならbody{margin:0;}ではなく*{margin:0;}の方がいいように思います。(下に書く基点という意味も含め) ちなみにCSS書かれる際は、この詳細度を意識しながら書かれていますか？ >基点となるセレクタを書く癖をつけておいたほうが良いです。 申し訳ありません。基点となるセレクタがよく分かりません。 詳細度0(*)のセレクタは書くようにすべき=そこが基点となるという事でしょうか？ >一意なので#だけでよいです。 こちらについても理解できませんでした。#だけでいいとは#{...}という事・・・ではないですよね。 長文になってしまいましたが、お時間ある時にまたお付き合い頂けたらと思います。