Can you do this HTML layout without using tables ?
2024-07-27
テーブルを使わずにHTMLレイアウトを行う
そこで今回は、テーブルを使わずにCSSのみを使ってレイアウトを行う方法について解説します。
方法
テーブルレイアウトをCSSで実現するには、主に以下の3つの方法があります。
- floatプロパティを使う
- flexboxレイアウトを使う
- gridレイアウトを使う
それぞれの特徴とメリット・デメリットを説明します。
floatプロパティは、要素を左右に並べるために使用できます。
メリット
- 簡単でシンプル
- 複雑な構造になると崩れやすい
- 高度なレイアウトには不向き
例
<div class="container">
<div class="left">左側の要素</div>
<div class="right">右側の要素</div>
</div>
.container {
width: 100%;
}
.left {
float: left;
width: 50%;
}
.right {
float: right;
width: 50%;
}
flexboxレイアウトは、要素を柔軟に配置できるレイアウトシステムです。
- 複雑な構造でも崩れにくい
- 高度なレイアウトが簡単にできる
- 古いブラウザでは対応していない
<div class="container">
<div class="item">要素1</div>
<div class="item">要素2</div>
<div class="item">要素3</div>
</div>
.container {
display: flex;
}
.item {
flex: 1 1 auto;
}
- flexboxよりも細かい制御ができる
- より高度なレイアウトが可能
- flexboxよりも複雑
<div class="container">
<div class="item">要素1</div>
<div class="item">要素2</div>
<div class="item">要素3</div>
</div>
.container {
display: grid;
}
.item {
grid-area: 1 / 1 / 2 / 2;
}
<div class="container">
<div class="left">
<h1>タイトル</h1>
<p>本文</p>
</div>
<div class="right">
<img src="image.jpg" alt="画像">
</div>
</div>
.container {
width: 100%;
}
.left {
float: left;
width: 50%;
}
.right {
float: right;
width: 50%;
}
.left h1 {
color: red;
}
.left p {
color: blue;
}
.right img {
width: 100%;
}
<div class="container">
<div class="header">
<h1>タイトル</h1>
</div>
<div class="main">
<div class="left">
<p>本文</p>
</div>
<div class="right">
<img src="image.jpg" alt="画像">
</div>
</div>
</div>
.container {
display: flex;
flex-direction: column;
}
.header {
flex: 0 0 auto;
background-color: red;
}
.main {
flex: 1 1 auto;
display: flex;
}
.left {
flex: 1 1 auto;
background-color: blue;
}
.right {
flex: 1 1 auto;
background-color: green;
}
.right img {
width: 100%;
}
<div class="container">
<div class="header">
<h1>タイトル</h1>
</div>
<div class="main">
<div class="left">
<p>本文</p>
</div>
<div class="right">
<img src="image.jpg" alt="画像">
</div>
</div>
</div>
.container {
display: grid;
grid-template-columns: 1fr 3fr;
grid-template-rows: auto 1fr;
}
.header {
grid-area: 1 / 1 / 2 / 2;
background-color: red;
}
.main {
grid-area: 2 / 1 / 3 / 2;
display: grid;
grid-template-columns: 1fr 1fr;
}
.left {
grid-area: 1 / 1 / 2 / 2;
background-color: blue;
}
.right {
grid-area: 1 / 2 / 2 / 3;
background-color: green;
}
.right img {
width: 100%;
}
- ブラウザによっては、古いバージョンだと一部の機能に対応していない場合があります。
CSS positionプロパティを使う
positionプロパティを使って、要素を自由に配置することができます。
- 細かい調整が可能
- 初心者には難しい
<div class="container">
<div class="left">左側の要素</div>
<div class="right">右側の要素</div>
</div>
.container {
width: 100%;
}
.left {
position: absolute;
left: 0;
top: 0;
}
.right {
position: absolute;
right: 0;
top: 0;
}
CSS marginプロパティとpaddingプロパティを使う
marginプロパティとpaddingプロパティを使って、要素の間隔を調整することでレイアウトを作成することができます。
<div class="container">
<div class="left">左側の要素</div>
<div class="right">右側の要素</div>
</div>
.container {
width: 100%;
}
.left {
margin-right: 10px;
}
.right {
margin-left: 10px;
}
CSS displayプロパティを使う
displayプロパティを使って、要素の表示方法を変更することでレイアウトを作成することができます。
- さまざまなレイアウトを作成できる
<div class="container">
<div class="left">左側の要素</div>
<div class="right">右側の要素</div>
</div>
.container {
width: 100%;
}
.left {
display: inline-block;
}
.right {
display: inline-block;
}
CSS calc()を使う
calc()を使うことで、要素の幅や高さを計算式で指定することができます。
- レスポンシブレイアウトに使いやすい
<div class="container">
<div class="left">左側の要素</div>
<div class="right">右側の要素</div>
</div>
.container {
width: 100%;
}
.left {
width: calc(50% - 10px);
}
.right {
width: calc(50% - 10px);
}
CSS media queryを使う
media queryを使うことで、デバイスや画面サイズによってレイアウトを切り替えることができます。
<div class="container">
<div class="left">左側の要素</div>
<div class="right">右側の要素</div>
</div>
@media screen and (max-width: 768px) {
.container {
width: 100%;
}
.left {
display: block;
}
.right {
display: block;
}
}
html css layout
