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

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

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

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

CSS

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

Q&A

解決済

1回答

2259閲覧

float:left width:50%の形が崩れました。

NateRive

総合スコア10

HTML5

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

CSS

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

0グッド

0クリップ

投稿2017/07/01 11:02

編集2017/07/01 12:11

###前提・実現したいこと
float:left,width:50%にして、上の列に2つの要素、下の列に2つの要素を表示させていました。
しかし、左上の要素のpaddingを変えたところ、形が崩れてしまい、この原因が知りたいと思っています。

###該当のソースコード

html

1<div class="content"> 2 <div class="content-title"> 3 学習する言語 4 </div> 5 <div class="languages"> 6 <div class="language"> 7 8 <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/practice/lang_icons/html.png" /> 9 <p class="language-type">HTML & CSS</p> 10 <p>Webページの見た目をつくる言語</p> 11 </div> 12 13 <div class="language"> 14 15 <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/practice/lang_icons/jquery.png"/> 16 <p>jQuery</p> 17 <p>効果やアニメーションを実装できるJavascriptライブラリ語</p> 18 </div> 19 20 <div class="language"> 21 22 <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/practice/lang_icons/js.png"/> 23 <p>Javascript</p> 24 <p>動的なウェブサイト構築に用いるプログラミング言語語</p> 25 </div> 26 27 <div class="language"> 28 29 <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/practice/lang_icons/git.png"/> 30 <p>Git</p> 31 <p>ソースコードのバージョン管理、共同開発を可能にするツール語</p> 32 </div> 33 </div> 34 35 </div>

css

1.content { 2 width:60%; 3 margin:0 auto; 4 text-align:center; 5 padding-bottom:80px; 6} 7 8.content-title { 9 font-size:32px; 10 margin-top:80px; 11 margin-bottom:10px; 12} 13 14.languages { 15 height:500px; 16} 17 18.language { 19 float:left; 20 width:50%; 21 padding-top:40px; 22} 23 24.language-type { 25 padding:20px 0 10px 0; 26} 27 28

###試したこと
4つの要素全てに或いは右上の要素にも、paddingをいじるクラスをつけると形は整います。逆に言えば、右上の要素か全ての要素にクラスをつけなければ、左上の要素と左下の要素の間隔が大きく開いてしまいます。なぜ左上にだけにクラスをつけたとき、左下の要素と大きく間隔が開いてしまうのでしょうか。
!!イメージ説明明](4a6b60b5dacb170c05651e1b158b021c.png)明](1fca5be6327ab1b24ad55514fb31ae67.png)

###補足情報(言語/FW/ツール等のバージョンなど)
より詳細な情報

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

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

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

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

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

kei344

2017/07/01 11:36

質問文のコードはそれぞれコードブロックで囲んでいただけませんか? ```(バッククオート3つ)で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。
guest

回答1

0

ベストアンサー

float: left は各要素を左寄せする(続く要素を右側に回り込ませる)指定です。最初は各要素の高さが一緒だったため、たまたま横2つ縦2つにきれいに並んでいました。

しかし padding を挿入したことで要素の高さが変わってしまいました。3つめの要素(Javascript)を入れるときに、でっぱった1つめの要素(HTML & CSS)の後に配置され右側に表示されます。そのあとに4つめの要素(Git)はもう場所がないので次の行の左側に配置されました。

この問題はすべての要素に height 指定を入れて高さを揃えれば回避できますが、今時なら Flexbox を使ったほうが楽で強力なレイアウトができるのでオススメです。

投稿2017/07/01 11:49

miyahan

総合スコア3095

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

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

NateRive

2017/07/01 12:25

非常に分かりやすく解説していただきありがとうございます。Flexboxについて調べ、次回から取り入れていきます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問