メニューバーのみ指定して、CSS変更したい。

はてなブログにてデザインを改善したいと考えています。
したいことは
⑴高さを中央に
⑵留学－中国語間の謎の空間をなくしたい
の二点です。

追記：もう一点したいことがありました。
この表全体のサイズ感が悪く、画面の拡大・縮小に応じて勝手に開業などしてしまいます。
記事の幅と同じで固定したいのですが、どうしたらいいですか？

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件

ベストアンサー

回答からで失礼します

こういう感じに、
メニュー部分の左右に余白が出てしまうという事でしょうか?

投稿2020/07/01 10:37

-millmill-

総合スコア674

退会済みユーザー

2020/07/01 10:43

そういうことでございます。

-millmill-

2020/07/01 10:49 編集

#gnav{ max-width: ●●px; /* 色を付けているここを記事と同じ巾を指定 */ margin: 0 auto; /* 中央揃えになるように左右のmarginをautoに */ background-color: #81b2e2; display:block; font-size:100%; } これで、メニューの背景色も記事巾と同じになると思います^^

-millmill-

2020/07/01 10:52

max-width: ●●px; /* 色を付けているここを記事と同じ巾を指定 */ ▲ この部分は記事部分の指定に合わせて下さいレスポンシブの場合、通常は max-width: ●●px; width: ●●%; というように画面が広い場合の最大幅と、画面を縮小した際の画面巾に対する比率を指定していると思います

行動規範の内容に同意します

⑴高さを中央に、改行しないように

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

-millmill-

総合スコア674

退会済みユーザー

2020/07/01 10:22

ありがとうございます。第三の回答についてですが、青色の下地の部分が記事ではなくサイトサイズで合わせられてしまうため、縮小したときに左右に不自然なほど余りが生じてしまいます。それをうまく調整することってできますか？

行動規範の内容に同意します

とりあえず、中国語の<li> の前に全角空白が2個付いているので削除してください。

投稿2020/06/30 23:35

Daregada

総合スコア11990

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

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

ただいまの回答率
85.46%

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

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

質問する

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

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