LabEx
ログイン登録

固定セクション ヘッダー付きのリスト

Beginner

This tutorial is from open-source community. Access the source code

はじめに

この実験では、各セクションに固定ヘッダー付きのリストを作成することで、CSS の世界とその機能を探ります。目的は、position: sticky プロパティを使用して、ユーザー エクスペリエンスを向上させるユーザー フレンドリーなインターフェイスを作成する方法を紹介することです。この実験を通じて、CSS を使用して視覚的に魅力的で機能的な Web ページを作成する方法を学びます。

これは Guided Lab です。学習と実践を支援するためのステップバイステップの指示を提供します。各ステップを完了し、実践的な経験を積むために、指示に注意深く従ってください。過去のデータによると、この 初級 レベルの実験の完了率は 100%です。学習者から 100% の好評価を得ています。

固定セクション ヘッダー付きのリスト

VM には既に index.html と style.css が用意されています。

各セクションに固定ヘッダー付きのリストを作成するには、次の手順に従います。

  1. リスト コンテナ (<dl>) に対して、overflow-y: auto を使用して垂直方向のオーバーフローを許可します。
  2. 見出し (<dt>) の position を sticky に設定し、top: 0 を適用することで、コンテナの上部に固定します。
  3. 次の HTML と CSS コードを使用します。

HTML:

<div class="container">
  <dl class="sticky-stack">
    <dt>A</dt>
    <dd>アルジェリア</dd>
    <dd>アンゴラ</dd>

    <dt>B</dt>
    <dd>ベニン</dd>
    <dd>ボツワナ</dd>
    <dd>ブルキナファソ</dd>
    <dd>ブルンジ</dd>

    <dt>C</dt>
    <dd>カーボベルデ</dd>
    <dd>カメルーン</dd>
    <dd>中央アフリカ共和国</dd>
    <dd>チャド</dd>
    <dd>コモロ</dd>
    <dd>民主主義人民共和国コンゴ</dd>
    <dd>共和国コンゴ</dd>
    <dd>コートジボワール</dd>

    <dt>D</dt>
    <dd>ジブチ</dd>

    <dt>E</dt>
    <dd>エジプト</dd>
    <dd>赤道ギニア</dd>
    <dd>エリトリア</dd>
    <dd>エスワティニ（元スワジランド）</dd>
    <dd>エチオピア</dd>
  </dl>
</div>

CSS:

.container {
  display: grid;
  place-items: center;
  min-height: 400px;
}

.sticky-stack {
  background: #37474f;
  color: #fff;
  margin: 0;
  height: 320px;
  border-radius: 1rem;
  overflow-y: auto;
}

.sticky-stack dt {
  position: sticky;
  top: 0;
  font-weight: bold;
  background: #263238;
  color: #cfd8dc;
  padding: 0.25rem 1rem;
}

.sticky-stack dd {
  margin: 0;
  padding: 0.75rem 1rem;
}

.sticky-stack dd + dt {
  margin-top: 1rem;
}

右下隅の「Go Live」をクリックして、ポート 8080 で Web サービスを実行してください。その後、Web 8080 タブを更新して Web ページをプレビューできます。

まとめ

おめでとうございます！固定セクション ヘッダー付きのリストの実験を完了しました。スキルを向上させるために、LabEx でさらに多くの実験を行って練習してください。