• ベストアンサー

<br style="clear:both;">っておかしくないですか?

私は初心者でよく分からないのですがお尋ねします。 ホームページを作っていて、firefoxなどでメインのboxに高さが反映されません。(メインboxの中は3カラムです)で、とあるWEBサイトで<br style="clear:both;">を最後に記述すればOKと書いてあったので、早速やって見ました。 するとアラ不思議、本当に反映され、高さも表示されたのですが、この<br style="clear:both;">という表記って何かおかしくないですか?<br>にstyleですか・・・。 これはWC3的にはどうなのでしょうか??? 推奨されていますか? もっといい方法があれば教えていただきたいのですが・・・。

  • HTML
  • 回答数4
  • ありがとう数7

質問者が選んだベストアンサー

  • ベストアンサー
  • partita
  • ベストアンサー率29% (125/427)
回答No.4

#3です。「便利」と言ったことについて。 単に回り込み解除、という意味もありますし、<br clear="all">だけで、不思議なことにブラウザごとに違っていた表示がきっちりと同じように表示されることもあります。 回り込み解除はスタイルシートで次に来る要素にclear:bothとしておいてもいいのですが、 1箇所だけのために外部ファイルに書くのも面倒なので、私は統一されたデザインでないときにはよく使用します。 使用頻度は個人差があると思いますので、使いたくなければ使わなければよし、という話ではないでしょうか。

pink_kimera
質問者

お礼

partitaさん度々有難うございます。 ><br clear="all">だけで、不思議なことにブラウザごとに違っていた表示がきっちりと同じように表示されることもあります。 なるほど、それは凄いですね!! 色々な使い方があって、使う人で違うものですね、とても参考になりました。

その他の回答 (3)

  • partita
  • ベストアンサー率29% (125/427)
回答No.3

推測ですが、<br>は「改行」という意味だから「スタイル」という概念があることに戸惑っているのでしょうか。 <br style="clear:both;">や<br clear="all">などは使ってみると結構便利ですよ。

pink_kimera
質問者

お礼

partitaさん有難うございます。 >推測ですが、<br>は「改行」という意味だから「スタイル」という概念があることに戸惑っているのでしょうか。 それもあります。<br style="clear:both;">や<br clear="all">ですが、具体的にほかではどの様な場面でお使いになられますか? <br style="clear:both;">と<br clear="all">は同じ意味でしょうか?? 私はよく分かりませんが、<br style="clear:both;">や<br clear="all">を使うというと、回り込みの解除と考えてよろしいでしょうか? ><br style="clear:both;">や<br clear="all">などは使ってみると結構便利ですよ。 便利とはどの様な感じで便利なのでしょうか???

  • taseki
  • ベストアンサー率66% (155/233)
回答No.2

> え、英文ですか と言われても… あなたにWC3ではどうかと聞かれたから、W3Cのページを紹介したんですが…。 当然、本家は英語ですよ。それを言われても私にはどうすることもできません(苦笑)。 W3C 日本語訳 とかで検索すれば和訳版もすぐ見つかると思うので、そちらを見るといいでしょう。

pink_kimera
質問者

お礼

tasekiさん、度々有難うございます。 そうですよね!当然英文ですよね。 何とか日本語の和訳サイトにたどり着けました。今から知れべてみたいと思います。ご丁寧に有難うございます。

  • taseki
  • ベストアンサー率66% (155/233)
回答No.1

W3Cのドラフトに載っていますよ↓ http://www.w3.org/TR/2005/WD-CSS21-20050613/visuren.html#flow-control また、別にbrでなくても構いません。

pink_kimera
質問者

お礼

tasekiさん有難うございます。 え、英文ですか・・・・

