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

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

新規登録して質問してみよう
ただいま回答率
85.50%
HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

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

Q&A

1回答

7275閲覧

メニューバーの背景色を画面端まで広げたい

sutosi

総合スコア27

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

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

0グッド

1クリップ

投稿2017/10/15 06:54

pc-menu2でメニューの設定をしているのですが灰色のメニューバーを画面端まで適用したいのですがどうすれば実行できますでしょうか
ご教授お願いいたします。

<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"><!-- baneではなくname --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/jquery.meanmenu/2.0.6/meanmenu.min.css"> <link rel="stylesheet" href="css/font-awesome.min.css"> <!--インストールしたfontawesomeを読み込む--> <link rel="stylesheet" href="css/styles.css"> <!--作ったCSSを読み込む--> <meta bane="viewport" content="width=device-width, initial-scale=1.0"> <!--スマホで開いたとき度の幅で描画するかの設定--> <title>RWD</title> </head> <body> <header> <div class="aburasoba_main"> <div class="aburasoba_main_about"> <img src="img/wallpaper.jpg"> </div> </div> <div class="aburasoba_main2"> <div class="aburasoba_main_about2"> <img src="img/wallpaper.jpg"> </div> </div> <div class="container"> <!-- <i class="fa fa-bars mobile-menu" aria-hidden="true"></i>--> <ul class="pc-menu"> <li>トップ</li> <li>メニュー</li> <li>アクセス</li> </ul> <ul class="pc-menu2"> <li><a href="#">トップaa</a></li> <li><a href="#">メニュー</a></li> <li><a href="#">アクセス</a></li> </ul> </div> <div class="box"> <div class="box-title">About BANKARA</div> <p>“元気を食べてもらいたい ──”<br> これが「ばんから」の原点であり、創業以来の精神です。<br> 麺、スープ、具。ラーメンというシンプルな料理ゆえ、これまで幾多もの苦労や苦難にぶつかるたびに、全力で向き合いながら“最高の一杯” を追い求めてきました。そのスタンスは、今も変わることはありません。<br> 「おいしかったよ」<br> このひと言がうれしくて、私たちは常に考え、工夫を凝らし、試行錯誤を繰り返しながら、日々おいしさに磨きをかけています。<br> </p> </div> </header> <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> <script src="https://cdn.jsdelivr.net/jquery.meanmenu/2.0.6/jquery.meanmenu.js"></script> <script> $(function () { $("div.container").meanmenu({}); }); </script> <footer> <div class="sita"> <img src="img/footer.png"> </div> </footer> </body> </html>

css

