Q&A
pc-menu2のliにメニューの記述や情報を記述しており、サイズを統一したのですがどうすればよろしいでしょうか。
ご教授お願いいたします。
html
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"><!-- baneではなくname --> 6 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> 7 <link rel="stylesheet" href="https://cdn.jsdelivr.net/jquery.meanmenu/2.0.6/meanmenu.min.css"> 8 <link rel="stylesheet" href="css/font-awesome.min.css"> 9 <!--インストールしたfontawesomeを読み込む--> 10 <link rel="stylesheet" href="css/styles.css"> 11 <!--作ったCSSを読み込む--> 12 <meta bane="viewport" content="width=device-width, initial-scale=1.0"> 13 <!--スマホで開いたとき度の幅で描画するかの設定--> 14 15 <title>top</title> 16</head> 17 18<body> 19<header> 20 21 <div class="aburasoba_main"> 22 <div class="aburasoba_main_about"> 23 <img src="img/wallpaper.jpg"> 24 </div> 25 </div> 26 27 <div class="aburasoba_main2"> 28 <div class="aburasoba_main_about2"> 29 <img src="img/wallpaper.jpg"> 30 </div> 31 </div> 32 33 <div class="container"> 34 <!-- <i class="fa fa-bars mobile-menu" aria-hidden="true"></i>--> 35 <ul class="pc-menu"> 36 <li><a>トップ</a></li> 37 <li><a href="menu.html">メニュー</a></li> 38 <li><a href="access.html">アクセス</a></li> 39 </ul> 40 41 <ul class="pc-menu2"> 42 <li><a>トップ</a></li> 43 <li><a href="menu.html">メニュー</a></li> 44 <li><a href="access.html">アクセス</a></li> 45 </ul> 46 </div> 47 48<div class="box"> 49<div class="box-title">Come on roast beef...</div> 50<p>“元気を食べてもらいたい ──”<br> 51</p> 52</div> 53 54</header> 55 56 <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> 57 <script src="https://cdn.jsdelivr.net/jquery.meanmenu/2.0.6/jquery.meanmenu.js"></script> 58 <script> 59 $(function () { 60 $("div.container").meanmenu({}); 61 }); 62 </script> 63 64 <footer> 65 </footer> 66</body> 67 68</html> 69
css
1/*１----------------------------------------------------------------------------------*/ 2@charset "utf-8"; 3/*common*/ 4 5body{/*初期設定、余計なmargin,paddingを0に*/ 6font-size: 14px; 7font-family: Verdana, sans-serif; 8margin: 0; 9padding: 0; 10color: #F2F2F2; 11background: #F2F2F2; 12/*初期設定*/ 13 14} 15p{/*行間がゆったりする*/ 16line-height: 2; 17} 18 19.container{/*ここで90％の意味はmysiteという上の文字や写真、写真のコメントなどをかこんでいて 20 左右に一定の空きができる*/ 21 width: 90%; 22 margin: 0 auto; 23} 24 25header{ 26 /*背景画像*/ 27 background-image: url("../img/background.jpg"); 28 background-repeat: no-repeat; 29 background-attachment: fixed;/*背景を固定している*/ 30 background-position: center;/*背景が中央に設定される*/ 31 background-size:cover;/*背景画像をちゃんと表示*/ 32 padding-bottom: 50px;/*ここでpaddingを設定したからsectionのpaddingが無効に*/ 33 34} 35/*aburasoba_main トップの背景*/ 36.aburasoba_main{ 37 background-color: black; 38 /*margin: 10px;*//*ここにマージンを入れるとblackの余白を入れられる*/ 39} 40 41.aburasoba_main_about img{ 42 display: block; 43 margin-left: auto; 44 margin-right: auto; 45 max-width: 100%; 46} 47 48/*aburasoba_main トップの背景のウィンドウを小さくしたときに表示させたいやつ*/ 49.aburasoba_main2{ 50 background-color: black; 51 /*margin: 10px;*//*ここにマージンを入れるとblackの余白を入れられる*/ 52 padding-left: 50px; 53 padding-right: 50px; 54} 55 56.aburasoba_main_about2 img{ 57 58 display: block; 59 margin-left: auto; 60 margin-right: auto; 61 max-width: 100%; 62} 63 64/*header-mobile-menuはアイコン右寄せ*/ 65.mobile-menu{ 66float: right; 67font-size: 24px; 68cursor: pointer; 69} 70 71.pc-menu{ 72display: block;/*要素の表示形式をしていするっぽい、ブロック要素を表示,,*/ 73/*46行目にheader-pc-menuを見えない設定をして、ここで820px以上いくとここで表示させる*/ 74list-style: none; 75padding: 10px; 76margin: 0; 77/*余計なマージンパディング取る、*/ 78float: center;/*mysiteも入っているpc-menuの中に右にする設定*/ 79text-align: center; 80/* 81background:rgba(51,51,51, 0.85); 82font-weight: bold;*/ 83} 84 85.pc-menu2 { 86 display: flex;/*追加*/ 87 width: 100%; 88 margin: 0; 89 list-style-type: none; 90 flex-wrap: nowrap;/*追加*/ 91 padding: 0; 92} 93 94 95.pc-menu > li { 96display: inline-block;/*横にする設定*/ 97width: 60px; 98text-align: center; 99cursor: pointer; 100} 101 102.pc-menu2 li { 103 padding: 0; 104 margin: 0; 105 text-align: center; 106 flex-grow: 1;/*追加*/ 107} 108.pc-menu2 li a{ 109 width: auto; 110 color:#fff; 111 font-size:12px; 112 font-weight:bold; 113 padding: 10px 0; 114 text-decoration:none; 115 display:block; 116 background:#666; 117} 118.pc-menu2 li a:hover{ 119 background: #555; 120} 121 122/*sita ...imgと指定すれば画像が指定できた*/ 123.sita img { 124 display: block; 125 height: 90px; 126 margin: 0 auto; 127 width: 160px; 128} 129 130/*レスポンシブデザインの3本線の設定*/ 131.mean-container a.meanmenu-reveal span { 132 display: block; 133 background: #cccccc; 134 height: 3px; 135 margin-top: 3px; 136} 137 138/*テキストの枠組みの設定*/ 139/*box*/ 140.box { 141margin: 2em 0;/*線？*/ 142margin: 50px;/*左右余白*/ 143} 144.box .box-title { 145font-size: 1.2em; 146background:rgba(51,51,51, 0.85); 147padding: 4px; 148text-align: center; 149color: #cccccc; 150font-weight: bold; 151letter-spacing: 0.05em; 152} 153 154.box p { 155padding: 15px 15px; 156margin: 0; 157background:rgba(51,51,51, 0.85); 158color: #cccccc; 159} 160 161.box img{ 162padding: 15px 15px; 163margin: 0; 164background:rgba(51,51,51, 0.85); 165color: #cccccc; 166} 167 168.box h2 h3 { 169padding: 15px 20px; 170margin: 0; 171background:rgba(51,51,51, 0.85); 172color: #cccccc; 173} 174 175/*box2*/ 176.box2 { 177margin: 50px;/*左右余白*/ 178display:flex;/*左右に配置するフレックスボックスと呼ばれるもの*/ 179display:-webkit-flex;/*displey:flex;と同じ意味だけどこれはchoromeのバージョンがflexより古いときに対応するもの*/ 180min-width: 400px;/*box2で囲っている最小値を設定している、これでウィンドウ幅を小さくしたとき400pxまで小さくなる*/ 181justify-content: center;/*中央配置*/ 182} 183.box2 .box-title { 184font-size: 1.2em; 185background:rgba(51,51,51, 0.85); 186padding: 4px; 187text-align: center; 188color: #cccccc; 189font-weight: bold; 190letter-spacing: 0.05em; 191} 192 193.box2 img{ 194 width:45%; 195 height: 45%; 196max-width: 378px 197} 198 199.box2 p { 200padding: 15px 15px; 201margin: 0; 202background:rgba(51,51,51, 0.85); 203color: #cccccc; 204min-width: 314px;/*テキストの左右の幅の最小値*/ 205} 206 207.box2 img{ 208padding: 15px 15px; 209margin: 0; 210background:rgba(51,51,51, 0.85); 211} 212 213.box2 h2{ 214padding: 15px 20px; 215margin: 0; 216background:rgba(51,51,51, 0.85); 217color: #cccccc; 218} 219 220/*box3*/ 221 222.box3 { 223margin: 50px;/*左右余白*/ 224display:flex;/*左右に配置するフレックスボックスと呼ばれるもの*/ 225display:-webkit-flex;/*displey:flex;と同じ意味だけどこれはchoromeのバージョンがflexより古いときに対応するもの*/ 226justify-content: center;/*中央配置*/ 227/*垂直の方向の並び 11/10*/ 228-webkit-align-items: flex-start; 229align-items: flex-start; 230-webkit-flex-direction: column-reverse; 231/*flex-direction: column-reverse;*/ 232min-width: 200px;/*テキストの左右の幅の最小値*/ 233background:rgba(51,51,51, 0.85); 234} 235.box3 .box-title { 236font-size: 1.2em; 237padding: 4px; 238text-align: center; 239color: #cccccc; 240font-weight: bold; 241letter-spacing: 0.05em; 242} 243 244.box3 img{ 245 padding: 15px 5%; 246 margin: 0; 247 width:90%; 248 height: auto; 249 min-width: 200px;/*テキストの左右の幅の最小値*/ 250 max-width:414px;/*min-widthで最小値を設定してmax-widthで最大値を0%にしているのでサイズが固定される*/ 251} 252 253.box3 iframe{ 254 padding: 15px 5%; 255 margin: 0; 256 width:90%; 257 height: auto; 258 min-width: 200px;/*テキストの左右の幅の最小値*/ 259 max-width:414px;/*min-widthで最小値を設定してmax-widthで最大値を0%にしているのでサイズが固定される*/ 260} 261 262.box3 p { 263padding: 15px 15px; 264margin: 0; 265color: #cccccc; 266min-width: 20px;/*テキストの左右の幅の最小値*/ 267} 268 269 270 271.box3 h2{ 272padding: 15px 20px; 273margin: 0; 274color: #cccccc; 275} 276 277/*レスポンシブルデザイン設定①*/ 278/*幅の大きさが変わる設定*/ 279/*画面が414px以下になったとき*/ 280@media (max-width: 414px){ 281 .pc-menu{ 282 color:#cccccc; 283 } 284 .aburasoba{/*アイコンを消す*/ 285 display: none; 286 } 287 .pc-menu2{ 288 display: none; 289 } 290 .box2{ 291 display: none; 292 } 293 .boxmap{ 294 display: none; 295 } 296 297/*.pull-right*/ 298.right-side{ 299 float: right; 300 padding-left: 5%; 301} 302/*.pull-left*/ 303.left-side{ 304 float: left; 305 padding-right: 5%; 306} 307 308.news .container{ 309 display: flex; 310 justify-content: space-between;/*均等に余白が空く設定*/ 311} 312.news .item{/*newsに入っている画像と文字に対して30%*/ 313 width: 30%; 314} 315.news .item img{/*画像が30％だとちゃんと見えないので画像だけ100%に*/ 316 width: 100%; 317} 318.aburasoba_main_about img{ 319 display: none; 320} 321 322} 323/*画面が414px以上になったとき 324min-widthが〇〇以上、max-widthが〇〇までという認識*/ 325@media (min-width: 414px){ 326.container{ 327 width: 414px; 328} 329.mobile-menu{/*アイコンを消す*/ 330display: none; 331} 332 333.pc-menu{ 334 display: none; 335} 336 337.aburasoba_main_about2 img{ 338 display: none; 339} 340 341.box3{ 342 display: none; 343} 344 345.boxmap2{ 346 display: none; 347} 348 349} 350/* 351 352/*footer*/ 353 354footer { 355 text-align: center; 356 padding: 10px 0; 357} 358
回答1件
0
以下のように行うことができると思いますが、いかがでしょうか？
HTML
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"><!-- baneではなくname --> 6 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> 7 <link rel="stylesheet" href="https://cdn.jsdelivr.net/jquery.meanmenu/2.0.6/meanmenu.min.css"> 8 <title>top</title> 9 <style type="text/css">.pc-menu,.pc-menu2 li,.pc-menu>li{text-align:center}body{font-size:14px;font-family:Verdana,sans-serif;margin:0;padding:0;color:#F2F2F2;background:#F2F2F2}.aburasoba_main,.aburasoba_main2{background-color:#000}p{line-height:2}.container{width:90%;margin:0 auto}.aburasoba_main_about img,.aburasoba_main_about2 img{margin-left:auto;margin-right:auto;max-width:100%;display:block}header{background-image:url(../img/background.jpg);background-repeat:no-repeat;background-attachment:fixed;background-position:center;background-size:cover;padding-bottom:50px}.aburasoba_main2{padding-left:50px;padding-right:50px}.mobile-menu{float:right;font-size:24px;cursor:pointer}.pc-menu{display:block;list-style:none;padding:10px;margin:0;float:right}.pc-menu2{display:flex;width:100%;margin:0;list-style-type:none;flex-wrap:nowrap;padding:0}.pc-menu>li{display:inline-block;width:60px;cursor:pointer}.pc-menu2 li{padding:0;margin:0;flex-grow:1}.pc-menu2 li a{width:auto;color:#fff;font-size:12px;font-weight:700;padding:10px 0;text-decoration:none;display:block;background:#666}.box .box-title,.box2 .box-title,.box3 .box-title{font-size:1.2em;font-weight:700;letter-spacing:.05em;text-align:center}.pc-menu2 li a:hover{background:#555}.sita img{display:block;height:90px;margin:0 auto;width:160px}.mean-container a.meanmenu-reveal span{display:block;background:#ccc;height:3px;margin-top:3px}.box{margin:50px}.box h2 h3,.box img,.box p{margin:0;background:rgba(51,51,51,.85);color:#ccc}.box .box-title{background:rgba(51,51,51,.85);padding:4px;color:#ccc}.box img,.box p{padding:15px}.box h2 h3{padding:15px 20px}.box2{margin:50px;display:flex;display:-webkit-flex;min-width:400px;justify-content:center}.box2 .box-title{background:rgba(51,51,51,.85);padding:4px;color:#ccc}.box2 img,.box2 p{padding:15px;margin:0;background:rgba(51,51,51,.85)}.box2 img{width:45%;height:45%;max-width:378px}.box2 p{color:#ccc;min-width:314px}.box2 h2{padding:15px 20px;margin:0;background:rgba(51,51,51,.85);color:#ccc}.box3{margin:50px;display:flex;display:-webkit-flex;justify-content:center;-webkit-align-items:flex-start;align-items:flex-start;-webkit-flex-direction:column-reverse;min-width:200px;background:rgba(51,51,51,.85)}.box3 .box-title{padding:4px;color:#ccc}.box3 iframe,.box3 img{padding:15px 5%;margin:0;width:90%;height:auto;min-width:200px;max-width:414px}.box3 p{padding:15px;margin:0;color:#ccc;min-width:20px}.box3 h2{padding:15px 20px;margin:0;color:#ccc}@media (max-width:414px){.pc-menu{color:#ccc}.aburasoba,.box2,.boxmap,.pc-menu2{display:none}.right-side{float:right;padding-left:5%}.left-side{float:left;padding-right:5%}.news .container{display:flex;justify-content:space-between}.news .item{width:30%}.news .item img{width:100%}.aburasoba_main_about img{display:none}}@media (min-width:414px){.container{width:100%}.aburasoba_main_about2 img,.box3,.boxmap2,.mobile-menu,.pc-menu{display:none}}footer{text-align:center;padding:10px 0}</style> 10</head> 11 12<body> 13<header> 14 15 <div class="aburasoba_main"> 16 <div class="aburasoba_main_about"> 17 <img src="img/wallpaper.jpg"> 18 </div> 19 </div> 20 21 <div class="aburasoba_main2"> 22 <div class="aburasoba_main_about2"> 23 <img src="img/wallpaper.jpg"> 24 </div> 25 </div> 26 27 <div class="container"> 28 <!-- <i class="fa fa-bars mobile-menu" aria-hidden="true"></i>--> 29 <ul class="pc-menu"> 30 <li><a>トップ</a></li> 31 <li><a href="menu.html">メニュー</a></li> 32 <li><a href="access.html">アクセス</a></li> 33 </ul> 34 35 <ul class="pc-menu2"> 36 <li><a>トップ</a></li> 37 <li><a href="menu.html">メニュー</a></li> 38 <li><a href="access.html">アクセス</a></li> 39 </ul> 40 </div> 41 42 <div class="box"> 43 <div class="box-title">Come on roast beef...</div> 44 <p>“元気を食べてもらいたい ──”<br> 45 </p> 46 </div> 47 48</header> 49 50<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> 51<script src="https://cdn.jsdelivr.net/jquery.meanmenu/2.0.6/jquery.meanmenu.js"></script> 52<script> 53 $(function () { 54 $("div.container").meanmenu({}); 55 }); 56</script> 57<footer> 58</footer> 59</body> 60</html> 61
投稿2017/12/01 14:42
総合スコア14731
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/12/04 07:20
2017/12/04 19:33 編集
2017/12/05 01:21