フェードイン・フェードアウトで開閉するセレクトボックスの作り方【HTML/CSS/JavaScript・サンプルコード付き】

セレクトボックス

フェードイン・フェードアウトで開閉するセレクトボックスの作り方

フェードイン・フェードアウトで開閉するセレクトボックスの作り方を紹介します。このサンプルでは、HTML・CSS・JavaScriptを使用して、選択肢をフェードアニメーションで表示・非表示できるカスタムセレクトボックスを作成します。通常のselect要素とは異なり、メニューがゆっくりと表示・非表示になるため、自然で落ち着いた操作感を実現できます。

プロフィール編集画面やお問い合わせフォーム、設定画面、管理画面など、見た目にもこだわったフォームを作成したい場面で活用できます。項目をクリックすると選択肢がフェードインで表示され、選択後や外側をクリックするとフェードアウトで閉じます。表示・非表示の切り替えが滑らかなため、視認性が高く使いやすいUIになります。

タイトル、説明文、選択項目はHTMLから変更でき、CSSでは横幅、余白、色、角丸、影、フェード時間などを自由に調整できます。JavaScriptは開閉状態や選択処理を管理しており、レスポンシブにも対応しているため、スマートフォン・タブレット・PCで利用しやすいフェードアニメーション付きセレクトボックスとして活用できます。

コードについて 本記事のコードはサンプルコードです。ご利用前に必ず動作確認を行ってください。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。

デモ

都道府県を選択

フェードアニメーション付きのセレクトボックスです。

北海道
東京都
大阪府
福岡県

ボタンをクリックすると選択肢がフェードインし、項目選択または外側クリックでフェードアウトします。

コードをコピーして使おう！

<!DOCTYPE html>
<html lang="ja">
<head>

  <!-- 文字コード -->
  <meta charset="UTF-8">

  <!-- スマートフォン表示対応 -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!-- ページタイトル -->
  <title>フェードイン・フェードアウトで開閉するセレクトボックス</title>

  <!-- CSSファイルを読み込み -->
  <link rel="stylesheet" href="style.css">

</head>
<body>

  <!-- セレクトボックス全体 -->
  <div class="fade-select-box_demo">

    <!-- タイトル -->
    <div class="fade-select-box_demo_title">
      都道府県を選択
    </div>

    <!-- 説明文 -->
    <p class="fade-select-box_demo_text">
      フェードアニメーション付きのセレクトボックスです。
    </p>

    <!-- 項目名 -->
    <div class="fade-select-box_demo_label" id="fade-select-box-label">
      都道府県
    </div>

    <!-- セレクトボックス -->
    <div class="fade-select-box_demo_wrap">

      <!-- 選択肢を開閉するボタン -->
      <button
        class="fade-select-box_demo_button"
        id="fade-select-box-button"
        type="button"
        aria-expanded="false"
        aria-haspopup="listbox"
        aria-labelledby="fade-select-box-label fade-select-box-button">
        選択してください
      </button>

      <!-- 選択肢一覧 -->
      <div
        class="fade-select-box_demo_menu"
        id="fade-select-box-menu"
        role="listbox">

        <!-- 選択肢 -->
        <button class="fade-select-box_demo_item" type="button" role="option">
          北海道
        </button>

        <button class="fade-select-box_demo_item" type="button" role="option">
          東京都
        </button>

        <button class="fade-select-box_demo_item" type="button" role="option">
          大阪府
        </button>

        <button class="fade-select-box_demo_item" type="button" role="option">
          福岡県
        </button>

      </div>

    </div>

    <!-- 操作説明 -->
    <p class="fade-select-box_demo_note">
      ボタンをクリックすると選択肢がフェードインし、項目選択または外側クリックでフェードアウトします。
    </p>

  </div>

  <!-- JavaScriptファイルを読み込み -->
  <script src="script.js"></script>

