テンプレートのレイアウト構成について

ホームページのレイアウトは、ヘッダーやサイドバー、フッターなど「div要素の入れ物」によって領域が区分けされています。このdiv要素は、必ず「開始タグ」と「終了タグ」が１セットになって機能しますので、囲まれた範囲をひとつのまとまりとして考えるとよいでしょう。

デザインを変更させたい場合は、スタイルシート側でこのdiv要素に対応する箇所を変更すればＯＫです。

例えば、当サイトのテンプレートのサンプルの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 などの間隔を正確に統一させると違和感が少なくなります。

Photoshop グリッド

当サイトでは３等分して各20pxづつpaddingをとっていますが、6等分なり、8等分なりして、それぞれを等間隔で正確に配置すると統一感が出てきてきます。目分量でもかまいませんが、できるだけ、規則性を持ってレイアウトを配置するようにしましょう。