HTML、CSS、Flexboxで実現！要素の簡単中央揃え・左右揃え
2024-04-22
HTML、CSS、Flexbox を使って要素を中央揃えおよび左右揃えにする方法
このチュートリアルでは、HTML、CSS、Flexbox を使って、Flexbox コンテナー内の要素を中央揃えと左右揃えにする方法を説明します。Flexbox は、Web ページのレイアウトを簡単かつ柔軟に作成するための強力なツールです。
例
以下の例では、3 つの要素 (「中央揃え」、「左揃え」、「右揃え」) を Flexbox コンテナー内に配置し、それぞれ中央揃え、左揃え、右揃えにします。
HTML
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flexbox 中央揃え & 左右揃え</title>
<style>
.flex-container {
display: flex;
justify-content: space-between;
align-items: center;
width: 500px;
margin: 20px auto;
border: 1px solid #ccc;
}
.flex-item {
flex: 1;
text-align: center;
border: 1px solid #ddd;
padding: 10px;
}
.flex-item-center {
text-align: center;
}
.flex-item-left {
text-align: left;
}
.flex-item-right {
text-align: right;
}
</style>
</head>
<body>
<div class="flex-container">
<div class="flex-item-left">左揃え</div>
<div class="flex-item-center">中央揃え</div>
<div class="flex-item-right">右揃え</div>
</div>
</body>
</html>
説明
display: flex;: 親要素を Flexbox コンテナーに変換します。justify-content: space-between;: 要素を左右に均等に配置します。align-items: center;: 要素を垂直方向に中央揃えします。width: 500px;: コンテナーの幅を 500 ピクセルに設定します。margin: 20px auto;: コンテナーをページの中央に配置します。border: 1px solid #ccc;: コンテナーにボーダーを追加します。.flex-item: 各要素に共通するスタイルを定義します。flex: 1;: 各要素に利用可能なスペースを均等に分配します。text-align: center;: 要素内のテキストを中央揃えします。padding: 10px;: 各要素に余白を追加します。.flex-item-center,.flex-item-left,.flex-item-right: 個々の要素に個別のスタイルを定義します。text-align: left;,text-align: right;: 要素内のテキストを左揃えまたは右揃えにします。
応用例
この例を参考に、Flexbox を使って様々なレイアウトを作成することができます。例えば、以下のようなことができます。
- ヘッダー、コンテンツ、フッターを水平方向に並べる
- ナビゲーションメニューを左右に配置する
- 商品カードをグリッド状に表示する
- レスポンシブなデザインを作成する
HTML、CSS、Flexbox を組み合わせることで、Web
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flexbox 中央揃え & 左右揃え</title>
<style>
.flex-container {
display: flex;
justify-content: space-between;
align-items: center;
width: 500px;
margin: 20px auto;
border: 1px solid #ccc;
}
.flex-item {
flex: 1;
text-align: center;
border: 1px solid #ddd;
padding: 10px;
}
.flex-item-center {
text-align: center;
}
.flex-item-left {
text-align: left;
}
.flex-item-right {
text-align: right;
}
</style>
</head>
<body>
<div class="flex-container">
<div class="flex-item-left">左揃え</div>
<div class="flex-item-center">中央揃え</div>
<div class="flex-item-right">右揃え</div>
</div>
</body>
</html>
CSS
.flex-container {
display: flex;
justify-content: space-between;
align-items: center;
width: 500px;
margin: 20px auto;
border: 1px solid #ccc;
}
.flex-item {
flex: 1;
text-align: center;
border: 1px solid #ddd;
padding: 10px;
}
.flex-item-center {
text-align: center;
}
.flex-item-left {
text-align: left;
}
.flex-item-right {
text-align: right;
}
<div class="flex-container">: Flexbox コンテナーを定義します。<div class="flex-item-left">左揃え</div>: 左揃えの要素を定義します。
.flex-container.flex-item.flex-item-center,.flex-item-left,.flex-item-right- 個々の要素に個別のスタイルを定義します。
このサンプルコードを以下の目的で使用できます。
- 商品カード
Flexbox 以外の方法で要素を中央揃えおよび左右揃えにする方法
text-align プロパティは、要素内のテキストを水平方向に揃えるために使用できます。
<div class="center">中央揃え</div>
<div class="left">左揃え</div>
<div class="right">右揃え</div>
.center {
text-align: center;
}
.left {
text-align: left;
}
.right {
text-align: right;
}
margin プロパティは、要素の周りに余白を設定するために使用できます。要素を中央揃えするには、左右の余白を auto に設定します。
<div class="center">中央揃え</div>
<div class="left">左揃え</div>
<div class="right">右揃え</div>
.center {
margin: 0 auto;
}
.left {
margin-right: auto;
}
.right {
margin-left: auto;
}
position と left および right プロパティ
position プロパティは、要素の配置を制御するために使用できます。left と right プロパティは、要素の左右の位置をピクセル単位で設定するために使用できます。
<div class="center">中央揃え</div>
<div class="left">左揃え</div>
<div class="right">右揃え</div>
.center {
position: absolute;
left: 50%;
transform: translateX(-50%);
}
.left {
position: absolute;
left: 0;
}
.right {
position: absolute;
right: 0;
}
テーブルレイアウトは、要素を水平方向に並べるために使用できます。
<table>
<tr>
<td>左揃え</td>
<td>中央揃え</td>
<td>右揃え</td>
</tr>
</table>
table {
width: 100%;
}
td {
text-align: center;
}
td:first-child {
text-align: left;
}
td:last-child {
text-align: right;
}
どの方法を選択するかは、状況によって異なります。Flexbox は、柔軟性とレスポンシブなデザインに適した最新の技術です。一方、text-align 、 margin 、 position 、 left 、 right 、テーブルレイアウトなどの方法は、よりシンプルで古い方法です。
html css flexbox
