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ひとつとっても結構本によって書き方が多くて困りますが、こちらも綺麗ですね。

回答No.4

noname#100277

１．全て「直接」乃至「内部」でも構わないとは思うけど、HTMLの修正では手間が掛かって面倒。
と成ると「外部」が望ましいのか？
と云う事だと、同じサーバーに設置してても参照時にエラーが発生しないとも限りませんし、外部サーバーに設置してた場合はサーバーエラーの事も考えないと読み込めません。
で在るから、結局は管理する本人が解り易い方法で選択するのが無難でしょう。
メンテナンス仕易い方法を選択。
２．携帯電話向けを作成する必要が出て来た場合は「DoCoMo」に基準させないと駄目なので、単純にHTMLでも構いませんが、CSSの場合は規制を受けるので注意が必要。
HTMLチェックでエラーが出ても、正常な表示が出来れば良いレベルならCSSを使わなくても問題では在りません。
３．割愛。

お礼

外部がよいという意見が多いようですね。
まだどちらの方法も慣れていないのでひとまず外部から勉強してみます。

回答No.3

abril

これが正解、と断言する事はできないでしょうね。サイト制作者のポリシーや特殊で限定的な用途・ターゲットを目的として作られるコンテンツというのもあるでしょうから。商用（プロ）なのか、趣味（個人）なのか、でも基準は違いますし。後者ならはっきり言って「自己満足」のみで制作してあったとしても誰もそれに文句は言えないでしょうし…。

ただ、(X)HTMLとCSSの本来の用途を考えるなら、論理構造と装飾性は分離するべきですから、装飾性（スタイル）に関する部分はCSSが担うべきものです。よって、1.と2.に関してはNo.1様と同意見です。

> 3.
原則、この様な「（レイアウト上の不都合を解消する為だけで論理的意味を持たない）要素のないコンテナ」を置くことは推奨されません。それに、(X)HTMLとCSSをある程度ちゃんと理解できている制作者なら、99％そういうダミー的な手段を使わなくてもfloatのクリア程度の事は充分に可能だからです。従って、No.1様の考え方の方が適切だと思いますし、私もそこそこ長い経験上で同様のやり方で様々なケースに難なく対応できてきましたから。

以下のスレッドのNo.3・No.5の回答で同様の考え方に関する細かい説明をさせて頂いてますので、参考までに。
＃要は、文法チェックでエラーにならなければ良いというものではないのでは…？という事です。
【参考】http://oshiete1.goo.ne.jp/qa5199457.html

お礼

長い間HTMLの透明テーブルを使ったレイアウト程度で十分だったのでCSSの意味をちゃんと理解していなかったようです。

できることなら意味のないものを置かずにレイアウトできないかと思い質問してみました。独学で手探り状態なので無理やりなコードになってしまいますが、いろいろ勉強して正していこうと思います。

回答No.2

noname#119957

1.すべて外部
2.今後はスタイルシートでできるものはすべてCSSに任せていったほうがよい
IE5以前は切捨てでＯＫ
3.<div CLASS="cler"></div>　：Ｐは段落
cler{clear:both}だけでは、不十分で
１×１pxBOXでline-height:１px
font-size:1px;でないとダメ。
**

補足

1＆2に関しては皆さん共通のようですね。
見えないからといって<P>を使ってましたが要素で分けるならおっしゃるとおり<DIV>を使うべきでした。

回答No.1

salonpath

1.色々な場所に書くと修正が困難になるので（他の理由もありますが）すべて外部が理想

2.見た目に関わる事は全てcssが理想

3.写真｜解説文のブロック要素にclear:both;を使えれば、pは必要ないかも。
<dl><dt>写真A</dt><dd>解説文A</dd></dl>
<dl><dt>写真B</dt><dd>解説文B</dd></dl>
dl{
clear:both;
}

お礼

このclearの使い方はわかりやすくてスマートですね。
無理がなさそうなので導入させてもらいます。