- ベストアンサー
フロートについての質問
- ブロック要素のフロートについて質問します。
- 全体を右寄せにしたいが、BとCも右寄せにする方法がわからない。
- 試行錯誤した結果、希望の表示にはなったが、もっと簡単な方法があるかどうか質問した。
- CSS
- 回答数2
- ありがとう数2
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
最初のソースを利用すると .a1{ float:right;} .a{ width:200px; } .b{ width:50px; float:left;margin-left:100px; }/*★200-50-50＝100★*/ .c{ width:50px; float:left; } <div class="a1"> <div class="a">A</div> <div class="b">B</div> <div class="c">C</div> </div> でいかがでしょうか？ 文章構造を見た目になるように変更するのは文章構造と視覚デザインの分離の原則に反します。clearの為にdivやクラス名を追加するのは好ましくありません。ので、お気づきのように第2案はよくないです。 最初のソースに1つだけ加えました。但し、class名「1」は文法違反です。クラス名・ID名ともにアルファベットで始めなければなりません。[1]だと解釈しないブラウザもありますので、便宜上a1としました。 ★蛇足 また、第2案ですが、 <div class="1"> <div class="a">A</div> </div> <!--これ消す <div class="2"> --> <div class="1 2"><!-- スペースを空けて、クラス名をいくつでも追加できます --> <div class="b">B</div> <div class="c">C</div> </div> <!--これ消す </div> --> というように、1つの要素にクラス名はいくつでも入れられますので、今後覚えておいても損はないと思います。
その他の回答 (1)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
そんなHTMLやスタイルシートの書き方・・どこで習いました？。 もし、将来並べ方を変えたいと思ったとき、どのように手を打ちますか？ ・・・最初にデザインを決めてHTMLやCSSを書こうとすると、必ず、挫折します。・・・・ なぜなら、根本が間違っているからです。 さきほど、Webデザインの勉強の仕方での回答にも書きました( http://okwave.jp/qa/q7722342.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名は、文書構造を示すために一般的なものを付けてあります。元々そのためのものです。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> ＿<meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> ＿<title>サンプル</title> ＿<meta name="author" content="ORUKA1951"> ＿<meta http-equiv="Content-Style-Type" content="text/css"> ＿<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" > ＿<link rel="START" href="../index.html"> ＿<style type="text/css"> <!-- html,body{margin:0;padding:0;background-color:gray;} div.header,div.section,div.footer{width:70%;margin:0 auto;background-color:white;background-color:silver;} p{text-indent:1em;} h1,h2,h3,p{margin:0 10px;line-height:1.6em;} /* 挿絵の設定 */ div.figure{clear:right;} div.figure p{float:left;} div.figure{float:right;} /* わかりやすいように・・色とか余白とか上と一緒に書く方が良い */ div.figure{text-align:center;font-size:0.7em;} div.figure p{margin:2px;} div.figure{background-color:white;padding:5px;} --> ＿</style> </head> <body> ＿<div class="header"> ＿＿<h1>タイトル</h1> ＿＿<p>このページでは・・・・</p> ＿</div> ＿<div class="section"> ＿＿<h2>見出し</h2> ＿＿<p>そんなHTMLやスタイルシートの書き方・・どこで習いました？。</p> ＿＿<div class="figure"> ＿＿＿<p><img src="./images/AA.jpg" width="200" height="150" alt="A"><br>これは挿絵Aです。</p> ＿＿</div> ＿＿<p>もし、将来並べ方を変えたいと思ったとき、どのように手を打ちますか？</p> ＿＿<p>・・・最初にデザインを決めてHTMLやCSSを書こうとすると、必ず、挫折します。・・・・</p> ＿＿<p>なぜなら、根本が間違っているからです。</p> ＿＿<h3>どうすればよいのか</h3> ＿＿<div class="figure"> ＿＿＿<p><img src="./images/BB.jpg" width="50" height="38" alt="B"><br>挿絵B</p> ＿＿＿<p><img src="./images/CC.jpg" width="50" height="38" alt="C"><br>挿絵C</p> ＿＿</div> ＿＿<p>まずHTMLをきちんと書くこと。そのような配置が必要ということは、必ず文書構造にそのように配置する根拠があるはずです。たとえば、本文中でいくつかの挿絵を配置したいが、ひとつの挿絵は大きくて、残り二つの挿絵は小さい場合などが想像できます。</p> ＿＿ ＿</div> ＿<div class="footer"> ＿＿<h2>文書情報</h2> ＿＿<dl class="documentHistry"> ＿＿＿<dt id="FIRST-PUBLISHED">First Published</dt> ＿＿＿<dd>2012-08-10</dd> ＿＿</dl> ＿＿<address>© ORUKA1951 2012 - 2016 All Rights Reserved mailto:*****</address> ＿</div> </body> </html>
お礼
ご回答ありがとうございました。 全く勉強が足らないようですみません。 参考にさせて頂きます。
お礼
ご回答ありがとうございます。 マージンをマイナスで指定するという発想に至りませんでした。 クラス名の付け方も注意します。 参考にさせて頂きます。ありがとうございました。