Q&A
画像として貼られたコード(しかも一部見切れてるっぽいやつ)を読む気にはなれないから、どこかしらにアップロードしてほしいのですが
現在、プログラミングスクールの課題でwebサイトを作成しているのですが、floatさせた要素に関して分からないことがあります。
コードが長くなってしまった為、作成したコードは他サイトにて公開する形を取らせて頂きましたので、お手数ですがそちらの方から見て頂けましたら幸いです。
公開しているコードのcodepanというサイトのリンクになります。
分からない点に関してなのですが、CSSのコードにおきまして、asideの部分にfloatを設定しますと、以下の画像のようになります。
しかし、floatを設定しない場合だと、以下の画像のように上に詰めた状態になります。
asideにfloat設定した場合としなかった場合で何故変わってきてしまうのか、この点につきましてどうしても分からなかった為、ご質問させて頂きました。
コードが長くなってしまい、すみません。どなたかご解説いただけますようでしたら、よろしくお願いいたします。
ご指摘ありがとうございます。アップロードするというのは、「gtihub」のようなソースコードを公開できるような所で、公開した方が良いということでしょうか...?
↑このサイトで紹介されてるようなサービスにコードを移して公開するという手もあります。
「codepen」というサイトは登録はしたのですが、ソースコードを公開する方法が分からなくて...もう少し調べてみます...
もしかして：画像が逆？
https://codepen.io/newyee/pen/jpwYQL ←ここでコードを保存してみたのですが、見て頂けることできますでしょうか...?
画像が逆というのは、どの画像のことでしょうか...?
「以下の画像のように上に詰めた状態になります」の下の画像では要素が詰まった状態に見えないので
あ、すみません...下の画像では、上の画像に比べて広告の画像の位置が上に位置しているのですが、これでは、分からないですよね...floatさせた場合と、させていない場合とで、全体の画像もアップした方が良いでしょうか...?
コードが別のサービスにあるのでコードの画像は消していただけるとわかりやすいです。
なので、1.サイト全体の画像を掲載 2.コードの画像と掲載したリンク先を入れ替える。をお願いいたします。
承知しました。ご指摘ありがとうございます。
codepenで提示していただいたソースコードで、.main_contents内にあるaside要素の中のコンテンツが全部display:noneになっていますけど、これが質問者さんの現状のコードなのですか？(こちらでは、提示されたソースコードでfloatプロパティを消しても何も変わりませんでした)
チェックして頂きありがとうございます。aside要素内に関しましては、CSSの方でfloatをかけただけなので、display:noneになっている理由に関しましては、まったく分からないです...codepenに掲載させて頂いたコードは現状のコードなのですが、僕の方では、asideに設定しているCSSを消しますとやはり、質問の内容の所で掲載させて頂いた画像のように上に詰める形になるんですよね...
最小限のコードを作る事で理解できることもあると思うので、やってみてはいかがですか？
回答2件
0
ベストアンサー
.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/25 13:26
編集2018/07/25 13:33総合スコア3763
ご丁寧にご回答頂きありがとうございます。大変申し訳ないのですが、個人的な都合となってしまうのですが、コードをチェックする時間が取れないため、後日、ご回答いただいた内容を参考にさせて頂き、コードの方もう一度見直してみたいと思います。その上で、またきちんとご返信させて頂きたいと思っております。
ご丁寧にご回答頂いたのに、申し訳ないです...
ご回答いただきありがとうございます。
度々申し訳ないのですが、ご回答頂いた中で分からない所があり2点程お聞きしたいことがございます。
フロートさせるのは各カラムの中の個別のブロックではなく、 「左メニュー」「メインカラム」「右サイドバー」の3つの親ブロックに変更する、とのことなのですが、これは現状のコードですと、左メニューは「nav」に、メインカラムは「article」に、サイドメニューは「aside」にfloatをかける、ということでしょうか？
そして、「真ん中のメインカラムが1つのブロックではなくdivとarticleの2つに別れてしまっている」この点についてなのですが、現在「article」は2つの「section」要素を内包しており、2つのコンテンツを構成していると思うのですが、divとarticleの二つに分かれてしまっているとはどういう意味なのでしょうか...?
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つとも要素名が違うものになりそうなので子孫セレクタにすればレイアウト自体は作れると思いますけど、全体のレイアウトを作る大枠のブロックに固有の名前が無い、というのはあまり見かけないやり方ですので。
あと「3カラムのレイアウトを作る」という点には直接関係ありませんが、マークアップでの要素の選び方がちょっと気になりますね…。特に各セクションの「見出し」に見出し要素が設定されないところとか。。。
Web文書のマークアップを検討する際には、基本的にまず一番最初に「見出し構造（h1-h6）」を見つけ出し、実際の情報構造に合わせて適切に見出しタグを設定することから始めるのがおすすめです。
セクション要素（section、article、aside、nav）はいずれも「見出し＋それに伴うコンテンツ」のブロックに割り当てるもの（※asideとnavは見出しの省略可）なので、見出しが見つかれば自然とどこからどこまでを1つのセクションにまとめればよいのかも見つかります。div要素はセクション要素や他の意味付け用のタグだけではデザインの再現が難しい場合に、足りない枠を足す形で使うのが良いのではないでしょうか。
返信が遅れてしまい、大変申し訳ありません。
ご丁寧に教えて下さり、ありがとうございます。お待たせしてしまうのは申し訳ないかと思い、取り急ぎ、ベストアンサーとさせて頂きました...
ご指摘頂いた、「<div class="new_recipe clearfix">と<article>を更に<div>などで括って一つのブロックにする」ここの部分に関しまして、新しく「<div class="wrapper_main_contents">」を作り真ん中のコンテンツを括りました。これにより、取り敢えず３カラムのレイアウトにはなったと思ってよろしいのでしょうか...?
そして、次にアドバイス頂いた「<div class="main_contents clearfix">の直下を3つのブロックに整理してこれら3つにfloatを設定するのですが、その際できればclass名をつけた方が良いかな、と思います。」の部分なのですが、<div class="wrapper_main_contents">で括ったことにより、３つのブロックに整理されていると考えて大丈夫でしょうか？更にfloatを設定する際に付けるクラス名に関して、「全体のレイアウトを作る大枠のブロックに固有の名前が無い」ここは今現状のコードで言いますと、どこの部分に該当するのでしょうか...?
すみません。このような場所でどこまで質問して良いか分からなかったのですが、かなり質問させて頂いてしまいました...
ずうずうしいのかもしれませんが、もしよろしければ、教えて頂けたら幸いです...
>> 新しく「<div class="wrapper_main_contents">」を作り真ん中のコンテンツを括りました。これにより、取り敢えず３カラムのレイアウトにはなったと思ってよろしいのでしょうか...?
実際にちゃんと3カラムに表示されるかどうかはCSSの設定次第ですが、枠取りの仕方としてはそれでいいと思います。ただ「wrapper」というのは「囲むもの」という意味ですので、真ん中のカラムに「wrapper_main_contents」という名前をつけてしまうと、「main_contents」の中に「wrapper_main_contents」が存在することになり、命名と構造が一致しないという問題が生じると思います。要素につける名前は単にCSSをコントロールするためだけでなく、コードを読む人に対してその構造をわかりやすく伝え、管理しやすくするという役割もありますので、実際の構造やコンテンツの役割に応じた適切な名前をつけてあげるように心がけた方が良いと思います。
>> 「全体のレイアウトを作る大枠のブロックに固有の名前が無い」ここは今現状のコードで言いますと、どこの部分に該当するのでしょうか...?
現状で言うと<nav>と<aside>ですね。これらにも、その役割と構造を適切に表すclass名をつけてあげてください。
命名に関しては部分的なコードだけを見て行き当たりばったりでつけると整合性のとれないものになりがちなので、例えばデザインを印刷した紙の上にペンで必要な枠を書いてみて、その全体構造を俯瞰で見渡しながら考える、というのもひとつの手です。アナログな方法ですけどねw
ご丁寧にありがとうございます。
クラス名もきちんと考えて付けていきたいと思います...
正直申しますと、だんだんクラス名をなんてつけて良いか分からず、後から「clearfix」などを親要素にかける必要があると分かった際に、わ新しくまたタグで囲わなければならないけどなんてクラス名をつけたら...なんてことになってしまい、後の方はかなり適当になってしまっていました...
「nav」と「aside」ですね！了解しました。
まずは、クラス名がめちゃくちゃになってしまわないように、ご指摘頂いた通り、全体の構造を考えて作っていきたいと思います。
初歩的な質問にもご丁寧に教えて下さり、ありがとうございました。
すみません...
実は、個別ブロックのfloatを解除して、３つのブロックにのみfloatを設定したのですが、レイアウトがかなり崩れてしまいました...恐らく教えて頂いた意味を理解できていないのだと思うのですが、具体的には「nav」「wrapper_main_contents」「aside」の３つにfloatを設定しました。そしてnavの中の「recipe_link」、articleの中の個別でfloatとさせていた、２つのコンテンツの関しましてもfloatを解除しました。
やはりこのような現象が起きるのはもともとのコード構造に問題があったからですよね...
大幅な構造変更になるのでもしかしたら、と思いましたがやはり崩れちゃいましたか…。元のデータはバックアップ取ってありますよね？
ある程度作り込みが終わった後で大幅な構造変更をした場合、それまでの構造を前提に絶妙なバランスで成り立っていた部分が影響してうまくいかなくなることもあります…。
こういう時は一旦、新しくまっさらなHTMLに必要となる枠だけ使って実際のデザインに合わせたサイズでレイアウトをしてみて、枠のレイアウトに問題がなくなったら、その中にコンテンツをひとつずつ戻していくという手法を取るといいかと思います。
そしてコンテンツを1つ戻すたびに表示を確認し、もし崩れが発生したらその部分で使っているCSSを見直して修正をかけるようにしていくと、問題箇所がみつけやすくなると思います。
このままコメントでサポートしても良いですが、コードの提示などがやりづらいので、必要であれば別の質問を改めてたててみてください！（新しい質問を立てたらここにコメントつけると気づきやすいです）
すみません。ご親切にありがとうございます。
バックアップは取ってあります！
修正の方法まで教えて頂きありがとうございます。取りえず、もう一度コードの方を見直してみまして、それでもうまく行かなかった場合、まっさらな状態からの作りなおしも含めて考えていきたいと思います...
分かりました。
長々と教えて頂きありがとうございました。
もし、どうしようもできない状況になってしまいましたら、また新しく質問を立てさせて頂きたいと思います。
本当にご親切に教えて下さり、感謝致します...
0
ソースコードが画像で貼られているため細かい検証ができませんが、
ざっと見た感じではfloat指定の有無でadide要素が回り込んでしまっているように思います。
参考：CSS floatを初心者向けに図で解説 抑えるべき注意点とは？
投稿2018/07/25 03:36
総合スコア2409
あなたの回答
tips
プレビュー
