Q&A
ありがとうございます。
第三の回答についてですが、青色の下地の部分が記事ではなくサイトサイズで合わせられてしまうため、縮小したときに左右に不自然なほど余りが生じてしまいます。それをうまく調整することってできますか？
はてなブログにてデザインを改善したいと考えています。
したいことは
⑴高さを中央に
⑵留学－中国語間の謎の空間をなくしたい
の二点です。
追記：もう一点したいことがありました。
この表全体のサイズ感が悪く、画面の拡大・縮小に応じて勝手に開業などしてしまいます。
記事の幅と同じで固定したいのですが、どうしたらいいですか？
Html
1<div id="top-editarea-inner"></div> 2<div id="gnav" class="default-nav"> 3 <div class="container"> 4 <div class="col12"> 5 <nav id="menu"> 6 <ul id="menubar" class="global-nav"> 7 <li class="header-menu"><a href="#">ニュース</a></li> 8 <li class="header-menu"><a href="#">ブログについて</a></li> 9 <li class="header-menu"><a href="#">ギャラリー</a></li> 10 <li class="header-menu"><a href="#">旅行</a> 11 <ul class="sub-menu"> 12 <li><a href="#"></a></li> 13 <li><a href="#"></a></li> 14 <li><a href="#"></a></li> 15 <li><a href="#"></a></li> 16 </ul> 17 <ul class="sub-menu"> 18 <li><a href="#"></a></li> 19 <li><a href="#"></a></li> 20 <li><a href="#"></a></li> 21 <li><a href="#"></a></li> 22 </ul> 23 </li> 24 <li class="header-menu"><a href="#">留学</a> 25 <ul class="sub-menu"> 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 </ul> 31 </li> 32 <li class="header-menu"><a href="#">中国語</a> 33 <ul class="sub-menu"> 34 <li><a href="#"></a></li> 35 <li><a href="#"></a></li> 36 <li><a href="#"></a></li> 37 <li><a href="#"></a></li> 38 </ul> 39 </li> 40 <li class="header-menu"><a href="#">その他</a> 41 <ul class="sub-menu"> 42 <li><a href="#"></a></li> 43 <li><a href="#"></a></li> 44 <li><a href="#"></a></li> 45 <li><a href="#"></a></li> 46 </ul> 47 </li> 48 <li class="header-menu"><a href="#">お問い合わせ</a> 49 <ul class="sub-menu"> 50 <li><a href="#"></a></li> 51 <li><a href="#"></a></li> 52 <li><a href="#"></a></li> 53 <li><a href="#"></a></li> 54 </ul> 55 </li> 56 </ul> 57 </nav> 58</div> 59</div> 60</div>
現在こういう感じになっています。
css
1#gnav{ 2background-color: #81b2e2; 3display:block; 4font-size:100%; 5} 6 7.default-nav{ 8 position: relative; 9 box-shadow: 0 2px 4px -3px rgba(0,0,0,0.2); 10} 11 12#gnav ul { 13 display: table; 14 width: 100%; 15 table-layout: fixed; 16 text-align:center; 17} 18 19ul{ 20list-style:none; 21margin: 0; 22padding: 0; 23border: 0; 24outline: 0; 25font-size: 100%; 26vertical-align: baseline; 27background: transparent; 28} 29 30 31#gnav li{ 32 display: table-cell; 33 position: relative; 34} 35 36#gnav li a{ 37 display:block; 38 position:relative; 39 font-size:1.5em; 40 padding: 6px 0; 41 color: #fff; 42 text-decoration:none; 43 margin:0; 44 text-align: center; 45}
回答3件
0
ベストアンサー
回答からで失礼します
こういう感じに、
メニュー部分の左右に余白が出てしまうという事でしょうか?
投稿2020/07/01 10:37
総合スコア676
0
⑴高さを中央に、改行しないように
css
1#gnav li a{ 2 display:block; 3 position:relative; 4 font-size:1.5em; 5 padding: 6px 0; 6 color: #fff; 7 text-decoration:none; 8 margin:0; 9 text-align: center; 10}
▲ この部分を ▼
▼固定幅の場合
css
1#gnav li a{ 2 display:block; 3 position:relative; 4 font-size:●●em; /* ここの文字サイズを調整 */ 5 line-height:●●em; /* line-heightで高さ設定 */ 6 padding: 0; /* paddingなし */ 7 color: #fff; 8 text-decoration:none; 9 margin:0; 10 text-align: center; 11}
▼レスポンシブの場合
css
1#gnav li a{ 2 display:block; 3 position:relative; 4 padding: 0; /* paddingなし */ 5 color: #fff; 6 text-decoration:none; 7 margin:0; 8 text-align: center; 9} 10 11/* 必要に応じてですが、文字サイズと高さは 親子で切り分けた方が細かい設定がしやすいです */ 12#gnav .global-nav > li a{ 13 font-size:1.5vw; /* 画面巾に応じ文字サイズが変わるよう単位を vw にする */ 14 line-height:●●em; /* line-heightで高さ設定 */ 15} 16#gnav .sub-menu li a{ 17 font-size:1.5vw; /* 親と同じサイズにするか、お好みで */ 18 line-height:●●em; /* お好みで子専用の高さを設定 */ 19}
font-size ⇒ 文字改行が無いよう数値を調整
line-height ⇒ お好みの高さになるよう数値を調整
⑵留学－中国語間の謎の空間をなくしたい
Daregadaさんが書かれた通り、
全角スペースで余計な空白が入っています。
記事の幅と同じで固定
<nav id="menu"> など、メニュー部分をラップしている要素に、記事と同じ幅を設定する▼固定幅の場合
css
1#menu { 2 width: ●●px; /* 記事と同じ幅 */ 3 margin: 0 auto; 4}
▼レスポンシブの場合
css
1#menu { 2 max-width: ●●px; /* 記事と同じ幅 */ 3 margin: 0 auto; 4}
投稿2020/07/01 07:17
編集2020/07/01 07:26総合スコア676
0
とりあえず、中国語の<li> の前に全角空白が2個付いているので削除してください。
投稿2020/06/30 23:35
総合スコア11990
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
退会済みユーザー
2020/07/01 10:43
2020/07/01 10:49 編集
2020/07/01 10:52