A RetroSearch Logo

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Search Query:

Showing content from https://developer.cdn.mozilla.net/ja/docs/Web/HTML/Reference/Elements/menu below:

<menu>: ãƒ¡ãƒ‹ãƒ¥ãƒ¼è¦ç´ - HTML | MDN

<menu>: メニュー要素

Baseline Widely available

<menu> は HTML の要素で、HTML 仕様書では <ul> とは異なる意味づけとして記述されていますが、ブラウザーでは <ul> と違いのないものとして扱われます(そしてアクセシビリティツリーで公開されます)。これは(<li> 要素で表現される)項目の順序のないリストを表します。

試してみましょう
<div class="news">
  <a href="#">NASA’s Webb Delivers Deepest Infrared Image of Universe Yet</a>
  <menu>
    <li><button id="save">Save for later</button></li>
    <li><button id="share">Share this news</button></li>
  </menu>
</div>
.news {
  background-color: bisque;
  padding: 1em;
  border: solid thin black;
}

menu {
  list-style-type: none;
  display: flex;
  padding: 0;
  margin-bottom: 0;
  gap: 1em;
}
属性

この要素にはグローバル属性があります。

使用上の注意

<menu> 要素と <ul> 要素はともに順序なしリストの項目を表すものです。主な違いは、<ul> は主に項目の表示を目的とするのに対し、 <menu> 要素は操作を行うための対話型の項目のためのものです。関連する <menuitem> 要素は非推奨になりました。

メモ: HTML 仕様書の初期の版では、<menu> 要素にはコンテキストメニューとしての追加の用途がありました。この機能は廃止されたと考えており、仕様書にはありません。

例 ツールバー

この例では、<menu> を編集アプリケーションのためのツールバーを生成するために使用しています。

HTML
<menu>
  <li><button onclick="copy()">コピー</button></li>
  <li><button onclick="cut()">切り取り</button></li>
  <li><button onclick="paste()">貼り付け</button></li>
</menu>

なお、機能的には次のものと違いはありません。

<ul>
  <li><button onclick="copy()">コピー</button></li>
  <li><button onclick="cut()">切り取り</button></li>
  <li><button onclick="paste()">貼り付け</button></li>
</ul>
CSS
menu,
ul {
  display: flex;
  list-style: none;
  padding: 0;
  width: 400px;
}

li {
  flex-grow: 1;
}

button {
  width: 100%;
}
結果 技術的概要 コンテンツカテゴリー

フローコンテンツ。この要素の子に 1 個以上の <li> 要素がある場合は知覚可能コンテンツ。

許可されている内容

0 個以上の <li>, <script>, <template>。

タグの省略 なし。開始タグと終了タグの両方が必須です。 許可されている親要素 フローコンテンツを受け入れるすべての要素 暗黙の ARIA ロール list 許可されている ARIA ロール directory, group, listbox, menu, menubar, none, presentation, radiogroup, tablist, toolbar or tree DOM インターフェイス HTMLMenuElement 仕様書 ブラウザーの互換性 関連情報

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4