go on program

【HTML/CSS】ul・ol・liタグでリスト作成(箇条書き)の作り方

2020/05/08

HTMLのul、ol、liタグでリスト作成(箇条書き)を作る方法を紹介します。
このタグをうまく活用することで、箇条書き以外でもいろんなところで利用できます。

ul・ol・liとは

HTMLでリスト作成(箇条書き)するときに使用します。
<li>タグでリストの項目を作り、<ul>、もしくは <ol>のどちらからで囲みます。
ですので、<ul>と<li>、または、 <ol>と<li>のセットで使用し、<li>は複数使用できます。

書き方

<ul>
  <li>リストの内容1<li>
  <li>リストの内容2<li>
  <li>リストの内容3<li>
</ul>

ulとolの違いについて

<ul>と<ol>では、表示が異なります。
中黒の箇条書きを作成したい場合は<ul>タグを使用し、順番のある箇条書きを作成する場合は<ol>を使用します。

<ul>の書き方・作成例

<ul>
  <li>リストの内容1<li>
  <li>リストの内容2<li>
  <li>リストの内容3<li>
  <li>リストの内容4<li>
</ul>

中黒で箇条書きが表示されます。

<ol>の書き方・作成例

<ol>
  <li>リストの内容1<li>
  <li>リストの内容2<li>
  <li>リストの内容3<li>
  <li>リストの内容4<li>
</ol>

番号で箇条書きが表示されます。

リスト作成(箇条書き)以外の使い方

<ul>タグは、リスト作成以外でも使います。
例えば、ナビ(nav)、カテゴリーの表示などブロックごとに使用したい場合に使います。

、カテゴリーの表示などブロックごとに使用したい場合に使います。

書き方

<ul>
  <li>
    <div>ブロックの内容1</div>
  <li>
  <li>
    <div>ブロックの内容2</div>
  <li>
  <li>
    <div>ブロックの内容3</div>
  <li>
</ul>

この場合、リストダグの中黒(・)をCSSで非表示に設定します。

非表示の書き方

「list-style: none; 」タグを使用することで非表示に設定できます。

cssの書き方

ul {
 list-style: none;
}

おさらい

リストタグは状況によって、<ul>、<ol>で使いかける必要があります。
CSSでデザインを工夫することで、観やすくわかりやすいものになります。
また、ナビ(nav)やブロックごとに表示するなど、いろんなところで使用されます。

関連記事
RELATED