【HTML&CSS】要素を中央に配置する方法、flexboxを使った中央揃え

2023年10月1日

ウェブデザインにおいて、要素を中央に配置することはよくあります。この記事では、flexboxを駆使して要素を縦横方向の両方に中央に配置する方法を詳しく解説します。初心者の方にも分かりやすく、実践的な例を通じて説明します。

要素を中央に配置する方法【flexboxを利用】

ウェブデザインにおいて、要素を中央に配置することは一般的なデザインニーズです。この記事では、flexboxという強力なCSSプロパティを使って、要素を縦横方向の両方に中央に配置する方法を解説します。

要素にCSSスタイルを適用

.container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh; /* 画面の高さいっぱいに要素を表示 */
}

解説

display: flex;: 要素をflexコンテナとして配置するための指定です。flexboxを使うことで、要素を縦横方向に中央揃えにできます。
justify-content: center;: 要素を水平方向（横方向）に中央に配置します。
align-items: center;: 要素を垂直方向（縦方向）に中央に配置します。
height: 100vh;: 画面の高さいっぱいに要素を表示するための設定です。この部分を調整することで、要素の高さを変更できます。

実用的な例

<!DOCTYPE html>
<html>
<head>
    <style>
        .container {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }
    </style>
</head>
<body>
    <div class="container">
        <p>この要素は中央に配置されました。</p>
    </div>
</body>
</html>

上記のコードを実行すると、pタグの文字が画面の中央に配置されます。

この実用的な例を通じて、flexboxを使用して要素を中央に配置する方法を学びました。この方法は、ウェブページやアプリケーションのデザインにおいて、要素の位置調整を効果的に行う手段として非常に便利です。初心者の方でも簡単に実践できるので、ぜひお試しください。

よかったらシェアしてね！

URLをコピーしました！

URLをコピーしました！