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

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

ただいまの
回答率

90.34%

  • HTML5

    4293questions

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

  • CSS3

    2207questions

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

【HTML】floatに関して分からないことがあります。

解決済

回答 2

投稿 編集

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

newyee

score 126

現在、プログラミングスクールの課題でwebサイトを作成しているのですが、floatさせた要素に関して分からないことがあります。
コードが長くなってしまった為、作成したコードは他サイトにて公開する形を取らせて頂きましたので、お手数ですがそちらの方から見て頂けましたら幸いです。
公開しているコードのcodepanというサイトのリンクになります。

分からない点に関してなのですが、CSSのコードにおきまして、asideの部分にfloatを設定しますと、以下の画像のようになります。
イメージ説明
イメージ説明
イメージ説明

しかし、floatを設定しない場合だと、以下の画像のように上に詰めた状態になります。
イメージ説明
イメージ説明
イメージ説明

asideにfloat設定した場合としなかった場合で何故変わってきてしまうのか、この点につきましてどうしても分からなかった為、ご質問させて頂きました。
コードが長くなってしまい、すみません。どなたかご解説いただけますようでしたら、よろしくお願いいたします。

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

質問への追記・修正、ベストアンサー選択の依頼

  • bwz61366

    2018/07/25 19:30

    codepenで提示していただいたソースコードで、.main_contents内にあるaside要素の中のコンテンツが全部display:noneになっていますけど、これが質問者さんの現状のコードなのですか?(こちらでは、提示されたソースコードでfloatプロパティを消しても何も変わりませんでした)

    キャンセル

  • newyee

    2018/07/25 21:44

    チェックして頂きありがとうございます。aside要素内に関しましては、CSSの方でfloatをかけただけなので、display:noneになっている理由に関しましては、まったく分からないです...codepenに掲載させて頂いたコードは現状のコードなのですが、僕の方では、asideに設定しているCSSを消しますとやはり、質問の内容の所で掲載させて頂いた画像のように上に詰める形になるんですよね...

    キャンセル

  • efcode

    2018/07/26 03:58

    最小限のコードを作る事で理解できることもあると思うので、やってみてはいかがですか?

    キャンセル

回答 2

checkベストアンサー

+1

.main_contentsの中の3段組みブロック構造がおかしいですね。
このデザインは、メインコンテンツの領域を3カラムの段組みレイアウトにするというものなので、
まずはメインコンテンツの中身を、
「左メニュー」「メインカラム」「右サイドバー」の3つの大きなブロックにくくり直してください。
(現状左メニューはnav、右サイドバーはasideとして独立してますが、
真ん中のメインカラムが1つのブロックではなくdivとarticleの2つに別れてしまってます。)

その上で、フロートさせるのは各カラムの中の個別のブロックではなく、 「左メニュー」「メインカラム」「右サイドバー」の3つの親ブロックに変更します。
各親ブロックの中の子ブロックは個別にfloatさせる必要はありません。

ソースコード上の出現順とブラウザの表示順は現在同じなので、
3つのブロック全てをfloat:leftとするか、右サイドバーだけfloat:rightにして 他はfloat:leftにするかのどちらかにしましょう。
そうすれば意図したような3カラムのレイアウトになるはずです。

現状、aside{float:left;}をするしないで右サイドバーの位置が上についたり真ん中から始まったりしておかしな動きをしてしまうのは、真ん中のカラムが1つのブロックにまとめられておらず、かつ.new_recipeにはfloatが設定されているのにその下のarticleにはfloatの設定が無いことが影響しているものと思われます。
今のHTML構造のままCSSであれこれいじくるより、フロートでの段組みレイアウトの定石に従った形に
マークアップ構造そのものを変更した方がはるかに早いし簡単だと思います。

全体構造の作り直しになるので修正するには時間がかかるかもしれませんが、
念の為今のデータもバックアップしておきつつ、もう一度class名の検討も含めてやりなおした方がいいと思います。
頑張ってください。

投稿

