CSSに関するいくつかの質問

質問

そろそろホームページにCSSを導入しようと考えているのですが、それに関していくつか質問があります。

1.CSSには、埋め込み方式と、外部ファイル方式があるとのことですが、一般的には多くのページに共通する大まかなデザインを外部ファイルで作って個別の細かい部分は埋め込みで補うのか、あるいはすべて外部、すべて埋め込みといったように完全に分けるべきなのかという点。

2.文字に色を付けたり、太さを変えるようなことであればCSSに頼らずともできると思いますが、今後はスタイルシートでできるものはすべてCSSに任せていったほうがよいのか、あるいは古いブラウザに配慮をして、レイアウトが崩れない程度にCSSを使うべきなのかという点。

3.外部CSSの場合で、clear属性を使ってfloatの回り込みを解除するとき、HTMLに「<P CLASS="clr"></P>」というダミーを作り、CSSに「.clr{clear:left}」と解除するのは間違いでしょうか？

左に写真を配置し、右に回り込みで解説文を書くレイアウトで、その下にも同様に写真と解説文が連続するため、解除しないと上の解説文の真下に写真が入ってきてしまいます。

写真｜解説文
<P CLASS="clr"></P>
写真｜解説文

以上の３つの点について知りたいと思っています。
知識不足で的外れな質問をしているかもしれませんが、ご助力よろしくお願いします。

回答No.5

aegills · ベストアンサー

1.について
ファイルの肥大化を防ぐ意味では、細かい指定をインラインで書くのもありです。が、ブロードバンドが普及してますのですべて外部CSSで指定したほうがメンテナンスしやすいかと思います。

2.について
マークアップはxhtml、デザインはCSSで指定するのが理想です。古いブラウザへの対応は、別途ページを用意した方がサイトの寿命は伸びます。

3.について
余計なタグを入れない方が正しいマークアップになります。clear専用のclassを作成し、floatを解除する要素に指定しましょう。

[例]
(style.css)
.float_left{ float:left; }
.clear_left{ clear:left; }

(index.html)
<img class="float_left" />
<p class="float_left">text</p>
<img class="clear_left float_left" />
<p class="float_left">text</p>
<img class="clear_left float_left" />
<p class="float_left">text</p>

お礼

たしかに仕様改正の多いこの分野では外部化して一まとめに修正できたほうが都合がよさそうですね。
floatひとつとっても結構本によって書き方が多くて困りますが、こちらも綺麗ですね。