現在スタイルシート勉強中です。
最近とある解説書を購入、さわりだけ読んでみたのですが
「中途半端にCSSを覚えた場合、divタグやclassタグを濫用したHTMLになってしまう。
しっかり覚えればdivタグはほとんど使用しなくても済むようになるだろう」
といった事が書かれていました。
私の場合、まさにHTML内はdivタグとclassタグでいっぱいです。
でも1サイトにCSSの外部ファイル1枚を使用(全てのHTMLに1つのCSSファイルを使用)した場合、
pタグやhタグ自体にスタイルを設定するとサイト内のタグ全てにその設定が反映されますよね?
となるとやっぱりclass分けするしか方法がないんじゃないかと思ったりしています。
皆さんは基本的CSSの設定方法はどのような感じですか?
classでいっぱい設定、または1サイトに何枚もCSSファイルを用意し、ページによってCSSファイルを
使い分けているとか、HTML内に直接CSSを書いてしまうとか(これは修正が大変だと思いますが・・・)。
沢山ご意見が聞けるとうれしいです。どうぞ宜しくお願い致します。
A 回答 (4件)
- 最新から表示
- 回答順に表示
No.4
- 回答日時:
そもそも何のために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を使うからには「理由」のある合理的なデザインをやるといいと思います。
見出しだから目立たせたい、だから字を大きくして色を変えよう、という感じで。
No.3
- 回答日時:
>「IDの場合、1HTMLにつき1ヶ所のみの使用」とあったので
classとidの正確な意味は理解できてませんが、1つのHTML文章内で同じID名は1箇所しか使えない。が正解ですね。
>「中途半端に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;
}
No.2
- 回答日時:
>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の数を減らすことができるかもしれません。
お礼が遅くなり申し訳ございません。
noname#10370さんがおっしゃる方法だと、スタイルシート内も綺麗に整理され
後々の修正時にも見てすぐに理解できてよさそうですね。
どうもありがとうございました。
No.1
- 回答日時:
こんにちは、じゃんぬねっと です。
> 中途半端に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デザインできるようになりたいです。
貴重なご意見ありがとうございました!
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- PHP アップロードファイルの数に応じてCSSを動的に変更したいのですが、方法がわかりません 3 2023/07/23 21:59
- HTML・CSS 【CSS】特定のリンクを含むaタグを指定できるかどうか? 3 2022/10/15 02:45
- HTML・CSS HPに文章で改行はすべてBRタグとかで改行しなきゃだめなのですか?改行が活きたまま書く方法ないの? 1 2022/12/03 21:00
- HTML・CSS サルワカさんの吹き出しのスタイルシートについて。 https://saruwakakun.com/h 2 2022/10/28 22:55
- PHP アップロード画像数でCSSを分けることに成功したのですが、画像の横に文字を並べることが出来ません。 3 2023/07/28 17:16
- HTML・CSS 【HTML】【CSS】【Swiper】 元の画像は横1200×縦600なのですが、実際のサイト上に反 5 2022/07/16 13:57
- JavaScript jqueryを使ったスムーススクロールのコードを書いたのですが、HTMLコード内にある、a butt 2 2022/04/14 10:59
- HTML・CSS cssが効かなくて困ってます 1 2023/01/01 23:57
- HTML・CSS 吹き出し 下記の吹き出しのスタイルシートについて 下記のスタイルシートは左側にアイコンがでる使用にな 1 2022/11/12 17:55
- JavaScript html5に変えるとスライドショーが消えてしまった。 3 2022/03/26 19:53
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
ページの左右の余白(枠外)に...
-
スタイルシートで、id属性の中...
-
CSSが効かずどのように指定すれ...
-
最近、HTMLのヘッダーをIDで定...
-
<span>で2重にかけているものを...
-
CSSの適用を一部だけ除外したい。
-
Django 明細行にてボタンを押下...
-
CSSで、DIV#hogeという記述は何...
-
CSSのタグ「#warpper」の意...
-
HTML要素のid/class名の長さに...
-
「目次」と「サブ目次」のスタ...
-
同じid属性を何回も使ってはい...
-
CSS, リンクの色を一部変えるに...
-
CSSのホバーエフェクト
-
htmlのid属性って必要なの?
-
buttonで個別にhoverの時の色を...
-
liリストタグの背景色に色がつ...
-
ラジオボタンの装飾(色の違う2...
-
透過背景を解除するにはどうす...
-
htmlの文字が縦書きになる
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
CSSに同じclass名がいっぱい‥。...
-
最近、HTMLのヘッダーをIDで定...
-
HTML要素のid/class名の長さに...
-
個別にリンクの色を変える方法
-
idの中のid指定
-
liリストタグの背景色に色がつ...
-
htmlのid属性って必要なの?
-
CSSのクラス名・ID名の指定でワ...
-
サイトにjQueryが使用されてい...
-
透過背景を解除するにはどうす...
-
ページの左右の余白(枠外)に...
-
同ページ内でリンクの色を変え...
-
外部css定義したclassをht...
-
CSS, リンクの色を一部変えるに...
-
CSSが効かずどのように指定すれ...
-
CSSで下まで背景色を伸ばす方法
-
divの入れ子を多用してページを...
-
一部のリンクの下線を消す
-
外部スタイルシートで定義した...
-
innerHTMLを使用するとうまく表...
おすすめ情報