Webページにおける段組

段組とは

• 「段組」とは、テキストや画像を複数の段落に分けてレイアウトすること
• 日本語の場合、横に文字を文字を組んだ場合、適切な文字数は「40文字」と言われています
• 「40文字」を超えると視線を意図的にずらさないと読み続けることができない基準の文字数になります

Webページにおける段組

• 標準では、ブラウザの画面の横幅いっぱいにテキストが表示されます
• この読みにくさを解消するために画面を分割して読み易い状態にします
• CSS3では、Multi-column Layout とい機能を利用すると段組が実現できます

ボックスを横に並べる

• Webページは入力した要素は、コントロールしない限り縦に並んでいきます
• Webページの操作の中で、最も注意を払う必要があるのが要素を横に並べることです

横並びのパターン

ボックスを用意する

<div class="container">
<div class="box box1">BOX1</div>
<div class="box box2">BOX2</div>
<div class="box box3">BOX3</div>
<div class="box box4">BOX4</div>
</div><!-- /.container -->

.container {
  width: 400px;
  height: auto;
}
.box {
  height: 100px;
  background: #F2F6E0;
  border: 4px solid #B1CD30;
  text-align: center;
  line-height: 100px;
}

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

<div class="container">
<div class="box box1">BOX1</div>
<div class="wrapA">
<div class="box box2">BOX2</div>
<div class="box box3">BOX3</div>
</div><!-- /.wrapA -->
<div class="box box4">BOX4</div>
</div><!-- /.container -->

.wrapA>.box {
  background: #ECF7FD;
  border: 4px solid #689DD1;
}

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

• 横幅を20%にしてfloat（浮き上がる）する

.wrapA>.box{
  background: #ECF7FD;
  border: 4px solid #689DD1;
  width: 20%;
  float:left;
}

• box4が、潜り込んでいる状態になります
• グループ化したボックスに、overflow:hidden を設定します

.wrapA {
  overflow: hidden;
}

• 幅を、50%に設定します

.wrapA>.box {
  background: #ECF7FD;
  border: 4px solid #689DD1;
  width: 50%;
  float:left;
  box-sizing: border-box;  /*パディングとボーダーを幅と高さに含める*/
}

グループ化したボックスを囲む位置を変化させます

• CSSの記述は変更しません

<div class="container">
<div class="wrapA">
<div class="box box1">BOX1</div>
<div class="box box2">BOX2</div>
</div><!-- /.wrapA -->
<div class="box box3">BOX3</div>
<div class="box box4">BOX4</div>
</div><!-- /.container -->

<div class="container">
<div class="box box1">BOX1</div>
<div class="box box2">BOX2</div>
<div class="wrapA">
<div class="box box3">BOX3</div>
<div class="box box4">BOX4</div>
</div><!-- /.wrapA -->
</div><!-- /.container -->

<div class="container">
<div class="wrapA">
<div class="box box1">BOX1</div>
<div class="box box2">BOX2</div>
<div class="box box3">BOX3</div>
<div class="box box4">BOX4</div>
</div><!-- /.wrapA -->
</div><!-- /.container -->

リキッドレイアウト

• ％で可変指定をします
• 全体を囲むボックスの幅の単位を「%」にします

#container {
  width: 50%;
  height: auto;
}

これで、可変の設定は完了です。