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

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

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

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

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

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