今回はHTMLやCSSでレイアウトを行う際の要素やプロパティを、歴史を追いながら解説していきます。
サイト制作初期ではHTMLでtableタグを駆使して『Tableレイアウト』と呼ばれる手法でレイアウトを行っていました。
次にCSSの登場により、floatプロパティを使ってレイアウトを行うようになりました。
時代の変化によりデバイスも進化します。
それに合わせるようにマークアップ言語やスタイル言語も進化してきています。
しかしこの方法には多くのデメリットがありました。
それは元々、floatプロパティがレイアウト目的のプロパティで無かったことが原因でした。
元々、『float』はレイアウト目的では無かったんだ。
そうだったんですね💦
floatでのレイアウトとデメリット
この章では『floatプロパティ』を使ってのレイアウト方法と、そのデメリットについて解説していきます。
『floatプロパティ』では画像の横に文章（段落）をうまくレイアウト出来ても、画像の高さに合わせて文章（段落）にうまく枠線が引かれません。
その例を解説していきます。
HTML
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>flexboxの勉強</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h2>CSSとは</h2>
<div class="box1">
<img src="test.png" alt="イラスト1">
<p>Cascading Style Sheets（CSS、カスケーディング・スタイル・シート、カスケード・スタイル・シート、日: 段階スタイルシート[1]）とは、HTML や XML の要素をどのように修飾（表示）するかを指示する、W3Cによる仕様の一つ。文書の構造と体裁を分離させるという理念を実現する為に提唱されたスタイルシートの、具体的な仕様の一つ。</p>
</div>
</body>
</html>
CSS
div{
border: 1px solid #cccccc;
}
img{
float: left;
}
ブラウザ表示
文章（段落）が画像に回り込んでしまっていますね。
これがいわゆる、『回り込み』現象です。
あぁー💦
私がよくやっちゃうヤツです😩
clearfixでのレイアウトとデメリット
そこでclearfixを使って画像の延長線上に枠線を引くというテクニックが使われるようになりました。
これは少しハック的な使い方ですね。
こんな使い方もあったんですね💦
CSS
div{
border: 1px solid #cccccc;
}
img{
float: left;
}
.box1::after {
content: "";
display: block;
clear: both;
}
ブラウザ表示
しかしこの方法でも、Background-colorで文章を指定すると横の画像と横幅や高さが合わないのです。
CSS
div{
border: 1px solid #cccccc;
}
img{
float: left;
}
.box1::after {
content: "";
display: block;
clear: both;
}
p{
margin: 0;
background-color: #ffcccc;
}
ブラウザ表示
あぁー💦
また回り込んじゃった😩
またその他、上下中央寄せなどは対処方法としてJavaScriptなどを駆使してレイアウトしないといけませんでした。
そもそもfloatなどのプロパティではWordなどのワープロソフトの画像を回り込ませるなどの用途として作られたプロパティだったので、レイアウト用途で使うには少し無理があったのです。
今までは無理やりにCSSでレイアウトをしていたことが分かるね🍎
flexboxでのレイアウト
CSS3からはレイアウト専用のプロパティが登場しました。
その一つが『flexboxプロパティ』です。
レイアウト専用『flexbox』の登場ですね✨
それでは『flexbox』で先程の問題が解決できるか見ていきましょう。
先程記述したCSSの内容を全て消して、以下の内容に書き換えます。
CSS
div{
display: flex;
}
ブラウザ表示
画像の高さに合わせて枠が表示される
枠線が画像の高さに合って表示されるのでしょうか。
試してみましょう。
CSS
div{
display: flex;
border: 1px solid #cccccc;
}
ブラウザ表示
ちゃんと枠線は画像の高さに表示されていますね。
すごい❗️
簡単に枠線の調整ができた✨
画像の高さに合わせて背景が表示される
背景はちゃんと調整されるのでしょうか。
試してみましょう。
CSS
div{
display: flex;
border: 1px solid #cccccc;
}
p{
background-color: #fccc;
}
ブラウザ表示
ちゃんと画像の高さで段落は認識され、背景は装飾されました。
見た目も綺麗だし、何よりも簡単✨
まとめ
このように時代の背景とともにHTMLやCSSは進化していっています。
近年レイアウトをCSSで行う概念が出てきた為、『flexbox』も登場してきました。
今後も時代の移り変わりで、HTMLやCSSも進化を遂げていきます。
日々の情報収集を怠らず、コツコツと勉強が必要です。
関連記事はこちら
