CSS

CSS実践編② FlexboxとCSS Gridをテスト形式で復習

今回は、FlexboxとCSS Gridの基本を復習しながら、練習問題を解いていきましょう！

準備：HTMLファイルを作成しよう

まず、次のHTMLファイル index.html を作成してください。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>レイアウトの基礎復習</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>CSSのレイアウトを復習しよう！</h1>
    <div class="container">
        <div class="box">1</div>
        <div class="box">2</div>
        <div class="box">3</div>
    </div>
    <p>この段落の間隔を均等に広げましょう。</p>
</body>
</html>

このHTMLファイルを作成し、style.css というCSSファイルを作成して、そこに解答を書いていきましょう！

問題1：要素を横並びにしよう

問題: .container の中の要素を **横並び** にしてください。

自分で考えてみましょう！ CSSに追加するコードを記述してください。

🔎 （分からなかったらクリック）答えを見る 
.container {
    display: flex;
}

解説

display: flex; を指定すると、要素が横並びになります。

問題2：要素を中央揃えにしよう

問題: .container の中の要素を **中央揃え** にしてください。

🔎 （分からなかったらクリック）答えを見る 
.container {
    display: flex;
    justify-content: center;
}

解説

justify-content: center; を指定すると、要素が水平方向の中央に配置されます。

問題3：3列レイアウトを作ろう

問題: .container を **3列レイアウト** にしてください。

🔎 （分からなかったらクリック）答えを見る 
.container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}

解説

grid-template-columns: 1fr 1fr 1fr; を指定すると、3等分のグリッドレイアウトが作れます。

問題4：h1を中央揃えにしよう

問題: h1 の文字を中央に配置してください。

🔎 （分からなかったらクリック）答えを見る 
h1 {
    text-align: center;
}

解説

text-align: center; を指定すると、テキストが中央揃えになります。

問題5：段落の間隔を均等に広げよう

問題: p の間隔を **均等に広げて** ください。

🔎 （分からなかったらクリック）答えを見る 
p {
    margin: 10px;
}

解説

margin: 10px; を指定すると、段落の上下左右に10pxの余白が付きます。

まとめ

  • display: flex; で要素を横並びにできる。
  • justify-content: center; で中央揃えにできる。
  • display: grid; でグリッドレイアウトを作成できる。
  • text-align: center; でテキストを中央揃えにできる。
  • margin を使って要素の間隔を調整できる。

シェア！

コメントを残す

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です

RECOMMENDこちらの記事も人気です。