レイアウトの基本構造を作る


<div> タグなどを用いて、コンテンツを ボックス と呼ばれる単位で括ってレイアウトします。

Webページにおける段組み

Webページで「段組み」と呼ばれているものは、現在のページレイアウトの基本となっていますが、印刷媒体における本来の段組とは異なるものです。

段組みとは

「段組み」とは、テキストや画像を複数の段に分けてレイアウトすることです。
1段でレイアウトすると1行の文字数が多くなり、読みにくくなる場合でも、2段や3段に分けてレイアウトすることで読みやすくすることができます。
そのため、新聞や雑誌など、様々な媒体で利用されています。

Webページにおける段組み

Webページでは、標準はブラウザ画面の横幅いっぱいにテキストが表示されます。
そのため、ブラウザ画面の横幅が大きくなると、1行の文字数も多くなり、読みにくくなってしまいます。そのため、Webページにおいても、印刷物などと同じように段組みにして表示したいという動きが出てきます。
しかし、Webページを構成するHTMLとCSSには段組みの機能は用意されていませんでした。
そこで、複数の「 ボックス 」を横に並べ、その中にテキストや画像を入れることにより、段組みっぽく見えるようにしました。

Webページにおけるレイアウトの発展

段組みに見せるために用意したのがボックスだったことにより、ボックスの中にはテキストや画像だけでなく、メニュー等の色々なパーツを入れて、Webページのレイアウトが発展していくことになります。
そして、近年のWebページはボックスを敷き詰める形で様々なレイアウトを実現するようになっています。
そのため、ページレイアウトは ボックスを意図した形に敷き詰めること が基本となり、ボックスをいかにコントロールして並べるかが必要とされるようになっています。

ボックスを用意する

配布データを以下からダウンロードし、 <div> というタグでボックスを追加します。
goo.gl/1hr2g9
(1_sample.zip)
各ボックスにはクラス名を box1box2box3box4box5 と指定します。また、どのボックスを表示しているのかわかりやすくするため、ボックスの中には BOX1 と言う形で番号を表示するようにします。
HTML

<div class="box1">
    BOX1
</div>
<div class="box2">
    BOX2
</div>
<div class="box3">
    BOX3
</div>
<div class="box4">
    BOX4
</div>
<div class="box5">
    BOX5
</div>

ボックスの構造をわかりやすく表示するため、 grid-guide.css が適用されています。
保存して、Sample.htmlを開くとBOX1~BOX5が縦に並んで表示されているのがわかるかと思います。

MEMO
クラス名はボックスの並びをコントロールしやすいように「box1」といった形で指定していますが、あとからボックスの中身に合わせて変えることもできます。

ボックスを横に並べる

Webページではコントロールせずに追加したものは縦に並んでいきます。そのため、横に並べる方法をしっかりとマスターしておく必要があります。

1. 横に並べたいボックスをグループにする

横に並べたいボックスをグループ化します。ここでは1つ目と2つ目のボックスをグループ化するため、 <div class="box1"><div class="box2"><div> で囲みます。グループ化に使用した <div> にはクラス名を boxA と指定し、CSSを適用しやすくしておきます。
HTML

<div class="boxA">
    <div class="box1">
        BOX1
    </div>
    <div class="box2">
        BOX2
    </div>
</div>
<div class="box3">
    BOX3
</div>
<div class="box4">
    BOX4
</div>
<div class="box5">
    BOX5
</div>

2. グループ化したボックスを横に並べる

グループ化した2つのボックスを横に並べます。そこで、<div class="box2"><div class="box3"> のプロパティ floatleft と指定します。
すると、 float を指定したボックスは、ボックスの中身に合わせた横幅になり、順番に左に寄せて配置されることから、横に並べた表示になります。
HTML

.box1 {
    float :left
}
.box2 {
    float :left
}

