【HTML/CSS入門④】CSSレイアウト入門｜横並び・中央揃えをマスターしよう

この記事でできるようになること
レイアウトって何？
中央揃えにしてみよう
1. 文字を中央揃えにする：text-align
2. ブロック要素を中央に置く：margin: 0 auto
横並びにしてみよう：Flexbox入門
1. よく使うプロパティ2つ
プロフィール
好きなこと
まとめ

この記事でできるようになること

この記事を読み終えると、文字や要素を中央揃えにする方法と、複数の要素を横並びにする方法がわかります。

自己紹介ページがさらに「それっぽく」なるはずです！

レイアウトって何？

CSSのレイアウトとは、要素をページのどこに配置するかを指定することです。

前回までは「色」や「サイズ」など要素そのものの見た目を変えていました。

今回は「位置」を動かします。

中央揃えにしてみよう

文字を中央揃えにする：text-align

文字を中央に揃えるときは text-align: center を使います。

h1 {
  text-align: center;
}

text-align に指定できる主な値はこの3つです。

left：左揃え（デフォルト）
center：中央揃え
right：右揃え

見出しやキャッチコピーを中央に置くだけで、ページが一気にそれっぽくなります！

ブロック要素を中央に置く：margin: 0 auto

画像やボックスなど、幅を持った要素を中央に置くときは margin: 0 auto を使います。

img {
  display: block;
  width: 200px;
  margin: 0 auto;
}

ポイントは2つです。

display: block を指定する（画像はデフォルトでインライン要素のため）
width を指定する（幅がないと中央の基準が決まらないため）

margin: 0 auto の意味は「上下の余白は0、左右の余白は自動（均等）」です。左右が均等になるので、自然と中央に来る、という仕組みです。

横並びにしてみよう：Flexbox入門

複数の要素を横に並べるときに使うのが Flexbox（フレックスボックス） です。

難しそうな名前ですが、基本はたった1行から始められます。

.container {
  display: flex;
}

これだけで、.container の中にある要素が横並びになります。

よく使うプロパティ2つ

justify-content：横方向の並び方

.container {
  display: flex;
  justify-content: center; /* 中央に寄せる */
}

主な値はこちらです。

flex-start：左寄せ（デフォルト）
center：中央寄せ
flex-end：右寄せ
space-between：両端に配置して均等に並べる

align-items：縦方向の揃え方

.container {
  display: flex;
  align-items: center; /* 縦方向も中央に揃える */
}

この2つを組み合わせると、要素を縦横どちらも中央に揃えられます。

ステップ1：text-align

ステップ2：margin: 0 auto

ステップ3：Flexbox

最終チャレンジ

課題

text-alignを使ってh1を中央揃えにしよう！
styleタグの中にtext-align: centerを書いて、h1の文字を中央に揃えてみましょう。プレビューで中央に移動するのを確認してください！

💡 text-alignは文字の横方向の位置を指定します。left（左）・center（中央）・right（右）の3つが基本です。見出しやキャッチコピーをcenterにするだけでページが一気にそれっぽくなります！

見本コード（写経してみよう！わからなくなったらコピーしてOK）

<!DOCTYPE html> <html> <head> <title>レイアウト練習</title> <style> h1 { text-align: center; } </style> </head> <body> <h1>この見出しが中央に来ます！</h1> <p>この文章は左揃えのままです。</p> </body> </html>

ここに入力してみよう

プレビュー（リアルタイム）

課題

margin: 0 autoで画像を中央に置こう！
imgタグにdisplay: block・width・margin: 0 autoを指定して、画像を中央に配置してみましょう。3つセットで使うのがポイントです！

💡 margin: 0 autoは「上下の余白は0、左右の余白は自動（均等）」という意味です。左右が均等になるので自然と中央に来ます。ただしdisplay: blockとwidthの指定がないと効かないので要注意！

見本コード（写経してみよう！わからなくなったらコピーしてOK）

<!DOCTYPE html> <html> <head> <title>レイアウト練習</title> <style> img { display: block; width: 200px; margin: 0 auto; } </style> </head> <body> <img src=”https://placehold.jp/200×150.png” alt=”サンプル画像”> <p>画像が中央に来ましたか？</p> </body> </html>

