clearFixについて。
回り込んだ最後尾のタグにすべてclass=”clearFix”を付けてやればよいのでしょうか?
http://allergy.6.ql.bz/index.htmlなら<dl class="comment2dl">を<dl class="comment2dl" class=”clearFix”>とすればよいのでしょうか?
http://allergy.6.ql.bz/chiryou.htmlなら<table class="contents1" class=”clearFix”>とすればよいのでしょうか?
A 回答 (1件)
- 最新から表示
- 回答順に表示
No.1
- 回答日時:
意味知っていてなら、自由に・・
classは複数書くことは出来ません。classは「半角スペースで区切られた値のリスト」でしよね。
→class = cdata-list [CS] ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )
class="comment2dl clearFix"
となります。スタイルシートでclassセレクタは、
『半角スペースで区切られたリストからなるclass属性の値のひとつが一致するもの』
を意味します。
属性セレクタの、[class=~abc]の簡略した書き方です。
→5.8.3 クラスセレクタ(Class selectors) ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2 … )
【引用】____________ここから
注。 CSSではclass属性が非常に大きな力を持っている。 したがって文書作成者は、体裁に殆ど何の関係も無い要素(HTMLだとDIV要素やSPAN要素など)をベースにして、それらにclass属性でスタイル情報を与えれば、独自の構造化言語を設計できると考えられる。 しかし、文書の構造要素は広く受け入れられている一般的意味を持つ場合が多いので、こういった使用法は避けるべきである。 文書作成者が定めたクラス名では、意味を理解してもらえない場合もある。
 ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ここまで[セレクタ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2 … )]より
でわかるように、本来はclearFixはもちろん、comment2dlというclass名はまずいです。
floatを解除したいのでしたら、本来の考え方は違いますよね。たとえばHTMLに見出しと記事が続いているものでしたら、新しい見出しが登場するたびに、挿絵の周囲への文章の回り込みを解除したいなら
h1,h2,h3,h4{clear:all;}
で良いですよね。HTMLには手を加える必要はありません。ましたや文書構造を示しているとは思われないclass名をつけるべきではありません。
【引用】____________ここから
DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。
 ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ここまで[The global structure of an HTML document (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )]より
class名が文書構造を保管している具体的な例を書くとわかると思います。
<div class="section">
<h2>このセクションの見出し</h2>
<div class="figure">挿絵</div>
<p>段落</p>
<p>段落</p>
</div>
<div class="section">
<h2>このセクションの見出し</h2>
<div class="figure">挿絵</div>
<p>段落</p>
<div class="section">
<h3>見出し</h3>
<p>段落</p>
<p>段落</p>
</div>
<p>段落</p>
</div>
というHTMLがあれば、誰が見ても文書構造がわかります。十年後のあなたでもね。
そしてスタイルシートは、その文書構造にしたがって
div.section{clear:right;}
div.section div.section{clear:none;}
div.section div.figure{float:right;}
これも、別にHTML見なくても本文(section)内の挿絵(figure)は、右に回り込ませる。新しいセクションが始まると、floatを解除している。しかし、二階層目のセクションではfloat解除しない。
と読み取れますよね。
どのようなclass名が良いかは、HTML5の「新しい要素 ( http://standards.mitsue.co.jp/resources/w3c/TR/h … )」が参考になります。
clearFixなんて、御馬鹿なclass名は止めましょう。先でデザイン変更でfloat解除をしないことにしたとき、HTMLまで書き直すのですか?
★デザインのためにclass名,idを付けることはしない・・・と覚えておけば良いです。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS FC2カートのテンプレートでの商品表示について 1 2023/03/02 18:05
- PHP アコーディオンPHPが上手くいかない 3 2022/07/15 16:29
- PHP PHPの構文で間違えが分からない 5 2022/07/11 16:38
- JavaScript jqueryを使ったスムーススクロールのコードを書いたのですが、HTMLコード内にある、a butt 2 2022/04/14 10:59
- PHP アップロードファイルの数に応じてCSSを動的に変更したいのですが、方法がわかりません 3 2023/07/23 21:59
- HTML・CSS ヘッダーの画像にメインエリアがかぶってしまいます 1 2022/11/28 14:06
- PHP SQLとPHPの連結方法がわからないのでアドバイスお願い致します 1 2022/07/12 12:16
- HTML・CSS cssが効かなくて困ってます 1 2023/01/01 23:57
- HTML・CSS PCサイズで赤い画像2つと、青い画像2つがそれぞれ横に2つずつ並んでいるのですが、これをスマホサイズ 5 2022/04/11 12:01
- JavaScript ①入力フォーム→②確認表示画面→③送信完了画面のコードを書いているのです、 入力フォームから受け取っ 2 2022/05/10 16:45
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
htmlのolやulなどlistにtitleや...
-
複数のボタンを等間隔に、かつ...
-
<div id="container">の使いか...
-
html の divとtable の役割
-
HTML属性での「""」 「''」違い
-
オシャレな区切り線はありませ...
-
DD,DT,DDを横並び。paddingとma...
-
footerのclear:bothが効きません
-
div要素が重なってします
-
背景画像に全体または部分的に...
-
h1を親要素の縦中央、画像の横...
-
HTMLのJIS規格について
-
divとpの使いわけ
-
インラインフレームのページ内...
-
HTML5の終端タグ「 />」について
-
可変長要素を中は左寄せのまま...
-
h1に自分自身へのリンクを張...
-
[CSS]リキッドレイアウト上で、...
-
ローカルとWeb上で見え方が違う...
-
min-heightとheightの違いについて
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
htmlのolやulなどlistにtitleや...
-
div要素が重なってします
-
HTML属性での「""」 「''」違い
-
複数のボタンを等間隔に、かつ...
-
ヘッダーとフッターだけ背景を...
-
html の divとtable の役割
-
<div id="container">の使いか...
-
divとpの使いわけ
-
min-heightとheightの違いについて
-
HTML5 iframe の代わり
-
divの中に外部のHTMLを埋め込む
-
3カラムレイアウトで「常に残り...
-
ヘッダーを左右に二分割する方...
-
画面を縮小するとカラムが落ち...
-
reuterのScraypingで不思議な現...
-
htmlの見出しタグ(<h1>)の次...
-
1サイト内にHTML5とXHTMLが混在...
-
inline-blockをネストすると表...
-
html5でheaderの中にnav
-
<!-- #BeginLibraryItemとは
おすすめ情報