ホームページ作成

【ホームページ作成】リストの表示・装飾 (HTML,CSS)

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

HTMLやスタイルシート（CSS）を使ったリストの表示、装飾方法について解説しました。

クリックで深い階層が現れるリストの作り方

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

ガイド：西村文宏
名称と説明をセットにした「定義型リスト」を活用する

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

ガイド：西村文宏
意外と気づきにくい連番リストの使い方

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

ガイド：西村文宏
リスト(ul要素)を装飾した際の表示差を解消

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

ガイド：西村文宏
リストの文字がどんどん小さくなる！？

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

ガイド：西村文宏
CSSでリストの先頭記号に画像を指定する

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

ガイド：西村文宏

マネしたくなるアイデア住宅

住まいには、人の個性がよく現れるもの。同じ空間をどのように使うかで、雰囲気も、快適さも大きく変わってくる。ここでは、「建築家と家を建てる」ガイドの川畑博哉氏が厳選した10軒を紹介し、建築家それぞれのこだわりのポイントを紹介しよう。建築のプロたちが考え出した、マネしたくなるアイデアが満載！さぁ、いますぐチェック！