[初めてのwebサイト作成]

🌹レッスン24🌹

リスト(箇条書き)の種類と指定方法を3通りご紹介します!


 🌻パソコンのブラウザはGoogle Chromeを使用しています。

1. リストの種類と指定方法

長文がかいてあると、何だか小説みたいで読みづらかったりした経験はありませんか?

要点をまとめて箇条書きにしてあると、解りやすですよね!

今回は、リストの種類や指定方法について解説します。




 1-1. マーク付きのリストで指定する方法

マーク付きリストのタグは、<ul>~</ul>でリスト全体を囲みます。

そして、<li>~</li>で個々のリスト項目を定義します。

初期値は、●(disc)が表示されます。

リストマークの種類はたくさんあるので、これを題材にコーディングしてみましょう!

今までに作ったファイルを編集して、桃色のコードを入力してね!


【HTML】


<body>
<ul>
<li>none(マークを表示しない)</li>
<li>disc(黒丸)</li>
<li>circle(白丸)</li>
<li>square(四角)</li>
<li>decimal(1から始まる数字)</li>
<li>decimal-leading-zero(0から始まる数字)</li>
<li>lower-roman(小文字のローマ字)</li>
<li>upper-roman(大文字のローマ字)</li>
<li>lower-greek(小文字のギリシャ文字)</li>
<li>lower-slpha(小文字のアルファベット)</li>
<li>cjk-ideographic(漢数字一二三)</li>
<li>hiragana(あいうえお順)</li>
<li>katakana(カタカナアイウオエオ順)</li>
<li>hiragana-iroha(ひらがなのいろは順)</li>
</ul>
</body>

【CSS】


ul{	
	list-style-type: square;
	}

🌼ブラウザで確認してみましょう!




 1-2 番号付きのリスト

番号付きリストのタグは、<ol>~</ol>でリスト全体を囲みます。

そして、<li>~</li>で個々のリスト項目を定義します。

先程の<ul>を<ol>に変えるだけです!

桃色のコードを入力してね!

【HTML】


<body>
<ol>
<li>none(マークを表示しない)</li>
<li>disc(黒丸)</li>
<li>circle(白丸)</li>
<li>square(四角)</li>
<li>decimal(1から始まる数字)</li>
<li>decimal-leading-zero(0から始まる数字)</li>
<li>lower-roman(小文字のローマ字)</li>
<li>upper-roman(大文字のローマ字)</li>
<li>lower-greek(小文字のギリシャ文字)</li>
<li>lower-slpha(小文字のアルファベット)</li>
<li>cjk-ideographic(漢数字一二三)</li>
<li>hiragana(あいうえお順)</li>
<li>katakana(カタカナアイウオエオ順)</li>
<li>hiragana-iroha(ひらがなのいろは順)</li>
</ol>

🌼ブラウザで確認してみましょう!




 1-3 定義型のリスト

定義型リストのタグは、<dl>~</dl>でリスト全体を囲みます。

そして、<dt>~</dt>で個々の見出しを指定します。

そして、<dd>~</dd>で個々の内容を指定します。

桃色のコードを入力してね!

【HTML】


<body>
<dl>
<dt>none</dt>
<dd>(マークを表示しない)</dd>
<dt>disc</dt>
<dd>(黒丸)</dd>
<dt>circle</dt>
<dd>(白丸)</dd>
<dt>square</dt>
<dd>(四角)</dd>
<dt>decimal</dt>
<dd>(1から始まる数字)</dd>
<dt>decimal-leading-zero</dt>
<dd>(0から始まる数字)</dd>
<dt>lower-roman</dt>
<dd>(小文字のローマ字)</dd>
<dt>upper-roman</dt>
<dd>(大文字のローマ字)</dd>
</dl>
</body>

🌼ブラウザで確認してみましょう!

パソコン画面

スマホ画面


上手く表示されましたか?




★まとめ

いかがでしたか?

近年のwebページでは、文字ばかりが羅列されていると、読む気を失いそうなので要点をまとめて箇条書きにしたりしています。

今回は、ユーザーが読みやすく、そのwebページを魅力的に見せる✨テクニックです。

リストマークの種類はたくさんあるので、お好みで色々試してみてね(#^.^#)

次回レッスン25は、「画像を使用したリストの指定方法」をアップロードする予定です!

See you again Take care (^.^/)))~~~bye!!



Ads by Google

TOP