9.1 横方向のセンタリング
要素のセンタリングはウェブページで重要なデザインテクニックのひとつだよ。これを使うと、美しくて読みやすいレイアウトを作れるんだ。ここでは、CSSの最新技術を使って、横方向と縦方向の要素センタリングのさまざまな方法を見ていくよ。
1. margin: auto を使ったブロック要素のセンタリング
一番簡単なブロック要素のセンタリング方法のひとつが、margin: autoを使うことなんだ。
例:
CSS
.centered-box {
width: 200px;
height: 100px;
background-color: #3498db;
margin: 0 auto;
}
HTML
<div class="centered-box"></div>
コードの説明:
margin: 0 auto;: 左右のマージンを自動的に設定し、要素を水平にセンタリングする
2. text-align を使ったインライン要素のセンタリング
インラインやインラインブロック要素をブロック要素の中でセンタリングするには、text-align: centerプロパティを使うんだ。
例:
CSS
.container {
text-align: center;
background-color: #f1c40f;
padding: 20px;
}
.inline-element {
background-color: #e74c3c;
display: inline-block;
padding: 10px;
color: white;
}
HTML
<div class="container">
<div class="inline-element">インライン要素</div>
</div>
コードの説明:
text-align: center;: ブロックコンテナ内のインライン（やインラインブロック）要素をセンタリングする
3. Flexbox を使った要素のセンタリング
Flexboxは要素を水平と垂直の両方で簡単にセンタリングするのに役立つんだ。
例:
CSS
.flex-container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #2ecc71;
}
.centered-box {
width: 200px;
height: 100px;
background-color: #3498db;
}
HTML
<div class="flex-container">
<div class="centered-box"></div>
</div>
コードの説明:
display: flex;: コンテナをFlexboxとして設定するjustify-content: center;: 要素を水平にセンタリングするalign-items: center;: 要素を垂直にセンタリングする（これについては後で詳しく説明するよ）
9.2 縦方向のセンタリング
1. Flexbox を使ったセンタリング
Flexboxは要素を縦方向にセンタリングする簡単な方法を提供するんだ。
例:
CSS
.flex-container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #2ecc71;
}
.centered-box {
width: 200px;
height: 100px;
background-color: #3498db;
}
HTML
<div class="flex-container">
<div class="centered-box"></div>
</div>
コードの説明:
align-items: center;: 要素を垂直にセンタリングする
2. CSS Grid を使ったセンタリング
CSS Gridは要素のセンタリングに強力な機能を提供するんだ：
CSS
.grid-container {
display: grid;
place-items: center;
height: 100vh;
background-color: #9b59b6;
}
.centered-box {
width: 200px;
height: 100px;
background-color: #3498db;
}
HTML
<div class="grid-container">
<div class="centered-box"></div>
</div>
コードの説明:
display: grid;: コンテナをCSS Gridとして設定するplace-items: center;: 要素を水平および垂直にセンタリングする
3. 絶対配置とCSS変換を使った縦のセンタリング
絶対配置とCSS変換を使って要素を垂直にセンタリングできるんだ。
例:
CSS
.container {
position: relative;
height: 100vh;
background-color: #e74c3c;
}
.centered-box {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 200px;
height: 100px;
background-color: #3498db;
}
HTML
<div class="container">
<div class="centered-box"></div>
</div>
コードの説明:
position: absolute;: コンテナに対して絶対配置を設定するtop: 50%;,left: 50%;: 要素をコンテナの上端と左端から50%の位置に配置するtransform: translate(-50%, -50%);: 要素の幅と高さをそれぞれ50%ずつ移動させてセンタリングする
4. テーブルとセルを使った縦のセンタリング
テーブルとセルを使って要素を垂直にセンタリングする方法だよ。
例:
CSS
.table-container {
display: table;
width: 100%;
height: 100vh;
background-color: #f39c12;
}
.table-cell {
display: table-cell;
vertical-align: middle;
text-align: center;
}
.centered-box {
display: inline-block;
background-color: #3498db;
padding: 20px;
color: white;
}
HTML
<div class="table-container">
<div class="table-cell">
<div class="centered-box">センタリングした要素</div>
</div>
</div>
コードの説明:
.table-container:tableディスプレイのコンテナを作成する.table-cell:middleで垂直にアラインメントされたテーブルセルを作成する
GO TO FULL VERSION