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

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

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

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

CSS

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

Q&A

解決済

4回答

617閲覧

floatが効かない

kato00

総合スコア71

HTML

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

CSS

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

0グッド

0クリップ

投稿2018/07/02 05:55

いつもお世話になっております。

質問は表題の通りです。

親要素のheader_innerにfloat:leftをかけたのですが、子要素が横並びになりません。

原因は何でしょうか?

下記コードです。

html

1<!DOCTYPE html> 2<html lang="en" dir="ltr"> 3<head> 4 <meta charset="utf-8"> 5 <link rel="stylesheet" type="text/css" href="css/common.css"> 6</head> 7<body> 8 9 10 <div id="header"> 11 12 <div class="header_top_bar"> 13 <p>##################</p> 14 </div><!-- header_top_bar閉じタグ --> 15 16 17 <div class="header_inner"> 18 <div class="pointmessage"> 19pointo 20 </div> 21 22 <div class="logo"> 23logo 24 </div> 25 26 27 <div class="customer_serch"> 28serch 29 </div> 30 31 </div><!-- header_inner閉じタグ --> 32 33 34 35 </div><!-- header閉じタグ --> 36 37</body> 38</html> 39

css

1@charset "UTF-8"; 2/*---Reset---*/ 3body, h1, h2, h3, h4, h5, h6, p, address, 4ul, ol, li, dl, dt, dd, img, form, table, tr, th, td { 5 margin: 0; 6 padding: 0; 7 border: none; 8 font-style: normal; 9 font-weight: normal; 10 font-size: 100%; 11 list-style-type: none; 12 border-collapse: collapse; } 13 14* { 15 border: 1px solid blue; } 16 17body { 18 margin: 0; 19 color: #333333; 20 text-align: center; 21 font-family: "游ゴシック", "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif; 22 font-size: 14px; 23 line-height: 1.714; 24 background: #FFF; 25 width: 100%; } 26 27#header { 28 width: 100%; 29 margin: 0 auto; } 30 #header .header_top_bar { 31 background-color: #e4f2fa; } 32 #header .header_top_bar p { 33 color: #244a61; 34 text-align: center; 35 font-weight: bold; } 36 #header .header_inner { 37 width: 100%; 38 margin: 0 auto; 39 float: left; } 40 #header .header_inner .pointmessage { 41 width: 30%; } 42 #header .header_inner .logo { 43 width: 30%; } 44 #header .header_inner .customer_serch { 45 width: 30%; } 46 47/*# sourceMappingURL=common.css.map */ 48

その他必要情報があれば追記いたしますのでおっしゃてください。
よろしくお願いします。

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

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

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

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

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

guest

回答4

0

ベストアンサー

.header_innerの子要素を横並びにしたいならば、.header_innerの子要素にfloatをかけましょう

HTML

1<!DOCTYPE html> 2<html lang="en" dir="ltr"> 3<head> 4 <meta charset="utf-8"> 5 <title>Title</title> 6 <style> 7 /*---Reset---*/ 8 body, h1, h2, h3, h4, h5, h6, p, address, 9 ul, ol, li, dl, dt, dd, img, form, table, tr, th, td { 10 margin: 0; 11 padding: 0; 12 border: none; 13 font-style: normal; 14 font-weight: normal; 15 font-size: 100%; 16 list-style-type: none; 17 border-collapse: collapse; 18 } 19 20 * { 21 border: 1px solid blue; 22 } 23 24 body { 25 margin: 0; 26 color: #333333; 27 text-align: center; 28 font-family: "游ゴシック", "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif; 29 font-size: 14px; 30 line-height: 1.714; 31 background: #FFF; 32 width: 100%; 33 } 34 35 #header { 36 width: 100%; 37 margin: 0 auto; 38 } 39 40 #header .header_top_bar { 41 background-color: #e4f2fa; 42 } 43 44 #header .header_top_bar p { 45 color: #244a61; 46 text-align: center; 47 font-weight: bold; 48 } 49 50 #header .header_inner { 51 width: 100%; 52 margin: 0 auto; 53 } 54 55 #header .header_inner div { /* 追記 */ 56 float: left; 57 } 58 59 #header .header_inner .pointmessage { 60 width: 30%; 61 } 62 63 #header .header_inner .logo { 64 width: 30%; 65 } 66 67 #header .header_inner .customer_serch { 68 width: 30%; 69 } 70 71 /*# sourceMappingURL=common.css.map */ 72 </style> 73</head> 74<body> 75 76 77<div id="header"> 78 79 <div class="header_top_bar"> 80 <p>##################</p> 81 </div><!-- header_top_bar閉じタグ --> 82 83 84 <div class="header_inner"> 85 <div class="pointmessage"> 86 pointo 87 </div> 88 89 <div class="logo"> 90 logo 91 </div> 92 93 94 <div class="customer_serch"> 95 serch 96 </div> 97 98 </div><!-- header_inner閉じタグ --> 99 100 101</div><!-- header閉じタグ --> 102 103</body> 104</html>

投稿2018/07/02 06:04

s8_chu

総合スコア14731

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

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

s8_chu

2018/07/02 06:11

うっ、回答が被ってしまった。すみません・・・。
kato00

2018/07/02 06:14

なるほど!!解決しました!ありがとうございます! ちなみに、floatというのは、「自身を左寄せにして、後続の要素を回り込ませる」という認識だったのですが、合ってますでしょうか? 最初のpointmessageだけにfloatを設定した場合、後続(2番目のlogo)が何も変わらなかったのですが、、
s8_chu

2018/07/02 06:27 編集

`floatプロパティ`の値に`left`を設定した場合、「自身を左寄せにして、『テキストやインライン要素を』回り込ませる」という動作になります。 `div要素`は「テキストやインライン要素」ではないため、回り込みません。 そのため、`div要素`を回り込ませたい場合、回り込ませる`div要素`にも`floatプロパティ`を設定する必要があります。
kato00

2018/07/02 06:29

なるほどぉお!!そういう事だったんですね!!分かりやすいご説明ありがとうございます! 勝手ながらフォローさせて頂きます!!よろしくお願いします!!
guest

0

親要素のheader_innerにfloat:leftをかけたのですが、子要素が横並びになりません。

floatの使い方を勘違いしてませんか?
floatはそれ自身に対して設定するものであって、横並びしたい要素の親要素に設定するものではないですよ。
もしかしてflexboxと勘違いしてるのかな?
flexboxで子要素を横並びにしたいなら、
.header_inner{ display: flex; }とすれば子要素は勝手に横並びになりますよ。

投稿2018/07/02 06:06

aKusano

総合スコア3763

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

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

0

header_innerの子要素を、floatを用いて横並びにしたいのなら、

css

1.header_inner > * { 2 float: left; 3} 4```ではないでしょうか。

投稿2018/07/02 06:04

kszk311

総合スコア3404

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

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

0

親要素のheader_innerではなく、「pointmessage」「logo」「customer_serch」のそれぞれに「 float: left;」を設定してください。希望の動作になるかと思います。

投稿2018/07/02 06:05

beginner_t

総合スコア716

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問