HTMLのリストの基本的な使い方とカスタマイズ方法

※本ページにはプロモーション(広告)が含まれています

HTMLでは便利なリストタグがあります。何かを箇条書きで説明する場合や、手順を説明する際に使えて非常に便利です。ここでは 「HTMLのリストの基本的な使い方とカスタマイズ方法」 について、紹介いたします。これからHTMLを勉強する予定の方は、ぜひ活用してみてください！

１.HTMLリストの使い方とカスタマイズ方法

ここでは、HTMLリストの内容と簡単なカスタマイズ方法について紹介します。

１.並列リスト

HTMLで並列リストを作る際には ul（unordered list）要素を使用 します。そしてリスト化したい項目をそれぞれli（list item）要素で示します。並列リストを作る際は簡単で、＜ul＞を始め＜/ul＞で閉じます。

リスト化したい各項目を＜li＞、＜/li＞で囲みます。これにより、●から始まるリストが完成します。何かを箇条書きで説明したい場合に使えるリストです。＜ul＞＜/ul＞タグで囲まれた中に、さらに＜ul＞＜/ul＞タグを加えることで、二段の並列リストが作れます。

２.順序付きリスト

ol（ordered list）要素 を使えば、順序付きのリストを作成することができます。＜ol＞で始めて＜/ol＞で閉じて、リスト化したい項目を＜li＞＜/li＞で囲みます。これにより、１、２、３、というように順序付きのリストが作成できます。

手順を説明する時などに使えるリストタグです。＜ul＞＜/ul＞タグの中に＜ol＞＜/ol＞を組み合わせることで、●のテーマに沿った、順序付きリストを作成できます。いくつか連続で手順の説明などがある場合におすすめの方法です。

３.定義リスト

dl要素 を使えば、定義リストのような形で表示できます。＜dl＞で始め、＜/dl＞で閉じます。リスト化したい各項目を＜dt＞＜/dt＞で囲みます。これにより、辞書のような定義リストを作れます。何か用語の説明などをしたい時に便利な便利なリストタグです。

２.HTMLリストをCSSで装飾する

HTMLリストは、ウェブサイトの情報を見やすく整理することを目的として利用するHTMLタグです。HTMLタグで記述するだけでも十分にその機能を果たしますが、デザイン性を考慮するならば、やはりCSSでの装飾はかかせません。

本項目では HTMLリストをCSSで装飾する方法 をご紹介します。参考にしつつ試してみてください。

１.リストマーク（ul）を変更する

ulのリストマークはデフォルトでは黒丸となっています。CSSプロパティ「list-style-type」を使うことで別のマークに変更することができます。

ul{
list-style-type: circle;
}

リストマークに画像を使用する

リストマークは「list-style-image」で画像を設定することができます。オリジナルアイコンなどを適用することで大幅にデザイン性の幅が広がります。

ul{
list-style-image: url(“../img/sample_img.png”);
}

２.リストマーク（・）を消す方法

そもそもリストマークを消したい場合には「list-style-type」にnoneの値を入れます。

ul{
list-style-type: none;
}

上記の記述をするとリスト化はされたままマークだけが消去されます。また、olの場合も同様の記述で消すことができます。

リストマークが消えない時は

「list-style-type」の値にnoneを設定してもリストマークが消えないことがあります。考えられるのはリストマークに背景画像が設定されているケースです。

ul{
list-style-type: none;
background-image: none;
}

上記のように背景画像を消す記述をしてみてください。リストマークが消えたか更新を押して確かめてみましょう。

３.リストマーク（ol）を変更する

olのリストマークも「list-style-type」で変更することができます。デフォルトの値にはdecimalが入れられています。

ol{
list-style-type: decimal-leading-zero;
}

上記のように記述すると「01,02,03」という感じに二桁の数字表記になります。リストが10個以上連なる時に使うと見やすくなるでしょう。

olリストで使える値

ulのリストマークは三種類しかありませでしたが、olのリストマークはバリエーションが豊富です。

順序付けに使われる一般的なものもあれば、ちょっとマニアックなものまで幅広いマークが用意されています。ウェブサイトの趣向に合わせて変えてみるのも面白いかもしれません。

２.HTMLリストのデザイン参考ページ3選

HTMLリストのデザインはリストマークを変更するだけではありません。リスト全体を装飾することでずっとオシャレなデザインにすることもできるんです。

全てのデザインを自分でやるのは大変ですから、サンプルを載せているページからコードをお借りして自分でアレンジする手法がおすすめです。

本項目では HTMLリストのデザイン参考ページ をご紹介します。デザインに悩んだ時に使わせてもらうことが多いサイトです。皆さんもぜひ参考にしてみてください。

①おしゃれなリストデザイン8選

グラデーションを使用したオシャレなリストやスタイリッシュなモノクロリストなど。目を引くようなデザインのコードを紹介しているページです。

HTMLコードとCSSコードが見やすいように分けられているので参考にしやすいです。
https://goworkship.com/magazine/html-css-lists-design/

②コピペでできる！CSSとhtmlだけのリストデザイン15選

見やすくなるようにリストに区切り線をつけたものや付箋紙風のコードを紹介しているページです。

COPYボタンを押すだけでクリップボードにコピーされるので楽ちんです！
https://copypet.jp/326/

③リストのデザインを装飾するCSSサンプル！HTMLの書き方も

チェック柄や水玉模様のリストデザインのコードを紹介しています。画像を使わずにCSSだけでここまでのデザインを実現できてしまうんですね。

CSSコードを表示ボタンを押すとコードが表示されます。
https://benri-no1.com/list/

３.HTMLの勉強におすすめの本

ここでは、HTMLを勉強する際におすすめの本について紹介いたします。

１.いちばんやさしいHTML５＆CSS３の教本

いちばんやさしいHTML５＆CSS３の教本は、初心者の方が HTMLとCSSを基礎から学べる本 です。初めてだと 間違えやすい箇所も丁寧に解説 してくれます。知識だけではなく、実践的なWebサイトを作りながら勉強できる本です。

構成内容：Webサイトを作成する準備しよう／HTMLの基本を学ぼう／共通部分のHTMLを作成しよう／共通部分から個別のページを作成しよう／CSSの基本を学ぼう／CSSで共通部分をデザインしよう／コンテンツのデザインを整えよう／スマートフォンに対応しよう／Webサイトを公開しよう／機能を追加して集客しようなど

２.作りながら学ぶHTML/CSSデザインの教科書

1 2