【点を消す方法】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を使ってモダンなサイトを制作するためのコーディングテクニックをハンズオン形式で学ぶ本です。

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

5.格安プログラミングスクールを利用してHTML/CSSを勉強しましょう!

HTMLとCSSの勉強途中で分からないことがあり、中々進まないこともあると思います。

しかし、順を追って学習を進めていけば、必ずできるようになるのであきらめず最後までやりぬきましょう!

HTMLとCSSをプログラミングスクールで教わりたいという方も中にはいます。

そんな方は低価格のサブスク型プログラミングスクールがオススメです。

【最短30秒で完了】侍テラコヤの申し込み手順

侍テラコヤの申し込み手順をみていきましょう!

申し込みは最短30秒で完了します。

この機会に是非申し込んでみてはいかがでしょうか?

【1分で登録完了】受講料0円! ZeroPlus Gateの無料体験レッスン申し込み手順

ZeroPlus Gateの無料体験レッスン申し込み手順をみていきましょう。

受講スタートまでの流れは以下の通りです。

無料期間は予告なく終了する可能性があります。

少しでも気になる方は是非申し込んでみてはいかがでしょうか?

【10秒で完了】本気のパソコン塾の相談会/無料トライアル申し込み手順

STEP.1

相談会予約

＼【期間限定】無料相談会参加特典3つあり!／

7日間無料体験・無料相談会に申し込む! 30秒簡単予約!

• 特典1：学習コンテンツの1週間無料トライアル
• 特典2：学習管理シートプレゼント
• 特典3：副業収入獲得ノウハウ動画プレゼント

相談会はオンライン（Google meet）で実施致します。

ご希望の日時をご予約ください。

※所要時間は30分を予定しております。

STEP.2

相談会の概要

アドバイザーがお客様のキャリアや学習の課題を丁寧に伺った上で、今後についてのアドバイスを致します。

当日お話する内容例

• エンジニアを取り巻く環境
• 挫折しないための学習の進め方
• プログラミング言語について
• 本気のパソコン塾について

また、現状の課題や不安な事は、遠慮なくご質問ください。

ご相談いただける内容例

• プログラミング学習に関して
• 転職・副業・起業について

＼【期間限定】無料相談会参加特典3つあり!／

7日間無料体験・無料相談会に申し込む! 30秒簡単予約!

• 特典1：学習コンテンツの1週間無料トライアル
• 特典2：学習管理シートプレゼント
• 特典3：副業収入獲得ノウハウ動画プレゼント