第４章 Ｂｏｘモデルの一寸したコツ
４-1. たまにはスタイル・ルールの手入力を試みては
先に、Ｂｏｘの入力には「ページ/ソース」モードで行うようお勧めしましたが、スタイル・ルールもスタイルシート・マネジャーの「スタイル設定」ダイアログに頼らないで直接手入力すると大変便利で良い場合があります。その上、現在の「スタイル設定」ダイアログではサポートされていないスタイル・ルールも数多くあります。この節ではその辺りのことを説明します。
- #containerの中央揃え
「スタイル設定」ダイアログでは左右のマージンにAUTOという文字の入力が出来ません。そこでＳｔｙｌｅＳｈｅｅｔを開いて、次のように入力すれば、このルールは規定されます。 #container
{ margin 0 auto; } 簡単でしょう！！
因みに、ピクセルを表すのに０ピクセルの場合はpxは要りませんし、上、右、下、左の入力で（上、右）と（下、左）の指定が対照的に同じなら、（上、右）だけで良いのです。従って、{
margin 0 auto; }は{ margin 0 auto 0 auto; }と同じなのです。
- ホームページ作成やブラウザーの初期設定のリセット
このリセットのルールも現段階の「スタイル設定」ダイアログでは入力できません。そこでＳｔｙｌｅＳｈｅｅｔを開いて、次のように入力すれば、このルールは規定されます。 *
{ margin 0; padding 0; } 簡単でしょう！！
因みに、ここの * はユニバーサル・セレクターと言って全てのタグを指します。
- 複合セレクター
特定Ｂｏｘを指定するのにそのＢｏｘの階層パスで指定できることを既に説明しました。この指定も手入力で簡単に出来ます。例えば、前章で紹介したＳａｍｐｌｅ０７で#main
Boxの見出し「奥の細道の冒頭の文」はh2で入力しています。然し、h2は既に#navi Boxで使われており、その色は緑色に規定されています。そこで、複合セレクターとして、次のように手入力で規定すれば別の色に規定できるのです。
#yoko_main h2 { color : #cc0000; }
４-2. ナビゲーション・メニューを横に並べる方法
この節ではよく使われる横並びのナビゲーションメニューの作り方のコツを学習します。
ナビゲーション・メニューにはLiタグが最もよく使われますが、縦並びの性格を持っているBoxを横並びにするための inlineルールを使います。そのコーディングはこのサンプルのソース・コードを見て下さい。
inlineルールは「スタイル設定」ダイアログでは「位置」カテゴリー → 「表示」 → ＜inline＞を指定します。それと同時に「位置」カテゴリー → 「回り込み」 → ＜left＞を指定しなければなりません。リストの「●」も消します。
ナビゲーションメニュー全体を中央揃えするには、ulタグのマージンで調整します。
４-3. 洒落たハイパーリンクの作り方
上のサンプルで作成したナビゲーション・メニューは如何にも素人臭いので、もうちょっと洒落たものにしましょう。
- 各ハイパーリンクを箱型の枠で囲み、リンクが映える背景を付けて、リンクの色を白にする
箱型の枠はLiタグのスタイルを2重線のボーダにし、白が映える背景色を選びます。前景は勿論白にする。
- 各ハイパーリンクの下線を消す
#yoko_navi li a という複合セレクタ（タグを階層パスで指定したもの）に下線なしの設定をする。
上の操作で作成したサンプル・コードは
このようなものです。
４-4. 色コードの入力のコツ
筆者はこれまで背景色や文字の色を指定する場合、「色設定ダイアログボックス」を使ってその都度感覚的に指定して来ました。その結果、同じページの中でも背景色や文字の色が微妙に異なるようになって、統一性に欠ける結果になりました。統一した色を指定したくとも各々のカラー・コードを覚えていないので困った経験があります。
そこで、色の指定は「色設定ダイアログボックス」を使わないで、ある程度自分の好みのものを覚えていて、それを手入力することが手っ取り早く色の統一性を確保することになると思うようになりました。そのためには先ずカラーコードの仕組みを理解することが必要と認識し、以下の様なカラー・コードを覚えるコツを纏めてみました。
- カラー・コードは下のような６桁の１２進数の文字からなっています。
#FFFFFF （白）、 #FF0000 （赤）、#000800 （青）、#000000 （黒） 但し、文字は大文字でも小文字でも良い。
- その６ケタの数字には下のような法則によって付られています
最初の2桁が赤、次の二桁が緑、最後の2桁が青と、RGB（Red Green Blue）で色の強さを決めることができます。
すべてが０であれば、最も光の弱い色である黒が、すべてがFであれば、すべての色が強い白が作られます。
- よく背景色や枠線の色に使われる灰色は覚えやすいぞろ目の６桁で、数字が小さいほど濃い灰色です。
従って、#eeeeee #999999 #666666 #333333 は薄い灰色から濃い灰色の順です。
#eeeeee は薄い灰色として背景色によく使われますし、#333333 は枠線などによく使われます。
更に、これらは３桁のセーフ・カラーとして、#eee #999 #666 #333 としても入力出来るので、便利です。
- 背景色は原色ではなく薄くて柔らかい色が適当とされていて、それらの色には名前が付けられているので、自分の好みの色の名前を覚えておいたり、そのカラー・コードを覚えておくのも手っ取り早い方法です。
例えば；
黄色系では： LightYellow #FFFFE0、 LemonChiffon #FFFACD、PapayaWhip #FFEFD5 等々
緑色系では： LightGreen #90EE90、PaleGreen #98FB98、 SpringGreen #00FF7F 等々
青色系では： LightBlue #ADD8E6、 SkyBlue #87CEEB、 LightCyan #E0FFFF 等々
茶色系では： Wheat #F5DEB3、 Cornsilk #FFF8DC、 Tan #D2B48C 等々
- 濃いめの背景色に白抜きの文字を入れる時に向いているユニークな色は；
Gold #FFD700、 Olive #808000、Teal #008080、SteelBlue #4682B4、Chocolate #D2691E等々
- 写真の説明など小さい文字でもはっきりした色には：
FireBrick #B22222、 Brown #A52A2A、Navy #000080、Maroon #800000 等々があります。
４-5. CSSルールの優先順位の目安
同じBox又はHTMLタグに重複してスタイル・ルールを指定してしまう場合があります。その場合は、どちらのルールが適用されるかはセレクターの指定の仕方の優先順位が高いほうのルールが適用されます。優先順位を判断する厳密な法則がありますが、現実的には次のような目安を覚えておけば十分でしょう。
スタイル・ルールの優先順位の目安は以下の通りです。
- 同じセレクターで重複して別のルールを規定した場合は、後に書いた方が優先されます。
例えば、p {font-sise: 20px;} と p {font-sise: 14px;} との指定があれば、フォント・サイズは14pxになります。
- 同じBox又はHTMLタグに別のセレクター指定をした場合は、パスを細かく指定した方が優先されます。
例えば、#contents #main p.regular{aaaa } と #main p.regular{bbbb } と p{cccc
} の指定があった場合は最も細かくパ スを指定したルール{aaaa }が優先されて適用されます。