テンプレートのレイアウト構成について
ホームページのレイアウトは、ヘッダーやサイドバー、フッターなど「div要素の入れ物」によって領域が区分けされています。このdiv要素は、必ず「開始タグ」と「終了タグ」が1セットになって機能しますので、囲まれた範囲をひとつのまとまりとして考えるとよいでしょう。
デザインを変更させたい場合は、スタイルシート側でこのdiv要素に対応する箇所を変更すればOKです。
例えば、当サイトのテンプレートのサンプルのhtmlファイルではこのようになっています。
このhtmlファイルに記入されている各div要素と、実際に表示されるホームページの対応箇所はこのようになります。
ホームページ全体
赤い枠で囲っている箇所が、ホームページ全体の領域になります。サンプルではdiv要素のid属性を「outer」と設定しましたが、「container」や「wrapper」などの名前で指定されていることも多いです。
スタイルシートでは、この「outer」に対応する箇所は「#outer」になっています。
ですので、幅を広げたい場合にはこのwidthの値を大きくしたり、あるいは文字サイズを大きくしたい場合にはfont-sizeの値を大きくしたりすると、対応する「outer」の箇所のデザインも変更されます。
ヘッダーの領域
ヘッダー部分の領域は「header」としましたが、「banner」や「head」などのような名前がつけられることも多いです。同じように、スタイルシートでは「#header」の箇所が対応しますので、ヘッダー部分のデザインを変更する際はスタイルシートで値を調整します。
以下、コンテンツの部分や右サイドバー、フッターの箇所も同様です。
左サイドバー
右サイドバー
フッターの領域
ちなみに、このdivのid属性である「outer」や「header」などの小文字英数の名前は任意ですので、特に何でもかまいませんが、「htmlファイル」と「スタイルシート」で必ず対応させるようにしましょう。
例えば、html上では「header」としているのに、スタイルシート上では「head」などとしても機能しませんので注意しましょう。
■グリッドを使ってのレイアウト設計
このレイアウトを設定する際、Photoshop や Illustrator などのツールを使ってグリッドを表示させ、padding などの間隔を正確に統一させると違和感が少なくなります。
当サイトでは3等分して各20pxづつpaddingをとっていますが、6等分なり、8等分なりして、それぞれを等間隔で正確に配置すると統一感が出てきてきます。目分量でもかまいませんが、できるだけ、規則性を持ってレイアウトを配置するようにしましょう。
進む:右サイドバーの幅は300pxが最適
戻る:テンプレートのカスタマイズ方法