Q&A
前提・実現したいこと
画面を小さくさせるとメニューのリストに余計な隙間ができるが隙間を無くしたい。
発生している問題
画面を小さくさせるとメニューのリストに余計な隙間ができる。
紫の部分が余計な隙間です。隙間は入れていないのに画面を小さくすると発生します。
該当のソースコード
＜HTML＞
<!doctype html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta charset="UTF-8"> <link rel="stylesheet" href="css/common.css" type="text/css"> <title>TEST</title> </head> <body> <!--メインメニュー--> <section id="mainbox"> <!--ロゴ--> <div class="mainlogo"><img src="img/logo.png" width="200" height="95" alt=""/></div> <!--ロゴ--> <!--メニューリスト--> <div class="main-m-list-menu"> <ul class="main-m-list-ul"> <li class="main-m-list1"><a href="#"><span class="menu-text-main">ホーム</span><br><span class="menu-text-sub">HOME</span></a></li> <li class="main-m-list2"><a href="#"><span class="menu-text-main">会社概要</span><br><span class="menu-text-sub">COMPANY</span></a></li> <li class="main-m-list3"><a href="#"><span class="menu-text-main">事業内容</span><br><span class="menu-text-sub">WORKS</span></a></li> <li class="main-m-list4"><a href="#"><span class="menu-text-main">ニュース</span><br><span class="menu-text-sub">NEWS</span></a></li> <li class="main-m-list5"><a href="#"><span class="menu-text-main">採用情報</span><br><span class="menu-text-sub">RECRUIT</span></a></li> <li class="main-m-list6"><a href="#"><span class="menu-text-main">問い合わせ</span><br><span class="menu-text-sub">CONTACT</span></a></li> </ul> </div> <!-- メインメニュー --> </section> </body> </html>
＜CSS＞
* { margin:0; padding:0; } /* 960px以上に適用されるCSS（PC用） */ @media screen and (min-width: 1180px) { #mainbox { width: 100%; display: flex; justify-content: center; } .main-m-list-menu { width: 100%; display: flex; margin-left:8%; } ul { list-style: none; } li { text-align: center; } .main-m-list-menu li a { display: block; width:100%; text-decoration: none; } .main-m-list-menu { display: flex; } .main-m-list-ul { display: flex; } .main-m-list-menu li { width: 150px; display: flex; margin-top:1%; justify-content: center; align-items: center; } .main-m-list2,.main-m-list3,.main-m-list4,.main-m-list5,.main-m-list6 { border-left: 1px solid #9fa0a0; } .menu-text-main { font-weight: bold; color: #333; } .menu-text-sub { color: #9fa0a0; font-size: 80%; } .main-m-list-menu li a:hover { background:#EAE8E8; opacity:0.5; } } /* 768px以上に適用されるCSS（タブレット用） */ @media screen and (min-width: 768px) and ( max-width:1179px) { #mainbox { width:100%; display: flex; } .main-m-list-menu { margin-left:15%; } ul { list-style: none; } li { text-align: center; } .main-m-list-menu li a { display: block; width:100%; text-decoration: none; padding-top:14%; padding-bottom:14%; } .main-m-list-ul { display: flex; justify-content: space-between; flex-wrap: wrap; } .main-m-list-menu li a:hover { background:#EAE8E8; opacity:0.5; } .main-m-list-menu li { width:150px; margin-top:1%; margin-bottom:1%; display: flex; justify-content: center; align-items: center; box-sizing: border-box; flex-wrap: wrap; } .main-m-list2,.main-m-list3,.main-m-list4,.main-m-list5,.main-m-list6 { border-left: 1px solid #9fa0a0; } .menu-text-main { font-weight: bold; color: #333; } .menu-text-sub { color: #9fa0a0; font-size: 80%; } } /* 428px以上に適用されるCSS（スマホ用） */ @media screen and (min-width: 428px) and ( max-width:767px){ }
試したこと
メディアクエリのタブレット用の
.main-m-list-menu li
ここのクラスのこちらを削除してみたり
justify-content: center; align-items: center;
ブラウザの検証機能（Chrome）でみてみても
こちらが何か指定したmarginやpaddingによる隙間ではありませんでした。
回答1件
0
ベストアンサー
どういう結果を想定しているのかわかりませんが
.main-m-list-ulのjustify-contentを「space-between」から
「left」に変えるだけではダメでしょうか？
投稿2021/09/08 04:07
編集2021/09/08 04:16
総合スコア116738
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
退会済みユーザー
2021/09/08 04:14