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

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

新規登録して質問してみよう
ただいま回答率
85.50%
コードレビュー

コードレビューは、ソフトウェア開発の一工程で、 ソースコードの検査を行い、開発工程で見過ごされた誤りを検出する事で、 ソフトウェア品質を高めるためのものです。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

1384閲覧

要素間に隙間が生まれてしまう

chair

総合スコア25

コードレビュー

コードレビューは、ソフトウェア開発の一工程で、 ソースコードの検査を行い、開発工程で見過ごされた誤りを検出する事で、 ソフトウェア品質を高めるためのものです。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2020/03/31 14:32

編集2020/03/31 22:12

前提・実現したいこと

画像の隙間がなぜ生まれてしまうのか知りたいです。
色のついた枠の通りに、flexboxを使ったコンテナをさらにコンテナで囲んでflexboxを使ったのですが、隙間ができてしまいます。考え方間違っているのでしょうか?
加えて、position,transformプロパティを使わず埋める方法はあるのでしょうか?
ご教授願います。(文字数がオーバーしたので、HTML、CSS一部消しました。)
隙間ができる

該当のソースコード

HTML

1<!DOCTYPE html> 2<html> 3<head> 4 <meta charset="utf-8"> 5 <title>dentalclinic</title> 6 <link rel="canonical" href="https://haniwaman.com/sample/part3/template_08/"> 7 <link rel="stylesheet" href="style.css"> 8 <link rel="stylesheet" href="reset.css"> 9</head> 10<body> 11 <!-- メインメニュースタート --> 12 <div class="main-menu"> 13 <nav class="menu"> 14 <ul> 15 <li><a class="menu-left" href="file:///C:/Users/U%E3%81%8D/OneDrive/MENTA/MENTA%E8%AA%B2%E9%A1%8C(dentalclinic)/index.html">トップページ<br><span>HOME</span></a></li> 16 <li><a href="file:///C:/Users/U%E3%81%8D/OneDrive/MENTA/MENTA%E8%AA%B2%E9%A1%8C(dentalclinic)/clinic.html">医院紹介<br><span>CLINIC</span></a></li> 17 <li><a href="">診療案内<br><span>SERVICE</span></a></li> 18 <li><a href="">院長・スタッフ紹介<br><span>STAFF</span></a></li> 19 <li><a class="menu-right" href="">アクセス<br><span>ACCESS</span></a></li> 20 </ul> 21 </nav> 22 </div> 23 <!-- メインメニューラスト --> 24 <!-- メインflexboxスタート --> 25 <div class="main-wrapper"> 26 <!-- 左メニュー上下flexboxスタート --> 27 <div class="side-menu-box"> 28 <!-- 左のメニュー上側スタート --> 29 <div class="side-menu1"> 30 <h2><span class="margin-15"></span>一般歯科</h2> 31 <ul> 32  <li><a href=""><span class="margin-10"><img src="https://haniwaman.com/sample/part3/template_08/common/images/bgListIcon01.png" alt="list-icon"></span>虫歯治療</a></li> 33  <li><a href=""><span class="margin-10"><img src="https://haniwaman.com/sample/part3/template_08/common/images/bgListIcon01.png" alt="list-icon"></span>歯周病治療</a></li> 34  <li><a href=""><span class="margin-10"><img src="https://haniwaman.com/sample/part3/template_08/common/images/bgListIcon01.png" alt="list-icon"></span>入れ歯</a></li> 35  <li><a href=""><span class="margin-10"><img src="https://haniwaman.com/sample/part3/template_08/common/images/bgListIcon01.png" alt="list-icon"></span>予防歯科</a></li> 36 </ul> 37 </div> 38 <!-- 左のメニュー上側ラスト --> 39 <!-- 左のメニュー下側スタート --> 40 <div class="side-menu2"> 41 <h2><span class="margin-15"></span>審美歯科</h2> 42 <ul> 43   <li><a href=""><span class="margin-10"><img src="https://haniwaman.com/sample/part3/template_08/common/images/bgListIcon01.png" alt="list-icon"></span>ホワイトニング</a></li> 44   <li><a href=""><span class="margin-10"><img src="https://haniwaman.com/sample/part3/template_08/common/images/bgListIcon01.png" alt="list-icon"></span>オールセラミック</a></li> 45   <li><a href=""><span class="margin-10"><img src="https://haniwaman.com/sample/part3/template_08/common/images/bgListIcon01.png" alt="list-icon"></span>セラミックインレー</a></li> 46   <li><a href=""><span class="margin-10"><img src="https://haniwaman.com/sample/part3/template_08/common/images/bgListIcon01.png" alt="list-icon"></span>PMTC</a></li> 47 </ul> 48 </div> 49 <!-- 左のメニュー下側ラスト --> 50 </div> 51 <!-- 左メニュー上下flexboxラスト --> 52 <!-- 画像と新着情報のflexboxスタート --> 53   <div class="mainImage-whatsNew-box"> 54 <!-- メイン画像スタート --> 55 <div class="mainImage"> 56 <img src="https://haniwaman.com/sample/part3/template_08/common/images/in01.jpg" alt="mainImage"> 57 </div> 58 <!-- メイン画像ラスト --> 59 <!-- 新着情報スタート --> 60 <div class="whatsNew"> 61 <h2>新着情報</h2> 62 <ul> 63 <li><span>2020年08月01日</span>[診療時間変更のお知らせ]長期休診の前日8月11日は、通常より1時間長く診療することにしました。ご予約をお待ちしております。</li> 64 <li><span>2020年07月24日</span>[8月の休診のお知らせ]8月12日~16日の間は休診とさせていただきます。何卒よろしくお願いします。</li> 65 <li><span>2020年07月02日</span>[こどもデンタル教室のご案内]毎月第2土曜日に行っているこどもデンタル教室では、参加してくださるお子様を募集しております。</li> 66 <li><span>2020年06月20日</span>[7月休診日のお知らせ]7月は土日祝日以外の休診日はありません。ご来院お待ちしております。</li> 67 <li><span>2020年06月01日</span>ホームページをリニューアルしました。</li> 68 </ul> 69 </div> 70 <!-- 新着情報ラスト --> 71 </div> 72 <!-- 画像と新着情報のflexboxラスト --> 73 </div> 74 <!-- メインflexboxラスト -->

