Q&A
ありがとうございます。参考にさせて頂きます
ボタンを押すと、メニューが出てくるハンバーガーメニューを作成しています。
CSSを用いて、１つ目のメニューの作成はできました。
そして、その作成したメニューの選択肢のいくつかの中に
さらに選択肢のあるメニューを追加するといったものです。
下の図にあるように、
・HOME
・サービスコンテント
・アイテム一覧
∟クッションカバー
ぬいぐるみ etc(50%で２つの要素が入るように)
・ご利用ガイド
といった感じです。
なぜか、CSSでdisplay flexを指定しても横並びになりません。
メニューの中にあるメニューの作成は１つ目のメニューを参考にして作成いたしましたが、何か問題があるでしょうか？
html
1 2<header> 3 <div class="container"> 4<div class="header-wrapper"> 5 <div class="header-bk"> 6 <img class="logo-img" src="img/logo-header (2).png"> 7 <input type="checkbox" id="down-menu"> 8 <label for="down-menu"><span><img class="menu-img" src="img/menu-sp-btn-copyーcopy.png"></span></label> 9 <div class="content-list"> 10 <div> 11 <div id="menu-list"> 12 13 <div class="top-list"> 14 <ul> 15 <div class="dot"></div> 16<li><a href="#">HOME</a></li> 17<div class="dot"></div> 18<li><a href="#">サービスコンセプト</a></li> 19<div class="dot"></div> 20 21<li><div class="item"> 22 <input type="checkbox" id="all-item"> 23 <a><label for="all-item">アイテム一覧</a></label> 24<div class="item-contents"> 25 <ul id="all-item-list"> 26 <li><a href="#">クッションカバー</a></li> 27 <li><a href="#">ウッドフレームアート</a></li> 28 <li><a href="#">ぬいぐるみ</a></li> 29 <li><a href="#">アートパネル</a></li> 30 <li><a href="#">デニムバッグ</a></li> 31 <li><a href="#">グラフィックアート</a></li> 32 </ul> 33</div></div> 34</li> 35 36<div class="dot"></div> 37<li><a href="#">ご利用ガイド</a></li> 38<div class="dot"></div> 39<li><a href="#">お客様の声</a></li> 40<div class="dot"></div> 41<li><a href="#">よくあるご質問</a></li> 42<div class="dot"></div> 43<li><a href="#">お問い合わせ</a></li> 44<div class="dot"></div> 45<li><a href="#">その他</a></li> 46<div class="dot"></div> 47 </ul> 48 </div> 49 50 51<div class="menu-bottom-list"> 52<ul> 53 <li><a href="#">「特定商取引に関する法律」に基づく表記</a></li> 54 <li><a href="#">プライバシーポリシー</a></li> 55 <li><a href="#">運営会社</a></li> 56 <li><a href="#">利用規約</a></li> 57</ul></div> 58 59<div class="menu-bottom-icon"> 60 <a href="#"><img src="img/icon-facebook (2).png"></a> 61 <a href="#"><img src="img/icon-instagram (2).png"></a> 62 <a href="#"><img src="img/icon-line- (1).png"></a> 63</div> 64</div> 65</div> 66 </div> 67</div> 68<div> 69</header>
css
1.container { 2 font-family: "游ゴシック", "Yu Gothic", "游ゴシック体", YuGothic, sans-serif; 3 font-weight: normal; 4} 5 6.header-wrapper { 7 position: fixed; 8 top: 0px; 9 left: 0px; 10 width: 100%; 11 height: 75px; 12 background-image: url(img/bg-header-s-cp.png); 13 background-repeat: repeat; 14 z-index: 99; 15} 16 17.header-bk { 18 background-image: url(img/bg-header-s-cp.png); 19 background-repeat: repeat-x; 20} 21 22.logo-img { 23 width: 200px; 24 padding-top: 20px; 25 padding-left: 20px; 26} 27 28.menu-img { 29 width: 50px; 30 height: auto; 31 32} 33 34 35 36#down-menu { 37 display: none; 38} 39 40.top-list a { 41 display: block; 42 padding: 20px 0; 43 text-decoration: none; 44 color: #3E89CA; 45 font-weight: 600; 46} 47 48.top-list a:hover{ 49 background-color: #EA6684; 50 color: #FFFFFF; 51} 52 53.top-list img { 54margin-left: auto; 55 56} 57 58 59#menu-list { 60 width: 100%; 61 height: 700px; 62} 63 64#input:checked ~ #menu-list { 65 66} 67 68#menu-list li{ 69 70 list-style: none; 71 display: block; 72} 73 74 75#all-item{ 76 display: none; 77} 78 79#all-item-list { 80 display: inline-block; 81 width: 40% 82} 83 84#all-item-list li { 85display: flex; 86} 87 88 89.dot { 90 height: 2px; 91 margin: 0px 0 0 0; 92 background-image: linear-gradient(to right, #000, #000 1px, transparent 1px, transparent 2px); 93 background-size: 5px 1px; 94 background-position: top; 95 background-repeat: repeat-x; 96 } 97 98.content-list { 99 background-image: url(img/bg-spnav-01.png); 100 background-color: #FFFFFF; 101 width: 100%; 102} 103 104 105 106 107 108.menu-bottom-list { 109} 110 111.menu-bottom-list ul{ 112 list-style: none; 113 display: flex; 114 margin: 10px; 115} 116 117.menu-bottom-list a { 118 text-decoration: none; 119 color: #3E89CA; 120 font-weight: 600; 121} 122 123.menu-bottom-icon { 124 text-align: center; 125} 126 127.menu-bottom-icon img { 128 width: 70px; 129 height: auto; 130 padding: 20px; 131} 132 133
横並びにはなりましたが、
これを画面全体的に広げ、５０％ずつで
２つの要素を全体的に表示したいと考えています。
また、どうしても左が少し空いているので詰めたいです。
回答2件
0
display:flexは親要素に指定するので、liを横並びにするなら指定するのは#all-item-listです。
なので、
CSS
1#all-item-list { 2 display: flex; 3 flex-wrap: wrap; 4 width: 40% 5} 6 7#all-item-list li { 8 min-width: 50%; 9}
これがイメージに近いのではないでしょうか？
以下は、コメントに対応したものです。
css
1#all-item-list { 2 display: flex; 3 flex-wrap: wrap; 4 width: 100%; 5 padding: 0; 6} 7 8#all-item-list li { 9 min-width: 50%; 10}
左のスペースはpaddingに起因するものですので消しました。
画面全体に広げたいなら親要素のwidth40%が邪魔です。
投稿2020/05/09 18:22
編集2020/05/10 04:58
総合スコア471
0
CSSをHTMLに埋め込む形になります。
以下のソースコードを活用したページです。→こちら
HTML
1<ul id="dropmenu"> 2<li><a href="">A</a></li> 3 4<li><a href="">B</a> 5<ul> 6<li><a href="#">B-a</a></li> 7<li><a href="#">B-b</a> 8<ul> 9<li><a href="#">B-b-1</a></li> 10<li><a href="#">B-b-2</a></li> 11<li><a href="#">B-b-3</a></li> 12<li><a href="#">B-b-4</a></li> 13</ul> 14</li> 15<li><a href="#">B-c</a> 16<ul> 17<li><a href="#">B-c-1</a></li> 18<li><a href="#">B-c-2</a></li> 19<li><a href="#">B-c-3</a> 20<ul> 21<li><a href="#">B-c-3-1</a></li> 22<li><a href="#">B-c-3-2</a></li> 23<li><a href="#">B-c-3-3</a></li> 24<li><a href="#">B-c-3-4</a></li> 25</ul> 26</li> 27<li><a href="#"></a></li> 28</ul> 29</li> 30<li><a href="#"></a> 31<ul> 32<li><a href="#"></a></li> 33<li><a href="#"></a></li> 34<li><a href="#"></a></li> 35<li><a href="#"></a></li> 36</ul> 37</li> 38</ul> 39 40</li> 41<li><a href=""></a> 42<ul> 43<li><a href=""></a> 44<ul> 45<li><a href=""></a></li> 46 47<li><a href=""></a></li> 48<li><a href=""></a></li> 49<li><a href=""></a></li> 50 51</ul></li> 52<li><a href=""></a> 53<ul> 54<li><a href=""></a></li> 55 56<li><a href=""></a></li> 57<li><a href=""></a></li> 58<li><a href=""></a></li> 59 60</ul></li> 61<li><a href=""></a> 62<ul> 63<li><a href=""></a></li> 64<li><a href=""></a></li> 65 66<li><a href=""></a></li> 67<li><a href=""></a></li> 68<li><a href=""></a></li> 69<li><a href=""></a></li> 70<li><a href=""></a></li> 71<li><a href=""></a></li> 72<li><a href=""></a></li> 73<li><a href=""></a></li> 74<li><a href=""></a></li> 75<li><a href=""></a></li> 76<li><a href=""></a></li> 77<li><a href=""></a></li> 78 79</ul></li> 80<li><a href=""></a> 81<ul> 82<li><a href=""></a></li> 83<li><a href=""></a></li> 84<li><a href=""></a></li> 85<li><a href=""></a></li> 86<li><a href=""></a></li> 87<li><a href=""></a></li> 88<li><a href=""></a></li> 89<li><a href=""></a></li> 90 91<li><a href=""></a></li> 92 93</ul></li> 94<li><a href=""></a> 95<ul> 96<li><a href=""></a>--></li> 97<li><a href=""></a></li> 98<li><a href=""></a></li> 99<li><a href=""></a></li> 100<li><a href=""></a></li> 101<li><a href=""></a></li> 102<li><a href=""></a></li> 103 104<li><a href=""></a></li> 105 106</ul></li></ul></li> 107<li><a href=""></a> 108 109<ul><li>Game-1</li> 110<li><a href="#"></a> 111<ul> 112<li><a href="#"></a></li> 113<li><a href="#"></a></li> 114<li><a href="#"></a></li> 115<li><a href="#"></a></li></ul></li> 116<li><a href="#"></a></li></ul> 117</li> 118 119<li><a href=""></a> 120 121<ul><li></li> 122<ul> 123<li><a href="#"></a></li> 124<li><a href="#"></a></li> 125<li><a href="#"></a></li> 126<li><a href="#"></a></li> 127<li><a href="#"></a></li></ul> 128</li> 129<li><a href=""></a></li> 130<li><a href="#"></a> 131<ul> 132<li><a href="#"></a></li> 133<li><a href="#"></a></li> 134<li><a href="#"></a> 135<ul> 136<li><a href="#"></a></li> 137<li><a href="#"></a></li></u></li> 138<li><a href="#"></a></li></ul></li> 139 140</ul></li></ul>
css
1/*PC用ドロップメニュー*/ 2.container { 3 text-align: center; 4} 5#dropmenu { 6 list-style-type: none; 7 width: 100%; 8 /*margin: 30px auto 500px;*/ 9 margin: 30px auto 30px; 10 padding: 0; 11} 12 13#dropmenu::after { 14 clear: both; 15 content: ""; 16 display: block; 17} 18#dropmenu li { 19 position: relative; 20 width: 20%; 21 float: left; 22 margin: 0; 23 padding: 0; 24 text-align: center; 25} 26#dropmenu li a { 27 display: block; 28 margin: 0; 29 padding: 16px 0; 30 background: #0286f3; 31 color: #fff; 32 font-size: 14px; 33 font-weight: bold; 34 min-height: 5px; 35 text-decoration: none; 36} 37#dropmenu li ul { 38 list-style: none; 39 position: absolute; 40 z-index: 100; 41 top: 100%; 42 left: 0; 43 width: 100%; 44 margin: 0; 45 padding: 0; 46} 47#dropmenu li ul li { 48 display: none; 49 width: 100%; 50 height: 14; 51 color: #fff; 52 transition: 0.2s; 53} 54#dropmenu li ul li a { 55 padding: 13px 15px; 56 background: #0286f3; 57 text-align: left; 58 font-size: 12px; 59 font-weight: normal; 60} 61#dropmenu > li:hover > a { 62 background: #0286f3; 63} 64#dropmenu > li:hover li:hover > a { 65 background: #0286f3; 66} 67#dropmenu > li:hover > ul > li { 68 display: block; 69 height: 38px; 70} 71#dropmenu li ul li ul { 72 top: 0; 73 left: 100%; 74} 75#dropmenu li:last-child ul li ul { 76 left: -100%; 77 width: 100%; 78} 79#dropmenu li ul li ul:before { 80 position: absolute; 81 content: ""; 82 top: 14px; 83 left: -20px; 84 width: 0; 85 height: 0; 86 border: 5px solid transparent; 87 border-left-color: #0286f3; 88} 89#dropmenu li:last-child ul li ul:before { 90 position: absolute; 91 content: ""; 92 top: 14px; 93 left: 200%; 94 margin-left: -20px; 95 border: 5px solid transparent; 96 border-right-color: #0286f3; 97} 98#dropmenu li ul li:hover > ul > li { 99 display: block; 100 overflow: visible; 101 height: 38px; 102} 103#dropmenu li ul li ul li a { 104 background: #0286f3; 105} 106#dropmenu li:hover ul li ul li a:hover { 107 background: #0286f3; 108}
投稿2020/05/09 21:31
総合スコア124
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/05/10 01:14
2020/05/10 01:15
2020/05/10 01:26
2020/05/10 03:59
2020/05/10 05:02
2020/05/10 05:57
2020/05/10 05:58