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

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

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

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

CSS

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

Q&A

解決済

1回答

209閲覧

menuバーの中央配置について

sutosi

総合スコア27

HTML

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

CSS

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

0グッド

0クリップ

投稿2017/10/08 09:33

編集2017/10/08 10:08

pc-menu内の<h1 class="aburasoba">油そば池袋</h1>を削除した際にliでかこった<li>menu</li>を中央配置にしたいのですがfloat: center;にしてもうまくいきません
どうしたらよろしいでしょうか。

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>RWD</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>Menu</li> 37 <li>Menu</li> 38 <li>Menu</li> 39 </ul> 40 <h1 class="aburasoba">油そば池袋</h1> 41 </div> 42 43<div class="box"> 44<div class="box-title">About BANKARA</div> 45<p>“元気を食べてもらいたい ──”<br> 46これが「ばんから」の原点であり、創業以来の精神です。<br> 47麺、スープ、具。ラーメンというシンプルな料理ゆえ、これまで幾多もの苦労や苦難にぶつかるたびに、全力で向き合いながら“最高の一杯” を追い求めてきました。そのスタンスは、今も変わることはありません。<br> 48「おいしかったよ」<br> 49このひと言がうれしくて、私たちは常に考え、工夫を凝らし、試行錯誤を繰り返しながら、日々おいしさに磨きをかけています。<br> 50</p> 51</div> 52 53</header> 54 55 <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> 56 <script src="https://cdn.jsdelivr.net/jquery.meanmenu/2.0.6/jquery.meanmenu.js"></script> 57 <script> 58 $(function () { 59 $("div.container").meanmenu({}); 60 }); 61 </script> 62 63 <footer> 64 <div class="sita"> 65 <img src="img/footer.png"> 66 </div> 67 </footer> 68 69</body> 70 71</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 66/*header-mobile-menuはアイコン右寄せ*/ 67.mobile-menu{ 68float: right; 69font-size: 24px; 70cursor: pointer; 71} 72 73.pc-menu{ 74display: block;/*要素の表示形式をしていするっぽい、ブロック要素を表示,,*/ 75/*46行目にheader-pc-menuを見えない設定をして、ここで820px以上いくとここで表示させる*/ 76list-style: none; 77padding: 10px; 78margin: 0; 79/*余計なマージンパディング取る、*/ 80float: center;/*mysiteも入っているpc-menuの中に右にする設定*/ 81} 82 83.pc-menu > li { 84display: inline-block;/*横にする設定*/ 85width: 60px; 86text-align: center; 87cursor: pointer; 88} 89 90/*sita ...imgと指定すれば画像が指定できた*/ 91.sita img { 92 display: block; 93 height: 90px; 94 margin: 0 auto; 95 width: 160px; 96} 97 98/*レスポンシブデザインの3本線の設定*/ 99.mean-container a.meanmenu-reveal span { 100 display: block; 101 background: #cccccc; 102 height: 3px; 103 margin-top: 3px; 104} 105 106/*テキストの枠組みの設定*/ 107.box { 108margin: 2em 0;/*線?*/ 109margin: 50px;/*左右余白*/ 110} 111.box .box-title { 112font-size: 1.2em; 113background:rgba(51,51,51, 0.85); 114padding: 4px; 115text-align: center; 116color: #cccccc; 117font-weight: bold; 118letter-spacing: 0.05em; 119} 120.box p { 121padding: 15px 20px; 122margin: 0; 123background:rgba(51,51,51, 0.85); 124color: #cccccc; 125} 126 127/*レスポンシブルデザイン設定①*/ 128/*幅の大きさが変わる設定*/ 129/*画面が570px以下になったとき*/ 130@media (max-width: 414px){ 131 .pc-menu{ 132 color:#cccccc; 133 } 134 .aburasoba{/*アイコンを消す*/ 135 display: none; 136 } 137/*.pull-right*/ 138.right-side{ 139 float: right; 140 padding-left: 5%; 141} 142/*.pull-left*/ 143.left-side{ 144 float: left; 145 padding-right: 5%; 146} 147 148.news .container{ 149 display: flex; 150 justify-content: space-between;/*均等に余白が空く設定*/ 151} 152.news .item{/*newsに入っている画像と文字に対して30%*/ 153 width: 30%; 154} 155.news .item img{/*画像が30%だとちゃんと見えないので画像だけ100%に*/ 156 width: 100%; 157} 158.aburasoba_main_about img{ 159 display: none; 160} 161 162} 163/*画面が570px以上になったとき 164min-widthが〇〇以上、max-widthが〇〇までという認識*/ 165@media (min-width: 414px){ 166.container{ 167 width: 414px; 168} 169.mobile-menu{/*アイコンを消す*/ 170display: none; 171} 172 173.aburasoba_main_about2 img{ 174 display: none; 175} 176 177} 178/* 179 180/*footer*/ 181 182footer { 183 text-align: center; 184 padding: 10px 0; 185} 186

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

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

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

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

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

guest

回答1

0

ベストアンサー

<p>menu</p>というのが見当たりませんが、質問者さんが想像する動作は以下のような動作でしょうか?

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

投稿2017/10/08 09:57

編集2017/10/08 10:19
s8_chu

総合スコア14731

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

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

sutosi

2017/10/09 14:37

間違えました、pc-menu内の<li>Menu</li>です 無事解決いたしました、ありがとうございます!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問