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

LINEで送る
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デザインの教科書

作りながら学ぶHTML/CSSデザインの教科書は、サイトを作りながら実践的な知識を身に付けられる本です。基礎的な内容からHTMLを学びたい方におすすめです。サイトを作り始めたい場合にも分かりやすい内容でおすすめです。

構成内容:HTMLファイルを作成しよう/CSSで装飾しよう/画像を編集しHTMLで表示しよう/共通部分の作成とレイアウト/リンクを設定しナビゲーションを作り込もう/サイトに動きをつけよう/サイトの公開と仕上げなど

3.HTML5&CSS3標準デザイン講座

HTML5&CSS3標準デザイン講座は、分かりやすく丁寧に解説されているため、HTML初心者の方におすすめの本です。考え方や知識を身に付ける講義パートと、実際にサンプルのページを作る実習パートがあるため、しっかりと基礎知識を学べます。

構成内容:HTMLで文書を作成する/CSSで文書を装飾する/CSSレイアウトの基本/本格的なHTML5によるマークアップを行うための基礎知識/本格的なWeb制作のための設計と準備/実践的なWebサイトのコーディング/CSS3入門など

4.デザインの学校 これからはじめるHTML&CSSの本

デザインの学校 これからはじめるHTML&CSSの本は、HTML初心者向けの入門書です。シンプルなWebページを作りながら勉強してけます。図などもあり分かりやすく解説してあるため、他の本で勉強が続かなかった方でも集中して勉強できます。

構成内容:Webページについて知ろう/HTMLの基本を理解しよう/Webページを作ろう/サブページを作ろう/CSSの基本を理解しよう/CSSでレイアウトしよう/ページをデザインしよう/CSSでテキストをデザインしよう/Webページを公開しようなど

5.スラスラわかるHTML&CSSのきほん

スラスラわかるHTML&CSSのきほんは、HTMLとCSSの基礎をしっかりと学べる本です。フリー素材などが準備されており、使いながら実践的知識を身に付けれます。サイトの作成手順も丁寧に解説されています。

構成内容:Webサイト制作を始める前に/HTMLの基礎/制作の準備と基本のHTML/見出し、段落、リスト/リンクと画像の挿入/CSSの基礎/CSSでページのスタイルを調整/フロートとテーブルのスタイル/フォームの作成/Webサイトの公開など

6.はじめてのHTML+CSS

はじめてのHTML+CSSは、HTMLとCSSを実際にウェブサイトを作りながら基礎から学べる本です。シンプルで分かりやすい内容となっており、初心者の方でも学びやすいです。実際にサイトを制作しながら実践的スキルを身に付けていけます。

構成内容:ウェブサイトの制作を始める前に/HTMLファイルを作成する/HTMLで情報の意味付けをする/CSSで文字スタイルを指定する/リスト要素でメニューを作る/メインメニューのリンクを指定する/メインメニューのスタイリングなど

7.HTML5+CSS3の新しい教科書

HTML5+CSS3の新しい教科書は、テキスト説明がメインの本です。サイト制作に必要な基本知識がしっかりと学べます。制作工程がしっかりと身に付けれますので、まずは手を動かすよりも知識を覚えたいという方におすすめです。

構成内容:Webサイトの構造を理解する/制作に入る前の準備/HTMLでページの骨格をつくる/HTML&CSSの基本ルール/文字・見出し・段落の設計/リンクと画像の設定/リストとテーブルを組む/ナビゲーションをつくる/フォームをつくる/Webページをレイアウトなど

8.スタートアップHTML5

スタートアップHTML5は、HTMLだけでなくCSSやJavaScriptを学べる本です。まったくの未経験者向けではなく、少し勉強したことがある方向けの内容です。バランスよく3言語について学べます。構成内容:インターネットとHTML5/HTMLの基礎/CSSの基礎/JavaScript入門/CSSを活用したWebページ/CSSの活用など

まとめ

いかがでしたでしょうか。今回「HTMLのリストの基本的な使い方とカスタマイズ方法」について紹介しました。代表的な3つのリストタグは非常に使いやすいですし、何かと便利ですので覚えておきましょう。箇条書きや手順などを説明したい場合に活用できます。また、これからHTMLの勉強を始める方は、気になる本があれば、ぜひ直接見てみてください!

スポンサーリンク

LINEで送る
Pocket

Facebookでのご購読が便利です