リストの表示・装飾 (HTML,CSS)

サイトマップのような「項目数が多くて長くなるリスト」に活用すると便利な、「項目をクリックすることで深い階層が現れるリスト」の作り方をご紹介。リストが長い場合は、どこに何があるのかが把握しにくくなります。初期状態ではリストを「折り畳まれた状態」にしておき、閲覧者が見たいと思う階層だけをその都度表示する方が、望みの項目が探しやすくなって便利です。

名称(用語)と説明文(定義)をセットにしてリスト表示する「定義型リスト」を活用してみましょう。HTMLのdl要素・dt要素・dd要素を使って作り、スタイルシートで装飾することで簡単に使えます。用語説明にも便利ですが、「友達のウェブサイトを紹介するリンクリスト」などにも活用できます。記述方法と装飾方法をご紹介！

ol要素とli要素で作る「連番リスト」（番号付きリスト）は、算用数字で「1」から順に番号を割り振るだけが表示方法ではありません。算用数字以外も使えますし、途中の番号から開始することもできますし、HTML5では逆順にカウントすることもできます。意外と気づきにくい活用方法をご紹介。

ul要素とli要素で作る「リスト」（箇条書きなど）をスタイルシートで装飾したとき、ブラウザによって表示が大きく異なってしまった経験はありませんか？リストの装飾でのブラウザ間の差について原因と対策をご紹介。

スタイルシートでリスト（ul要素）の文字サイズを指定すると、リストの階層が深くなるにつれて、どんどん文字が小さくなってしまう可能性があります。スタイルシートだけを使ってスマートに解決してみましょう。

HTMLで作るリストの先頭記号は、黒丸や白丸など味気ないものですね。この先頭記号を好きな画像に変更できたら良いなと思ったことはありませんか？スタイルシート(CSS)で装飾すれば、簡単に実現できます。