htmlで箇条書きするol・ulタグの使い方と装飾方法を初心者向けに解説
WEBサイトで記事を作っている時、liタグやol（オーエル）タグというコードを目にしたことはありませんか？
いざ、きれいな文章をまとめたい時に、olタグの概要や使い方を知らないとどんな書き方をすべきか迷ってしまいますよね。
では、olタグは記事中のどんな場面で使うのでしょうか？
実際のソースコードを見ないとどのようにコーディングすれば良いか分からないと思います。
今回、WEBCAMP NAVIは、HTMLで使うolタグの使い方を徹底的に解説していきます！
- olタグとは
- olタグの使い方
- 装飾と箇条書きと組み合わせ
ここで分かるのは最近HTMLの勉強をしている人向けにol（オーエル）タグの使い方やulタグの違いです。
この記事を見ればolタグの使い方が必ず見つかりますので、ぜひ最後までお読みください！
＼プログラミングスクールを比較／
|
DMM WEBCAMP |
COACHTECH |
RUNTEQ |
|
|---|---|---|---|
|
|
|
|
| 目指せる姿 | WEBエンジニアへの転職 |
フリーランスエンジニア | WEBエンジニアへの転職 |
| 分割払い | ○ | ○ | ○ |
| 補助金 | ○ | × | ○ |
| 転職保証 | ○ | × | × |
| 受講期間 | 3ヶ月〜 | 3ヶ月〜 | 5ヶ月〜 |
| 特徴 |
【IT業界の転職を一番に考えたい方向け】 大手DMMが運営のプログラミングスクール 転職成功率98.8% 豊富なキャンペーンや補助金制度あり |
【フリーランスを目指したい方向け】 フリーランスのエンジニアを最短で目指す エンジニアと共に実際の案件開発を担当 |
【とことん勉強してから転職したい方向け】 1,000時間（約9カ月）のカリキュラムでしっかり勉強 企業の求める即戦力のWEBエンジニアを目指す |
| 料金 | 329,350円〜 ※給付金適用後 |
42万9,000円~ | 55万円 |
|
公式HP |
公式HP |
公式HP |
olタグとは
olとはordered listの略で、「オーエル」や「オーダーリスト」という読み方をします。
名前の通り順序のある番号付きのリストを表示する際に使用するタグで、順序がないリストの場合は、代わりにulタグを使用します。
リストの各項目はliタグで記述し、type属性により、算用数字、アルファベット小文字、アルファベット大文字、ローマ数字大文字、ローマ数字小文字を指定することが可能です。
olタグの使い方
HTMLでは箇条書きやリストを作りたい場合、ul、ol、liの3つのタグを使います。
まずは3つのタグの基本的な使い方から解説していきます。
liタグは何回使ってもOKで、箇条書きの項目数分だけ増やしましょう。
これを実際にHTMLコードを書いてブラウザで表示します。
ulとliの箇条書き
<ul>
<li>1つめの項目</li>
<li>2つめの項目</li>
<li>3つめの項目</li>
</ul>
ulとliを使うと各項目の先頭が黒ポチの箇条書きとなります。
この黒ポチのデザインは変えることができますが、それは後半で解説します。
olとliの箇条書き
<ol>
<li>1つめの項目</li>
<li>2つめの項目</li>
<li>3つめの項目</li>
</ol>
番号付きの箇条書きを表示したいなら、ulのかわりにolを使います。
各項目の左側に1、2、3と番号の入った箇条書きが出来上がりです。
ulとolの違いについて
２つのタグには以下の違いがあります。
- ul：黒ポチの箇条書き
- ol：番号付きの箇条書き
箇条書きと装飾の組み合わせ
このまま箇条書きを使っても良いのですが、CSSの変更で見た目をさらに変えることも可能です。
ここからは箇条書きの見た目を変える方法を紹介します。
マーカー表示を変更する
ulの黒ポチやolの番号を表示させるなら、list-style-typeプロパティが使えます。
たとえばul {list-style-type: square}とすると以下のように黒ポチが四角くなります。
<ul>
<li>HTMLとCSSを勉強しよう</li>
<li>HTMLとCSSの基本</li>
<li>WEBデザインを学ぼう</li>
</ul>
ul {list-style-type: square}
また番号の表示をアルファベットにしたいなら、ol{list-style-type: upper-latin}とすると変えることができます。
<ol>
<li>HTMLとCSSを勉強しよう</li>
<li>HTMLとCSSの基本</li>
<li>WEBデザインを学ぼう</li>
</ol>
ol {
list-style-type: upper-latin;
}
モノクロの箇条書き
モノクロでシンプルな箇条書きで、デザインを崩さずにさらっと使うことができると思います。
また、backgroundは16進数で色の変更をすることも可能です。
ul, ol {
background: #fcfcfc;/*背景色*/
padding: 0.5em 0.5em 0.5em 2em;/*ボックス内の余白*/
border: solid 3px gray;/*線の種類 太さ 色*/
}
ul li, ol li {
line-height: 1.5; /*文の行高*/
padding: 0.5em 0; /*前後の文との余白*/
}
二重線の箇条書き
borderをdoubleにして線を太めにするとこうなります。
また、文字周りを広げたいならpaddingの値を大きくするだけです。
ul, ol {
color: #668ad8;
border: double 5px #668ad8;/*二重線 太さ 色*/
background: #f1f8ff;
padding: 0.5em 0.5em 0.5em 2em;
}
ul li, ol li {
line-height: 1.5;
padding: 0.5em 0;
}
そのほかにもline-heightを使ってHTMLとCSSの行間指定を変更するとリストが見やすくカスタマイズできると思います。
こちらの記事でそれらの種類を詳しく解説しているので、気になる方は是非目を通してみてください。
まとめ
今回はHTMLでolタグを使う方法についてご紹介しました。
今回、紹介した埋め込みコードはCSSを活用してさらにリストデザインのバリエーションを増やすこともできます。
olタグは箇条書き（リスト）の活用しか意味はないですが、だからこそ汎用的に使われています。
