HTMLとCSS

8回目 「リストの話」

リストできれいに並べる

文章を箇条書きっぽくWEBで作ってみたけど、もう少しかっこよくしたい!
きれいに整った状態で並べたい!
そう思った時の出番が「リスト」になります。
今回はリストの制作の紹介をしていきます!

liとulとol

HTMLで初歩的なリストを作るにあたって必要なタグが<li>と<ul>と<ol>です。
この3つのタグを使って以下のように組みます。

ulを使った場合は「・」が表示されたものになります。

<ul>
<li>今日午前12時</li>
<li>市内の総合体育館受付にて</li>
<li>焼肉パーティーを行います。</li>
</ul>

↓表示はこうなります↓

  • 今日午前12時
  • 市内の総合体育館受付にて
  • 焼肉パーティーを行います。

olを使った場合は数字が表示されたものになります。

<ol>
<li>今日午前12時</li>
<li>市内の総合体育館受付にて</li>
<li>焼肉パーティーを行います。</li>
</ol>

↓表示はこうなります↓

  1. 今日午前12時
  2. 市内の総合体育館受付にて
  3. 焼肉パーティーを行います。

また、リストを作る際、ただの点や数字だけでは華がなくてつまらない、と思った時、点の代わりに画像を使うことも出来ます。
他にも紹介したのは縦並び表示のリストばかりですが、CSSを使うことによって横並びにすることも可能です。

と、今回はやや簡素になりましたが大丈夫だったでしょうか?
リストの話はここで一旦区切りますが、今後CSSを伴う画像化と横並びのリスト制作の紹介を考えているので、この記事に追記かリストの記事の第2弾を作ります。
その時は筆者の願望ですが、パワーアップ(してればいいなぁ)したリスト紹介をしますのでよろしくお願い致します。

では、ここまでご覧いただきありがとうございました。


コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)