初めての店舗開業を成功させよう>>

float:leftなどで回りこみを設定しました。その設定をclear:both;で解除する時に、インライン要素で指定したいです。

例えば、<div style="clear:both;"></div>で単体ですが、ブロックレベル要素です。
インライン要素で指定できますか?<span>ですと、解除できません。


<div style="float:left;">A</div>
<div>B</div>

<div>C</div>

Cを回りこみさせたくないので、BとCの間にclear:both;を指定したいです。
<div style="clear:both;">C</div>ではない方法をお願いします。

このQ&Aに関連する最新のQ&A

A 回答 (3件)

 floatは、文章中に登場する画像が文章の可読性を妨げるため、画像の周囲に文章を回り込ませたり、複数の文章ブロックをウィンドウ幅に合わせて横並びの個数を変化させるためるために使うものです。

素人さんがCSSを書き始めると、しばしば内容枠の配置に使用したりしていますが・・
 したがってブロック要素以外で回り込み解除はHTMLが正しければ本来は必要ないはずです。それをしたいということは、HTML自体が誤っているのではないかと。
 方法はいくつかありますが、そもそもfloatを使わなくても良い、使うべきでない場面ではないかと・・
・デザインのためにマークアップするのではない文書構造にしたがってマークアップする
・正しいHTMLに対してCSSで、それぞれの媒体に対してスタイルシートでプレゼンテーション方法を決めていく。しばしば、mediaを指定しないスタイルシートも見かけますが、それだと読み上げソフトや点字端末、そして検索エンジンには???

 どういう文書構造に対して、どのようにマークアップし、screen媒体に対してどのようなプレゼンテーションをしたいか
    • good
    • 0

HTML と CSS を正しく解釈する一般的なブラウザなら "clear:both;" をインライン要素に指定しても無効だよ。


そもそも、float: も clear: もブロック要素のためのスタイルだし。

「<div style="clear:both;"></div>」だとレイアウトが崩れたりするのだとおもうけれど、とりあえず、影響のありそうなスタイルをすべて 0 にした、こんなのはどうかな?

<div style="clear:both;margin:0;padding:0;border:0;width:0;height:0;line-height:0;font-size:0;"></div>

問題が出ないようなら、少しずつスタイル設定を減らして、どのスタイルが原因なのかみつけると解決がはやいかも。

でも、[ANo.2] さんも指摘しているけれど、適切に構造化された HTML 文書に対して、適切に CSS をつければ、このようなやぼったくて気持ちのわるいことをしなくていいはず。
    • good
    • 0

インライン要素にfloat指定したい理由、<div style="clear:both;">C</div>では不都合な理由を添えるべきかと。


多くの場合、「~したい」よりも「なぜそうしたいのか」の方が重要です。
    • good
    • 0

このQ&Aに関連する人気のQ&A

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

Q
っておかしくないですか?

私は初心者でよく分からないのですがお尋ねします。

ホームページを作っていて、firefoxなどでメインのboxに高さが反映されません。(メインboxの中は3カラムです)で、とあるWEBサイトで<br style="clear:both;">を最後に記述すればOKと書いてあったので、早速やって見ました。

するとアラ不思議、本当に反映され、高さも表示されたのですが、この<br style="clear:both;">という表記って何かおかしくないですか?<br>にstyleですか・・・。

これはWC3的にはどうなのでしょうか???
推奨されていますか?

もっといい方法があれば教えていただきたいのですが・・・。

Aベストアンサー

#3です。「便利」と言ったことについて。

単に回り込み解除、という意味もありますし、<br clear="all">だけで、不思議なことにブラウザごとに違っていた表示がきっちりと同じように表示されることもあります。

回り込み解除はスタイルシートで次に来る要素にclear:bothとしておいてもいいのですが、
1箇所だけのために外部ファイルに書くのも面倒なので、私は統一されたデザインでないときにはよく使用します。

使用頻度は個人差があると思いますので、使いたくなければ使わなければよし、という話ではないでしょうか。

QCSSでborderの長さを指定、または可変にしたい。

下記のように指定していますが、これだと横幅いっぱいに下の線が表示されてしまいます。

文字なりの長さ、または指定のピクセル数にしたいのですが、どのようにしたらよいでしょうか。

