CSSによるレイアウト

この節では、CSSを使用してHTML要素のレイアウトを調整する方法を学びます。

例として、次のような料金プランを表すカードを作ることを目標に進めていきます。

料金プランのカードの完成形

まずは、HTMLとCSSで料金プランのカードを作り始めてみます。

index.html
<!doctype html>
<html lang="ja">
  <head>
    <meta charset="utf-8" />
    <title>料金プラン</title>
    <link rel="stylesheet" href="./style.css" />
  </head>
  <body>
    <div id="container">
      <div class="card">
        <div class="plan">Free</div>
        <div class="price">無料</div>
        <button type="button" class="button">今すぐ始める</button>
        <ul>
          <li>基本的な機能</li>
        </ul>
      </div>
      <div class="card">
        <div class="plan">Basic</div>
        <div class="price">$5</div>
        <button type="button" class="button">今すぐ始める</button>
        <ul>
          <li>基本的な機能</li>
          <li>AIアシスタントのサポート</li>
          <li>5GBのストレージ</li>
        </ul>
      </div>
      <div class="card">
        <div class="plan">Premium</div>
        <div class="price">$20</div>
        <button type="button" class="button">今すぐ始める</button>
        <ul>
          <li>全ての機能</li>
          <li>AIアシスタントのサポート</li>
          <li>20GBのストレージ</li>
        </ul>
      </div>
    </div>
  </body>
</html>

style.css
body {
  background-color: #f0f0f0;
}

.card {
  background-color: #fff;
}

.plan {
  font-weight: bold; /* 太字にする */
  font-size: 24px;
}

.price {
  font-size: 20px;
}

.button {
  background-color: #0d6efd;
  color: #fff;
  font-size: 16px;
}

16進数カラーコード

#f0f0f0や#0d6efdのように、6桁の英数字で色を指定する記法を16進数カラーコードと呼びます。左から順に2桁ずつが、それぞれ赤・緑・青の成分を16進数で表しています。

また、省略形として3桁で指定することもできます。例えば、#1daは#11ddaaと同じ意味になります。

幅と高さ

今のところ、カードの幅が画面いっぱいに広がってしまっています。

widthプロパティを指定する前のカード

widthプロパティで要素の幅を設定することができます。カードに適切な幅を設定するには、次のようにします。

.card {
  background-color: #fff;
  width: 240px;
}

widthプロパティを指定したカード

なお、widthプロパティで幅を設定したのと同様に、高さを設定したい場合はheightプロパティを使うことができます。

幅と高さ​

ボーダー​

マージン​

パディング​

フレックスボックス​

flex-directionプロパティ​

justify-contentプロパティ​

align-itemsプロパティ​

レスポンシブデザイン​

演習問題​

幅と高さ

ボーダー

マージン

パディング

フレックスボックス

`flex-direction`プロパティ

`justify-content`プロパティ

`align-items`プロパティ

レスポンシブデザイン

演習問題