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
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/10/09 14:37