なるべくスタイルシートを使ったほうが良いの？

質問

ソースを作るにおいてhtmlでもできる事でも、なるべくスタイルシートを使ったほうが良いのでしょうか？

回答No.2

hue2011 · ベストアンサー

確かに、bgcolorだとかいろいろな設定はhtmlタグの中に書けます。
PCのエディタで作り、IEなどのブラウザで表示する、というだけであればCSSは余計なものに思うのは自然です。

ただし、こういうことになります。

箇条書きで10個ぐらいの記述があるとします。
<ul><li>をしたとして考えましょう。
１行目のメッセージのフォントカラーを青にしたいとします。その行の<li>に属性を与えればOK.
２行目は？　やっぱり前の行と同じように<li>にfont color=blueというようにやります。
これを１０行やる必要があります。１０行全部書く必要があります。
その中のひとつだけ注目を集めるためcolor=redにしたければ、たとえばそれが８行目なら８行目の<li>だけそうすればいい。

翌日、注目欄は８行目ではなく９行目になったとします。
修正場所は？　
８行目はcolor=blue
９行目はcolor=red
と直す必要がありますね。
１１行になる必要がでたら、１１行目にも青表示命令を書かなければなりません。

CSSを使うとどうなるか。
<li>というタグはfont color=blueとしておけば、本文が１０行であれ２０行であれいちいち書く必要はありません。
もしそのうちの１行だけ赤くしたければ、CSSでPICKUPというクラスのliを宣言し、color=redにします。
本文HTMLではclass="PICKUP"のように設定しておけばいいのです。

こういうことを、抽象化だとか部品化とかいろいろ呼ばれていますが、ミスなしにするテクニックです。
ある日、青文字を全部緑にしたいと思いついたら、CSSをgreenに書き換えるだけで、全ページはそれに従います。

ここまでが、CSSのふつうの働きです。
HTML5、CSS3になることでこの話は異常に展開します。

ひとつをお教えしますと、レスポンシブルページというものです。

同じページを、PC、タブレット、スマホ、ガラケーで見る可能性があると考えます。

昔なら、携帯用のサイトは/mだとかURLに別フォルダを作りましたがそんな必要はありません。

ブラウザの横幅のサイズがわかりますので、
　うんと短い場合（ガラケー）
　短い場合（スマホ縦置き）
　やや短い場合（スマホ横置き、またはタブレット）
　長い場合（PC)
で、画像のサイズを調整したり折り返しをしたり、マウスを置いた時の動きを替えたり、これをCSSだけで行うのです。

HTMLを作るほうでは、一応CSSで何をするかによってidやクラスを想定する必要はありますが、１枚だけページを作れば問題ないのです。

こういうことを、問い合わせ元のブラウザの反応で切り分ける＝レスポンシブル、という操作名で実現します。

お礼

どうもありがとうございました。

回答No.1

ORUKA1951

スタイルシートは、書いた積もりなくても使われています。
　⇒HTML 4のためのデフォルトスタイルシート ( http://momdo.s35.xrea.com/web-html-test/spec/CSS21/sample.html )
　これはブラウザがもっているスタイルシートです。

＞ソースを作るにおいてhtmlでもできる事でも、なるべくスタイルシートを使ったほうが良いのでしょうか？
　HTML(頭文字ですから大文字)は文書構造をマークアップするもので、プレゼンテーション(見栄え)のためじゃありません。
『スタイルシートはこれらの問題を解決すると同時に、HTMLにおける制限されたプレゼンテーション機構に取ってかわる。スタイルシートでは、行間の設定やインデントの設定、テキスト色や背景色、フォントのサイズとスタイル、その他様々なプロパティの設定が簡単にできる。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/present/styles.html#h-14.1 )』

　HTMLを作成されるなら仕様書は読まれていると思いますが、HTMLは、<h1>ここは見出し</h1><p>ここからひとつの段落・・・、ここは<q>引用</q>です。</p>と文書をそれを構成する要素に分解して、一つ一つの要素をマークアップするものです。それは「htmlでもできる事」じゃなくて、HTMLの任務です。
　それによって「HTMLは、どんな環境からもWebの情報を利用できる( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.2.1 )」のです。スクリーンリーダーは見出しを太い男声で読み上げてくれます。

　そして、<h1>見出し</h1>を太字でゴシック体で表示するのは、スタイルシートが行っています。何も指定しなければ、デフォルトスタイルシート ( http://momdo.s35.xrea.com/web-html-test/spec/CSS21/sample.html )が使われるだけです。
　逆に、HTMLで<strong>重要とマークアップされた部分</strong>を、(デフォルトの)太字に加え赤字にしたり、アンダーラインをつけたりするのはスタイルシートの仕事です。

　「htmlでもできる事でも、なるべくスタイルシートを使ったほうが良いのでしょうか？ 」は質問としておかしいですね。まったく異なるものですから・・。歌(歌唱曲)を作るのに、詩だけでも出来ることをメロディー(楽譜)を使ったほうが良いのでしょうか？？と言うのと同じです。

お礼

どうもありがとうございました。