質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.98%

  • CSS

    4823questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

  • HTML5

    3398questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

CSSのドロップダウンメニューの作り方

解決済

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 255

hika109

score 2

ドロップダウンメニューのサンプルコードです。
以下の部分ですが、これでどうやってメニューを形成しているのかまだつかめません。詳細な解説をお願いします。

#menu:before,
#menu:after {
        content: "";
        display: table;
}
#menu:after {
        clear: both;
}

また、サブメニューの吹き出しの作り方もこのようなコードでできています。どれがどういった動作を起こすのか解説お願いします。

#menu ul li:first-child > a:after {
        content: '';
        position: absolute;
        left: 40px;
        top: -6px;
        border-left: 6px solid transparent;
        border-right: 6px solid transparent;
        border-bottom: 6px solid #444;
}

コード全文
引用:http://html5.ontheroad.jp/css3/menubar_02.php

#menu, #menu ul {
            margin: 0;
            padding: 0;
            list-style: none;
    }

    #menu {
            width: 960px;
            margin: 60px auto;
            border: 1px solid #222;
            background-color: #111;
            background-image: -moz-linear-gradient(#444, #111);
            background-image: -webkit-gradient(linear, left top, left bottom, from(#444), to(#111));
            background-image: -webkit-linear-gradient(#444, #111);
            background-image: -o-linear-gradient(#444, #111);
            background-image: -ms-linear-gradient(#444, #111);
            background-image: linear-gradient(#444, #111);
            -moz-border-radius: 6px;
            -webkit-border-radius: 6px;
            border-radius: 6px;
            -moz-box-shadow: 0 1px 1px #777;
            -webkit-box-shadow: 0 1px 1px #777;
            box-shadow: 0 1px 1px #777;
    }


    #menu:before,
    #menu:after {
            content: "";
            display: table;
    }

    #menu:after {
            clear: both;
    }

    #menu {
            zoom:1;
    }


    #menu li {
            float: left;
            border-right: 1px solid #222;
            -moz-box-shadow: 1px 0 0 #444;
            -webkit-box-shadow: 1px 0 0 #444;
            box-shadow: 1px 0 0 #444;
            position: relative;
    }

    #menu a {
            float: left;
            padding: 12px 30px;
            color: #999;
            text-transform: uppercase;
            font: bold 12px Arial, Helvetica;
            text-decoration: none;
            text-shadow: 0 1px 0 #000;
    }

    #menu li:hover > a {
            color: #fafafa;
    }

    *html #menu li a:hover { /* IE6 only */
            color: #fafafa;
    }


    #menu ul {
            margin: 20px 0 0 0;
            _margin: 0; /*IE6 only*/
            opacity: 0;
            visibility: hidden;
            position: absolute;
            top: 38px;
            left: 0;
            z-index: 9999;
            background: #444;
            background: -moz-linear-gradient(#444, #111);
            background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));
            background: -webkit-linear-gradient(#444, #111);
            background: -o-linear-gradient(#444, #111);
            background: -ms-linear-gradient(#444, #111);
            background: linear-gradient(#444, #111);
            -moz-box-shadow: 0 -1px rgba(255,255,255,.3);
            -webkit-box-shadow: 0 -1px 0 rgba(255,255,255,.3);
            box-shadow: 0 -1px 0 rgba(255,255,255,.3);
            -moz-border-radius: 3px;
            -webkit-border-radius: 3px;
            border-radius: 3px;
            -webkit-transition: all .2s ease-in-out;
            -moz-transition: all .2s ease-in-out;
            -ms-transition: all .2s ease-in-out;
            -o-transition: all .2s ease-in-out;
            transition: all .2s ease-in-out;
    }

    #menu li:hover > ul {
            opacity: 1;
            visibility: visible;
            margin: 0;
    }

    #menu ul ul {
            top: 0;
            left: 150px;
            margin: 0 0 0 20px;
            _margin: 0; /*IE6 only*/
            -moz-box-shadow: -1px 0 0 rgba(255,255,255,.3);
            -webkit-box-shadow: -1px 0 0 rgba(255,255,255,.3);
            box-shadow: -1px 0 0 rgba(255,255,255,.3);
    }

    #menu ul li {
            float: none;
            display: block;
            border: 0;
            _line-height: 0; /*IE6 only*/
            -moz-box-shadow: 0 1px 0 #111, 0 2px 0 #666;
            -webkit-box-shadow: 0 1px 0 #111, 0 2px 0 #666;
            box-shadow: 0 1px 0 #111, 0 2px 0 #666;
    }

    #menu ul li:last-child {
            -moz-box-shadow: none;
            -webkit-box-shadow: none;
            box-shadow: none;
    }

    #menu ul a {
            padding: 10px;
            width: 130px;
            _height: 10px; /*IE6 only*/
            display: block;
            white-space: nowrap;
            float: none;
            text-transform: none;
    }

    #menu ul a:hover {
            background-color: #0186ba;
            background-image: -moz-linear-gradient(#04acec,  #0186ba);
            background-image: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba));
            background-image: -webkit-linear-gradient(#04acec, #0186ba);
            background-image: -o-linear-gradient(#04acec, #0186ba);
            background-image: -ms-linear-gradient(#04acec, #0186ba);
            background-image: linear-gradient(#04acec, #0186ba);
    }


    #menu ul li:first-child > a {
            -moz-border-radius: 3px 3px 0 0;
            -webkit-border-radius: 3px 3px 0 0;
            border-radius: 3px 3px 0 0;
    }

    #menu ul li:first-child > a:after {
            content: '';
            position: absolute;
            left: 40px;
            top: -6px;
            border-left: 6px solid transparent;
            border-right: 6px solid transparent;
            border-bottom: 6px solid #444;
    }

    #menu ul ul li:first-child a:after {
            left: -6px;
            top: 50%;
            margin-top: -6px;
            border-left: 0;
            border-bottom: 6px solid transparent;
            border-top: 6px solid transparent;
            border-right: 6px solid #3b3b3b;
    }

    #menu ul li:first-child a:hover:after {
            border-bottom-color: #04acec;
    }

    #menu ul ul li:first-child a:hover:after {
            border-right-color: #0299d3;
            border-bottom-color: transparent;
    }

    #menu ul li:last-child > a {
            -moz-border-radius: 0 0 3px 3px;
            -webkit-border-radius: 0 0 3px 3px;
            border-radius: 0 0 3px 3px;
    }