resetCSS

1html, body, div, span, object, iframe, 2h1, h2, h3, h4, h5, h6, p, blockquote, pre, 3abbr, address, cite, code, 4del, dfn, em, img, ins, kbd, q, samp, 5small, strong, sub, sup, var, 6b, i, 7dl, dt, dd, ol, ul, li, 8fieldset, form, label, legend, 9table, caption, tbody, tfoot, thead, tr, th, td, 10article, aside, canvas, details, figcaption, figure, 11footer, header, hgroup, menu, nav, section, summary, 12time, mark, audio, video { 13 margin:0; 14 padding:0; 15 border:0; 16 outline:0; 17 font-size:100%; 18 vertical-align:baseline; 19 background:transparent; 20} 21body { 22 line-height:1; 23} 24article,aside,details,figcaption,figure, 25footer,header,hgroup,menu,nav,section { 26 display:block; 27} 28nav ul { 29 list-style:none; 30} 31blockquote, q { 32 quotes:none; 33} 34blockquote:before, blockquote:after, 35q:before, q:after { 36 content:''; 37 content:none; 38} 39a { 40 margin:0; 41 padding:0; 42 font-size:100%; 43 vertical-align:baseline; 44 background:transparent; 45} 46ins { 47 background-color:#ff9; 48 color:#000; 49 text-decoration:none; 50} 51mark { 52 background-color:#ff9; 53 color:#000; 54 font-style:italic; 55 font-weight:bold; 56} 57del { 58 text-decoration: line-through; 59} 60abbr[title], dfn[title] { 61 border-bottom:1px dotted; 62 cursor:help; 63} 64table { 65 border-collapse:collapse; 66 border-spacing:0; 67} 68hr { 69 display:block; 70 height:1px; 71 border:0; 72 border-top:1px solid #cccccc; 73 margin:1em 0; 74 padding:0; 75} 76input, select { 77 vertical-align:middle; 78}

CSS

1body { 2 font-family: Verdana, Arial, Helvetica, meirio, メイリオ, "Hiragino Maru Gothic Pro", "ヒラギノ丸ゴ Pro W4", Osaka, "MS Pゴシック", sans-serif; 3 color: #515151; 4 font-weight: 400; 5 background-color: #F6F6F6 !important; 6} 7.margin-10 { 8 margin-right: 10px; 9} 10.margin-15 { 11 margin-right: 15px; 12} 13 14/* メインメニュースタート */ 15.menu ul { 16 display: flex; 17 justify-content: center; 18 padding-top: 18px; 19} 20.menu ul li a { 21 display: block; 22 width: 182px; 23 background: linear-gradient(rgb(156, 227, 225), rgb(108, 198, 196)); 24 text-align: center; 25 border: solid 1px #6CC6C4; 26 cursor: pointer; 27 padding: 20px 0px; 28 color: #FFFFFF; 29 text-decoration: none; 30 font-weight: 700; 31 font-size: 14px; 32 line-height: 15px; 33} 34.menu ul li a span { 35 font-size: 10px; 36 line-height: 15px; 37} 38.menu ul li a:hover { 39 background: linear-gradient(rgb(108, 198, 196), rgb(156, 227, 225)); 40} 41.menu-left { 42 border-top-left-radius: 6px; 43 border-bottom-left-radius: 6px; 44} 45.menu-right { 46 border-bottom-right-radius: 6px; 47 border-top-right-radius: 6px; 48} 49.main-menu p { 50 font-size: 10px; 51 margin-left: 175px; 52} 53/*メインメニューラスト*/ 54/* メインflexboxスタート */ 55.main-wrapper { 56 display: flex; 57 width: 920px; 58 margin: 0 auto; 59 margin-top: 20px; 60} 61/* メインflexboxラスト */ 62.side-menu-box { 63 display: flex; 64 flex-direction: column; 65} 66/*左メニュー上側スタート*/ 67.side-menu1 { 68 border: solid 1px #6CC6C4; 69 width: 260px; 70 border-top-right-radius: 6px; 71 border-top-left-radius: 6px; 72 background-color: #FFFFFF; 73} 74.side-menu1 h2 { 75 background: linear-gradient(rgb(156, 227, 225), rgb(108, 198, 196)); 76 color: #FFFFFF; 77 border-top-right-radius: 6px; 78 border-top-left-radius: 6px; 79 font-size: 16px; 80 padding: 10px 0px; 81 line-height: 22px; 82} 83.side-menu1 ul { 84 list-style: none; 85 padding-bottom: 20px; 86 margin-left: 15px; 87} 88.side-menu1 ul li a { 89 text-decoration: none; 90 color: #515151; 91 font-weight: 700; 92 font-size: 14px; 93 border-bottom: solid 1px #6CC6C4; 94 width: 234px; 95 display: block; 96 padding-bottom: 13px; 97 color: #595959; 98} 99.side-menu1 ul li a:hover { 100 color: #6cc6c4; 101} 102.side-menu1 ul li a img { 103 padding-left: 5px; 104} 105/* 左メニュー上側ラスト */ 106/* 左メニュー下側スタート */ 107.side-menu2 { 108 border: solid 1px #6CC6C4; 109 width: 260px; 110 border-top-right-radius: 6px; 111 border-top-left-radius: 6px; 112 background-color: #FFFFFF; 113 margin-top: 20px; 114} 115.side-menu2 h2 { 116 background: linear-gradient(rgb(156, 227, 225), rgb(108, 198, 196)); 117 color: #FFFFFF; 118 border-top-right-radius: 6px; 119 border-top-left-radius: 6px; 120 font-size: 16px; 121 padding: 10px 0px; 122 line-height: 22px; 123} 124.side-menu2 ul { 125 list-style: none; 126 padding-bottom: 20px; 127 margin-left: 15px; 128} 129.side-menu2 ul li a { 130 text-decoration: none; 131 color: #515151; 132 font-weight: 700; 133 font-size: 14px; 134 border-bottom: solid 1px #6CC6C4; 135 width: 234px; 136 display: block; 137 padding-bottom: 13px; 138 color: #595959; 139} 140.side-menu2 ul li a:hover { 141 color: #aec24c; 142} 143.side-menu2 ul li a img { 144 padding-left: 5px; 145} 146/* 左メニュー下側ラスト */ 147/* 画像と新着情報のflexboxスタート */ 148.mainImage-whatsNew-box { 149 display: flex; 150 flex-direction: column; 151 width: 640px; 152} 153/* 画像と新着情報のflexboxラスト */ 154/* メイン画像スタート */ 155.mainImage { 156 display: block; 157} 158/* メイン画像ラスト */ 159/* 新着情報スタート */ 160.whatsNew { 161 width: 600px; 162 background-color: #FFFFFF; 163 padding: 20px 20px 45px 20px; 164 margin-top: 10px; 165} 166.whatsNew h2 { 167 border-bottom: solid 3px #6CC6C4; 168 padding: 0 20px; 169 font-size: 16px; 170 font-weight: 700; 171 text-align: left; 172 line-height: 50px; 173 margin-bottom: 15px; 174} 175.whatsNew ul li { 176 font-size: 13px; 177 border-bottom: dotted 1px #CCCCCC; 178 list-style: none; 179 padding: 15px 0; 180 line-height: 20px; 181} 182.whatsNew ul li span { 183 font-weight: 700; 184 font-size: 13px; 185 padding-right: 31px; 186 line-height: 23px; 187 display: block; 188 float: left; 189} 190/* 新着情報ラスト */

試したこと

・他のflexプロパティを指定した
・*{margin:0;!important}  *{padding:0;!important}を指定してみた(この隙間は埋まらなかった)

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kei344

2020/03/31 14:36

(質問は編集できます)質問タグの「Flex」はCSSのFlexboxと関係ありません。
kyoya0819

2020/03/31 17:11

当方の環境では現状のコードでは状況が再現できません。 reset.cssもご提示していただけると幸いです。
退会済みユーザー

退会済みユーザー

2020/03/31 23:40

内部は260 740 外部は920 この差の分が空いてるからでは
guest

回答1

0

ベストアンサー

質問への追記・修正依頼には従っていただくとして、不要な余白が付くのはHTMLソースのところどころに全角スペースが入っているからでは?

------ここから追記------

もう少し詳しく書くと、<div class="mainImage-whatsNew-box">の前に付いている二つの全角スペースを削除すれば問題の隙間は消えます。
その全角スペースを削除すると、asahina1979さんが指摘している通り20pxの余裕があるのでその分右側に余白が付きます。
この余白は外部と内部の幅を同じにすれば消えます。

投稿2020/03/31 20:31

編集2020/04/01 03:00
tmyk1979

総合スコア145

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

chair

2020/04/01 10:39

ご指摘の通り、空白が原因でした! 空白でここまで影響がでるとは思っていませんでした。 勉強になりました。ありがとうございます!
退会済みユーザー

退会済みユーザー

2020/04/01 10:49

ちなみに改行コードでも崩れるのがhtml
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問