HTML、CSS、中央配置：CSS Gridで要素を簡単に中央に配置する方法
2024-04-12
CSS Grid を使った中央配置
必要な知識
この解説を理解するには、以下の基本的な知識が必要です。
- HTMLの基本構造
- CSSの基本的な書式
用語説明
- グリッドコンテナー: グリッドレイアウトを定義する親要素です。
- グリッドトラック: グリッドコンテナーを縦横に分割する線です。
- グリッドセル: グリッドトラックによって作られる領域です。
- グリッドアイテム: グリッドセルに配置される要素です。
方法
CSS Gridを使って要素を中央に配置するには、以下の2つの方法があります。
place-items プロパティは、グリッドアイテムの配置方法を指定します。このプロパティに center を指定すると、アイテムを上下左右中央に配置することができます。
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
grid-gap: 20px;
}
.grid-item {
place-items: center;
background-color: #ccc;
padding: 20px;
}
このコードは、以下のようになります。
- グリッドコンテナーは、自動的に列数を調整する
repeat(auto-fit, minmax(200px, 1fr))を使用して作成されます。 - 各グリッドアイテムは、背景色
#cccとパディング20pxでスタイル設定されます。 place-items: center;により、すべてのグリッドアイテムが上下左右中央に配置されます。
align-items と justify-items プロパティを組み合わせる
align-items プロパティは、グリッドアイテムの垂直方向の配置方法を指定します。justify-items プロパティは、グリッドアイテムの水平方向の配置方法を指定します。これらのプロパティを組み合わせることで、アイテムを上下左右中央に配置することができます。
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
grid-gap: 20px;
}
.grid-item {
align-items: center;
justify-items: center;
background-color: #ccc;
padding: 20px;
}
- 上記の方法は、単一のグリッドアイテムだけでなく、複数のグリッドアイテムをまとめて中央に配置する場合にも使用できます。
- グリッドアイテムのサイズを変更したり、余白を追加したりすることで、レイアウトを調整することができます。
補足
CSS Gridは、比較的新しいレイアウトモジュールです。古いブラウザーではサポートされていない場合があることに注意してください。必要に応じて、ベンダープレフィックスを付加する必要があります。
place-items プロパティを使う
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Grid 中央配置</title>
<style>
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
grid-gap: 20px;
}
.grid-item {
place-items: center;
background-color: #ccc;
padding: 20px;
}
</style>
</head>
<body>
<div class="grid-container">
<div class="grid-item">アイテム1</div>
<div class="grid-item">アイテム2</div>
<div class="grid-item">アイテム3</div>
<div class="grid-item">アイテム4</div>
</div>
</body>
</html>
各グリッドアイテムは、上下左右中央に配置されます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Grid 中央配置</title>
<style>
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
grid-gap: 20px;
}
.grid-item {
align-items: center;
justify-items: center;
background-color: #ccc;
padding: 20px;
}
</style>
</head>
<body>
<div class="grid-container">
<div class="grid-item">アイテム1</div>
<div class="grid-item">アイテム2</div>
<div class="grid-item">アイテム3</div>
<div class="grid-item">アイテム4</div>
</div>
</body>
</html>
説明
- 上記のコードは、HTMLとCSSで構成されています。
<!DOCTYPE html>は、HTML5ドキュメントであることを宣言します。<html lang="ja">は、HTMLドキュメントの言語が日本語であることを指定します。<head>タグは、ドキュメントのメタデータを含む部分です。<meta charset="UTF-8">は、ドキュメントの文字エンコーディングがUTF-8であることを指定します。<meta name="viewport" content="width=device-width, initial-scale=1.0">は、ビューポートの設定を指定します。この設定により、デバイスの幅に合わせてページがスケーリングされます。<title>CSS Grid 中央配置</title>は、ドキュメントのタイトルを指定します。<style>タグは、CSSスタイルを記述する部分です。.grid-containerは、グリッドコンテナーのスタイルを定義します。display: grid;は、要素をグリッドレイアウトとして表示することを指定します。grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));は、グリッドの列を定義します。この設定により、列数は自動的に調整され、各列の最小幅は200px、最大幅は画面幅になります。grid-gap: 20px;は、グリッドアイテム間の余白を20pxに設定します。
.grid-itemは、グリッドアイテムのスタイルを定義します。place-items: center;または `align-items:
CSS Grid を使った中央配置のその他の方法
grid-area プロパティは、グリッドアイテムの配置先セルを指定します。このプロパティを使って、アイテムを特定のセルに配置することで、中央に配置することができます。
.grid-container {
display: grid;
grid-template-areas:
"a a a"
"b . ."
". . c";
}
.grid-item {
background-color: #ccc;
padding: 20px;
}
.grid-item-center {
grid-area: b;
}
grid-template-areasプロパティで、グリッドのレイアウトを定義します。- "." は、空のセルを表します。
- "a"、"b"、"c" は、名前付きセルを表します。
.grid-item-centerクラスのアイテムは、"b" セルに配置されるため、中央に配置されます。
justify-self と align-self プロパティを使う
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
grid-gap: 20px;
}
.grid-item {
background-color: #ccc;
padding: 20px;
}
.grid-item-center {
justify-self: center;
align-self: center;
}
.grid-item-centerクラスのアイテムに、justify-self: center;とalign-self: center;を設定することで、アイテムを水平方向と垂直方向に中央に配置します。
flexbox を使う
CSS Grid以外にも、flexboxを使って要素を中央に配置することができます。flexboxは、より古いブラウザーで広くサポートされています。
.grid-container {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
}
.grid-item {
background-color: #ccc;
padding: 20px;
margin: 10px;
}
.grid-containerにdisplay: flex;を設定することで、flexboxレイアウトを有効にします。justify-content: center;とalign-items: center;を設定することで、flexboxコンテナー内の要素を上下左右中央に配置します。flex-wrap: wrap;を設定することで、必要に応じてアイテムを折り返します。
- シンプルで分かりやすい方法:
place-itemsプロパティを使うのがおすすめです。 - 柔軟性を求める場合:
grid-areaプロパティを使うのがおすすめです。 - 古いブラウザーでのサポートを重視する場合: flexboxを使うのがおすすめです。
CSS Gridを使って要素を中央に配置するには、様々な方法があります。それぞれの方法の特徴を理解して、状況に応じて適切な方法を選択してください。
html css centering
