資料小分類

• はじめに

• レイアウトの考え方

• レイアウトの概要

• レイアウトコンテナ挿入

• HTMLタグの初期化

• メイン

• ヘッダ

• ナビ

• コンテンツ

• フッタ

• メニュー準備

• メニュー

• 文字入力

• スタイル設定

• 画像の用意

• 外部スタイルシート

資料大分類

• レイアウト編集

• 問い合わせ

• 資料トップへ戻る

• ＨＰ勉強会トップ

レイアウト作成　～はじめに～

これまでのホームページは、テーブル（表）を使ったレイアウトが既定のフォーマットとして採用されていました。

テーブルのレイアウトは操作上都合のよいところもありますが、入り組んだレイアウトの場合はタグの構造が複雑でわかりづらく膨大になるというデメリットがあります。

一方、ここで取り上げるCSSレイアウトは、ホームページの内容と構造はHTMLで記述し、レイアウトや装飾などのデザイン要素はスタイルシートに記述する、という具合に分離することで、以下のようなメリットがあります。

• コードが少ないので表示速度が速い
• 異なるOSやブラウザーでもほぼ同様の見た目にできる
• レイアウトの大幅な修正もスタイルシートを操作すれば良いので手間がかからない
• タグの構造がシンプルなので、検索エンジンに把握されやすい

最後に、ページ内に記述されるスタイル定義を外部スタイルシートへ書き出します。

• 完成図：　CSS レイアウト（外部スタイルシート）

それでは、まず レイアウトの考え方 を見てみましょう。