ここに入力してみよう

プレビュー（リアルタイム）

課題

Flexboxで3つのリンクを横並びにしよう！
containerクラスにdisplay: flexとjustify-content: centerを指定して、中のリンクを横並び・中央寄せにしてみましょう！

💡 display: flexを指定するだけで中の要素が横並びになります。justify-contentで横方向の位置、align-itemsで縦方向の位置を調整できます。この2つを覚えるだけでレイアウトの幅がぐっと広がります！

見本コード（写経してみよう！わからなくなったらコピーしてOK）

<!DOCTYPE html> <html> <head> <title>レイアウト練習</title> <style> .container { display: flex; justify-content: center; gap: 24px; background-color: #e8f0fe; padding: 12px; } </style> </head> <body> <div class=”container”> <a href=”#”>プロフィール</a> <a href=”#”>好きなこと</a> <a href=”#”>ブログ</a> </div> </body> </html>

ここに入力してみよう

プレビュー（リアルタイム）

最終チャレンジ

全部まとめて自己紹介ページを完成させよう！
text-align・margin: 0 auto・Flexboxを全部使って、記事の見本ページを再現してみましょう。見本を見ながらでOKです！

💡 今回のゴール：①h1を中央揃え　②ナビゲーションをFlexboxで横並び　③今まで学んだCSSをまとめて1つのページに書く

見本コード（わからなくなったらコピーしてOK）

<!DOCTYPE html> <html> <head> <title>私の自己紹介ページ</title> <style> body { background-color: #f9f9f9; color: #333333; font-size: 16px; } h1 { color: #ffffff; background-color: #3a86ff; font-size: 32px; padding: 16px; margin: 0; text-align: center; } h2 { color: #3a86ff; font-size: 22px; margin: 32px 0 8px; } p { font-size: 16px; margin: 0 0 16px; padding: 0 16px; } .nav { display: flex; justify-content: center; gap: 24px; background-color: #e8f0fe; padding: 12px; } .nav a { color: #3a86ff; text-decoration: none; } </style> </head> <body> <h1>私の自己紹介ページ</h1> <div class=”nav”> <a href=”#”>プロフィール</a> <a href=”#”>好きなこと</a> <a href=”#”>ブログ</a> </div> <h2>プロフィール</h2> <p>はじめまして！プログラミングを勉強中のSueです。</p> <h2>好きなこと</h2> <p>コーヒーを飲みながらコードを書くのが好きです。</p> </body> </html>

ここに入力してみよう

プレビュー（リアルタイム）

実践：自己紹介ページに適用しよう

前回作った自己紹介ページを参考に、先ほど書いたコードに今回学んだレイアウトを加えてみましょう！

<!DOCTYPE html>
<html>
  <head>
    <title>私の自己紹介ページ</title>
    <style>
      body {
        background-color: #f9f9f9;
        color: #333333;
        font-size: 16px;
      }

      h1 {
        color: #ffffff;
        background-color: #3a86ff;
        font-size: 32px;
        padding: 16px;
        margin: 0;
        text-align: center;
      }

      h2 {
        color: #3a86ff;
        font-size: 22px;
        margin: 32px 0 8px;
      }

      p {
        font-size: 16px;
        margin: 0 0 16px;
        padding: 0 16px;
      }

      .nav {
        display: flex;
        justify-content: center;
        gap: 24px;
        background-color: #e8f0fe;
        padding: 12px;
      }

      .nav a {
        color: #3a86ff;
        text-decoration: none;
      }
    </style>
  </head>
  <body>
    <h1>私の自己紹介ページ</h1>

    <div class="nav">
      <a href="#">プロフィール</a>
      <a href="#">好きなこと</a>
      <a href="#">ブログ</a>
    </div>

    <h2>プロフィール</h2>
    <p>はじめまして！プログラミングを勉強中のSueです。</p>

    <h2>好きなこと</h2>
    <p>コーヒーを飲みながらコードを書くのが好きです。</p>

    <h2>参考にしているサイト</h2>
    <p>
      <a href="https://itskillab.com/ja/" target="_blank">Sue's Blog</a>
    </p>
  </body>
</html>

ブラウザで開いてみてください。タイトルが中央揃えになり、ナビゲーションが横並びになっているはずです！