<ul id="menu">
            <li><a href="#">Home</a></li>
            <li>
                    <a href="#">Categories</a>
                    <ul>
                            <li><a href="#">CSS</a></li>
                            <li><a href="#">Graphic design</a></li>
                            <li><a href="#">Development tools</a></li>
                            <li><a href="#">Web design</a></li>
                    </ul>
            </li>
            <li><a href="#">Work</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Contact</a></li>
    </ul>
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • 退会済みユーザー

    退会済みユーザー

    2017/09/30 22:21

    ”解説をお願いします”っておかしくないですか? こんな風にしたいが上手くいかないということならまだしも、これだと宿題の意味が分からないから教えてくれっていうのと同じだと思います。 内容の解説だったら参考にされたサイトにコメントら欄があるので、そこで問われたら良いのではないですか? http://html5.ontheroad.jp/css3/menubar_02.php そもそも”ul 要素を入れ後にすることによってサブメニューを表示します。”と書いてありますが。

    キャンセル

  • キャンセル

回答 1

checkベストアンサー

+2

1

#menu:before,
#menu:after {
        content: "";
        display: table;
}
#menu:after {
        clear: both;
}
※このコードも一部なので追加しました。IE6対応
#menu {
        zoom:1;
}

これはNicolas Gallagherという方が考案した「micro clearfix」というCSSハックです。新旧様々なブラウザに対応した要素の回り込みをふせぐためのコードです。なのでコードの中身を読み解くというより,
こう書くことによって回り込みを防げると思った方がいいと思います。具体的にはcontentで空の要素を生成。その生成した要素をtable要素にする。という意味ですが空のコンテンツには高さも幅もないため、見た目は何も変化しません。

[対応ブラウザ]
Firefox 2+
Safari 2+
Chrome
Opera 9.27+
IE 6+, IE Mac

2

#menu ul li:first-child > a:after {
        content: '';
        position: absolute;
        left: 40px;
        top: -6px;
        border-left: 6px solid transparent;
        border-right: 6px solid transparent;
        border-bottom: 6px solid #444;
}


このコードは三角を作る定番コードです。
順を追って説明します。

li要素の中にある最初のa要素の次に{ }内のCSSを実行

li:first-child > a:after

空要素を作り▲を作る
▲を作る原理はネット上に散見しているので具体的な説明を控えます。

content: '';
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid #444;

指定されたピクセルに絶対配置で配置する

position: absolute;
left: 40px;
top: -6px;

[追記] borderで作る三角の実験

色々出力して見てみるとわかりやすいと思います。
よくわからないと思うコードは該当コードのみ切り出したシンプルな環境を作りCSSを色々変えながら遊んでみると特性がつかめてくるので遊んでみてください。

<html>
<head>
    <style>
        div{ margin-bottom: 150px; }

        #triangle1:after {
            content: '';
            border-right: 50px solid transparent;
            border-left: 50px solid transparent;
            border-bottom: 50px solid #444;
        }

        #triangle2:after {
            content: '';
            border-left: 50px solid #6eff94;
            border-right: 50px solid #6ed7ff;
            border-bottom: 50px solid #444;
        }

        #triangle3:after {
            content: '';
            border-left: 50px solid #6eff94;
            border-right: 50px solid transparent;
            border-bottom: 50px solid transparent;
        }

        #triangle4:after {
            content: '';
            border-top: 50px solid #ff6c6c;
            border-left: 50px solid #6eff94;
            border-right: 50px solid #6ed7ff;
            border-bottom: 50px solid #444;
        }

        #triangle5 {
            height: 100px;
            border-top: 50px solid #ff6c6c;
            border-left: 50px solid #6eff94;
            border-right: 50px solid #6ed7ff;
            border-bottom: 50px solid #444;
        }
        #triangle6 {
            width: 0;
            height: 0;
            border-top: 50px solid #ff6c6c;
            border-left: 50px solid #6eff94;
            border-right: 50px solid #6ed7ff;
            border-bottom: 50px solid #444;
        }
        #triangle7 {
            width: 0;
            height: 0;
            border-top: 50px solid transparent;
            border-left: 50px solid transparent;
            border-right: 50px solid transparent;
            border-bottom: 50px solid #444;
        }
    </style>
</head>
<body>
    <div id="triangle1"></div>
    <div id="triangle2"></div>
    <div id="triangle3"></div>
    <div id="triangle4"></div>
    <div id="triangle5"></div>
    <div id="triangle6"></div>
    <div id="triangle7"></div>
</body>

</html>

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/10/01 13:19

    ご回答ありがとうございます。

    キャンセル

  • 2017/10/01 13:22

    通りでいくらググっても原理に追求する記事がないのですね。正攻法的やり方ではないようで、とりあえずこういう書き方をするとこうなるよということを覚えるしかないですね^^;

    キャンセル

  • 2017/10/01 20:32

    コード追記しましたので見てみてください。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.98%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • CSS

    4823questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

  • HTML5

    3398questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。