</body>
</html>
コードをコピーする場合 使用するコードのタブを選び、「このタブをコピー」をクリックすると、現在表示中のコードをコピーできます。
サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。

ファイル構成と設置方法

このサンプルはHTML・CSS・JavaScriptの3ファイルで構成されています。HTMLではセレクトボックス全体の構造を作成し、CSSではデザインとフェードイン・フェードアウトのアニメーションを設定します。JavaScriptでは選択肢の開閉や項目の選択、外側クリックやEscapeキーで閉じる処理を行います。通常のselect要素では実現しにくい、ゆっくりとフェードする開閉アニメーションを取り入れたカスタムセレクトボックスです。 

sample/
├── index.html
├── style.css
└── script.js

各ファイルの役割
index.htmlはセレクトボックス全体を構成するファイルです。タイトル、説明文、ラベル、ボタンの初期表示、選択肢の項目を編集できます。用途に合わせて選択肢を追加・削除したり、表示する文章を自由に変更できます。

style.cssはセレクトボックス全体のデザインを設定するファイルです。横幅、余白、背景色、枠線、角丸、文字サイズ、ホバー時の色、フェードイン・フェードアウトのアニメーション時間などを変更できます。

script.jsは開閉や選択処理を行うファイルです。ボタンをクリックしたときの表示・非表示、選択した項目名への変更、外側クリックやEscapeキーで閉じる処理を管理しています。

設置方法・使い方
sampleフォルダへindex.html、style.css、script.jsを配置します。3つのファイルを同じ階層へ保存したあと、sample/index.htmlをブラウザで開いてください。ボタンをクリックすると選択肢がフェードイン表示され、項目を選択するとボタンの表示内容が変更されます。また、選択後・外側クリック・Escapeキーでもフェードアウトしながら閉じます。

カスタマイズできる内容
index.htmlではタイトル、説明文、ラベル、ボタンの初期表示、選択肢の内容を自由に変更できます。選択肢はbutton要素を追加・削除するだけで簡単に増減できます。

style.cssでは全体の横幅、余白、背景色、文字色、枠線、角丸、ボタンサイズ、選択肢のホバー色、影、フェードイン・フェードアウトの速度を変更できます。

script.jsでは開閉方法や選択後の動作を変更できます。クリック時の処理や閉じるタイミングなども用途に合わせて調整できます。

数値調整
style.css

max-width:680px;
セレクトボックス全体の最大横幅です。値を大きくすると横に広がり、小さくするとコンパクトになります。

padding:36px;
全体の内側余白です。値を大きくすると余白が広がり、小さくすると詰まった表示になります。

border-radius:18px;
全体の角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。

min-height:56px;
開閉ボタンの高さです。値を大きくするとボタンが高くなり、小さくするとコンパクトになります。

top:calc(100% + 10px);
ボタンと選択肢一覧の間隔です。10pxを大きくすると隙間が広がり、小さくすると近づきます。

transition: opacity .7s ease, transform .7s ease, visibility .7s ease;
フェードイン・フェードアウトの時間です。.7秒でゆっくり表示・非表示になります。値を大きくするとさらにゆっくり、小さくすると速く切り替わります。

レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssのwidth:100%とmax-width:680pxにより画面幅に応じて自動で縮小表示されます。また、640px以下ではpadding:24px 18px;とfont-size:24px;へ変更しているため、スマートフォン・タブレット・PCでも見やすく利用できます。

こちらもおすすめ

セレクトボックス
セレクトボックスのサンプルコード一覧

この記事の他にも、コピペですぐ使える実用的なサンプルコードを掲載しています。デモを確認しながら、用途に合うコードを探せます。

その他のコードを探す
トップページ
コピペですぐ使えるサンプルコードを探す

実用的なサンプルコードをカテゴリ・新着記事・人気記事から探せます。用途に合ったコードを見つけて、そのままコピペで利用できます。

トップページで探す！

コメント