Home / プログラミング / HTMLのリストの基本的な使い方とカスタマイズ方法

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

Pocket

ca58c53de522858694c1391741cbb244_s

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

スポンサーリンク

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

77f028b6fa62a0ce9bfe88ab2ca76e3b_s

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

1.並列リスト

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

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

2.順序付きリスト

ol(ordered list)要素を使えば、順序付きのリストを作成することができます。<ol>で始めて</ol>で閉じて、リスト化したい項目を<li></li>で囲みます。これにより、1、2、3、というように順序付きのリストが作成できます。

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

3.定義リスト

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

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

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

1.いちばんやさしいHTML5&CSS3の教本

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

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

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

1 2

スポンサーリンク

スポンサーリンク

Check Also

【入門編】Androidアプリ開発のためのおすすめ勉強法全8選

Androidのアプリを作って …

Facebookでのご購読が便利です