HTML Academy · レッスン

Selectとoptionのドロップダウンメニュー

Q: 「Selectとoptionのドロップダウンメニュー」で何を学びますか？

selectとoptionでドロップダウン選択メニューを作成します ブラウザで直接実行するハンズオンコードでHTML Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

selectとoptionでドロップダウン選択メニューを作成します

「Selectとoptionのドロップダウンメニュー」はCoddyKit上の無料HTML Academyレッスンです。これはレッスン1/4です。下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。これはHTML Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 HTML Academyコースには全4レッスンが含まれています。

select要素

<select>要素はドロップダウンメニューを作成します。

<label for="country">Country</label>
<select id="country" name="country">
  <option value="us">United States</option>
  <option value="gb">United Kingdom</option>
  <option value="de">Germany</option>
</select>

optionのvalueとテキスト

各<option>には、サーバーに送信されるvalueと表示テキストがあります。

<select name="color">
  <option value="">-- Select a color --</option>  <!-- placeholder -->
  <option value="#ff0000">Red</option>
  <option value="#00ff00">Green</option>
  <option value="#0000ff">Blue</option>
</select>
<!-- value="#ff0000" is submitted; "Red" is displayed -->

selected属性

selected属性を使用して、あらかじめoptionを選択します。

<select name="plan">
  <option value="free">Free</option>
  <option value="pro" selected>Pro (Recommended)</option>
  <option value="enterprise">Enterprise</option>
</select>

カテゴリ分けしたoptionのためのoptgroup

<optgroup>を使用して、関連するoptionをグループ化します。

<select name="language">
  <optgroup label="Frontend">
    <option value="html">HTML</option>
    <option value="css">CSS</option>
    <option value="js">JavaScript</option>
  </optgroup>
  <optgroup label="Backend">
    <option value="python">Python</option>
    <option value="node">Node.js</option>
  </optgroup>
</select>

multiple属性

multiple属性を使用して、複数のoptionを選択できるようにします。

<label for="skills">Select your skills (Ctrl+Click for multiple)</label>
<select id="skills" name="skills" multiple size="5">
  <option value="html">HTML</option>
  <option value="css">CSS</option>
  <option value="js">JavaScript</option>
  <option value="python">Python</option>
</select>
<!-- size controls how many options are visible -->
<!-- Submitted as multiple values: skills=html&skills=css -->

size属性

size属性は、表示するoptionの数を制御します。

<!-- size=1 (default): dropdown -->
<select size="1">...</select>

<!-- size>1: list box -->
<select size="4">
  <option>HTML</option>
  <option>CSS</option>
  <option>JavaScript</option>
  <option>Python</option>
</select>

無効なoptionとグループ

個々のoptionまたはグループ全体を無効にします。

<select name="plan">
  <option value="free">Free</option>
  <option value="pro">Pro</option>
  <option value="enterprise" disabled>Enterprise (Contact Sales)</option>
</select>

<select>
  <optgroup label="Legacy (deprecated)" disabled>
    <option value="v1">Version 1</option>
  </optgroup>
</select>

selectのスタイル設定

ネイティブの<select>のスタイル設定には制限があります。ここでは可能な方法を紹介します。

select {
  appearance: none;   /* remove native dropdown arrow */
  -webkit-appearance: none;
  width: 100%;
  padding: 0.5rem 2.5rem 0.5rem 0.75rem;
  border: 1px solid #ddd;
  border-radius: 4px;
  background-image: url("arrow-down.svg");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 1rem;
  cursor: pointer;
}

カスタムドロップダウンとネイティブのselectの比較

カスタムドロップダウンコンポーネントを検討する際のトレードオフです。

ネイティブのselect — デフォルトでアクセシブルであり、モバイルに適していて、JavaScriptなしで動作します
カスタムドロップダウン — スタイルを完全に制御できますが、ARIAの完全な実装とキーボード操作の処理が必要です

ほとんどの用途では、ネイティブの<select>を使用します。

JavaScriptで選択した値を読み取る

JavaScriptを使用して、選択した値を取得または設定します。

const select = document.getElementById('country');

// Get selected value:
console.log(select.value);  // e.g. 'us'

// Get selected option text:
console.log(select.options[select.selectedIndex].text);

// Set selected value:
select.value = 'de';

// Listen for changes:
select.addEventListener('change', () => {
  console.log('Selected:', select.value);
});

プレースホルダーoptionのパターン

選択できないプレースホルダーoptionを作成します。

<select name="role" required>
  <option value="" disabled selected>-- Select your role --</option>
  <option value="dev">Developer</option>
  <option value="designer">Designer</option>
  <option value="pm">Product Manager</option>
</select>
<!-- disabled + selected: shows as placeholder
     value="" + required: fails validation if not changed -->

クイックチェック

selectドロップダウン内で関連するoptionをグループ化する要素はどれですか？

まとめ：selectとoption

ドロップダウンの基本事項です。

<select> + <option> — ドロップダウンメニューを作成します
optionのvalue — サーバーに送信する値です
selected — optionをあらかじめ選択します
<optgroup label> — 関連するoptionをグループ化します
multiple — 複数選択を可能にします
size — ドロップダウンを開かずにN個のoptionを表示します

よくある質問

「Selectとoptionのドロップダウンメニュー」レッスンは無料ですか？

はい。「Selectとoptionのドロップダウンメニュー」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、HTML Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 HTML Academyコースには全4レッスンが含まれています。

「Selectとoptionのドロップダウンメニュー」で何を学びますか？

selectとoptionでドロップダウン選択メニューを作成しますブラウザで直接実行するハンズオンコードでHTML Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

HTML Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのHTML Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。これはレッスン1/4です。

「Selectとoptionのドロップダウンメニュー」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このHTML Academyレッスンでコードを書いて実行できますか？

はい。すべてのHTML Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

← HTML Academyに戻る