東京・大阪・名古屋・福岡・仙台・札幌で開催する初心者向けのHTML・CSSを使ったホームページ制作の1日集中講座(セミナー)です。 HTML・CSSの入門講座なら、神田ITスクール!

8.4 3カラムのレイアウト

3カラムのレイアウト

8.4 3カラムのレイアウト

3カラムのレイアウト作成は2カラムのレイアウト作成方法を応用したものなので、2カラムのレイアウトが問題なくできていれば、難しくありません。ボックスを5つ用意し、BOX1~BOX5として、BOX2とBOX3とBOX4の部分を3カラムのレイアウトに変更してみましょう。

①ソースフォルダ    :webpage/ch08
②ファイル名      :layout3.html

➢ layout3.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>3カラムのレイアウト</title>
<link rel="stylesheet" href="guide.css">
<style>
    .float-left {
    float: left;
    }
    .clearfix:after {
    content: "";
    display: block;
    clear: both;
    }
    .w33 {
    width: 33.3333%;
    }
</style>
</head>
<body>
<h1>BOXを横に並べる(3カラムのレイアウト)</h1>
<div class="container">
<h2>STEP1. BOXを用意する</h2>
<div class="box box-yellow">BOX1</div>
<div class="box box-orange">BOX2</div>
<div class="box box-blue">BOX3</div>
<div class="box box-green">BOX4</div>
<div class="box box-purple">BOX5</div>
</div>
</body>
</html>
        

1. BOXを用意する

まずは5つのボックスを用意します。各ボックスには「box1」~「box5」とクラス名を指定して、ボックスの中には「BOX1」~「BOX5」とボックス名を記述します。

2. 横に並べたいBOX2とBOX3とBOX4をグループにする

下記のコードを</body>タグの直前に追加してください。

➢ layout3.html

    ・・・略・・・
<div class="container"&>
<h2>STEP2. 横に並べたいBOX2とBOX3とBOX4をグループにする</h2>
<div class="box box-yellow">BOX1</div>
<div class="box box-pink">
<div class="box box-orange">BOX2</div>
<div class="box box-blue">BOX3</div>
<div class="box box-green">BOX4</div>
</div>
<div class="box box-purple">BOX5</div>
</div>
</body>
</html>
        

BOX2とBOX3とBOX4をグループ化するため、<div class=”box box-orange”>BOX2</div>と<div class=”box box-blue”>BOX3</div>と<div class=”box box-green”>BOX4</div>を<div>で囲みます。グループ化した<div>にはクラス名「box」と「box-pink」を指定し、スタイルシートを適用します。

3. BOX2とBOX3とBOX4を横に並べる

下記のコードを</body>タグの直前に追加してください。

➢ layout3.html

    ・・・略・・・
<div class="container">
<h2>STEP3. BOX2とBOX3とBOX4を横に並べる</h2>
<div class="box box-yellow">BOX1</div>
<div class="box box-pink">
<div class="box box-orange float-left">BOX2</div>
<div class="box box-blue float-left">BOX3</div>
<div class="box box-green float-left">BOX4</div>
</div>
<div class="box box-purple">BOX5</div>
<p>BOX5が後ろに入り込んでしまう・・・</p>
</div>
</body>
</html>
        

グループ化した3つのボックスを横に並べるため、BOX2とBOX3とBOX4の<div>のクラス指定に「float-left」を追加します。「8.3 2カラムのレイアウト」のときと同様にBOX5が BOX2とBOX3とBOX4の後ろに入り込んで表示されてしまいます。

4. BOX5が後ろに入り込まないようにする

下記のコードを</body>タグの直前に追加してください。

➢ layout3.html

    ・・・略・・・
<div class="container">
<h2>STEP4. BOX5が後ろに入り込まないようにする</h2>
<div class="box box-yellow">BOX1</div>
<div class="box box-pink clearfix">
<div class="box box-orange float-left">BOX2</div>
<div class="box box-blue float-left">BOX3</div>
<div class="box box-green float-left">BOX4</div>
</div>
<div class="box box-purple">BOX5</div>
</div>
</body>
</html>
        

BOX5がBOX2とBOX3とBOX4の後ろに入り込まないようにするため、グループ化した<div class=”box box-pink”>に対して、「clearfix」のクラス指定を追加します。

5. BOX2とBOX3とBOX5の横幅を指定する

下記のコードを</body>タグの直前に追加してください。

➢ layout3.html

    ・・・略・・・
<div class="container">
<h2>STEP5. BOX2とBOX3とBOX4の横幅を指定する</h2>
<div class="box box-yellow">BOX1</div>
<div class="box box-pink clearfix">
<div class="box box-orange float-left w33">BOX2</div>
<div class="box box-blue float-left w33">BOX3</div>
<div class="box box-green float-left w33">BOX4</div>
</div>
<div class="box box-purple">BOX5</div>
</div>
</body>
</html>
        

横に並べたBOX2とBOX3とBOX4の横幅を指定して、ボックスの中身に関係なく指定した横幅で表示されるように変更します。BOX2とBOX3とBOX4の<div>のクラス指定に「w33」を追加します。クラス名w33は「width: 33.3333%」と指定しているため、ボックスの横幅が33.3333%になり、3つ合わせて約100%の横幅になるようにしています。

NEXT>> 8.5 本章のまとめ

HTMLとCSSの入門 目次

ご不明点はお問い合わせフォームからご連絡ください。

HTMLとCSSの入門 目次

ホームページ制作・保守

ホームページ制作・保守

セミナー講師

セミナー講師

主席インストラクター
早稲田大学大学院 理工学部卒業
SanJose 州立大学、コンピューター工学部卒業
アメリカのシリコンバレーでは、プログラマー・SEとして活躍
講師の詳細はこちら

ワードプレスセミナーも人気!

ワードプレスセミナーも人気!

より手軽にホームページ制作をしてみたい方にはワードプレスセミナーもおすすめです。
ワードプレスセミナーはこちら

1日集中HTML・CSSセミナーは、プログラミング教育で8年間の実績のある神田ITスクールが運営しています。
初心者、未経験者へわかりやすく教えるのには自信がありますので、ぜひご参加ください。
神田ITスクールのサイトはこちら

ホームページ制作・保守

ホームページ制作・保守
PAGETOP
Copyright © 2015 FusionOne Co.,Ltd. All rights reserved.