white-space

メディアクエリ

overflow-x: scroll

<div class="table-wrap">
  <table class="price-table">
    <thead>
      <tr class="price-tr">
        <th class="price-thead-none"></th>
        <th class="price-thead-th">内容</th>
        <th class="price-thead-th">月額利用料</th>
        <th class="price-thead-th">初期費用</th>
      </tr>
    </thead>
  
    <tbody>
      <tr>
        <th class="price-tbody-th">フリー</th>
        <td class="price-td">まずは無料で試してみたい方向け</td>
        <td class="price-td">¥0</td>
        <td class="price-td">¥0</td>
      </tr>
  
      <tr>
        <th class="price-tbody-th">スタンダード</th>
        <td class="price-td">ベーシックなサポート付き</td>
        <td class="price-td">¥5,000</td>
        <td class="price-td" rowspan="2">¥1,500</td>
      </tr>
  
      <tr>
        <th class="price-tbody-th">プレミアム</th>
        <td class="price-td">アフターフォローも万全</td>
        <td class="price-td">¥10,000</td>
      </tr>
    </tbody>
  </table>
</div>
<div class="cta">
  <p class="cta-text">お問い合わせはこちらから</p>
  <a href="/contact" class="cta-button">お問い合わせ</a>
</div>


@media screen and (max-width: 768px) {
  .price-table {
    border-collapse: collapse;
    /* 問題1.スタイルの追加①【テキストの折り返し禁止】 */
    /* この下に解答してください */
    white-space: nowrap;
  }
  
  .table-wrap {
    /* 問題2.スタイルの追加②【横スクロール】 */
    /* この下に解答してください */
    overflow-x: scroll;
  }
}

th,
td {
  padding: 12px;
  border-right: 2px solid #ffffff;
  border-bottom: 2px solid #ffffff;
  text-align: center;
}

.price-thead-none {
  background-color: #ffffff;
}

.price-thead-th {
  background-color: #169267;
  color: #ffffff;
}

.price-tbody-th {
  background-color: #36be8e;
  color: #ffffff;
}

.price-td {
  background-color: #dcf2e3;
}

.cta {
  background-color: #e0f7fa;
  text-align: center;
  padding: 40px;
  margin-top: 64px;
}

.cta-text {
  font-size: 18px;
  font-weight: bold;
  color: #333;
  margin-top: 0;
  margin-bottom: 24px;
}

.cta-button {
  display: inline-block;
  padding: 10px 20px;
  background-color: #007bff;
  color: #fff;
  text-decoration: none;
  border-radius: 5px;
  font-size: 16px;
}

.cta-button:hover {
  background-color: #0056b3;
}


@media screen and (max-width: 768px) {
  .price-table {
    border-collapse: collapse;
    /* 問題1.スタイルの追加①【テキストの折り返し禁止】 */
    /* この下に解答してください */
  }

  .table-wrap {
    /* 問題2.スタイルの追加②【横スクロール】 */
    /* この下に解答してください */
  }
}

th,
td {
  padding: 12px;
  border-right: 2px solid #ffffff;
  border-bottom: 2px solid #ffffff;
  text-align: center;
}

.price-thead-none {
  background-color: #ffffff;
}

.price-thead-th {
  background-color: #169267;
  color: #ffffff;
}

.price-tbody-th {
  background-color: #36be8e;
  color: #ffffff;
}

.price-td {
  background-color: #dcf2e3;
}

.cta {
  background-color: #e0f7fa;
  text-align: center;
  padding: 40px;
  margin-top: 64px;
}

.cta-text {
  font-size: 18px;
  font-weight: bold;
  color: #333;
  margin-top: 0;
  margin-bottom: 24px;
}

.cta-button {
  display: inline-block;
  padding: 10px 20px;
  background-color: #007bff;
  color: #fff;
  text-decoration: none;
  border-radius: 5px;
  font-size: 16px;
}

.cta-button:hover {
  background-color: #0056b3;
}


表の横スクロール

<table>

<tr>

<th>

<thead>

表と見出しの作成

<tbody>

<td>

rowspan属性

colspan属性

表データの作成

border-collapse

width

border

text-align

padding

padding: 10px 20px 30px;

上記のような場合、余白は上が$(1)px、右が$(2)px、下が$(3)px、左が$(4)pxとなる。

background-color

color

表のスタイリング

表形式の料金プランを作成し、ウェブサイトへの導入方法を学びます。
明確でわかりやすい情報表示のためのテーブルデザイン技術を修得します。

0からWebサイト制作のコツを学び、案件獲得までに必要なスキルをキャッチアップします。

Web制作コース

【パーツ編📦】ウェブサイトの主要なセクションパーツを作成

「料金プラン表を実装しよう」レッスンの総復習クイズです。