トップページへ
GoogleService
メニュー
サイト内検索
お問合わせ
[初めてのｗｅｂサイト作成 レッスン24]🌹レッスン24🌹
リスト（箇条書き）の種類と指定方法を３通りご紹介します！
🌻パソコンのブラウザはGoogle Chromeを使用しています。
1. リストの種類と指定方法
長文がかいてあると、何だか小説みたいで読みづらかったりした経験はありませんか？
要点をまとめて箇条書きにしてあると、解りやすですよね！
今回は、リストの種類や指定方法について解説します。
1-1. マーク付きのリストで指定する方法
マーク付きリストのタグは、＜ｕｌ＞～＜/ｕｌ＞でリスト全体を囲みます。
そして、＜ｌｉ＞～＜/ｌｉ＞で個々のリスト項目を定義します。
初期値は、●（ｄｉｓｃ）が表示されます。
リストマークの種類はたくさんあるので、これを題材にコーディングしてみましょう！
今までに作ったファイルを編集して、桃色のコードを入力してね！
【ＨＴＭＬ】
<body>
<ul>
<li>ｎｏｎｅ（マークを表示しない）</li>
<li>ｄｉｓｃ（黒丸）</li>
<li>ｃｉｒｃｌｅ（白丸）</li>
<li>ｓｑｕａｒｅ（四角）</li>
<li>ｄｅｃｉｍａｌ（１から始まる数字）</li>
<li>ｄｅｃｉｍａｌ-ｌｅａｄｉｎｇ-ｚｅｒｏ（０から始まる数字）</li>
<li>ｌｏｗｅｒ－ｒｏｍａｎ（小文字のローマ字）</li>
<li>ｕｐｐｅｒ－ｒｏｍａｎ（大文字のローマ字）</li>
<li>ｌｏｗｅｒ－ｇｒｅｅｋ（小文字のギリシャ文字）</li>
<li>ｌｏｗｅｒ－ｓｌｐｈａ（小文字のアルファベット）</li>
<li>ｃｊｋ－ｉｄｅｏｇｒａｐｈｉｃ（漢数字一二三）</li>
<li>ｈｉｒａｇａｎａ（あいうえお順）</li>
<li>ｋａｔａｋａｎａ（カタカナアイウオエオ順）</li>
<li>ｈｉｒａｇａｎａ－ｉｒｏｈａ（ひらがなのいろは順）</li>
</ul>
</body>
【ＣＳＳ】
ul{
list-style-type: square;
}
🌼ブラウザで確認してみましょう！
1-2 番号付きのリスト
番号付きリストのタグは、＜ｏｌ＞～＜/ｏｌ＞でリスト全体を囲みます。
そして、＜ｌｉ＞～＜/ｌｉ＞で個々のリスト項目を定義します。
先程の＜ｕｌ＞を＜ｏｌ＞に変えるだけです！
桃色のコードを入力してね！
【ＨＴＭＬ】
<body>
<ol>
<li>ｎｏｎｅ（マークを表示しない）</li>
<li>ｄｉｓｃ（黒丸）</li>
<li>ｃｉｒｃｌｅ（白丸）</li>
<li>ｓｑｕａｒｅ（四角）</li>
<li>ｄｅｃｉｍａｌ（１から始まる数字）</li>
<li>ｄｅｃｉｍａｌ-ｌｅａｄｉｎｇ-ｚｅｒｏ（０から始まる数字）</li>
<li>ｌｏｗｅｒ－ｒｏｍａｎ（小文字のローマ字）</li>
<li>ｕｐｐｅｒ－ｒｏｍａｎ（大文字のローマ字）</li>
<li>ｌｏｗｅｒ－ｇｒｅｅｋ（小文字のギリシャ文字）</li>
<li>ｌｏｗｅｒ－ｓｌｐｈａ（小文字のアルファベット）</li>
<li>ｃｊｋ－ｉｄｅｏｇｒａｐｈｉｃ（漢数字一二三）</li>
<li>ｈｉｒａｇａｎａ（あいうえお順）</li>
<li>ｋａｔａｋａｎａ（カタカナアイウオエオ順）</li>
<li>ｈｉｒａｇａｎａ－ｉｒｏｈａ（ひらがなのいろは順）</li>
</ol>
🌼ブラウザで確認してみましょう！
1-3 定義型のリスト
定義型リストのタグは、＜ｄｌ＞～＜/ｄｌ＞でリスト全体を囲みます。
そして、＜ｄｔ＞～＜/ｄｔ＞で個々の見出しを指定します。
そして、＜ｄｄ＞～＜/ｄｄ＞で個々の内容を指定します。
桃色のコードを入力してね！
【ＨＴＭＬ】
<body>
<dl>
<dt>ｎｏｎｅ</dt>
<dd>（マークを表示しない）</dd>
<dt>ｄｉｓｃ</dt>
<dd>（黒丸）</dd>
<dt>ｃｉｒｃｌｅ</dt>
<dd>（白丸）</dd>
<dt>ｓｑｕａｒｅ</dt>
<dd>（四角）</dd>
<dt>ｄｅｃｉｍａｌ</dt>
<dd>（１から始まる数字）</dd>
<dt>ｄｅｃｉｍａｌ-ｌｅａｄｉｎｇ-ｚｅｒｏ</dt>
<dd>（０から始まる数字）</dd>
<dt>ｌｏｗｅｒ－ｒｏｍａｎ</dt>
<dd>（小文字のローマ字）</dd>
<dt>ｕｐｐｅｒ－ｒｏｍａｎ</dt>
<dd>（大文字のローマ字）</dd>
</dl>
</body>
🌼ブラウザで確認してみましょう！
パソコン画面
スマホ画面
上手く表示されましたか？
★まとめ
いかがでしたか？
近年のｗｅｂページでは、文字ばかりが羅列されていると、読む気を失いそうなので要点をまとめて箇条書きにしたりしています。
今回は、ユーザーが読みやすく、そのｗｅｂページを魅力的に見せる✨テクニックです。
リストマークの種類はたくさんあるので、お好みで色々試してみてね(#^.^#)
次回レッスン25は、「画像を使用したリストの指定方法」をアップロードする予定です！
See you again Take care
(^.^/)))~~~bye!!
TOP