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

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

新規登録して質問してみよう
ただいま回答率
85.50%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

HTML

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

CSS

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

Q&A

解決済

2回答

2169閲覧

justify-content: space-between;が効かない。

UKYO9311

総合スコア31

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

HTML

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

CSS

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

0グッド

0クリップ

投稿2019/07/29 07:12

編集2019/07/29 07:31

前提・実現したいこと

justify-content: space-between;がどうしても効かなくて困ってます。要素を両端いっぱいまで広げたいのですが、どうしても両端に空白は入ってしまいます。今までサイト構築の際に何回も使ったのですが、space-betweenが効いたことがありません。。。使い方が間違っているのか、それともまた別の影響なのかわからないままだったので質問いたします。

見え方的にはjustify-content: space-around;に指定した時のような均等に割り振りした形になってしまいます。
イメージ説明

デベロッパーツールで確認したところ、justify-content: space-between;はちゃんと効いてるみたいです。
イメージ説明

お手数おかけしますが、ご回答お待ちしております。

該当のソースコード

html

1<div class="footer"> 2 <div class="container"> 3 <div class="footer-box"> 4 <div class="footer__info"> 5 <img src="images/footer-logo.svg"> 6 </div> 7 <div class="footer__sitemap"> 8 <ul> 9 <li><a href="#">トップ</a></li> 10 <li><a href="#">私たちについて</a></li> 11 <li><a href="#">実績紹介</a></li> 12 <li><a href="#">サービス</a></li> 13 </ul> 14 <ul> 15 <li><a href="#">ブログ</a></li> 16 <li><a href="#">お知らせ</a></li> 17 <li><a href="#">会社案内</a></li> 18 </ul> 19 <ul> 20 <li><a href="#">お問い合わせ</a></li> 21 <li><a href="#">VRゴーグル見積もり・<br>サンプル請求</a></li> 22 <li><a href="#">会社案内ダウンロード</a></li> 23 </ul> 24 <ul> 25 <li>follow us on</li> 26 </ul> 27 </div> 28 </div> 29 </div><!--.container--> 30 </div><!--.footer-->

scss

1.footer{ 2 position: absolute; 3 top: 300px; 4 height: 1000px; 5 width: 100%; 6 background-color: #333; 7 padding-top: 500px; 8 9 10 .footer-box{ 11 display: flex; 12 13 .footer__info{ 14 width: 20%; 15 } 16 17 .footer__sitemap{ 18 width: 80%; 19 display: flex; 20 justify-content:space-between; 21 22 ul { 23 li { 24 a{ 25 color: #a2a2a2; 26 } 27 } 28 } 29 } 30 } 31 } 32 33 34 35 36.container{ 37 max-width: 1180px; 38 margin: 0 auto; 39 padding: 80px 20px; 40 @include clear; 41 @include sp { 42 width: auto; 43 padding: 30px 10px; 44 } 45}

css

1@charset 'utf-8'; 2/*------------------------------------------------------------ 3 Reset 4------------------------------------------------------------*/ 5html, body, div, span, object, iframe, 6h1, h2, h3, h4, h5, h6, p, blockquote, pre, 7abbr, address, cite, code, 8del, dfn, em, img, ins, kbd, q, samp, 9small, strong, sub, sup, var, 10b, i, 11dl, dt, dd, ol, ul, li, 12fieldset, form, label, legend, 13table, caption, tbody, tfoot, thead, tr, th, td, 14article, aside, dialog, figure, footer, header, 15nav, section, a, 16time, mark, audio, video { 17 margin: 0; 18 padding: 0; 19 border: 0; 20 outline: 0; 21 box-sizing: border-box; 22} 23 24article, aside, details, figcaption, figure, 25footer, header, hgroup, menu, nav, section, main { 26 display: block; 27} 28 29html { 30 font-size: 62.5%; 31} 32 33body { 34 -webkit-text-size-adjust: 100%; 35} 36 37body, table, 38input, textarea, select, option, 39h1, h2, h3, h4, h5, h6 { 40 -webkit-font-smoothing: antialiased; 41 -moz-osx-font-smoothing: grayscale; 42} 43 44h1, h2, h3, h4, h5, h6 { 45 font-weight: bold; 46} 47 48table, 49input, textarea, select, option { 50 line-height: 1.1; 51} 52 53ol, ul { 54 list-style: none; 55} 56 57blockquote, q { 58 quotes: none; 59} 60 61:focus { 62 outline: 0; 63} 64 65::selection { 66 background: #4d4d4d; 67 color: #fff; 68} 69 70div:before, div:after, ul:before, ul:after, 71ol:before, ol:after, dl:before, dl:after { 72 content: ""; display: block; 73} 74div:after, ul:after, ol:after, dl:after { 75 clear: both; 76} 77div, ul, ol, dl { 78 zoom: 1; 79} 80 81ins { 82 text-decoration: none; 83} 84 85del { 86 text-decoration: line-through; 87} 88 89img { 90 vertical-align: top; 91 max-width: 100%; 92 height: auto; 93} 94 95 96a{ 97 &:hover{ 98 text-decoration: none; 99 } 100} 101 102a, 103a img{ 104 color: $link; 105 transition: 0.3s ease-in-out; 106 text-decoration: none; 107} 108a:hover, 109a:hover img{ 110 opacity: 0.80; 111 filter: alpha(opacity=80); 112 -ms-filter: "alpha(opacity=80)"; 113 color: #bbb; 114 text-decoration: none; 115} 116.cls-1{ 117 opacity:1 !important; 118} 119

補足

先ほどコードペンで同じコードを書いたら正常に効きました。。。
なぜでしょうか...リセットCSSとかscssでjustify-content: space-between;が効かないような表記があるのでしょうか。。。

content: "";を削除したら効きました。しかし他も色々と崩れてしまいますが。。。

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

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

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

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

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

Lhankor_Mhy

2019/07/29 07:34

> 先ほどコードペンで同じコードを書いたら正常に効きました。。。 私もです。 まずは、問題が再現するコードをご提示ください。 (当て推量ですが、マージンなどの問題のような気がしてます)
UKYO9311

2019/07/29 08:23

Lhankor_Mhy様 いつもありがとうございます。なんとか自己解決することができました!!( ; ; ) お騒がせしました。また何かありましたらどうぞよろしくお願いいたします。
guest

回答2

0

content: "";を削除したら効きました。しかし他も色々と崩れてしまいますが。。。

これが回答です。
::beforeや::afterでcontent: ""が追加されるとその分の余白が追加されてしまいます。

他も色々と崩れてしまいますが

それは、人間側(?)の都合であって、::beforeや::afterでcontent: ""が無い状態で使用すべきなのがjustify-content: space-between;なので仕方ないです。

もう一度CSSを書き直すしかない。。。のかな;;

投稿2019/07/29 08:23

yukikp

総合スコア797

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

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

0

自己解決

やはりリセットCSSのcontent: "";が原因だったみたいです。リセットCSSの記述を消したらちゃんと効きました。表示の崩れも微調整で治りました。みなさまありがとうございました。

投稿2019/07/29 08:20

UKYO9311

総合スコア31

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問