編集

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2018/07/26 12:53

    ご丁寧にご回答頂きありがとうございます。大変申し訳ないのですが、個人的な都合となってしまうのですが、コードをチェックする時間が取れないため、後日、ご回答いただいた内容を参考にさせて頂き、コードの方もう一度見直してみたいと思います。その上で、またきちんとご返信させて頂きたいと思っております。
    ご丁寧にご回答頂いたのに、申し訳ないです...

    キャンセル

  • 2018/07/28 07:58

    ご回答いただきありがとうございます。
    度々申し訳ないのですが、ご回答頂いた中で分からない所があり2点程お聞きしたいことがございます。
    フロートさせるのは各カラムの中の個別のブロックではなく、 「左メニュー」「メインカラム」「右サイドバー」の3つの親ブロックに変更する、とのことなのですが、これは現状のコードですと、左メニューは「nav」に、メインカラムは「article」に、サイドメニューは「aside」にfloatをかける、ということでしょうか?
    そして、「真ん中のメインカラムが1つのブロックではなくdivとarticleの2つに別れてしまっている」この点についてなのですが、現在「article」は2つの「section」要素を内包しており、2つのコンテンツを構成していると思うのですが、divとarticleの二つに分かれてしまっているとはどういう意味なのでしょうか...?

    キャンセル

  • 2018/07/28 08:53

    codepenに掲載しているコードがお手元のコードと全く同じという前提で話をしますが、今のコードをChromeのデベロッパーツールで検証すると、<div class="main_contents">〜</div>の直下には4つのブロックが並んでいます。上から順に<nav>、<div class="new_recipe clearfix">、<article>、<aside>の4つです。
    3カラムのレイアウトを作るのであれば、<div class="new_recipe clearfix">と<article>を更に<div>などで括って1つのブロックにしてやるのでが定石ですが、現状では4つのブロックで3カラムレイアウトを作ろうとしている状態です。ここを根本的に直さないと、無駄に大変なことをやらなければならなくなります。
    なのでまずそこを直してみましょう。

    次に、<div class="main_contents clearfix">の直下を3つのブロックに整理してこれら3つにfloatを設定するのですが、その際できればclass名をつけた方がいいかな、と思います。3つとも要素名が違うものになりそうなので子孫セレクタにすればレイアウト自体は作れると思いますけど、全体のレイアウトを作る大枠のブロックに固有の名前が無い、というのはあまり見かけないやり方ですので。

    キャンセル

  • 2018/07/28 09:28

    あと「3カラムのレイアウトを作る」という点には直接関係ありませんが、マークアップでの要素の選び方がちょっと気になりますね…。特に各セクションの「見出し」に見出し要素が設定されないところとか。。。
    Web文書のマークアップを検討する際には、基本的にまず一番最初に「見出し構造(h1-h6)」を見つけ出し、実際の情報構造に合わせて適切に見出しタグを設定することから始めるのがおすすめです。
    セクション要素(section、article、aside、nav)はいずれも「見出し+それに伴うコンテンツ」のブロックに割り当てるもの(※asideとnavは見出しの省略可)なので、見出しが見つかれば自然とどこからどこまでを1つのセクションにまとめればよいのかも見つかります。div要素はセクション要素や他の意味付け用のタグだけではデザインの再現が難しい場合に、足りない枠を足す形で使うのが良いのではないでしょうか。

    キャンセル

  • 2018/08/02 09:42

    返信が遅れてしまい、大変申し訳ありません。
    ご丁寧に教えて下さり、ありがとうございます。お待たせしてしまうのは申し訳ないかと思い、取り急ぎ、ベストアンサーとさせて頂きました...
    ご指摘頂いた、「<div class="new_recipe clearfix">と<article>を更に<div>などで括って一つのブロックにする」ここの部分に関しまして、新しく「<div class="wrapper_main_contents">」を作り真ん中のコンテンツを括りました。これにより、取り敢えず3カラムのレイアウトにはなったと思ってよろしいのでしょうか...?
    そして、次にアドバイス頂いた「<div class="main_contents clearfix">の直下を3つのブロックに整理してこれら3つにfloatを設定するのですが、その際できればclass名をつけた方が良いかな、と思います。」の部分なのですが、<div class="wrapper_main_contents">で括ったことにより、3つのブロックに整理されていると考えて大丈夫でしょうか?更にfloatを設定する際に付けるクラス名に関して、「全体のレイアウトを作る大枠のブロックに固有の名前が無い」ここは今現状のコードで言いますと、どこの部分に該当するのでしょうか...?
    すみません。このような場所でどこまで質問して良いか分からなかったのですが、かなり質問させて頂いてしまいました...
    ずうずうしいのかもしれませんが、もしよろしければ、教えて頂けたら幸いです...

    キャンセル

  • 2018/08/02 10:23 編集

    >> 新しく「<div class="wrapper_main_contents">」を作り真ん中のコンテンツを括りました。これにより、取り敢えず3カラムのレイアウトにはなったと思ってよろしいのでしょうか...?

    実際にちゃんと3カラムに表示されるかどうかはCSSの設定次第ですが、枠取りの仕方としてはそれでいいと思います。ただ「wrapper」というのは「囲むもの」という意味ですので、真ん中のカラムに「wrapper_main_contents」という名前をつけてしまうと、「main_contents」の中に「wrapper_main_contents」が存在することになり、命名と構造が一致しないという問題が生じると思います。要素につける名前は単にCSSをコントロールするためだけでなく、コードを読む人に対してその構造をわかりやすく伝え、管理しやすくするという役割もありますので、実際の構造やコンテンツの役割に応じた適切な名前をつけてあげるように心がけた方が良いと思います。

    >> 「全体のレイアウトを作る大枠のブロックに固有の名前が無い」ここは今現状のコードで言いますと、どこの部分に該当するのでしょうか...?

    現状で言うと<nav>と<aside>ですね。これらにも、その役割と構造を適切に表すclass名をつけてあげてください。

    命名に関しては部分的なコードだけを見て行き当たりばったりでつけると整合性のとれないものになりがちなので、例えばデザインを印刷した紙の上にペンで必要な枠を書いてみて、その全体構造を俯瞰で見渡しながら考える、というのもひとつの手です。アナログな方法ですけどねw

    キャンセル

  • 2018/08/02 11:18

    ご丁寧にありがとうございます。
    クラス名もきちんと考えて付けていきたいと思います...
    正直申しますと、だんだんクラス名をなんてつけて良いか分からず、後から「clearfix」などを親要素にかける必要があると分かった際に、わ新しくまたタグで囲わなければならないけどなんてクラス名をつけたら...なんてことになってしまい、後の方はかなり適当になってしまっていました...
    「nav」と「aside」ですね!了解しました。
    まずは、クラス名がめちゃくちゃになってしまわないように、ご指摘頂いた通り、全体の構造を考えて作っていきたいと思います。
    初歩的な質問にもご丁寧に教えて下さり、ありがとうございました。

    キャンセル

  • 2018/08/02 11:53

    すみません...
    実は、個別ブロックのfloatを解除して、3つのブロックにのみfloatを設定したのですが、レイアウトがかなり崩れてしまいました...恐らく教えて頂いた意味を理解できていないのだと思うのですが、具体的には「nav」「wrapper_main_contents」「aside」の3つにfloatを設定しました。そしてnavの中の「recipe_link」、articleの中の個別でfloatとさせていた、2つのコンテンツの関しましてもfloatを解除しました。
    やはりこのような現象が起きるのはもともとのコード構造に問題があったからですよね...

    キャンセル

  • 2018/08/02 13:11

    大幅な構造変更になるのでもしかしたら、と思いましたがやはり崩れちゃいましたか…。元のデータはバックアップ取ってありますよね?

    ある程度作り込みが終わった後で大幅な構造変更をした場合、それまでの構造を前提に絶妙なバランスで成り立っていた部分が影響してうまくいかなくなることもあります…。

    こういう時は一旦、新しくまっさらなHTMLに必要となる枠だけ使って実際のデザインに合わせたサイズでレイアウトをしてみて、枠のレイアウトに問題がなくなったら、その中にコンテンツをひとつずつ戻していくという手法を取るといいかと思います。

    そしてコンテンツを1つ戻すたびに表示を確認し、もし崩れが発生したらその部分で使っているCSSを見直して修正をかけるようにしていくと、問題箇所がみつけやすくなると思います。

    このままコメントでサポートしても良いですが、コードの提示などがやりづらいので、必要であれば別の質問を改めてたててみてください!(新しい質問を立てたらここにコメントつけると気づきやすいです)

    キャンセル

  • 2018/08/02 13:23

    すみません。ご親切にありがとうございます。
    バックアップは取ってあります!
    修正の方法まで教えて頂きありがとうございます。取りえず、もう一度コードの方を見直してみまして、それでもうまく行かなかった場合、まっさらな状態からの作りなおしも含めて考えていきたいと思います...
    分かりました。
    長々と教えて頂きありがとうございました。
    もし、どうしようもできない状況になってしまいましたら、また新しく質問を立てさせて頂きたいと思います。
    本当にご親切に教えて下さり、感謝致します...

    キャンセル

+1

ソースコードが画像で貼られているため細かい検証ができませんが、
ざっと見た感じではfloat指定の有無でadide要素が回り込んでしまっているように思います。
参考:CSS floatを初心者向けに図で解説 抑えるべき注意点とは?

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

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

  • HTML5

    4293questions

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

  • CSS3

    2207questions

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