サイズを変更しよう
ヘッダやコンテンツのサイズ変更は、スタイルシートで行います。「スタイルシートの編集方法」のとおり、スタイルシート編集ページを開いてください。
- 幅は「width」、高さは「height」で指定します。コンテンツ部のように内容が変化する部分の高さ「height」は、自動設定「auto」にするとよいでしょう。幅「width」については、余白(margin, padding)、枠線(border)および親要素の幅を考慮しなければなりません。特に、ナビゲーター部がコンテンツ部の横に配置されるデザインの場合に、ナビゲーター部とコンテンツ部の幅の合計が、全体幅より大きい場合は、ナビゲーター部とコンテンツ部が縦につながったように表示されますので、ページ全体の構成設計が重要です。
- ヘッダ部のサイズを変更する場合の例は、次のとおりです。
#header
{
...
width: 960px;
height: 128px;
...
} - コンテンツ部のサイズを変更する場合の例は、次のとおりです。
#content
{
...
width: 768px;
height: auto;
...
}
↓動画によるサイズ変更の例です。クリックで再生されます。