Web作成入門

2段組みレイアウト

HTMLファイル

新しいページを開き、プレイン文書の本文をコピーして bodyの直下に貼りつけ、ファイル名　「lesson10.html」として保存する。

次のとおりマークアップする

  1. ①から⑭までをdivで括り、IDをcontentsとする。
  2. ①から⑥までをdivで括り、IDをleftとする。
  3. ⑦から⑭までをdivで括り、IDをdiaryとする。
  4. ①をh3括る。
  5. ②から⑥までを番号なしリストとし、それぞれをリスト項目にする。
  6. それぞれのリスト項目に仮のリンクを付ける。
  7. ⑦をh2括る。
  8. ⑧をh3括る。
  9. ⑧をh3括る。
  10. ⑨から⑭までをそれぞれp括る。

CSSの設定

下表とおり設定する

body font-family メイリオ, "ＭＳ Ｐゴシック" フォント
font-size 80% フォント
background #fffac8 背景
#contents width 720px 配置
#left float left レイアウト
width 150px 配置
#left h3 color #ffffff フォント
text-align center ブロック
line-height 1em ブロック
margin 0 ボックス
padding 8px 0 ボックス
background #f29700 背景
#left ul margin 0 ボックス
padding 1px ボックス
list-style none リスト
background #f29700 背景
#left li a color #333333 フォント
text-decoration none フォント
text-align center ブロック
line-height 1em ブロック
margin 0 ボックス
padding 6px 0 ボックス
display block レイアウト
width 146px 配置
background #fee28f 背景
border-top 1px solid #ffffff 枠線
border-left 1px solid #fef7e4 枠線
border-right 1px solid #ffcf3f 枠線
border-bottom 1px solid #ffbe00 枠線
#left li a:hover color #ffffff フォント
background #d67400 背景
border-top 1px solid #a65c04 枠線
border-left 1px solid #a9600b 枠線
border-right 1px solid #ebb054 枠線
border-bottom 1px solid #f3c377 枠線
#diary float right レイアウト
width 526px 配置
padding 10px ボックス
background #ffffff 背景
border 2px solid #e1e1e1 枠線
#diary h2 font-size 120% フォント
line-height 1em ブロック
margin 0 0 10px 枠線
padding 4px ボックス
color #ffffff フォント
background #faaa39 背景
#diary h3 font-size 110% フォント
line-height 1em ブロック
margin 0 ボックス
padding 4px ボックス
background #e6e5e1 背景
#diary p line-height 1.5em ブロック
margin 10px 0 ボックス
padding 0 ボックス

2段組みレイアウト その2

レッスン9のヘッダーとレッスン10のコンテンツを組み合わせる。

  1. レッスン10をビルダーで開く
  2. 名前を付けて保存から、同じフォルダーにファイル名を「lesson10_2.html」として保存する。
  3. レッスン9をビルダーで開
  4. 「HTML」タブでbodyを除くCSS部分をコピーする。
  5. 「lesson10_2.html」に戻り、「HTML」タブでCSS部分に貼りつける。
  6. 「lesson9.html」に戻り、<body>と</body>の間をコピーする。
  7. 「lesson10_2.html」に戻り、<div id="contents">の直下に貼りつける。
  8. 内容を確認して上書き保存する。