Webページにおける基本的な段組み①

久しぶりにWebページのプロトタイプを作るために、HTML、CSSを触りましたが、思っていた以上に基本が身についていなかったので、この機会に基本に戻ってまとめていきます。

今日の各テーマ

Webページにおける段組みとは?
段組みの必要性
divタグを使ったボックスの配置

Webページにおける段組みとは?

Webページにおける『段組み』とは、印刷媒体に対して使われる、
- 印刷媒体に対して、2列以上の列に分けて文字や図を配列すること -
という意味合いとは若干異なっています。
Webページにおいて『段組み』といった場合には、単純に2列以上に分けるという意味だけでなく、『レイアウト』といった意味合いも含んでいます。

段組みの必要性

本来の『段組み』の目的は『1行に含まれる文字数を減らし、可読性を向上させる。』ことです。
みなさんも一度は経験があるかも知れません。
読書をしていて、次の行に移ろうとしたときに、誤って行を読み飛ばしてしまったり、同じ行から読み始めてしまったりしたことが。
これは、ある一点を凝視した状態(周辺視野が狭くなっている状態)では、視線の移動が大きくなると位置関係が分からなくなってしまうことに起因しています。
『段組み』を行うことで1行に含まれる文字数が減れば、視線の移動が小さくなるため、可読性が向上する。ということです。

Webページにおける『段組み』は単なる可読性の向上に留まりません。
HTMLとCSSを組みわせることにより、Webページに配置される各種コンテンツの『レイアウト』を決める役割も含まれています。
Webページにおける『段組み』はレイアウトも担っているため、Webページそのもののデザイン性に大きく関わってきます。

divタグを使ったボックスの配置

ここからはdivタグを使ったボックスの配置で、実際にWebページの『段組み』を行っていきます。
それぞれのdivタグが理解しやすいように事前に以下のようなCSSを準備しておきます。

.divBox1 {
    height: 100px;
    background-color: pink
}

.divBox2 {
    height: 100px;
    background-color: yellowgreen
}

.divBox3 {
    height: 100px;
    background-color: lightblue
}

.divBox4 {
    height: 100px;
    background-color: lightyellow
}

.divBox1 {

height: 100px;

background-color: pink

}

.divBox2 {

height: 100px;

background-color: yellowgreen

}

.divBox3 {

height: 100px;

background-color: lightblue

}

.divBox4 {

height: 100px;

background-color: lightyellow

}

step
1ボックスを縦に積み重ねる

最初は単純にボックスを積み上げていきます。
これがもっとも簡単で基礎的な『段組み』になります。

<!DOCTYPE html>
<html lang="ja">
<head>
    <link rel="stylesheet" type="text/css" href="BoxSample.css" />
</head>
<body>
    <div class="divBox1">BOX_A</div>
    <div class="divBox2">BOX_B</div>
    <div class="divBox3">BOX_C</div>
    <div class="divBox4">BOX_D</div>
</body>
</html>

<!DOCTYPE html>

<head>

</head>

<body>

</body>

</html>

ボックスの積み上げは、HTMLの構造が比較的そのままブラウザに反映されているので、理解しやすいのではないかと思います。

step
2上2段を横に並べる

次は上2段を横に並べていきます。単純に横に並べるだけかと思われるかも知れませんが、この『横配置』を使えるようになればレイアウトの幅が一気に広がります。
デザインがない状態でも、簡易的によく目にするブログのコンテンツ配置なども再現することができるようになります。

<!DOCTYPE html>
<html lang="ja">
<head>
    <link rel="stylesheet" type="text/css" href="BoxSample.css" />
</head>
<body>
    <div class="margeBox">
        <div class="divBox1">BOX_A</div>
        <div class="divBox2">BOX_B</div>
    </div>
    <div class="divBox3">BOX_C</div>
    <div class="divBox4">BOX_D</div>
</body>
</html>

<!DOCTYPE html>

<head>

</head>

<body>

</div>

</body>

</html>

まず最初は『横配置』したいdivタグたちを『divタグ』で囲います。
ここでは分かりやすいように"margeBox"のクラス名をつけておきます。
これで下準備は完成です。

