PDF形式でダウンロード PDF形式でダウンロード

この記事では、HTMLとCSSのコードを使ってウェブサイトにドロップダウンメニューを作成する方法を紹介します。ここで紹介するドロップダウンメニューは、ボタンの上にカーソルを合わせた時に表示されるものです。ドロップダウンメニューが表示されると、ユーザーはメニューの中から項目を選択し、リンクするページに移動することができます。

ステップ

  1. 1
    HTMLテキストエディタを開く NotepadやTextEditなどのシンプルなテキストエディタや、Notepad++のような特化型のテキストエディタを使いましょう。
    • Notepad++を使う場合は、作業を始める前にウィンドウ上部のLanguageメニューからHTMLを選択します。
  2. 2
    ヘッダーを入力する ヘッダーは、以降の文書に記述するコードの種類を指定するものです。
    <!DOCTYPE html>
    <html>
    <head>
    <style>
    
  3. 3
    ドロップダウンメニューのボタンを作成する 下記のコードを入力し、ドロップダウンメニューボタンのサイズと色を指定しましょう。「#」は任意の数値と置き換えます(数値が大きいほどボタンのサイズが大きくなります)。また、「background-color」と「color」の値を別の色(またはHTMLカラーコード)に置き換えることも可能です。[1]
    .dropbtn {
        background-color: black;
        color: white;
        padding: #px;
        font-size: #px;
        border: none;
    }
    
  4. 4
    ドロップダウンメニューにリンクを設定できるようにする あとでドロップダウンメニューの項目にリンクを追加するため、下記のコードを入力します。
    .dropdown {
        position: relative;
        display: inline-block;
    }
    
  5. 5
    ドロップダウンメニューのデザインを指定する 下記のコードを入力すれば、ドロップダウンメニューのサイズ、ウェブページの別の要素に対する表示位置、色を指定できます。「min-width」の「#」を任意の数値(例:250)に置き換え、「background-color」の値を好みの色またはHTMLカラーコードに変更しましょう。
    .dropdown-content {
        display: none;
        position: absolute;
        background-color: lightgrey;
        min-width: #px;
        z-index: 1;
    }
    
  6. 6
    ドロップダウンメニューの項目のデザインを設定する 下記のコードは、ドロップダウンメニューの項目の文字色、サイズを指定するものです。「#」を任意のピクセル値に置き換え、項目のサイズを調整しましょう。
    .dropdown-content a {
        color: black;
        padding: #px #px;
        text-decoration: none;
        display: block;
    }
    
  7. 7
    ドロップダウンメニューのマウスオーバー時の設定をする ドロップダウンメニューにカーソルを合わせた時、色が変わるように設定します。1つめの「background-color」はドロップダウンメニューの項目を選択した時の色を、2つ目の「background-color」はドロップダウンメニューボタンにマウスオーバーした時の色を指定する記述です。これらの色は、マウスオーバーする前の色より明るくするのがよいとされています。
    .dropdown-content a:hover {background-color: white;}
    .dropdown:hover .dropdown-content {display: block;}
    .dropdown:hover .dropbtn {background-color: grey;}
    
  8. 8
    CSS記述を閉じる 下記のコードを入力し、文書上でCSSの記述が終了したことを示しましょう。
    </style>
    </head>
    
  9. 9
    ドロップダウンメニューの名前を入力する 下記のコードを入力しましょう。「Name」はボタンにつけたい任意の名前に置き換えます(例:Menu)。
    <div class="dropdown">
    <button class="dropbtn">Name</button>
    <div class="dropdown-content">
    
  10. 10
    ドロップダウンメニューにリンクを追加する ドロップダウンメニューの項目は、自身のウェブサイト内、あるいは他のウェブサイト内のページにリンクさせておきましょう。下記のコードを入力すると、ドロップダウンメニューに項目を追加できます。https://www.website.comをリンク先のURL(必ずダブルクオーテーションマークで囲う)に、「Name」をリンクの名前に置き換えましょう。
    <a href="https://www.website.com">Name</a>
    <a href="https://www.website.com">Name</a>
    <a href="https://www.website.com">Name</a>
    
  11. 11
    文書を閉じる 下記のタグを入力して文書を閉じ、ドロップダウンメニューを設定する記述が終了したことを示しましょう。
    </div>
    </div>
    </body>
    </html>
    
  12. 12
    入力したコードを確認する コードは下記のように記述されているはずです。[2]
    <!DOCTYPE html>
    <html>
    <head>
    <style>
    
    .dropbtn {
        background-color: black;
        color: white;
        padding: 16px;
        font-size: 16px;
        border: none;
    }
    
    .dropdown {
        position: relative;
        display: inline-block;
    }
    
    .dropdown-content {
        display: none;
        position: absolute;
        background-color: lightgrey;
        min-width: 200px;
        z-index: 1;
    }
    
    .dropdown-content a {
        color: black;
        padding: 12px 16px;
        text-decoration: none;
        display: block;
    }
    
    .dropdown-content a:hover {background-color: white;}
    .dropdown:hover .dropdown-content {display: block;}
    .dropdown:hover .dropbtn {background-color: grey;}
    
    </style>
    </head>
    
    <div class="dropdown">
    <button class="dropbtn">Social Media</button>
    <div class="dropdown-content">
    
    <a href="https://www.google.com">Google</a>
    <a href="https://www.facebook.com">Facebook</a>
    <a href="https://www.youtube.com">YouTube</a>
    
    </div>
    </div>
    </body>
    </html>
    
    広告

ポイント

  • ウェブサイト上で公開する前に、コードが正しく反映されるかどうか必ずテストを行いましょう。
  • 上で紹介したのは、ボタンをマウスオーバーすると表示されるドロップダウンメニューの記述方法です。ボタンをクリックした時にだけ表示されるドロップダウンメニューを作成したい場合は、JavaScriptを使用する必要があります。[3]
広告

注意事項

  • 色の指定に「black」「green」などの記述を使う場合、指定できる色に限りがあります。こちらのHTMLカラーコードジェネレーター(英語)を使用すれば、好きな色を自由に選んで使うことが可能です。
広告

関連記事

XMLファイルを開くXMLファイルを開く
画像検索で簡単に人物を特定する画像検索で簡単に人物を特定する
EMLファイルを開くEMLファイルを開く
DVDプレーヤーを接続するDVDプレーヤーを接続する
特定のウェブサイトにアクセスできない問題を解決する特定のウェブサイトにアクセスできない問題を解決する
winmail.datを開くwinmail.datを開く
JPGをPDFに変換する
AndroidでSMSを別の端末に移行するAndroidでSMSを別の端末に移行する
2台のパソコンを接続する2台のパソコンを接続する
ワイヤレスマウスを接続するワイヤレスマウスを接続する
キズの付いたCDを修復する
2台のルーターを接続する2台のルーターを接続する
コマンドプロンプトでファイルをコピーするコマンドプロンプトでファイルをコピーする
VCFファイルを開くVCFファイルを開く
広告

このwikiHow記事について

この記事は、経験豊富なwikiHowの編集者と調査員から成るチームによって執筆されています。調査員チームは内容の正確性と網羅性を確認しています。

wikiHowのコンテンツ管理チームは、編集チームが編集した記事を細心の注意を払って精査し、すべての記事がwikiHowの高品質基準を満たしているかどうかを確認しています。
このページは 235 回アクセスされました。

この記事は役に立ちましたか?

広告