はじめに
この実験では、各セクションに固定ヘッダー付きのリストを作成することで、CSS の世界とその機能を探ります。目的は、position: sticky
プロパティを使用して、ユーザー エクスペリエンスを向上させるユーザー フレンドリーなインターフェイスを作成する方法を紹介することです。この実験を通じて、CSS を使用して視覚的に魅力的で機能的な Web ページを作成する方法を学びます。
This tutorial is from open-source community. Access the source code
💡 このチュートリアルは英語版からAIによって翻訳されています。原文を確認するには、 ここをクリックしてください
この実験では、各セクションに固定ヘッダー付きのリストを作成することで、CSS の世界とその機能を探ります。目的は、position: sticky
プロパティを使用して、ユーザー エクスペリエンスを向上させるユーザー フレンドリーなインターフェイスを作成する方法を紹介することです。この実験を通じて、CSS を使用して視覚的に魅力的で機能的な Web ページを作成する方法を学びます。
VM には既に index.html
と style.css
が用意されています。
各セクションに固定ヘッダー付きのリストを作成するには、次の手順に従います。
<dl>
) に対して、overflow-y: auto
を使用して垂直方向のオーバーフローを許可します。<dt>
) の position
を sticky
に設定し、top: 0
を適用することで、コンテナの上部に固定します。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 でさらに多くの実験を行って練習してください。