本記事はこんな方にオススメ
「箇条書きのリストの作り方が知りたい方」
「1.2.3…と順序を示したリストを作りたい方」
「目次機能を作れる様になるためのHTMLの基礎が知りたい方」
「MacBookを使って作業をする方」
本記事の内容
ブログやサイト等でよく見かけるリスト表示。
単に箇条書きとして項目を並べたものもあれば、1.2.3…と数字の振られたものまで様々です。
今回はweb初心者が押さえておくと便利な２つの公式を使って、HTMLを使った実践にも役立つ２つの基本リストを作っていきます。
HTMLを学びたい方は是非この機会にリストの作り方を学んで、他のHTMLに応用してみてくださいね♩
[Web初心者でも簡単] HTMLでリストを作ってみよう（HTML実用編２）
今回の記事のゴール
今回作るリストはこんなもの
今回作るリストはこの様なものです。
この記事を読み進めると、Web初心者の方でも上の様な２つのリストを作ることができます。
このリストの作り方は、例えばHTMLで目次を作るときなどに応用されるので、この機にぜひ押さえてしまいましょう。
とっても簡単です♩
今回の目次作りで身につく知識
- 箇条書きリストの作り方
- 数値表示リストの作り方
- 目次を作るときに応用できる基礎知識
リスト作りから始めよう
リストの表示は箇条書きリストと、数値表示のリストと、大きく分けて２つあります。
正直、機能なしのシンプルな目次だけならこの２つのリストを使うだけでもOKです♩
２つの違いは「u」か「o」かというシンプルな違いだけなので、片方のリスト作りが分かれば、もう一方のリストも簡単にできてしまいます♩
箇条書きリスト
先ずは箇条書きのリストから紹介していきます。
箇条書きリストで使うHTMLタグの公式
今回使うHTMLタグは、こちらです！
<li>○○</li>
</ul>
次はこの公式を使って、具体的に見ていきましょう。
箇条書きリストを作ってみよう
例えばこんなリストを作る時、
HTMLはこの様になっています。
今回は箇条書きリストの指定をする<body>から</body>の部分を説明していきます。
まず、<ul>でこれから箇条書きリストを作成するという宣言をPCの司令部に伝えています。
次に、<li>箇条書きの項目</li>を順次並べていき、
最後は</ul>で箇条書きリストを作成が終了した事をPCの司令部に伝えています。
なので、実際にリストを作成するときは
<li>○○</li>の中身である○○の部分をご自由に変えてみてください。
そのフォーマット部分の意味がよく分からない方はこのままコピペして頂くか、
別記事にHTMLのフォーマット基礎をまとめますので、そちらの記事でご確認ください。
数値表示リスト
では次は数値で示されたリストです。
数値表現リストで使うHTMLタグの公式
今回使うHTMLタグは、こちらです！
<li>○○</li>
</ol>
先ほどの箇条書きリストとの違いは、<ul>か、<ol>かという部分のみです♩
数値表現リストを作ってみよう
では具体的に見ていきましょう。
例えばこんなリストを作る時、
HTMLはこの様になっています。
HTMLリストの基礎公式２つ
今回ご紹介したリスト２つのHTMLタグの公式２つをまとめます。
箇条書きリスト
<li>○○</li>
</ul>
数値表現リスト
<li>○○</li>
</ol>
ふたつのリストの違いは、<ul>か<ol>というシンプルな違いのみです。
難しいものではないので、ぜひこの機会にマスターして他のHTML作りにつなげていきましょう♩
以上、jazziでした！
コメント