ここでは箇条書きについて説明します。箇条書きと言いますとこのサイトのまとめにも使われている行頭に点を付けて縦に並べるようなイメージがあると思います。それもなのですが、皆様がよくホームページなどで見られるメニューにも、同じ要素がつかわれていることもあります。実際にリストを書いてみましょう。必要な箇所以外は省略しています。
<body>
<h1>人気の犬種TOP3</h1>
<ul>
<li>チワワ</li>
<li>トイプードル</li>
<li>ロングコートチワワ</li>
</ul>
</body>そのまま保存して表示してみましょう。見出しの下に以下のようなリストが表示されましたでしょうか。
ul要素の中にリストに載せる分の数だけli要素を作成し、表示すると行頭が点になって表示されましたね。
箇条書きにはもう1つol要素というのがあります。ul要素をol要素に置き換えてみましょう。
<body>
<h1>人気の犬種TOP3</h1>
<ol>
<li>チワワ</li>
<li>トイプードル</li>
<li>ロングコートチワワ</li>
</ol>
</body>
どうですか？違いが明白ですね。ol要素の場合、点が数字に変わりました。
ul要素は順番を考慮せず、ol要素は順番通りに認識して欲しい時に使います。ul要素とol要素はこのコンテンツ内が箇条書きであるということを示す要素で中にli要素で個別のリスト情報を記述します。
箇条書きをデザインする
点や数字だけだと地味ですね。少しデザインを加えてみましょう。以下のようにcssを記述してください。
ol要素はulに戻してください。
ul li {
list-style: none;
}
ul li::before {
content: "\f138";
font-family: FontAwesome;
color: #2aa5d9;
}list-style: none;でデフォルトで点が付くスタイルを消しています。次に、擬似要素と呼ばれる要素の一部に適用させるものを使っています。beforeという要素の前に適用させる要素を用いて、li要素の前にマークがくるように指定しています。詳しくは別記事で説明しますが、ここではこんなデザインの仕方もあるんだと頭にいれておいてください。
font-familyという文字の指定に使うプロパティでFontAwesomeというアイコンを表示するときに非常に便利なサービスがあるのでそれを使います。Font Awesomeの使い方はhtmlのhead内で以下のように記述します。
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
</head>
点がオシャレなアイコンに変わりましたね。Font Awesomeの詳しい使い方の記事も後日作成しますので、ひとまずこんな素晴らしいサービスもあることを覚えておいてください。web制作をする上で必ず役に立ちます。
まとめ
- 箇条書きするためにul要素とol要素を使う
- ul要素は順番を考慮しない、ol要素は順番を厳密に指定する場合に使用
- リストにデザインを加える場合などに擬似要素を用いることが多い
- FontAwesomeというアイコンを使用できるサービスがある
コメント