Q&A
冷やかしでもなんでもなく、大真面目に、見本のソースをコピーしてくればできます。見て再現できないレイアウトに悩むより答え見た方が学ぶことが多いこともあります(場合により)
それを全くしない縛りなのであれば、質問サイトで説明求めるのもどうなのかな？と思います。
どこまでの制約でやってるのでしょうか？
以下のサイトのような地図リストを作りたいと模写コーディング中です。
https://www.minnanokaigo.com/
しかし作ってる中で、灰色の枠の中に空白が出来てしまいました。
どうしたら見本のようなものに出来ますでしょうか？
また検証を見たのですが、各県ごとに灰色のボーダーを出す方法が分かりませんでした。
こちらの解説もお願いします。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>広告運用.com</title> <link rel="stylesheet" type="text/css" href="./css/style.css"> </head> <body> <header class="header"> <div class="logo"> <img class="logo" src="img/logo.png" alt="会社ロゴ"> </div> <div class="form"> <a href="#">問い合わせフォーム</a> </div> </header> <section class="mv"> <div class="mv-left"> <div class="mv-left-text"> <h1>あなたにぴったりの<br>広告代理店が<br>きっと見つかる</h1> </div> <div class="mv-left-search"> <p>掲載物件数<span>5,000</span>件</p> </div> </div> <div class="mv-right"> <div class="map"> <img class="japanMap" src="img/japanMap.png" alt="日本地図"> <div class="map-list kyushu"> <ul> <li><a href="#">福岡</a></li> <li><a href="#">佐賀</a></li> <li><a href="#">長崎</a></li> <li><a href="#">大分</a></li> <li><a href="#">熊本</a></li> <li><a href="#">宮崎</a></li> <li><a href="#">鹿児島</a></li> </ul> </div> </div> </div> </section> <footer> </footer> </body> </html>
/* CSSのリセット */ * { margin: 0; padding: 0; box-sizing: border-box; outline: none; font-family: 'Roboto', sans-serif; } /* ヘッダー */ .header { height: 60px; background-color:#030201; } .logo { height: 60px; float: left; margin-left: 10px; } .form { float: right; padding:; background-color: dimgrey; margin-right: 20px; } .form a{ color:white; font-weight: bold; line-height: 60px; } /* ナビゲーション */ /* メインビジュアル */ .mv { max-width: 1140px; height: 500px; background-color: #ABCDD6; display: flex; } .mv-left { width:50%; padding:20px; } .mv-left h1 { font-size:36px; } .mv-left-search p { } .mv-left-search span { font-size:28px; color:red; font-weight: bold; } .mv-right { width:50%; padding:20px; } .japanMap { height: 400px; padding-top:30px; } .map { position: relative; } .kyushu { position: absolute; top:100px; left: 20px; } .map-list { box-sizing: border-box; border:2px solid #ccc; border-radius: 6px; } .map-list a{ background-color: aliceblue; display:flex; width:66px; height: 28px; font-size:14px; align-items: center; justify-content: center; font-weight: 700; } .map-list li { text-align: center; list-style: none; }
「しかし作ってる中で、灰色の枠の中に空白が出来てしまいました。」に相当する部分がCSSの中に見当たりません。
ご質問の解決には少なくともmap-listのCSSが必要です。記載部分をご提示ください。
県ごとのborderはdiv.map-listのli要素にborderを設定することで解決します。
貼るcssを間違えたので、入れ替えてみました。いかがでしょうか？
回答2件
0
ベストアンサー
しかし作ってる中で、灰色の枠の中に空白が出来てしまいました。
どうしたら見本のようなものに出来ますでしょうか？
これはもう解決してますよね。
ulの初期スタイルにmarginと(ブラウザーによっては)paddingが設定されていることが原因。
各県ごとに灰色のボーダーを出す方法が分かりませんでした。
.map-list liに対するスタイルにborder-bottomを追加。最後のliだけ、これは不要になるので、.map-list li:last-childに対するスタイルを追加してborder-bottomをなしにする。
CSS
1.map-list li { 2 text-align: center; 3 list-style: none; 4 border-bottom: 2px solid #ccc; 5} 6 7.map-list li:last-child { 8 border-bottom: none; 9}
border-radiusを追加するとなるとさらにいろいろ必要になります。
投稿2020/08/29 04:22
総合スコア11990
これはもう解決してますよね。
→解決していないです。CSSの初期化でmarginとpaddingを0にしているのですが、この話とは別の話でしょうか？
map-listのclassがdivについている点が気になります。他に影響しないならulにふったほうがいいでしょう。
子要素のmargin分、div要素のborderとa要素の間に余白が生じますので、ulとliのmargin/paddingを0にしておく必要があります。
0
しかし作ってる中で、灰色の枠の中に空白が出来てしまいました。
css
1/* CSSのリセット */ 2* { 3 margin: 0; 4 padding: 0; 5 box-sizing: border-box; 6 outline: none; 7 font-family: 'Roboto', sans-serif; 8}
上記の*の後ろが全角空白になってますので、それを半角空白に修正すれば、余白はなくなります。
灰色のボーダーは他の方の回答でできてますね。
角丸（border-radius）を有効にするには、
css
1.map-list { 2 box-sizing: border-box; 3 border:2px solid #ccc; 4 border-radius: 6px; 5 overflow: hidden; /* 追加 */ 6}
投稿2020/08/29 12:00
編集2020/08/29 12:14
総合スコア33790
あなたの回答
tips
プレビュー
