- 締切済み
スタイルシートの設定について
現在スタイルシート勉強中です。 最近とある解説書を購入、さわりだけ読んでみたのですが 「中途半端にCSSを覚えた場合、divタグやclassタグを濫用したHTMLになってしまう。 しっかり覚えればdivタグはほとんど使用しなくても済むようになるだろう」 といった事が書かれていました。 私の場合、まさにHTML内はdivタグとclassタグでいっぱいです。 でも1サイトにCSSの外部ファイル1枚を使用（全てのHTMLに1つのCSSファイルを使用）した場合、 pタグやhタグ自体にスタイルを設定するとサイト内のタグ全てにその設定が反映されますよね？ となるとやっぱりclass分けするしか方法がないんじゃないかと思ったりしています。 皆さんは基本的CSSの設定方法はどのような感じですか？ classでいっぱい設定、または1サイトに何枚もCSSファイルを用意し、ページによってCSSファイルを 使い分けているとか、HTML内に直接CSSを書いてしまうとか（これは修正が大変だと思いますが・・・）。 沢山ご意見が聞けるとうれしいです。どうぞ宜しくお願い致します。
- HTML
- 回答数4
- ありがとう数3
- みんなの回答 （4）
- 専門家の回答
みんなの回答
- UKY
- ベストアンサー率50% (604/1207)
そもそも何のためにdivやidやclassがあるのかということを考えるといいと思います。 divやclassはスタイルシートのためだけに存在するものじゃあないですからね。 div = 複数の段落や見出しを一まとめにするもの。それ以上でもそれ以下でもない。 id = HTML文書の中で要素を識別するための名前。それ以上でも(略 class = 要素をグループ分けするためのもの。それ以上でも(略 classのグループ分けというのは、例えば「本文と補足説明」とか「男のせりふと女のせりふ」みたいにHTMLの要素の意味だけでは表せない情報を区別するのに使います。 スタイルシートはあくまでも完成したHTML文書に付け加えるものです。つまり、 1. スタイルシートはHTML文書が出来上がってから作り始める 2. スタイルシートを作り始めたら、もう一切HTML文書に手を加えない 3. HTML文書を作る段階では、スタイルのことは一切考えず、文書のことだけに専念する 別にdiv要素やclass属性を使うことがいけないとは思いません。むしろ積極的に使ったほうがいいと思います。 しかしスタイルを抜きにして純粋にHTML文書としてみたときに、divやclassがそれ自身役割を果たしていないといけません。つまり、スタイルシートで使うことを前提としてdivやclassを使うのは間違いです(例えば、class="green"とかclass="center"とか)。 うまくスタイルを設定できるようにdivやclassを用意しておくというのではなくて、divやclassがあったからよいスタイルが設定できる、という発想です。 あと、CSSは基本的に見た目を統一するのはやりやすいですが、文字ごとに色を変えたりしてバラエティ豊かなデザインをするのには向いていません(というか、できません)。 テーブルレイアウトだといろいろ凝ったことができますが、CSSではあまり複雑なことというか裏技的なことは出来ないと思ったほうがいいです。 ただ、あまりごちゃごちゃしたデザインよりもシンプルに統一されたデザインの方がいいと(私としては)思うのですが、どうでしょうか。 > pタグやhタグ自体にスタイルを設定するとサイト内のタグ全てにその設定が反映されますよね？ それをデメリットではなくメリットとして考えるんですよ。見た目を一気に統一できるわけですから。 もちろん、必要に応じてclassなども活用しますよ。 ただし、CSSでのデザインでは「理由」が重要なんです。 例えば、HTML文書に2種類のP要素があったとします。 <p class="hombun"> ←本文 <p class="hosoku"> ←補足説明 このとき、補足説明を本文よりも小さい字で表示させたいとか思いませんか? その「理由」は「本文が主役で補足説明は脇役だから」です。 で、実際に p.hosoku { font-size: 80% } という風に書けばいいわけです。補足説明がいくつもあれば、一気に全部小さくなります。 「脇役だから小さくする」というのはとても合理的だと思いませんか? テーブルレイアウトだと「なんとなく」色を変えてみるとかそういう感じでしたが、CSSを使うからには「理由」のある合理的なデザインをやるといいと思います。 見出しだから目立たせたい、だから字を大きくして色を変えよう、という感じで。
- hiro_izushi
- ベストアンサー率40% (72/178)
>「IDの場合、1HTMLにつき1ヶ所のみの使用」とあったので classとidの正確な意味は理解できてませんが、１つのHTML文章内で同じID名は１箇所しか使えない。が正解ですね。 >「中途半端にCSSを覚えた場合、divタグやclassタグを濫用したHTMLになってしまう。 複雑なレイアウトをするがためにdivやclassを多用してしまう。と言うことだろうが、無意味にclassが多いとか、divが多いとかと言うわけでなければ、良いと思います。 classが多くなれば、結局HTMLの修正に手間がかかるしね。 次のような形にすれば結構すっきりすると思いますが、どうでしょうか。 <div id="header"></div> <div id="body"> <div id="menu" class="float_a"></div> <div id="contents" class="float_a"></div> </div> <div id="footer"></div> HTMLはだいたいこんな感じのテンプレートになるとして、例えば、footerの部分のp要素だけ、他とスタイルを変えるならば、 #footer p { color: #ffff00; } のように指定する。 逆にスタイルシートが複雑になり過ぎるのも、あまり良くないので、class属性はあまり凝らない方がよいです。 複雑なclassは使い回しが利かなくなる可能性が高く、わずかな違いで複数のclassを作らざるを得ない悪循環を招くことになります。 回避方法として、適度なclassを作成して、次のような形で複数を指定するようにする方法があります。 <p class="font_A cool"> .font_A { font-family: "Helvetica","MS UI Gothic",Osaka,sans-serif; font-size: 100%; font-weight: normal; } .cool { color:#0055AA; background-color:#ccffee; }
>1サイトにCSSの外部ファイル1枚を使用（全てのHTMLに1つのCSSファイルを使用）した場合、pタグやhタグ自体にスタイルを設定するとサイト内のタグ全てにその設定が反映されますよね？となるとやっぱりclass分けするしか方法がないんじゃないかと思ったりしています。 タグの階層?でスタイルを設定してはどうでしょうか。 例えば各ページ(HTML)のbodyにclassをそれぞれ設定してみる。 index.html <body class="index"> <p>なんとか</p> second.html <body class="second"> <p>なんとか</p> 外部スタイルシート .index p {color:#ff0000} .second p {color:#0000ff} タグ同士の関係性でスタイルを設定すると多少はclassの数を減らすことができるかもしれません。
- JeanneNet
- ベストアンサー率48% (100/208)
こんにちは、じゃんぬねっと です。 > 中途半端にCSSを覚えた場合、divタグやclassタグを濫用したHTMLになってしまう。 いわゆる DIV 依存症というやつですね (^^) > しっかり覚えればdivタグはほとんど使用しなくても済むようになるだろう うーん、箱として必要な場面はあるかと思うんですが。 # メニューなら、<div id="menu"> とか。 ほとんど使用しなくて済むかどうかは、デザイン次第だと思います。 > やっぱりclass分けするしか方法がないんじゃないかと思ったりしています。 組み合わせ技として、id を利用したりする手もありますが... デザインによりけりですね。 統一感を持たせれば、それほど CSS 内で Class の乱用はなくなるんじゃないかと思います。 # とかいいつつ、私のサイトは class だらけかも。
お礼
じゃんぬねっとさんこんにちは。 >DIV 依存症 はい、まさにその通りです。 今回購入した解説本を読むまで何の疑いもなくdivを使いまくっていた私は まさにDIV症候群です（ちなみにSPAN症候群でもあります）。 ># メニューなら、<div id="menu"> とか。 以前読んだ本に 「IDの場合、1HTMLにつき1ヶ所のみの使用」とあったので テストもせず 「IDって使えないな～」なんて思っていました。 じゃんぬねっとさんのおっしゃる通り、menuなどの1ページに一箇所のものには使えますね。 そのうちTABLEタグなしでCSSデザインできるようになりたいです。 貴重なご意見ありがとうございました！
お礼
お礼が遅くなり申し訳ございません。 noname#10370さんがおっしゃる方法だと、スタイルシート内も綺麗に整理され 後々の修正時にも見てすぐに理解できてよさそうですね。 どうもありがとうございました。