もうホームページのレイアウトにテーブルを使うのは止めだ！最新のレイアウトの組み方！
昔はHTMLでホームページのレイアウトを組む時、テーブルを使っていました。
そして、時代は流れ、floatで要素を横並びにして、clear: both;で横並びを解除していた時代もありました。
そして、現在ではどのようにしてHTMLのレイアウトを組むのか・・・
それを説明していきます。
現在はdisplay:flexでのレイアウトが主流
さて、久々にHTML/CSSを始めた人は「なんじゃそりゃ？」となるでしょう。
インライン要素・ブロック要素はご存じでしょうか？
CSSでdisplay: inline;やdisplay: block;って記述する物ですね。
そこに現在ではdisplay: flex;という物が存在します。
div {
display: flex;
}さて、このflexというスタイル、とても便利なんです。
display: flex;が指定された要素の子要素を整列させてくれるんですが、縦並びも横並びもflex-directionを変えるだけで、簡単に切り替えることが出来ます。
横並び
div {
display: flex;
flex-direction: row;
}
縦並び
div {
display: flex;
flex-direction: column;
}
サンプル
See the Pen Untitled by Uilou (@uilou754) on CodePen.
こちらのサンプルは3秒ごとにflex-directionが切り替わります。
flexの中央揃えはtext-align: centerやvertical-align: middleじゃない！
flexを使った時、text-alignやvertical-alignでは上手に整列しません。
flexにはjustify-contentとalign-itemsという整列に便利な物が用意されています。
div {
display: flex;
justify-content: center; // 左右中央揃え
align-items: center; // 上下中央揃え
}隙間を開ける場合にはgapを使います。
div {
display: flex;
gap: 5px; // 5pxの隙間を開ける
}ちなみに、ちょっと前まではinline-blockで横並びにしていました
ちょっと前までは横並びメニューや左右配置するのもinline-blockを使用していました。
.col {
display: block;
padding: 0px; // 横要素をinline-blockにするので、横幅の合計値が少しでも100%を超えると段落ちしてしまう。これを防ぐため
font-size: 0px; // これも段落ち防止
}
.col > * {
display: inline-block; // 横並び配置を実現するため、子要素をinline-blockにする
margin: 0px;
padding: 0px 10px;
width: 50%; // 50%で、デフォルトが2カラム 50:50の表示となる
vertical-align: top;
font-size: 1rem; // 文字サイズを元に戻す
}
.col > *.col5 { width: 5%; }
.col > *.col10 { width: 10%; }
.col > *.col15 { width: 15%; }
.col > *.col20 { width: 20%; }
.col > *.col25 { width: 25%; }
.col > *.col30 { width: 30%; }
.col > *.col35 { width: 35%; }
.col > *.col40 { width: 40%; }
.col > *.col45 { width: 45%; }
.col > *.col50 { width: 50%; }
.col > *.col55 { width: 55%; }
.col > *.col60 { width: 60%; }
.col > *.col65 { width: 65%; }
.col > *.col70 { width: 70%; }
.col > *.col75 { width: 75%; }
.col > *.col80 { width: 80%; }
.col > *.col85 { width: 85%; }
.col > *.col90 { width: 90%; }
.col > *.col95 { width: 95%; }
.col > *.col100 { width: 100%; }<!-- 2カラム配置 -->
<div class="col">
<!-- 左側 40% -->
<div class="col40">
<img src="～～.jpg"/>
</div>
<!-- 右側 60% -->
<div class="col60">
<p>この画像は昭和○○年創業当時の写真です。<br>
最初は小さなコンテナに机と椅子を運び込んだだけの状態から始まりました。</p>
</div>
</div>こんなCSSを組んでいました。
グリッド表示する時にも、tableは使わず、display:gridという物があります！
「display:flexはわかった！
でも、グリッド表示する時はやっぱりテーブル要素を使うんでしょ？」って思うじゃないですか。
グリッド表示にはグリッド表示用のdisplay:gridという物が用意されているんです。
サンプル
See the Pen gridのテスト by Uilou (@uilou754) on CodePen.
上記のサンプルを説明していきます。
.grid_block {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(4, 1fr);
}また、columnとかrowとか出てくるんですが、flexを学んだ後なら大体わかりますよね。
横方向と縦方向ですね。
上記の場合、横が3マス、縦が4マスであることを表しています。
.grid_block {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(4, 1fr);
column-gap: 1px;
row-gap: 1px;
}そして、gapですが、これはグリッドのマスの隙間です。
上記では隙間を1px開けろということです。0pxだとピッタリくっつきます。
この隙間もcolumnとrowで縦の隙間と横の隙間を個別に定義できます。
.grid_block > *:nth-child(1) {
grid-column-start: 1;
grid-column-end: 3;
grid-row-start: 1;
grid-row-end: 3;
}これは先ほど定義した横3マス×縦4マスの中で、何マス使うかを決めています。
上記の例だと横が2マス、縦が2マス分です。
ここが少しわかりにくいのですが、以下の図を見てください。
grid-columnとgrid-rowはマス自体ではなく、マスの区切り線で判断します。
なので、grid-columnは1~3なので、2マス分ということになります。
さあ、モダンなCSSでサイトのレイアウトを組もうぜ！
もしお困りごとがありましたら、お問い合わせフォームよりご相談ください。
