練習問題～２カラムレイアウト～

<div> を利用してヘッダと左ナビ、コンテンツ、フッターを表示するボックスを作成する。
- 全体を <div id="main"> でグループ化し、その中に <div id="header">、<div id="navi-L">、<div id="conts">、<div id="footer"> でブロックを作成する。
  - HTML ソース：
    - <div id="main">
    - <div id="header">ヘッダ</div>
    - <div id="navi-L">ナビ</div>
    - <div id="conts">コンテンツ</div>
    - <div id="footer">フッタ</div>
    - </div>
main の横幅：760px にし、画面中央に表示するようにする。
- <div id="main"> のマージンを「auto」に指定して、全体をブラウザの中央に配置する。
ヘッダーとコンテンツの間は、<div id="navi-L"> と <div id="conts"> のマージン上下に30ピクセルの間隔を入れる。
左ナビブロックの幅は、130px。
左ナビブロック内に表示するメニューのリンク１～６は、<ul>、<li>タグを使用して、リンクを貼る。リンクのアドレスは、# を設定。リンクの下線は引かない。
右のコンテンツの幅は、600px

完成版：

２カラムレイアウトを作成する

Step-1：　作成済みの１カラムレイアウトをベースにする

➊ html フォルダ―の layout1.html ファイルを開く。

➋ layout2.html の名前を付けて、html フォルダーに保存する。

以降 layout2.html で作業する。

Step-2：　レイアウトコンテナブロックを追加する

➌ HTML ソースのレイアウトコンテナ <div id="header"> ・・・</div> と<div id="conts"> ・・・</div> の間に、<div id="navi-L">左ナビ</div> のレイアウトコンテナブロックを入力し、以下のようにする。

HTML ソース：
- <body>
- <div id="main">
- <div id="header">・・・・・・・</div>
- <div id="navi-L">左ナビ</div>
- <div id="conts">・・・・・・・・・・</div>
- <div id="footer">・・・</div>
- </div>
- </body>

Step-3：　左ナビブロックのスタイルを作成する

新しく挿入したレイアウトコンテナブロック id="navi-L" のスタイルを作成します。

➍ ID #navi-L にスタイルを設定するには、［スタイル設定］ダイアログで設定する方法と、HTML ソースのスタイル記述部分に、CSSを直接入力する方法とがある。（以下同様）。

#navi-L のスタイルを［スタイル設定］ダイアログで設定する：
- ［レイアウト］タブ
  - ［上方向］：　［マージン］「30px」
  - ［右方向］：　［マージン］「30px」
  - ［下報告］：　［マージン］「30px」
  ［位置］タブ
  - ［配置］：　［幅］「130px」
  - ［回り込み］：　［左］

#navi-L の CSS 記述（下記）を HTML ソース内に直接記述する。
- #navi-L {
- width : 130px;
- float : left;
- margin-top : 30px;
- margin-right : 30px;
- margin-bottom : 30px;
- }

Step-4：　コンテンツブロックのスタイルを編集する

コンテンツブロック (ID="conts") の ID スタイルを編集する。幅を６００ピクセルにし、左に回り込ませるスタイルを追加する。

➎ #conts のスタイルを編集する。

#conts のスタイルを［スタイル設定］ダイアログで設定する：
- ［位置］タブ
  - ［配置］：　［幅］「６００ピクセル」
  - ［属性］：　［回り込み］「左」　
- ［レイアウト］タブ
  - ［上方向］：　［マージン］「３０ピクセル」
  - ［下方向］：　［マージン］「３０ピクセル」

#conts の CSS 記述（下記）を HTML ソース内に直接記述する。
- #conts {
- width : 600px;
- float : left;
- margin : 30px 0;
- }

Step-5：　フッタのレイアウトを編集する

フッタブロック (ID="footer") のID スタイルを編集する。上罫線（5ピクセルの緑色の実線）が表示されないので、これを表示するようにする。

➏ #footer のスタイルを編集する。

#footer のスタイルを［スタイル設定］ダイアログで設定する：
- ［位置］タブ
  - ［属性］：　［回り込み解除］「両方」
- ［レイアウト］タブ
  - ［上方向］：　［ボーダー］「５ピクセル」「実線」「緑色」

#footer の CSS 記述（下記）を HTML ソース内に直接記述する。
- #footer {
- clear : both;
- border-top : 5px solid green;
- }

Step-6：　左ナビブロックへ文字の入力

仮の文字「左ナビ」を入力していたが、実際にナビの文字を入力します。

➐ HTML ソース部分に、リンク (#) を挿入した箇条書きリストを、下記のように入力する。

<div id="navi-L">左ナビ</div> を下記で置き換える
- <div id="navi-L">
- <ul>
- <li><a href="#">メニュー１</a>
- <li><a href="#">メニュー２</a>
- <li><a href="#">メニュー３</a>
- <li><a href="#">メニュー４</a>
- <li><a href="#">メニュー５</a>
- <li><a href="#">メニュー６</a>
- </ul>
- </div>

Step-7：　左ナビブロック内のスタイルの設定

➑ 箇条書きスタイルを以下のように設定する。

ul タグのスタイルを［スタイルの設定］ダイアログで設定する。
- ［リスト］タブ
  - ［リストマークのタイプ］：　「なし」

ul タグの CSS 記述（下記）を HTML ソース内に直接記述する。
- ul {
- list-style-type : none ;　　　　　
- }

➒ 左ナビブロック内の箇条書き項目スタイルを以下のように設定する。

#navi-L ul li タグのスタイルを［スタイルの設定］ダイアログで設定する。
- ［レイアウト］タブ
  - ［上方向］：　［パディング］「５ピクセル」
  - 　　　　　　　　[ボーダー]「１ピクセル　実線」
  - ［下方向］：　［パディング］「５ピクセル」
#navi-L ul li a タグのスタイルを［スタイルの設定］ダイアログで設定する。
- ［フォント］タブ
  - ［文字飾り］：　「なし」

CSS 記述（下記）を HTML ソース内に直接記述する。
- #navi-L ul li {
- padding-top : 5px;
- padding-bottom : 5px;
- border-top-width : 1px;
- border-top-style : solid;
- }
- #navi-L ul li a {
- text-decoration : none;
- }

Step-8：　スタイルの完成

➓ 左ナビブロックのスタイルを編集し、下側ボーダー実線を引く。

#navi-L タグのスタイルを［スタイルの設定］ダイアログで編集する。
- ［レイアウト］タブ
  - ［下方向］：　［ボーダー］「１ピクセル」「実線」

#navi-L タグの CSS 記述（下記）を HTML ソース内に直接記述する。
- #navi-L {
- width : 130px;
- float : left;
- margin-top : 30px; margin-right : 30px; margin-bottom: 30px;
- border-bottom-width : 1px;
- border-bottom-style : solid;
- }

これで、２カラムレイアウトの完成です。

⇒ ボーダー指定へ進む

練習問題

～２カラムレイアウト～

練習する ２カラムレイアウト： ＣＳＳレイアウト

２カラムレイアウトを作成する

Step-1： 作成済みの１カラムレイアウトをベースにする

Step-2： レイアウトコンテナブロックを追加する

Step-3： 左ナビ ブロックのスタイルを作成する

Step-4： コンテンツ ブロックのスタイルを編集する

Step-5： フッタのレイアウトを編集する

Step-6： 左ナビ ブロックへ文字の入力

Step-7： 左ナビ ブロック内のスタイルの設定

Step-8： スタイルの完成

練習する２カラムレイアウト：　ＣＳＳレイアウト