ただし、 float を指定したボックスは フローティングボックス という特殊なボックスとして処理され、他のボックスからは存在しないものとして扱われます。
そのため、4つ目のボックスが2つ目と3つ目のボックスの後ろに入り込んだ表示になっています。

3. 4つ目のボックスが後ろに入り込まないようにする

float を指定したボックスの後ろに4つ目のボックスが入り込まないようにします。そのためには、 float を指定したボックスをグループ化した <div class="boxA"> に対し、以下の設定を適用します。
CSS

.boxA:after {
    content: "";
    display: block;
    clear: both
}
.box1 {
    float :left
}
.box2 {
    float :left
}

この設定は float の指定が後続の要素に影響を与えないようにするためのもので、「clearfix (クリアフィックス)」と呼ばれています。ボックスを敷き詰めるレイアウトが発展していく過程の中で、数多くの改良が加えられてきたテクニックの1つです。

5. ボックスの横幅を指定する

横に並べたボックスの横幅を指定し、ボックスの中身に関係なく指定した横幅で表示するようにします。ここでは横に並べたボックスを横幅いっぱいに表示するため、 width50% と指定し、 2つあわせて 100% の横幅になるようにします。
CSS

.boxA:after {
    content: "";
    display: block;
    clear: both
}
.box1 {
    float :left;
    width: 50%
}
.box2 {
    float :left;
    width: 50%
}

レスポンシブWebデザインを設定する

レスポンシブWebデザインとは

PC用サイトとスマートフォン(以下スマホ)用サイトを用意する場合2つの手法があります。

  • ユーザが閲覧しているOSやブラウザを判別して、サーバー側で表示するHTMLを振り分ける
  • ブラウザの横幅サイズを判断基準にして、CSSで切り替える

レスポンシブWebデザインは、この2つ目の「 ブラウザの横幅サイズを判断基準にして、CSSで切り替える 」手法になります。
ブラウザ画面の横幅を基準にしているので、 パソコン上でブラウザのウインドウ幅を小さくすれば スマートフォン用のレイアウトに表示することができます。
例えば、Appleの公式サイトはレスポンシブWebデザインになっています。
表示して、ウインドウの幅を変えてみましょう。
apple.com/jp/

横幅が大きいとき

横幅が大きいとき

横幅が小さいとき

横幅が小さいとき
幅が狭くなると、スマートフォン用にメニューがハンバーガーボタンに変わります。
このハンバーガーボタンに切り替わるちょうど境界の値のことを
ブレイクポイント といいます。

実装してみる

ブラウザ画面の横幅が小さいとき、BOX1BOX2の横並びを解除するというレスポンシブWebデザインを実装してみます。
横並びの設定を

@media (min-width: 768px) {
    /* BOX1とBOX2を横に並べる設定 */
}

で囲みます。
ここではブレイクポイントを768ピクセル にしています。
Webページを表示しているブラウザのウインドウの 横幅 が768pxを下回ると、ボックスが1列に並ぶようになるはずです。
ブラウザ画面の横幅に応じて横並びが解除されます。

課題 〜国旗を作ってみよう〜

HTMLとCSSを使って、ドイツの国旗とフランスの国旗を作ってみましょう。

ドイツの国旗

作り方

①ベースとなるボックスを作る
②その中に3つのボックスを作る
③幅と高さを指定、 background-colorで色を付ける

フランスの国旗

作り方

①ベースとなるボックスを作る
②その中に3つのボックスを作る
③3つのボックスに float:left をかける
④幅と高さを指定、 background-color で色を付ける

提出フォーマット

  • index.htmlstyle.css の2つのファイルをzipファイルにしてください。
    件名はWEBデザイン演習でお願いします。
  • ファイル名は「01_NF_学籍番号_名前.zip」でoecu@electro-cute.comに送ってください。
    例: 01_NF_HT00A000_住本欣洋.zip
  • 国旗一つの大きさは幅600px 高さ420pxにしてください。
  • その他、質問があれば授業内にお願いします。