Please JavaScript on
備忘録的プログラミングリファレンス

<menu>、<li>

 ブロックレベル要素

 <menu> と <li> エレメントの組み合わせでリストが作成できます。<ul>と同じようにマークが付きます。
 <menu>の子エレメントとして <menuitem> がありますが、 <menuitem> は使わないように推奨されています。

<menu>
<menu>
	<li><button>ミカン</button></li>
	<li><button>リンゴ</button></li>
	<li><button>バナナ</button></li>
</menu>
詳しくは動作の確認を参照してください

 マークが表示されないようにするには、スタイルで list-style: none; と指定します。

 横並びにしたい時は、スタイルで display: flex; と指定します。

 <button> との組み合わせによるリストが紹介されているサイトを見かけますが実験的なところがあるようです。 そのためか <ul> を使う例を多くみます。

属性

グローバル属性も持ちます。以下に主な属性のみを示します。

AttributeValueExtra information
idcssにも使えます。エレメントをユニークとします。
classcssに使います。同名のclassは同じスタイルが適応されます。

<li>

 1データを一行で入力してください。自動で改行ごとに「li」要素を作成します。

動作の確認

 上記の属性の値から <menu> と <li> エレメントを以下に作成します。HTML作成ボタンをクリックしてみてください。


関連情報

リストを作成できるタグには、用語定義型のリストと呼ばれる<dl>もあります。

ULタグエレメントを使ってwebページのナビメニューが作成できます。