初心者がゼロから始める【HTML】プログラミング【学習3日目】リストの作り方

今回はHTMLを使って【リストを作成】する方法を学んだので、使った要素などをまとめていきます。

改行方法について

pの要素の中に入力した住所を見やすくするために、改行要素の<br>を入れて改行をしました。

実際にブラウザ画面に表示すると、<br>のところで改行されています。

区切り線を入れてみる

ブログ記事などでたまに使われている区切り線を入れてみます。

TwitterとInstagramの間に<hr>を入れることによって区切り線を入れることができます。

ブラウザで表示すると区切り線が入っています。

リストの作り方

ブラウザ表示したものがこちら

<ul></ul>要素の中に<li></li>要素を入れることで『・』が付き、<ol></ol>要素の中に<li></li>を入れることで『数字』が付きます。
<ol>の中の<li>を増やすことで、4・5と数字が増えていきます。

ひとつずつ入力していくと大変なので、<li>のをいくつにするか決まっていれば、ol>li*4と入力すると<li>が4つになり数字の部分を変えることで好きな数を簡単に入力できます。

入れ子の作り方

ブラウザ表示がこちら

<ul>要素を使うことで、上記のような入れ子を作ることができます。

説明リストの作り方

ブラウザ表示がこちら

<dl>要素の中に<dt>要素があり、説明文として<dd>要素を使います。

今回はリストの作り方について学習しました。
文章を見やすくするときに、リストの活用は必須なのでしっかりと覚えていきたいと思います！