[点を消す方法] htmlのulタグの意味は? 読み方・入れ子にする方法も分かりやすく解説!

この記事は上記のような疑問を解消するものとなっています。

ul要素は、順序なしリストを表現するための要素です。

リストの各項目はli要素で記述します。

よく使用する要素の一つなのでしっかりとul要素を理解しておきましょう。

そこでこの記事ではul要素について詳しく解説していきます。

気になる方は是非最後まで読んで頂ければと思います。

1.ul要素の意味は? 読み方は?

ul要素の「ul」とは「unordered list（順序がないリスト）」の略で、その名の通り順序がない箇条書きのリストを表示する際に使用するタグです。

読み方は「ユーエルヨウソ」です。

リストの各項目はli要素で記述し、type属性により、黒丸、白丸、黒い四角を指定することが可能です。

また、li要素にtype属性をつけることで項目ごとに黒丸、白丸、黒い四角のマークを分けることができます。

番号順がついたリストを作りたいというときもあるかと思います。

そんなときはol要素で全体を囲み、各項目はli要素を使って表現します。

↓↓↓↓ ol要素について詳しく知りたい方は以下の記事をご覧になって下さい。

2021年5月31日数字付きリスト「olタグ」とは? ul要素の違い・丸数字表示方法も分かりやすく解説!

2.ul要素の使い方

それではul要素の使い方をみていきましょう。

ul要素は順序付けがいらないリストをつくりたいときに使用します。

例えば、条件、必要な物をリストアップしたりといった場合に使います。

基本的にul要素とli要素のセットで箇条書きリストを作っていきます。

li要素は何個使っても大丈夫です。

黒丸アイコン

type=”disc”とすることで黒丸アイコンを指定することができます。

・・・

<ul type="disc">
 <li>リスト項目1</li>
 <li>リスト項目2</li>
 <li>リスト項目3</li>
</ul>

・・・

白丸アイコン

type=”circle”とすることで黒丸アイコンを指定することができます。

・・・

<ul type="circle">
 <li>リスト項目1</li>
 <li>リスト項目2</li>
 <li>リスト項目3</li>
</ul>

・・・

四角アイコン

type=”sqare”とすることで黒丸アイコンを指定することができます。

・・・

<ul type="sqare">
 <li>リスト項目1</li>
 <li>リスト項目2</li>
 <li>リスト項目3</li>
</ul>

・・・

3.入れ子にする方法は?

ul要素中のli要素は、何層でも入れ子にして重ねることができます。

例えば、「ul要素 li要素」の中に「ul要素 li要素」を入れ子にするという感じです。

li要素の中にはdl要素、p要素、img要素、div要素などのブロック要素、span要素などのインライン要素などを入れることができます。

それでは入れ子にする方法をみていきましょう。

以下は「ul要素 li要素」の中に「ol要素 li要素」を入れ子にしている例です。

・・・

<ul>
 <li>リスト大項目1
  <ol>
   <li>リスト小項目1</li>
   <li>リスト小項目2</li>
   <li>リスト小項目3</li>
  </ol>
 </li>
 <li>リスト大項目2
  <ol>
   <li>リスト小項目1</li>
   <li>リスト小項目2</li>
   <li>リスト小項目3</li>
  </ol>
 </li>
</ul>

・・・

4.点を消す方法は?

箇条書きのul要素とli要素の組み合わせはデフォルトで黒丸の点が箇条書きのリストの先頭に付きます。

しかし、黒丸の点が必要ない方もいるかと思います。

そこでここでは黒丸の点を非表示にする方法を解説していきます。

この黒丸の点はCSSでlist-style-typeで非表示にすることができます。

・・・

ul {
 list-style-type: none;
}

・・・

上記のようにul要素に対して「list-style-type: none;」とすることで非表示になります。

「HTML5/CSS3モダンコーディング フロントエンドエンジニアが教える3つの本格レイアウト スタンダード・グリッド・シングルページレイアウトの作り方」はHTML5/CSS3を使ってモダンなサイトを制作するためのコーディングテクニックをハンズオン形式で学ぶ本です。

実践的な内容になっているので次のステップに進みたいという方は是非利用してみてはいかがでしょうか!?

HTMLやCSSを利用してWebサイト制作の副業に挑戦してみたいという方はいませんか!?

そんな方に「はじめての副業コース」をオススメします。

なんとHTMLやCSSを学べるだけでなく、案件紹介も行ってくれます!

Webサイト制作で稼ぎたいという方は是非「はじめての副業コース」を受講してみてはいかがでしょうか!?