CSSレイアウト練習
CSSレイアウトの作成方法をサンプルページを作成することで練習します。
- 勉強会資料
- 勉強会資料のページに戻ります
- 完成図
- 5つのブロックに分け2段組のレイアウトにします文例 H画像 画像
- 準 備
- ホームページビルダーの設定を変更します
- THMLタグ
- THMLの基本的タグを概説します
- レイアウトの構造
- レイアウトの設計図です
- レイアウトコンテナーの挿入
- レイアウトを作成します
- タグスペースの初期化
- ユニバーサルセレクタでHTMLタグのスペースを初期化します
- メインのレイアウトを作成
- メインのレイアウトコンテナの幅を640ピクセルに外枠に罫線を付けます
- ヘッダのレイアウトを作成
- ヘッダのブロックに背景の画像を配置します
- コラムのレイアウトを作成
- 幅を145ピクセルに設定し左寄せにします
- コンテンツのレイアウトを作成
- 幅を480ピクセルに設定し右寄せにします
- フッタのレイアウトを作成
- 回り込みを解除して下方に配置します
- ナビゲーション作成準備
- 番号無しリストを用いリンクをつけます
- ナビゲーションレイアウト作成
- リストを左寄せにしてナビゲーションのスタイルを設定します
- 仕上げ１
- 文字を入力して見出しをつけます。
- 仕上げ２
- スタイルを設定してレイアウトを仕上げて完成させます。