teratail
回答率
85.48%
質問するログイン新規登録

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

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

新規登録して質問してみよう
ただいま回答率
85.48%
トップHTML5に関する質問
HTML5

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

CSS

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

Q&A

解決済

1回答

3285閲覧

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

hika109
hika109

総合スコア8

HTML5

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

CSS

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

0グッド

0クリップ

投稿2017/09/30 11:39

0

0

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

CSS
1#menu:before,
2#menu:after {
3        content: "";
4        display: table;
5}
6#menu:after {
7        clear: both;
8}

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

CSS
1#menu ul li:first-child > a:after {
2        content: '';
3        position: absolute;
4        left: 40px;
5        top: -6px;
6        border-left: 6px solid transparent;
7        border-right: 6px solid transparent;
8        border-bottom: 6px solid #444;
9}

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

CSS
1#menu, #menu ul {
2	        margin: 0;
3	        padding: 0;
4	        list-style: none;
5	}
6
7	#menu {
8	        width: 960px;
9	        margin: 60px auto;
10	        border: 1px solid #222;
11	        background-color: #111;
12	        background-image: -moz-linear-gradient(#444, #111);
13	        background-image: -webkit-gradient(linear, left top, left bottom, from(#444), to(#111));
14	        background-image: -webkit-linear-gradient(#444, #111);
15	        background-image: -o-linear-gradient(#444, #111);
16	        background-image: -ms-linear-gradient(#444, #111);
17	        background-image: linear-gradient(#444, #111);
18	        -moz-border-radius: 6px;
19	        -webkit-border-radius: 6px;
20	        border-radius: 6px;
21	        -moz-box-shadow: 0 1px 1px #777;
22	        -webkit-box-shadow: 0 1px 1px #777;
23	        box-shadow: 0 1px 1px #777;
24	}
25
26
27	#menu:before,
28	#menu:after {
29	        content: "";
30	        display: table;
31	}
32
33	#menu:after {
34	        clear: both;
35	}
36
37	#menu {
38	        zoom:1;
39	}
40
41
42	#menu li {
43	        float: left;
44	        border-right: 1px solid #222;
45	        -moz-box-shadow: 1px 0 0 #444;
46	        -webkit-box-shadow: 1px 0 0 #444;
47	        box-shadow: 1px 0 0 #444;
48	        position: relative;
49	}
50
51	#menu a {
52	        float: left;
53	        padding: 12px 30px;
54	        color: #999;
55	        text-transform: uppercase;
56	        font: bold 12px Arial, Helvetica;
57	        text-decoration: none;
58	        text-shadow: 0 1px 0 #000;
59	}
60
61	#menu li:hover > a {
62	        color: #fafafa;
63	}
64
65	*html #menu li a:hover { /* IE6 only */
66	        color: #fafafa;
67	}
68
69
70	#menu ul {
71	        margin: 20px 0 0 0;
72	        _margin: 0; /*IE6 only*/
73	        opacity: 0;
74	        visibility: hidden;
75	        position: absolute;
76	        top: 38px;
77	        left: 0;
78	        z-index: 9999;
79	        background: #444;
80	        background: -moz-linear-gradient(#444, #111);
81	        background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));
82	        background: -webkit-linear-gradient(#444, #111);
83	        background: -o-linear-gradient(#444, #111);
84	        background: -ms-linear-gradient(#444, #111);
85	        background: linear-gradient(#444, #111);
86	        -moz-box-shadow: 0 -1px rgba(255,255,255,.3);
87	        -webkit-box-shadow: 0 -1px 0 rgba(255,255,255,.3);
88	        box-shadow: 0 -1px 0 rgba(255,255,255,.3);
89	        -moz-border-radius: 3px;
90	        -webkit-border-radius: 3px;
91	        border-radius: 3px;
92	        -webkit-transition: all .2s ease-in-out;
93	        -moz-transition: all .2s ease-in-out;
94	        -ms-transition: all .2s ease-in-out;
95	        -o-transition: all .2s ease-in-out;
96	        transition: all .2s ease-in-out;
97	}
98
99	#menu li:hover > ul {
100	        opacity: 1;
101	        visibility: visible;
102	        margin: 0;
103	}
104
105	#menu ul ul {
106	        top: 0;
107	        left: 150px;
108	        margin: 0 0 0 20px;
109	        _margin: 0; /*IE6 only*/
110	        -moz-box-shadow: -1px 0 0 rgba(255,255,255,.3);
111	        -webkit-box-shadow: -1px 0 0 rgba(255,255,255,.3);
112	        box-shadow: -1px 0 0 rgba(255,255,255,.3);
113	}
114
115	#menu ul li {
116	        float: none;
117	        display: block;
118	        border: 0;
119	        _line-height: 0; /*IE6 only*/
120	        -moz-box-shadow: 0 1px 0 #111, 0 2px 0 #666;
121	        -webkit-box-shadow: 0 1px 0 #111, 0 2px 0 #666;
122	        box-shadow: 0 1px 0 #111, 0 2px 0 #666;
123	}
124
125	#menu ul li:last-child {
126	        -moz-box-shadow: none;
127	        -webkit-box-shadow: none;
128	        box-shadow: none;
129	}
130
131	#menu ul a {
132	        padding: 10px;
133	        width: 130px;
134	        _height: 10px; /*IE6 only*/
135	        display: block;
136	        white-space: nowrap;
137	        float: none;
138	        text-transform: none;
139	}
140
141	#menu ul a:hover {
142	        background-color: #0186ba;
143	        background-image: -moz-linear-gradient(#04acec,  #0186ba);
144	        background-image: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba));
145	        background-image: -webkit-linear-gradient(#04acec, #0186ba);
146	        background-image: -o-linear-gradient(#04acec, #0186ba);
147	        background-image: -ms-linear-gradient(#04acec, #0186ba);
148	        background-image: linear-gradient(#04acec, #0186ba);
149	}
150
151
152	#menu ul li:first-child > a {
153	        -moz-border-radius: 3px 3px 0 0;
154	        -webkit-border-radius: 3px 3px 0 0;
155	        border-radius: 3px 3px 0 0;
156	}
157
158	#menu ul li:first-child > a:after {
159	        content: '';
160	        position: absolute;
161	        left: 40px;
162	        top: -6px;
163	        border-left: 6px solid transparent;
164	        border-right: 6px solid transparent;
165	        border-bottom: 6px solid #444;
166	}
167
168	#menu ul ul li:first-child a:after {
169	        left: -6px;
170	        top: 50%;
171	        margin-top: -6px;
172	        border-left: 0;
173	        border-bottom: 6px solid transparent;
174	        border-top: 6px solid transparent;
175	        border-right: 6px solid #3b3b3b;
176	}
177
178	#menu ul li:first-child a:hover:after {
179	        border-bottom-color: #04acec;
180	}
181
182	#menu ul ul li:first-child a:hover:after {
183	        border-right-color: #0299d3;
184	        border-bottom-color: transparent;
185	}
186
187	#menu ul li:last-child > a {
188	        -moz-border-radius: 0 0 3px 3px;
189	        -webkit-border-radius: 0 0 3px 3px;
190	        border-radius: 0 0 3px 3px;
191	}
HTML
1<ul id="menu">
2	        <li><a href="#">Home</a></li>
3	        <li>
4	                <a href="#">Categories</a>
5	                <ul>
6	                        <li><a href="#">CSS</a></li>
7	                        <li><a href="#">Graphic design</a></li>
8	                        <li><a href="#">Development tools</a></li>
9	                        <li><a href="#">Web design</a></li>
10	                </ul>
11	        </li>
12	        <li><a href="#">Work</a></li>
13	        <li><a href="#">About</a></li>
14	        <li><a href="#">Contact</a></li>
15	</ul>

