フロートについて

Question

ブロック要素のフロートについて質問します。 .1{ float:right; } .a{ width:200px; } .b{ width:50px; float:left; } .c{ width:50px; float:left; }

A

B

C

|　　　　　　　　　　　　　　[　　　　　　A　　　　　] | |　　　　　　　　　　　　　　[　B　][　C　]　　　　　　| 上記を下記のようにしたいのですが、思うようにできません。 |　　　　　　　　　　　　　　[　　　　　　A　　　　　] | |　　　　　　　　　　　　　　　　　　　[　B　][　C　] | 全体を右寄せに、かつB,Cも右寄せです。 B,Cに float:right; を指定すると、[ C ][ B ] と、Cの右側にBが来てしまいました。一応自分なりに試行錯誤して、 .1{ float:right; } .2{ clear:both; } .a{ width:200px; } .b{ width:50px; float:left; } .c{ width:50px; float:left; }

A

B

C

上記の書き方で希望の表示にはなりましたが、もっと簡単な方法があるのでは？と思って質問しました。どうぞ宜しくお願いします。

DrFell · Accepted Answer

最初のソースを利用すると .a1{ float:right;} .a{ width:200px; } .b{ width:50px; float:left;margin-left:100px; }/*★200-50-50＝100★*/ .c{ width:50px; float:left; }

A

B

C

でいかがでしょうか？文章構造を見た目になるように変更するのは文章構造と視覚デザインの分離の原則に反します。clearの為にdivやクラス名を追加するのは好ましくありません。ので、お気づきのように第2案はよくないです。最初のソースに1つだけ加えました。但し、class名「1」は文法違反です。クラス名・ID名ともにアルファベットで始めなければなりません。[1]だと解釈しないブラウザもありますので、便宜上a1としました。 ★蛇足また、第2案ですが、

A

B

C

というように、1つの要素にクラス名はいくつでも入れられますので、今後覚えておいても損はないと思います。

ORUKA1951 · Answer

　そんなHTMLやスタイルシートの書き方・・どこで習いました？。　もし、将来並べ方を変えたいと思ったとき、どのように手を打ちますか？　・・・最初にデザインを決めてHTMLやCSSを書こうとすると、必ず、挫折します。・・・・　なぜなら、根本が間違っているからです。　さきほど、Webデザインの勉強の仕方での回答にも書きました( http://oshiete.goo.ne.jp/qa/7722342.html#a1 )が、根本からやり直してください。　そのような配置が必要ということは、必ず文書構造にそのように配置する根拠があるはずです。たとえば、本文中でいくつかの挿絵を配置したいが、ひとつの挿絵は大きくて、残り二つの挿絵は小さい場合などが想像できます。 ★Another HTML-lint 5 ( http://www.htmllint.net/html-lint/htmllint.html# ) ★W3C CSS 検証サービス ( http://jigsaw.w3.org/css-validator/#validate_by_input ) でチェックしてみてください。スタイルシートは、スタイルシート部分だけ ※たった３行の指定ですよ。 div.figure{clear:right;} div.figure p{float:left;} div.figure{float:right;} だけで、期待通りになっているはずです。もちろん先で、flatじゃなくて行間に入れたいと思ってもHTMLを弄らなくても良いです。HTMLにいくら変更や記事の追加があってもスタイルシートは独立している。 ※タブは＿に置換してあるので戻すこと ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ ※class名は、文書構造を示すために一般的なものを付けてあります。元々そのためのものです。＿＿サンプル＿＿＿＿＿＿＿

＿＿

見出し

＿＿

そんなHTMLやスタイルシートの書き方・・どこで習いました？。

＿＿

＿＿＿

これは挿絵Aです。

＿＿

もし、将来並べ方を変えたいと思ったとき、どのように手を打ちますか？

＿＿

・・・最初にデザインを決めてHTMLやCSSを書こうとすると、必ず、挫折します。・・・・

＿＿

なぜなら、根本が間違っているからです。

＿＿

どうすればよいのか

＿＿

＿＿＿

挿絵B

＿＿＿

挿絵C

＿＿

まずHTMLをきちんと書くこと。そのような配置が必要ということは、必ず文書構造にそのように配置する根拠があるはずです。たとえば、本文中でいくつかの挿絵を配置したいが、ひとつの挿絵は大きくて、残り二つの挿絵は小さい場合などが想像できます。

＿＿＿

＿

フロートについて

最初のソースを利用すると

そんなHTMLやスタイルシートの書き方・・どこで習いました？。

似たような質問が見つかりました

関連するカテゴリからQ&Aを探す

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

　そんなHTMLやスタイルシートの書き方・・どこで習いました？。