h3{
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

Aベストアンサー

borderの長さはそのボックスの大きさですから、ボックスの大きさを指定する事になります。
h3{
width:???px;
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

また、文字数(ボックスの内容)に合わせたい場合は、ボックスを浮動化(float)する等の方法もありますが・・・そのボックスの周りへ影響が出たり、ブラウザ毎にバグや実装の違いなどが比較的多く、扱いが面倒になるのであまりおすすめできません。

HTMLの方も修正する方法でもよければ

<h3><span>××○○</span></h3>
のようにspanで囲い、スタイルをspanに対して指定する方法もあります。

h3 span{
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

borderの長さはそのボックスの大きさですから、ボックスの大きさを指定する事になります。
h3{
width:???px;
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

また、文字数(ボックスの内容)に合わせたい場合は、ボックスを浮動化(float)する等の方法もありますが・・・そのボックスの周りへ影響が出たり、ブラウザ毎にバグや実装の違いなどが比較的多く、扱いが面倒になるのであまりおすすめできません。

HTMLの方も修正する方法でもよけ...続きを読む

Qcssで「下よせ」ってどうやっていますか?

フロートのレフト、ライトはいいとして、

あるボックス要素内(A)に異なるボックス要素(B)をいれます。
この(B)を(A)の一番そこにはりつかせたい時にどうすれば
最もよいのでしょうか?

いいアイデアをご教授ください。

Aベストアンサー

こんなのはどうかな?

position: absolute;
bottom: 0px;

Qで文字を右揃えにしたいのですが...(^-^;

こんばんは。私は今HPを作っています。
それで質問なんですけど、
HTMLで<SPAN>ってタグありますよね?
それにCSSを使って(? <SPAN>で囲まれた場所を
文字を右揃えに表示させたいのですが、何故かうまくいきません。
<SPAN style="text-align: right">○○</SPAN>
このようなタグで使いました(上)
何故なのでしょう、教えてください。
よろしくお願いします。

ちなみに、このようなものをつくりたいのです。(下)
リンク集なんですけど;

HPタイトル   管理者名
―――――――――――――――
バナー
―――――――――――――――
このHPの説明

これの管理者名のところを右揃えに表示したいのだが、
うまくいかないのです;<DIV>だと改行されてしまうし...

Aベストアンサー

span要素に対しては、text-alignの指定は有効にならないと思います。 こういった場合、positionプロパティを指定してポジショニングするか、floatプロパティで回り込みをさせるのが良いと思います。
CSSに頼らない方法をとっても良いなら、テーブルでレイアウトするのも手でしょう。

スタイルシートで処理する場合のソースの書き方ですが、以下のようにしてみてはいかがでしょうか。

<div>
<span style="float: right;">管理者名</span>HPタイトル
<hr style="clear: right;">
<img src="*" alt="バナー">
<hr>
<p>このHPの説明</p>
</div>

こうすると、お望みどおりになるのではないかと思います。 なお、「<span style="float: right;">管理者名</span>」これは、回り込みさせるテキストの前、この場合はHPタイトルの前に入れてください。 HPタイトルの後ろに入れてしまうと、管理者名が一段下にずれて表示されると思います。

参考になれば幸いです。

span要素に対しては、text-alignの指定は有効にならないと思います。 こういった場合、positionプロパティを指定してポジショニングするか、floatプロパティで回り込みをさせるのが良いと思います。
CSSに頼らない方法をとっても良いなら、テーブルでレイアウトするのも手でしょう。

スタイルシートで処理する場合のソースの書き方ですが、以下のようにしてみてはいかがでしょうか。

<div>
<span style="float: right;">管理者名</span>HPタイトル
<hr style="clear: right;">
<img src="*" alt="バナー...続きを読む

Qの意味を教えてください。

Javascriptを見ていると
<a href="#" onClick="new_open();return false">
なる記述がありますが、
この<a href="#"
の部分の意味を教えてください。
<a herf まではわかるのですが、この#はどのようないみなのでしょうか?

Aベストアンサー

href="#" というのは「そのページの最上部へのリンク」という意味で、スクロールした場所から一番上に戻したい場合に使います。
ちなみに、同ページ内への # 指定でのリンクでは、ページは読み込まれずスクロールするだけです。

<a href="#" onClick="new_open();return false">
というのは、そのリンクがクリックされた時に new_open という関数を実行し、他の処理はするな、という意味です。
return false というのが、A タグ本来のジャンプ動作をキャンセルさせるためのもので、これを取ってしまうとページ最上部にジャンプしてしまいます。

このスクリプトを書いた人は onClick だけが必要だったのでしょうが、href がないとリンクの下線が出ないなどの不都合があるため、やむなく # を書いたのでしょう。

JavaScriptの内容を実行したいだけなら、
<a href="javascript:new_open()">
と書けば十分なのですが、一部のブラウザではこのタイプのリンクをクリックすると、アニメーションGIFが止まってしまうなどの弊害があるため、嫌う人もいるようです。

また、JavaScriptが有効でない環境の人は、質問に書かれたリンクをクリックしてもページ最上部に戻されるだけで、開くべきページの内容を見ることができません。
なので、
<a href="ページのURL" target="_blank" onClick="new_open(); return false">
とするなどして、非JavaScript環境にも対応した方が親切です。

長文失礼しました。

href="#" というのは「そのページの最上部へのリンク」という意味で、スクロールした場所から一番上に戻したい場合に使います。
ちなみに、同ページ内への # 指定でのリンクでは、ページは読み込まれずスクロールするだけです。

<a href="#" onClick="new_open();return false">
というのは、そのリンクがクリックされた時に new_open という関数を実行し、他の処理はするな、という意味です。
return false というのが、A タグ本来のジャンプ動作をキャンセルさせるためのもので、これを取ってしまうとペー...続きを読む

QUL、LIタグの黒丸なしのリスト

お世話になります。

以下のソースを
IEで見ると黒丸なしリストと黒丸ありリストになるのですが
FireFoxですと、どちらのリストも黒丸ありのリストになります。

・これはIEのバグになるのでしょうか?
・IE・FireFoxともに黒丸なしのリストにしたい場合UL、LIタグで出来ますでしょうか?

ご存知でしたら、申し訳ありませんがご教授よろしくお願いいたします。


<html>
<title>ULタグテスト</title>
<body>

黒丸なしリスト
<ul style="width:150px;">
<li>list1</li>
<li>list2</li>
<li>list3</li>
</ul>

黒丸ありリスト
<ul>
<li>list4</li>
<li>list5</li>
<li>list6</li>
</ul>

</body>
</html>

Aベストアンサー

<ul style='list-style-type:none;'>

で黒丸(マーカー)がなくなると思います。

ulの幅を指定することでマーカーが消えるのは、CSSの仕様からするとIEのバグのような気がします。

Qrowsとcolsの意味

textareaタグとかに出てくるrowsとcolsについて悩んでいます。
どちらかが行でどちらかが列というのは分かるのですが・・。
和英辞典で列と行について調べてみると両方ともでrowが出てきて混乱してしまいました。
cols="20" rows="10"と指定したら横20縦10文字分確保するという風に理解してしまって良いのでしょうか?
後colsって何かの英単語の略なのでしょうか?

Aベストアンサー

rowsはrowの複数形ですが、colsはcolumnの複数形(の略)のことです。
rowは行、columnは列ですね。

Q画像イメージの上下左右、欲しいところに好きな間隔を入れられますか?

こんにちは。タイトルの通りサイト作成で、
画像の上下左右、好きな方向に間隔を入れられるかその方法をお教えください。

参考までに、DreamWeaver(ドリームウィーバー)2004MXです。

画像とテキストの兼ね合いで、画像の右側や左側に、
ところどころで間隔が欲しいと思っています。

間隔をいじれるところといえば縦間隔、横間隔になりますが、
縦間隔なら「上」と「下」、横間隔なら「右」と「左」、
これらが一度に動いてしまうのです。
片方には確かに欲しい間隔が得られるのですが、
ほう片方に要らない間隔ができてしまい困っています。

例えば右だけに間隔が欲しい。
左だけに間隔が欲しい。

こういう場合って、何かやり方があるのでしょうか。

もともと余白込みの画像を用意するという手も講じましたが、
その場合はその場合で、その画像が他のレイアウトに流用しづらい
という弱点を生んでしまい、レイアウトごとに画像を用意しなければならないので
対症療法としてはうまくいきませんでした。

また、画像ごとにセルを用意して任意の余白を作り出す手もありましたが、
セルがあまりにも絡まりあってしまい、
かなりぐちゃぐちゃなものになるためうまくいきませんでした。

やはりもうちょっと詳しい方にお訊きしようと思いまして
質問を立てさせていただきました。
素人質問で大変申し訳ありません。
どうぞ宜しくお願いいたします。

こんにちは。タイトルの通りサイト作成で、
画像の上下左右、好きな方向に間隔を入れられるかその方法をお教えください。

参考までに、DreamWeaver(ドリームウィーバー)2004MXです。

画像とテキストの兼ね合いで、画像の右側や左側に、
ところどころで間隔が欲しいと思っています。

間隔をいじれるところといえば縦間隔、横間隔になりますが、
縦間隔なら「上」と「下」、横間隔なら「右」と「左」、
これらが一度に動いてしまうのです。
片方には確かに欲しい間隔が得られるのですが、
ほう片方...続きを読む

Aベストアンサー

HTMLの初歩です。具体的には、
-------------------------------------------
<img src="○○.gif" width="100" height="100" alt="*"
style="margin: 10px 20px 0 30px;">

上10px 右20px 下0 左30px の四方の隙間が開く。
数値は例なので適当に変更を。
-------------------------------------------

<img src="○○.gif" width="100" height="100" alt="*"
style="margin: 5px 20px;">
上下5px 右右20px の2方の隙間が開く。

Q【CSS】floatで左右に並べた

CSS(スタイルシート)においてfloatで2つのdivを左右に並べる方法は定番ですが、この2つのblockレベル要素は高さが違えば下部が不ぞろいになります。
これは仕方ないとして、上部が不揃いになってもいいので下揃えにできませんでしょうか?
text-align:bottom;やvertical-align:bottom;ではできませんでした。tableを使えば可能でしょうが今回はtableなしという事でお願いいたします。

Aベストアンサー

> 4つ目の方法はなるほどと思いましたが左の文字が多い場合、L字型になってしまいました

4つ目の方法なら検討の価値ありと、思われるのなら、以下のサイトに、左の文字が多い場合の書き方と、
どちらのdivの文字が多くても段組が崩れない方法が紹介されています。
簡単に書くと、下に float:clear を使ったダミーのdivを追加する、というものです。
フッターに使っているdivがあるならば、それを利用してもいいと思います。

http://allabout.co.jp/computer/hpcreate/subject/msubsub_series_hpcreate05.htm
(私が書いた4つ目の方法は、このサイトのパクリです)

CSSだけで段組を・・・ というのは、ちょっとした事でレイアウトが崩れてしまうという、
難しい問題がありますね。
私はまだ、真剣に検討した事がないので詳しくは知りませんが、position:absolute を使っての
解決方法があるのかも知れません。

参考リンク
http://css.uka-p.com/
http://desperadoes.biz/style/dan/index.php
http://msugai.fc2web.com/web/CSS/colup.html

> 4つ目の方法はなるほどと思いましたが左の文字が多い場合、L字型になってしまいました

4つ目の方法なら検討の価値ありと、思われるのなら、以下のサイトに、左の文字が多い場合の書き方と、
どちらのdivの文字が多くても段組が崩れない方法が紹介されています。
簡単に書くと、下に float:clear を使ったダミーのdivを追加する、というものです。
フッターに使っているdivがあるならば、それを利用してもいいと思います。

http://allabout.co.jp/computer/hpcreate/subject/msubsub_series_hpcreate0...続きを読む

Qリンクの下線を消したいのに消せない(CSS)

自分でタグを入力して、XHTMLとCSSでサイトを作っているのですがどうしても解決できない問題があるので質問させていただきます。

サイトの各ページに飛ぶテキストリンクをページの上部に作っていて、そのリンクを

・通常時(a:link)は・・・・・・・・下線なし
・訪問後(a:visited)は・・・・・・・下線なし
・マウスオーバー時(a:hover)は・・・下線あり

というふうにしたいので、CSSに書いたのですがどの場合においても下線が表示されてしまいます。

CSSをどのように書き直せば、上記のように下線が表示されるのでしょうか教えてください。

XHTML:http://love.meganebu.com/~twilight/question/index.html

CSS:http://love.meganebu.com/~twilight/question/mainstyle.css

Aベストアンサー

このあたりのサイトが参考になるかと。
http://www.tagindex.com/stylesheet/link/text_decoration.html


人気Q&Aランキング

おすすめ情報