ul要素と一緒に使うli要素とは? 読み方・横並びにする方法も分かりやすく解説!

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

li要素はリストの項目を表すために使用されます。

この要素は順序付きリストのol要素、順序なしリストのul要素などの子要素として配置されます。

よく使用される要素の一つなのでしっかりと理解しておく必要があります。

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

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

1.li要素とは? 読み方は?

li要素は、list itemの略で、箇条書きのリスト項目を表す要素です。

読み方は「リストヨウソ」です。

具体的には箇条書き、目次を作るときに利用されます。

このli要素は、順不同リストを表すul要素、番号順リストを表すol要素や、 右クリックなどで表示する コンテキストメニューを表すmenu要素内で使います。

これらを組み合わせてリストが完成します。

li要素に使用できる属性

value属性

ol要素の子要素として使用される場合のみ、リストの番号を指定できます。

例えば、value=”6″と指定するとそれ以降の項目は7、8、9と続きます。

type属性

箇条書きの行頭記号の種類を指定する属性です。

具体的な値としてdisc(黒丸アイコン)、circle(白丸アイコン)、sqare(四角アイコン)、1(アラビア数字)、A(大文字ローマ字)、a(小文字ローマ字)、I(ローマ数字)を使います。

ul要素内で使う場合とol要素内で使う場合とで指定できる属性値が異なります。

2.li要素の使い方

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

・・・

<ol>
 <li>リスト項目1</li>
 <li value="4">リスト項目2</li>
 <li>リスト項目3</li>
 <li>リスト項目4</li>
</ol>

・・・

上記の例ではvalue属性でリストの番号を4の数値にしています。

value属性を使用すると、リスト項目の順序を整数で指定することができます。

2番目のリストから4、5、6と数字が並びます。

3.ul要素のli要素を横並びにする方法

ul要素は基本的に縦並びにリストが表示されます。

中にはこれを横並びにしたいという方もいるかと思います。

そこでここではul要素のli要素を横並びにする方法をご紹介します。

一番簡単な方法はli要素にdisplayプロパティを与えて横に並べる方法です。

li {
 display: inline-block;
 width: 200px;
 height: 50px;
}

上記のようにすると、「display: inline-block;」を指定すると、インラインで横並びにしつつ、幅や高さを指定することができるようになります。

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

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

4.格安プログラミングスクールを利用して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：副業収入獲得ノウハウ動画プレゼント