1/*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} 14p{/*行間がゆったりする*/ 15line-height: 2; 16} 17 18.container{/*ここで90%の意味はmysiteという上の文字や写真、写真のコメントなどをかこんでいて 19 左右に一定の空きができる*/ 20 width: 90%; 21 margin: 0 auto; 22} 23 24header{ 25 /*背景画像*/ 26 background-image: url("../img/background.jpg"); 27 background-repeat: no-repeat; 28 background-attachment: fixed;/*背景を固定している*/ 29 background-position: center;/*背景が中央に設定される*/ 30 background-size:cover;/*背景画像をちゃんと表示*/ 31 padding-bottom: 50px;/*ここでpaddingを設定したからsectionのpaddingが無効に*/ 32} 33 34 35/*aburasoba_main トップの背景*/ 36.aburasoba_main{ 37 background-color: black; 38 /*margin: 10px;*//*ここにマージンを入れるとblackの余白を入れられる*/ 39} 40 41.aburasoba_main_about img{ 42 43 display: block; 44 margin-left: auto; 45 margin-right: auto; 46 max-width: 100%; 47} 48 49/*aburasoba_main トップの背景のウィンドウを小さくしたときに表示させたいやつ*/ 50.aburasoba_main2{ 51 background-color: black; 52 /*margin: 10px;*//*ここにマージンを入れるとblackの余白を入れられる*/ 53 padding-left: 50px; 54 padding-right: 50px; 55} 56 57.aburasoba_main_about2 img{ 58 59 display: block; 60 margin-left: auto; 61 margin-right: auto; 62 max-width: 100%; 63} 64 65/*header-mobile-menuはアイコン右寄せ*/ 66.mobile-menu{ 67float: right; 68font-size: 24px; 69cursor: pointer; 70} 71 72.pc-menu{ 73display: block;/*要素の表示形式をしていするっぽい、ブロック要素を表示,,*/ 74/*46行目にheader-pc-menuを見えない設定をして、ここで820px以上いくとここで表示させる*/ 75list-style: none; 76padding: 10px; 77margin: 0; 78/*余計なマージンパディング取る、*/ 79float: center;/*mysiteも入っているpc-menuの中に右にする設定*/ 80text-align: center; 81/* 82background:rgba(51,51,51, 0.85); 83font-weight: bold;*/ 84} 85 86.pc-menu2{ 87width: 530px; 88margin:0 ; 89list-style-type: none; 90} 91 92.pc-menu > li { 93display: inline-block;/*横にする設定*/ 94width: 60px; 95text-align: center; 96cursor: pointer; 97} 98 99.pc-menu2 li { 100width: 20%; 101float: left; 102padding: 0; 103margin: 0; 104text-align:center; 105} 106.pc-menu2 li a{ 107 width: auto; 108 color:#fff; 109 font-size:12px; 110 font-weight:bold; 111 padding: 10px 0; 112 text-decoration:none; 113 display:block; 114 background:#666; 115} 116.pc-menu2 li a:hover{ 117 background: #555; 118} 119 120/*sita ...imgと指定すれば画像が指定できた*/ 121.sita img { 122 display: block; 123 height: 90px; 124 margin: 0 auto; 125 width: 160px; 126} 127 128/*レスポンシブデザインの3本線の設定*/ 129.mean-container a.meanmenu-reveal span { 130 display: block; 131 background: #cccccc; 132 height: 3px; 133 margin-top: 3px; 134} 135 136/*テキストの枠組みの設定*/ 137.box { 138margin: 2em 0;/*線?*/ 139margin: 50px;/*左右余白*/ 140} 141.box .box-title { 142font-size: 1.2em; 143background:rgba(51,51,51, 0.85); 144padding: 4px; 145text-align: center; 146color: #cccccc; 147font-weight: bold; 148letter-spacing: 0.05em; 149} 150.box p { 151padding: 15px 20px; 152margin: 0; 153background:rgba(51,51,51, 0.85); 154color: #cccccc; 155} 156 157/*レスポンシブルデザイン設定①*/ 158/*幅の大きさが変わる設定*/ 159/*画面が414px以下になったとき*/ 160@media (max-width: 414px){ 161 .pc-menu{ 162 color:#cccccc; 163 } 164 .aburasoba{/*アイコンを消す*/ 165 display: none; 166 } 167 .pc-menu2{ 168 display: none; 169 } 170/*.pull-right*/ 171.right-side{ 172 float: right; 173 padding-left: 5%; 174} 175/*.pull-left*/ 176.left-side{ 177 float: left; 178 padding-right: 5%; 179} 180 181.news .container{ 182 display: flex; 183 justify-content: space-between;/*均等に余白が空く設定*/ 184} 185.news .item{/*newsに入っている画像と文字に対して30%*/ 186 width: 30%; 187} 188.news .item img{/*画像が30%だとちゃんと見えないので画像だけ100%に*/ 189 width: 100%; 190} 191.aburasoba_main_about img{ 192 display: none; 193} 194 195} 196/*画面が414px以上になったとき 197min-widthが〇〇以上、max-widthが〇〇までという認識*/ 198@media (min-width: 414px){ 199.container{ 200 width: 414px; 201} 202.mobile-menu{/*アイコンを消す*/ 203display: none; 204} 205 206.pc-menu{ 207 display: none; 208} 209 210.aburasoba_main_about2 img{ 211 display: none; 212} 213 214} 215/* 216 217/*footer*/ 218 219footer { 220 text-align: center; 221 padding: 10px 0; 222} 223

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

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

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

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

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

guest

回答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>RWD</title> 9 <style type="text/css"> 10 body { /*初期設定、余計なmargin,paddingを0に*/ 11 font-size: 14px; 12 font-family: Verdana, sans-serif; 13 margin: 0; 14 padding: 0; 15 color: #F2F2F2; 16 background: #F2F2F2; 17 /*初期設定*/ 18 } 19 20 p { /*行間がゆったりする*/ 21 line-height: 2; 22 } 23 24 .container { 25 /*ここで90%の意味はmysiteという上の文字や写真、写真のコメントなどをかこんでいて 26 左右に一定の空きができる*/ 27 width: 90%; 28 margin: 0 auto; 29 } 30 31 header { 32 /*背景画像*/ 33 background-image: url("https://placehold.jp/3d4070/ffffff/150x150.png?text=%20"); 34 background-repeat: no-repeat; 35 background-attachment: fixed; /*背景を固定している*/ 36 background-position: center; /*背景が中央に設定される*/ 37 background-size: cover; /*背景画像をちゃんと表示*/ 38 padding-bottom: 50px; /*ここでpaddingを設定したからsectionのpaddingが無効に*/ 39 } 40 41 /*aburasoba_main トップの背景*/ 42 .aburasoba_main { 43 background-color: black; 44 /*margin: 10px;*//*ここにマージンを入れるとblackの余白を入れられる*/ 45 } 46 47 .aburasoba_main_about img { 48 49 display: block; 50 margin-left: auto; 51 margin-right: auto; 52 max-width: 100%; 53 } 54 55 /*aburasoba_main トップの背景のウィンドウを小さくしたときに表示させたいやつ*/ 56 .aburasoba_main2 { 57 background-color: black; 58 /*margin: 10px;*//*ここにマージンを入れるとblackの余白を入れられる*/ 59 padding-left: 50px; 60 padding-right: 50px; 61 } 62 63 .aburasoba_main_about2 img { 64 65 display: block; 66 margin-left: auto; 67 margin-right: auto; 68 max-width: 100%; 69 } 70 71 /*header-mobile-menuはアイコン右寄せ*/ 72 .mobile-menu { 73 float: right; 74 font-size: 24px; 75 cursor: pointer; 76 } 77 78 .pc-menu { 79 display: block; /*要素の表示形式をしていするっぽい、ブロック要素を表示,,*/ 80 /*46行目にheader-pc-menuを見えない設定をして、ここで820px以上いくとここで表示させる*/ 81 list-style: none; 82 padding: 10px; 83 margin: 0; 84 /*余計なマージンパディング取る、*/ 85 text-align: center; 86 /* 87 background:rgba(51,51,51, 0.85); 88 font-weight: bold;*/ 89 } 90 91 .pc-menu2 { 92 display: flex; 93 width: 100%; 94 margin: 0; 95 list-style-type: none; 96 flex-wrap: nowrap; 97 } 98 99 .pc-menu2 { 100 padding: 0; 101 } 102 103 .pc-menu > li { 104 display: inline-block; /*横にする設定*/ 105 width: 60px; 106 text-align: center; 107 cursor: pointer; 108 } 109 110 .pc-menu2 li { 111 padding: 0; 112 margin: 0; 113 text-align: center; 114 flex-grow: 1; 115 } 116 117 .pc-menu2 li a { 118 width: auto; 119 color: #fff; 120 font-size: 12px; 121 font-weight: bold; 122 padding: 10px 0; 123 text-decoration: none; 124 display: block; 125 background: #666; 126 } 127 128 .pc-menu2 li a:hover { 129 background: #555; 130 } 131 132 /*sita ...imgと指定すれば画像が指定できた*/ 133 .sita img { 134 display: block; 135 height: 90px; 136 margin: 0 auto; 137 width: 160px; 138 } 139 140 /*レスポンシブデザインの3本線の設定*/ 141 .mean-container a.meanmenu-reveal span { 142 display: block; 143 background: #cccccc; 144 height: 3px; 145 margin-top: 3px; 146 } 147 148 /*テキストの枠組みの設定*/ 149 .box { 150 margin: 2em 0; /*線?*/ 151 margin: 50px; /*左右余白*/ 152 } 153 154 .box .box-title { 155 font-size: 1.2em; 156 background: rgba(51, 51, 51, 0.85); 157 padding: 4px; 158 text-align: center; 159 color: #cccccc; 160 font-weight: bold; 161 letter-spacing: 0.05em; 162 } 163 164 .box p { 165 padding: 15px 20px; 166 margin: 0; 167 background: rgba(51, 51, 51, 0.85); 168 color: #cccccc; 169 } 170 171 /*レスポンシブルデザイン設定①*/ 172 /*幅の大きさが変わる設定*/ 173 /*画面が414px以下になったとき*/ 174 @media (max-width: 414px) { 175 .pc-menu { 176 color: #cccccc; 177 } 178 179 .aburasoba { /*アイコンを消す*/ 180 display: none; 181 } 182 183 .pc-menu2 { 184 display: none; 185 } 186 187 /*.pull-right*/ 188 .right-side { 189 float: right; 190 padding-left: 5%; 191 } 192 193 /*.pull-left*/ 194 .left-side { 195 float: left; 196 padding-right: 5%; 197 } 198 199 .news .container { 200 display: flex; 201 justify-content: space-between; /*均等に余白が空く設定*/ 202 } 203 204 .news .item { /*newsに入っている画像と文字に対して30%*/ 205 width: 30%; 206 } 207 208 .news .item img { /*画像が30%だとちゃんと見えないので画像だけ100%に*/ 209 width: 100%; 210 } 211 212 .aburasoba_main_about img { 213 display: none; 214 } 215 216 } 217 218 /*画面が414px以上になったとき 219 min-widthが〇〇以上、max-widthが〇〇までという認識*/ 220 @media (min-width: 414px) { 221 .container { 222 /*width: 414px;*/ 223 width: 100%; 224 } 225 226 .mobile-menu { /*アイコンを消す*/ 227 display: none; 228 } 229 230 .pc-menu { 231 display: none; 232 } 233 234 .aburasoba_main_about2 img { 235 display: none; 236 } 237 238 } 239 240 /* 241 242 /*footer*/ 243 244 footer { 245 text-align: center; 246 padding: 10px 0; 247 } 248 </style> 249</head> 250 251<body> 252<header> 253 254 <div class="aburasoba_main"> 255 <div class="aburasoba_main_about"> 256 <img src="https://placehold.jp/3d4070/ffffff/150x150.png?text=img/wallpaper.jpg"> 257 </div> 258 </div> 259 260 <div class="aburasoba_main2"> 261 <div class="aburasoba_main_about2"> 262 <img src="https://placehold.jp/3d4070/ffffff/150x150.png?text=img/wallpaper.jpg"> 263 </div> 264 </div> 265 266 <div class="container"> 267 <!-- <i class="fa fa-bars mobile-menu" aria-hidden="true"></i>--> 268 <ul class="pc-menu"> 269 <li>トップ</li> 270 <li>メニュー</li> 271 <li>アクセス</li> 272 </ul> 273 274 <ul class="pc-menu2"> 275 <li><a href="#">トップaa</a></li> 276 <li><a href="#">メニュー</a></li> 277 <li><a href="#">アクセス</a></li> 278 </ul> 279 </div> 280 281 <div class="box"> 282 <div class="box-title">About BANKARA</div> 283 <p>“元気を食べてもらいたい ──”<br> 284 これが「ばんから」の原点であり、創業以来の精神です。<br> 285 麺、スープ、具。ラーメンというシンプルな料理ゆえ、これまで幾多もの苦労や苦難にぶつかるたびに、全力で向き合いながら“最高の一杯” を追い求めてきました。そのスタンスは、今も変わることはありません。<br> 286 「おいしかったよ」<br> 287 このひと言がうれしくて、私たちは常に考え、工夫を凝らし、試行錯誤を繰り返しながら、日々おいしさに磨きをかけています。<br> 288 </p> 289 </div> 290</header> 291<footer> 292 <div class="sita"> 293 <img src="https://placehold.jp/3d4070/ffffff/150x150.png?text=img/footer.png"> 294 </div> 295</footer> 296 297<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> 298<script src="https://cdn.jsdelivr.net/jquery.meanmenu/2.0.6/jquery.meanmenu.js"></script> 299<script> 300 $(function () { 301 $("div.container").meanmenu({}); 302 }); 303</script> 304</body> 305</html>

投稿2017/10/15 07:20

s8_chu

総合スコア14731

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問