ここからはこのHTMLに対して、CSSでスタイルを当てていきます。
CSSを使用する理由はHTMLが、『HyperText Markup Language』の名の通り、マークアップ言語だからです。
マークアップとは読み手(人間)が文章の構造を理解しやすいように、文章構造中に目印を配置した言語のことを指しています。
先ほどのHTMLもdivタグが複数配置されていることから、いくつかのセクションに分かれた文章であることが理解できといった具合です。

少し話はそれてしまいましたが、あくまでマークアップされた文書構造体なので、レイアウトに関する機能をHTML自身が持っているわけではありません。

そのため、HTMLに対してスタイル(デザインとも言える)を適応するCSSを使っていきます。

.divBox1 {
    height: 100px;
    background-color: pink;
    float: left;
}

.divBox2 {
    height: 100px;
    background-color: yellowgreen;
    float: left;
}

.divBox3 {
    height: 100px;
    background-color: lightblue;
}

.divBox4 {
    height: 100px;
    background-color: lightyellow;
}

.divBox1 {

height: 100px;

background-color: pink;

float: left;

}

.divBox2 {

height: 100px;

background-color: yellowgreen;

float: left;

}

.divBox3 {

height: 100px;

background-color: lightblue;

}

.divBox4 {

height: 100px;

background-color: lightyellow;

}

ここで重要になるのは、".divBox1",".divBox2"に配置したfloat要素です。
float要素を指定することで、とりあえずはボックスが横に並びます。とりあえずは...

お気づきの通り、横には並んでいるものの、"BOX_A"と"BOX_B"の後ろに"BOX_C"が配置されているような形になってしまっています。
これは、float要素を指定したボックスが『フローティングボックス(浮動ボックス)』扱いになるため、他のボックスからはその配置が無視されてしまうからです。

次はこの現象に対処していきます。
float要素がその後に続く、後続の各要素に影響を与えないようにしていきます。

.divBox1 {
    height: 100px;
    background-color: pink;
    float: left;
}

.divBox2 {
    height: 100px;
    background-color: yellowgreen;
    float: left;
}

.divBox3 {
    height: 100px;
    background-color: lightblue;
}

.divBox4 {
    height: 100px;
    background-color: lightyellow;
}

.margeBox::after {
    content: "";
    display: block;
    clear: both;
}

.divBox1 {

height: 100px;

background-color: pink;

float: left;

}

.divBox2 {

height: 100px;

background-color: yellowgreen;

float: left;

}

.divBox3 {

height: 100px;

background-color: lightblue;

}

.divBox4 {

height: 100px;

background-color: lightyellow;

}

.margeBox::after {

content: "";

display: block;

clear: both;

}

"margeBox"に対するCSSの記述を追加することで、後続への影響を抑えることができています。
"margeBox"で行われているテクニックのことを『clearfix』といいます。
今回は"::after"の疑似要素を使いましたが、別途"clearfix"のクラスを定義しても同じような効果を得ることができます。

後は左寄りになっている2つの要素を均等に割付てあげれば、『横配置』の完成です。

.divBox1 {
    height: 100px;
    background-color: pink;
    float: left;
    width: 50%;
}

.divBox2 {
    height: 100px;
    background-color: yellowgreen;
    float: left;
    width: 50%;
}

.divBox3 {
    height: 100px;
    background-color: lightblue;
}

.divBox4 {
    height: 100px;
    background-color: lightyellow;
}

.margeBox::after {
    content: "";
    display: block;
    clear: both;
}

.divBox1 {

height: 100px;

background-color: pink;

float: left;

width: 50%;

}

.divBox2 {

height: 100px;

background-color: yellowgreen;

float: left;

width: 50%;

}

.divBox3 {

height: 100px;

background-color: lightblue;

}

.divBox4 {

height: 100px;

background-color: lightyellow;

}

.margeBox::after {

content: "";

display: block;

clear: both;

}

次はもう少し、複雑な『段組み』を行っていきます。
サーバーサイドばかりやっていると、簡単なWebページのMockを作るにも時間がかかってしまうので、精進していきたいものです。