関連するQ&A

  • clear bothで回り込みがうまく解除できません・・・。

    cssにて現在サイトを構成しています。 そこでお詳しい方がいらっしゃいましたらアドバイスを頂けたらと思います。 回り込みの指定解除なのですが、現在cssでbothの指定を行っています。名前はclearとします。 そこで、<br>に対してclass指定で、<br class="clear" />と記述するのですが、何か旨く解除し切れません・・・。 これをブロックレベルで、<p class="clear"></p>とすると旨く解除が出来ます。・・・でも空タグが出来るのでどうなのでしょうか??? ですが、時々<br class="clear" />でも、きちんと解除できるものもありますので、何か違いをつけて、インラインとブロックで解除を分けなければいけないのかな?と思いご質問させていただきました。 すみませんが、解除の仕方をアドバイス願います。 あと、これは余談な質問ですが、imgに対してマージンなどの指定を行ってもfirefox1.5で隙間が反映されません。 <img・・・・・ class="10px">(左右に10pxマージンを指定した場合)これはfirefoxのバグか何かでしょうか?はたまた私の定義に問題アリでしょうか? どうぞ、宜しくお願いいたします。

    • ベストアンサー
    • HTML
  • clear: bothの事で質問です。

    XHTML+CSSを勉強してる初心者ですが。 この場を借りて質問させてもらいます。 判らない事は (1) <div style="background: #CCCCCC; height: auto; width: 700px;"> <div style="background: #888999; height: 100px;width: 300px;float:left;">画像</div> <div style="background: #999999; height: 300px;width: 400px;float:left;">画像の説明</div> <br style="clear: both;" /> (2) <div style="background: #CCCCCC; height: auto; width: 700px;"> <div style="background: #888999; height: 100px;width: 300px;float:left;">画像</div> <div style="background: #999999; height: 100px;width: 400px;float:left;">画像説明</div> <div style="clear: both;"></div> (1)と(2)では、 (1)は<br style="clear: both;" />と記入してますが (2)は<div style="clear: both;"></div>と記入してます。 この(1)と(2)は同じなのでしょうか? それと使うとするならどちらのほうが有効的なのでしようか? 教えていただければ光栄です。

    • 締切済み
    • CSS
  • CSSテキストの回りこみ解除について

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> CSSでサイトをつくっています。 写真の右にテキストを回り込ませるのにfoat:leftをimgに指定しているのですが、 <div style="clear: both;"> <br style="clear: both;"> で解除すると、Firefoxで下に200pxくらいの余白ができてしまいます。(IEは問題ありません) そこでbothをallに変えると、Firefoxでもきちんと表示されるのですが、allはHTML 4.01は非推奨とのこと。 テキストの回りこみはどのようにすればうまく行くのでしょうか?

    • ベストアンサー
    • HTML
  • 【CSS】float:left; を使用した2カラム、本文中でclearすると間が空いてしまう

    お世話になります。 左がメニュー(仮称・BOX-A、float:left指定)、右が(仮称・BOX-B)本文、下にフッター(clear: both)…といったページを作成しています。 問題は、本文・BOX-Bにおいて、縦長の画像を使用した場合、文章を画像の右に回りこませたい時があります。  ↓ ↓ ↓ <img src="xxx.jpg" style="float:left; width:100px">   画像回り込み文章~~~文章 <br style="clear:left"> 通常の文章 ----------------------------------------------------------- しかし、これを行ってしまうと、BOX-Aのfloatも解除されてしまい、BOX-Aの内容(高さ)分、 BOX-Bの『通常の文章』が表示される位置に空間ができてしまうのです。 …以下のURLが、その状態の例です。 http://www.geocities.jp/multi_column/practice/sample/2column2_fixed_liquid_poor.html 上記サイト様の、 http://www.geocities.jp/multi_column/practice/2column2.html#liquid の、ページ半ば…よりやや下に、上記問題点を克服するという 『メインカラム幅可変、サイドバー幅固定 2カラム(ネガティブマージン型)』 の説明が載っているのですが、同じように組んでも上手く行きません…。 本文中(BOX-B)で、floatのclearを行っても支障がなくなるようなCSSの組み方はありませんでしょうか? 何卒、宜しくお願い致します。

    • ベストアンサー
    • HTML
  • cssのclear:both;を利用した場合の余白が・・・

    いまXHTML+CSSでサイトを作っています。 CSSで「clear:both;」を使うとFirefoxでは上にIEでは下に余分な余白が出来てしまいす。 また「clear:both;」を使わないとカラム落ちをしてしまいます。 XHTMソース ■http://openlab.ring.gr.jp/k16/htmllint/htmllint.cgi?Stat=on&ViewSource=on&Method=URL&URL=http%3A%2F%2Flabo.fesly.net%2Ftest2%2Findex.php CSSソース ■http://jigsaw.w3.org/css-validator/validator?profile=css21&warning=0&uri=http%3A%2F%2Flabo.fesly.net%2Ftest2%2Findex.php 「clear:both;」はXHTMLソースの44行目のdivです。 44行目のdivを入れないとカラム落ちしてしまい、入れると余分な余白ができてしまいす。 回避方法や間違っている場合はご指摘をお願いします。 ご指導のほど宜しくお願いします。

    • ベストアンサー
    • HTML
  • firefox表示でclear: both;を指定した要素のマージンは強制的に0?

    ヒントだけでも頂けると助かるのですが float:left; で段組をしていて、その直下の <address> 要素で clear: both; しています で、IE と Opera だと通常に段組解除 & margin-top が取れるのですが firefox だと段組解除のみで margin-top がとれません。 これって回避方法ってありませんか? 多分 <hr style="clear: both;" /> でもいいんでしょうが 極力要素は減らしたいので <address> で解除+ margin-top を取りたいんです おわかりの方居ましたらよろしくお願いします

    • ベストアンサー
    • CSS
  • CSSでフローとした際の親要素の高さ

    CSSでfloatしたものって、親要素のheightに反映されません?ただ親要素に背景があって、反映されないと凄く困る感じで・・・。 それってどうやって回避すればいいでしょうか? 取りあえず <div style="width:750px;background:url(mainback.gif)"> <div style="float:left;width:300px;">左側</div> <div style="float:right;width:450px;">右側</div> <br style="clear:both;"> </div> のように、<br style="clear:both;">みたいにして取逃げたんですが、そもそも無意味なbrを入れるのもどうかと思うし。文法的にもbrにclearって微妙な気もするし、 なにか良い逃げ方ってないでしょうか?? ご存知の方、宜しくお願いいたします。

    • ベストアンサー
    • HTML
  • 画像にfloatを指定すると別ボックスと重複してしまいます

    大幅に端折ってしまい申し訳ありませんが、 2カラム構造の左カラムに以下のようなコードを書いたところ 画像(sample.jpg)とボックスbとが重なって表示されてしまいます。 そこでフロートを解除しようとボックスaの後に<br style="clear:both">を記載すると、 右カラムの下にボックスbが表示されてしまいました。 このような画像にfloatを使用した際の高さからくる重なりを防ぐ方法などありませんでしょうか? 初心者な質問で申し訳ありませんが、宜しくお願いします。 <DIV id="a"> <img src="sample.jpg" style="float:right;"> </DIV> <DIV id="b"> hoge </DIV>

    • ベストアンサー
    • HTML
  • vba ボタン押すとユーザフォーム、リストをクリア

    vba で、実行すると、ユーザフォームとリストBOXに結果を反映するものをつくりましたが、 この反映された結果を、ボタンを押すとクリアにしたいのです。 ユーザフォーム、リストボックスの内容をクリアするには、どのような記述にすればよろしいでしょうか?

  • IE6でスタイルが反映されない

    input[type=button] を使って、すべてのボタンにスタイルを反映させようとしていたのですが、IE6のみ反映されないことに気付きました。 他、IE7、IE8、FireFox、google chrome、safariでは問題なく反映されるのに、IE6だけはバグ?のためか無理でした。 input[type=button] 上記以外の書き方で、IE6にも反映されるような、すべてのボタンに反映させられるスタイルの記述の方法があるでしょうか?

専門家に質問してみよう