HOME  > Web design  >

[CSS]  ヘッダー/フッターをレイアウトする


HTML文書の上辺/下辺にヘッダーエリア/フッターエリアを設定します。 これは、ボックスの応用となります。


サンプルHTMLコード(サンプルの表示

  • 注釈 01: 初期表示で、メインの文章がヘッダーエリアに重ならないように、上辺にヘッダーの高さと同じの余白を設定する
  • 注釈 02: ウィンドウ枠を基準にした絶対位置に配置する
  • 注釈 03: ウィンドウ枠の上端から下方向への絶対位置。px単位は、ピクセルで指定
  • 注釈 04: ウィンドウ枠の左端ら右方向への絶対位置。%単位は、ウィンドウ幅に対する割合で指定
  • 注釈 05: ヘッダーエリア横幅の指定。%単位は、ウィンドウ幅に対する割合で指定
  • 注釈 06: ヘッダーエリア高さの指定。px単位は、ピクセル
  • 注釈 07: 境界線のスタイルの指定
  • 注釈 08: ヘッダーエリアの背景色指定
  • 注釈 09: ヘッダーエリアのフォント色の指定
  • 注釈 10: エリアが重なった時の表示順。数字が大きい方が全面に表示される
  • 注釈 11: ウィンドウ枠の下端から上方向への絶対位置。px単位は、ピクセルで指定