質問: 独学でGoogleトップページのデザインを真似てみました。 ブラウザの表示領域の上部に固定されたヘッダーとセンタリングされたコンテンツといった形にしています。 自分で真似たので、表示される結果としてはイメージ通りではあるのですが 実際、回りくどい方法をとっていないか?もっと適切な方法がるのでは?といった事が分からないので チェックして頂きたいと思います。 CSSに関しては外部ファイルへ記述します。 以下のソースになります。 あいうえお google yahoo content どんな些細な事でも構わないので、よろしくお願いします。
回答: >詳細度について勉強してみました。 > ... >ここを参照してみましたが、 そのサイトの説明はCSS2です。現在ウェブ標準として認識されているものはCSS2.1です。CSS2.1では、詳細度の値に変更があります。 →6.4.3 Calculating a selector's specificity ( ) 全称セレクタ,HTMLの要素での指定 詳細度 0 要素セレクタ,擬似要素セレクタ 詳細度 d=1 クラスセレクタ,擬似クラスセレクタ 詳細度 c=1 一意セレクタ 詳細度 b=1 HTMLのstyle要素 詳細度 a=1 つねに、詳細度を含めたプロパティの値,カスケーディング,継承については意識しておかなければなりません。 →Assigning property values, Cascading, and Inheritance ( ) 残念ながら、スタイルシートを説明している多くのサイトは、プロパティの説明に多くを裂いていて、それ以前に知っておかなければならない継承や詳細度の計算を含むカスケーディングについてはほとんど無視されているのが実情です。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)-- --を上書きしてしまいますから、これらが登場すると再設定しなければならなくなります。これはスタイルシートを煩雑にする大きな要因になることは理解できると思います。 基点となるセレクタになりうるのは、*とタイプセレクタです。CSS2では、基点となるセレクタと言う概念が導入されたため、*が追加されたと考えると良いでしょう。