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

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

ただいまの
回答率

90.33%

  • HTML

    9558questions

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

  • CSS

    6193questions

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

floatが効かない

解決済

回答 4

投稿

  • 評価
  • クリップ 0
  • VIEW 275

kato00

score 38

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

質問は表題の通りです。

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

原因は何でしょうか?

下記コードです。

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
  <meta charset="utf-8">
  <link rel="stylesheet" type="text/css" href="css/common.css">
</head>
<body>


  <div id="header">

    <div class="header_top_bar">
      <p>##################</p>
    </div><!-- header_top_bar閉じタグ -->


   <div class="header_inner">
        <div class="pointmessage">
pointo
        </div>

        <div class="logo">
logo
        </div>


        <div class="customer_serch">
serch
        </div>

   </div><!-- header_inner閉じタグ -->



  </div><!-- header閉じタグ -->

</body>
</html>
@charset "UTF-8";
/*---Reset---*/
body, h1, h2, h3, h4, h5, h6, p, address,
ul, ol, li, dl, dt, dd, img, form, table, tr, th, td {
  margin: 0;
  padding: 0;
  border: none;
  font-style: normal;
  font-weight: normal;
  font-size: 100%;
  list-style-type: none;
  border-collapse: collapse; }

* {
  border: 1px solid blue; }

body {
  margin: 0;
  color: #333333;
  text-align: center;
  font-family: "游ゴシック", "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif;
  font-size: 14px;
  line-height: 1.714;
  background: #FFF;
  width: 100%; }

#header {
  width: 100%;
  margin: 0 auto; }
  #header .header_top_bar {
    background-color: #e4f2fa; }
    #header .header_top_bar p {
      color: #244a61;
      text-align: center;
      font-weight: bold; }
  #header .header_inner {
    width: 100%;
    margin: 0 auto;
    float: left; }
    #header .header_inner .pointmessage {
      width: 30%; }
    #header .header_inner .logo {
      width: 30%; }
    #header .header_inner .customer_serch {
      width: 30%; }

/*# sourceMappingURL=common.css.map */

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

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 4

checkベストアンサー

+3

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

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
    <meta charset="utf-8">
    <title>Title</title>
    <style>
        /*---Reset---*/
        body, h1, h2, h3, h4, h5, h6, p, address,
        ul, ol, li, dl, dt, dd, img, form, table, tr, th, td {
            margin: 0;
            padding: 0;
            border: none;
            font-style: normal;
            font-weight: normal;
            font-size: 100%;
            list-style-type: none;
            border-collapse: collapse;
        }

        * {
            border: 1px solid blue;
        }

        body {
            margin: 0;
            color: #333333;
            text-align: center;
            font-family: "游ゴシック", "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif;
            font-size: 14px;
            line-height: 1.714;
            background: #FFF;
            width: 100%;
        }

        #header {
            width: 100%;
            margin: 0 auto;
        }

        #header .header_top_bar {
            background-color: #e4f2fa;
        }

        #header .header_top_bar p {
            color: #244a61;
            text-align: center;
            font-weight: bold;
        }

        #header .header_inner {
            width: 100%;
            margin: 0 auto;
        }

        #header .header_inner div { /* 追記 */
            float: left;
        }

        #header .header_inner .pointmessage {
            width: 30%;
        }

        #header .header_inner .logo {
            width: 30%;
        }

        #header .header_inner .customer_serch {
            width: 30%;
        }

        /*# sourceMappingURL=common.css.map */
    </style>
</head>
<body>


<div id="header">

    <div class="header_top_bar">
        <p>##################</p>
    </div><!-- header_top_bar閉じタグ -->


    <div class="header_inner">
        <div class="pointmessage">
            pointo
        </div>

        <div class="logo">
            logo
        </div>


        <div class="customer_serch">
            serch
        </div>

    </div><!-- header_inner閉じタグ -->


</div><!-- header閉じタグ -->

</body>
</html>

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/07/02 15:11

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

    キャンセル

  • 2018/07/02 15:14

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

    キャンセル

  • 2018/07/02 15:26 編集

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

    キャンセル

  • 2018/07/02 15:29

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

    キャンセル

+2

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

.header_inner > * {
  float: left;
}

ではないでしょうか。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

+2

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

0

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

同じタグがついた質問を見る

  • HTML

    9558questions

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

  • CSS

    6193questions

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