CSSで4列のレイアウトグリッドを作成する方法
CSSで4列のレイアウトグリッドを作成するには、各カラムとなる要素に float: left; を指定し、幅を 25% に設定するのが基本的な手法です。これにより、4つの要素が横一列に均等に並びます。以下に具体的なコード例を示します。
サンプルコード
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
* {
box-sizing: border-box;
}
.first, .second, .third, .fourth {
float: left;
width: 25%;
color: white;
padding: 10px;
height: 500px;
text-align: center;
}
.first {
background-color: tomato;
}
.second {
background-color: teal;
}
.third {
background-color: rgb(166, 71, 255);
}
.fourth {
background-color: rgb(255, 71, 194);
}
.container:after {
clear: both;
}
</style>
</head>
<body>
<h1 style="text-align: center;">Four Column grid example</h1>
<div class="container">
<div class="first">
<h1>1つ目のdiv内のテキスト</h1>
</div>
<div class="second">
<h1>2つ目のdiv内のテキスト</h1>
</div>
<div class="third">
<h1>3つ目のdiv内のテキスト</h1>
</div>
<div class="fourth">
<h1>4つ目のdiv内のテキスト</h1>
</div>
</div>
</body>
</html>
実行結果
上記のコードをブラウザで開くと、次のように4つのカラムが横並びに表示されます。
コードのポイント
- box-sizing: border-box; … パディングやボーダーを含めて要素の幅を計算するため、
25% × 4 = 100%の計算が崩れず、はみ出しを防げます。 - float: left; … 各div要素を左から順に横並びで配置します。
- .container:after { clear: both; } … floatによる回り込みを解除する「クリアフィックス」で、親要素の高さの崩れを防ぎます。
なお、floatを使う手法は従来からの定番ですが、近年では Flexbox や CSS Grid レイアウトを利用することで、より柔軟で保守性の高い多カラムレイアウトを少ないコードで実現できます。レスポンシブ対応が必要な場合は、メディアクエリと組み合わせてカラム数を切り替えるのも有効です。
-
CSSで4列のレイアウトグリッドを作成する方法
CSSで4列のレイアウトグリッドを作成するには、各カラムとなる要素に float: left; を指定し、幅を 25% に設定するのが基本的な手法です。これにより、4つの要素が横一列に均等に並びます。以下に具体的なコード例を示します。 サンプルコード <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <style> body {
-
CSSだけでチェックマークを作成する方法【サンプルコード付き】
CSSを使えば、画像ファイルやアイコンフォントに頼ることなく、独自デザインのチェックマークを作成できます。この記事では、::before／::after の疑似要素を活用する方法と、border＋transform を使うシンプルな方法の2つの実装例を、サンプルコードと実行結果あわせて紹介します。 方法1：疑似要素（::before / ::after）を使う方法 1つ目の例では、正方形のボックスに対して ::before と ::after の2つの疑似要素を配置し、それぞれを回転させることで、チェックマークを構成する「短い線」と「長い線」を描画しています。 <!DOCTYPE htm