気になる質問をクリップする

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2017/09/30 13:21

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

回答1件

0

ベストアンサー

###1

CSS
1#menu:before,
2#menu:after {
3        content: "";
4        display: table;
5}
6#menu:after {
7        clear: both;
8}
9※このコードも一部なので追加しました。IE6対応
10#menu {
11        zoom:1;
12}

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

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

###2

CSS
1#menu ul li:first-child > a:after {
2        content: '';
3        position: absolute;
4        left: 40px;
5        top: -6px;
6        border-left: 6px solid transparent;
7        border-right: 6px solid transparent;
8        border-bottom: 6px solid #444;
9}

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

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

CSS
1li:first-child > a:after

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

CSS
1content: '';
2border-left: 6px solid transparent;
3border-right: 6px solid transparent;
4border-bottom: 6px solid #444;

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

CSS
1position: absolute;
2left: 40px;
3top: -6px;

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

HTML
1<html>
2<head>
3	<style>
4		div{ margin-bottom: 150px; }
5
6	    #triangle1:after {
7	    	content: '';
8			border-right: 50px solid transparent;
9			border-left: 50px solid transparent;
10			border-bottom: 50px solid #444;
11	    }
12
13	    #triangle2:after {
14	    	content: '';
15	        border-left: 50px solid #6eff94;
16	        border-right: 50px solid #6ed7ff;
17	        border-bottom: 50px solid #444;
18	    }
19
20	    #triangle3:after {
21	    	content: '';
22	        border-left: 50px solid #6eff94;
23	        border-right: 50px solid transparent;
24	        border-bottom: 50px solid transparent;
25	    }
26
27	    #triangle4:after {
28	    	content: '';
29	        border-top: 50px solid #ff6c6c;
30	        border-left: 50px solid #6eff94;
31	        border-right: 50px solid #6ed7ff;
32	        border-bottom: 50px solid #444;
33	    }
34
35	    #triangle5 {
36	    	height: 100px;
37	        border-top: 50px solid #ff6c6c;
38	        border-left: 50px solid #6eff94;
39	        border-right: 50px solid #6ed7ff;
40	        border-bottom: 50px solid #444;
41	    }
42	    #triangle6 {
43	    	width: 0;
44	    	height: 0;
45	        border-top: 50px solid #ff6c6c;
46	        border-left: 50px solid #6eff94;
47	        border-right: 50px solid #6ed7ff;
48	        border-bottom: 50px solid #444;
49	    }
50	    #triangle7 {
51	    	width: 0;
52	    	height: 0;
53	        border-top: 50px solid transparent;
54	        border-left: 50px solid transparent;
55	        border-right: 50px solid transparent;
56	        border-bottom: 50px solid #444;
57	    }
58	</style>
59</head>
60<body>
61	<div id="triangle1"></div>
62	<div id="triangle2"></div>
63	<div id="triangle3"></div>
64	<div id="triangle4"></div>
65	<div id="triangle5"></div>
66	<div id="triangle6"></div>
67	<div id="triangle7"></div>
68</body>
69
70</html>

投稿2017/09/30 19:12

編集2017/10/01 11:32
IShix
IShix

総合スコア1724

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

hika109
hika109

2017/10/01 04:19

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

2017/10/01 04:22

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

2017/10/01 11:32

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

質問の解決につながる回答をしましょう。 サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。 また、読む側のことを考えた、分かりやすい文章を心がけましょう。

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

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

トップHTML5に関する質問

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