ミスチルの大名曲の数々が配信決定!! 31日間無料!!【PR】

CSSでクラスとIDがあると思いますが、違いがさっぱり分かりません。
あるタグA内のタグBに対するIDなどと利用出来るのはわかりますが、
それは全てクラスでも出来ますし、明確な違いが未だ分かりません。

利用する際、何を判断基準にすれば良いのでしょうか?

このQ&Aに関連する最新のQ&A

A 回答 (14件中1~10件)

あの~、たぶん質問者(naktakさん)の発想というか設計思想,知識レベル等からして、全て CLASS の概念しかお持ちでないのでしょう。


という事で、IDとCLASSの違い以前にIDについて理解というか想い至らないと思いますし、また、質問者さんがIDを使う事はないでしょう。というか使ったら間違いかと・・・。

故に、CSSを除いてHTMLでまず考えるといっても、その時点ではSTYLE要素もSTYLE属性もスタイルシートの外部ファイルのリンクも、CSSあっての事で、知った時点で読めば判るが知らないというか一意の名称付けという概念のない人に提示しても・・・。


先にも提示しましたが、IDとCLASSの利用判断基準は、作成者のその指定に対する意識付け次第という事です。赤組のA君が赤組だから赤色とするならば赤組というグループだからCLASSを用いるべきだしA君だから赤色としたいならばA君という1個人を特定すべき,一意にするべきなのでIDを用いる。ただそこの赤組のA君をどの組の誰とも意識せず単に赤色としたい場合にSTYLE属性を用いる、と・・・。

で、質問者の感覚を推測すると、常に先に赤色にするCLASSがあり、B君を赤色にしたいと考えた時にB君も赤組としようと考えられているというか、赤色の人は赤組・・・。
となると、IDの入る余地はないかと~。


蛇足:STYLE属性を用いた場合に、ある特定の指定が出来ません。STYLE要素や外部リンクによる読み込みだと指定出来るという事があります。
IDとCLASSが競合した場合は、IDの内容が採用されます。赤組のA君がCLASS赤組は赤色でIDでA君は青色と指定された場合は、青色となります。
いずれも単純指定には関係ありませんが・・・・・。
使いこなすと便利です。
    • good
    • 0
この回答へのお礼

classは「cssにclassが登録されていて、htmlでclassが利用されているから
cssのデザインを使う」、
idは「htmlでidが登録されていて、cssでidが利用されているからcssのデザイン
を使う」
と、キーになるものが違うという事ですよね。

それでnameアトリビュートとの関係や、
スクリプトから特定の要素を取得する関係で
id名が重複する事は許されないという事。
この事から、id・nameは「HTML文書内の特定の位置を示すアトリビュート」
とも言えるのだと思います。
というか勝手にそう解釈しました。
そっちの方が分かり易いので。
「特定の位置を示すのだから重複してはならない」と。

あと、idについて1度しか登録出来なくて利用価値が全く分からなかったのですが、
htmlファイルが複数存在し、cssを外部ファイルとして持った場合には効力を
発揮しますね。
そこで、classやidで共通化出来ない部分についてstyleアトリビュートを
利用するべきという区分けもはっきり付きました。
外部cssファイルで既にそれらを定義していたら、htmlファイル内のstyleエレメントで
追加定義するという事も可能そうですね。
そうすると、本当に特殊な場合のみstyleアトリビュートを利用すべきだという事も
理解出来ました。

> STYLE属性を用いた場合に、ある特定の指定が出来ません。STYLE要素や外部リンクによる読み込みだと指定出来るという事があります。

これについても初めて知りました。
いい機会なので、そこら辺も調べてみようかと思います。

皆さん、何度も回答して頂き有難う御座います!

お礼日時:2006/07/02 02:04

どのブラウザにも対応させたいということなら


やはり同じidを使うのはやめたほうが良いと思います。
同じidがあることでエラーになるブラウザはないとは思いますが、
一応、HTMLの文法的には間違いですので。

http://openlab.ring.gr.jp/k16/htmllint/explain.h …

参考URL:http://openlab.ring.gr.jp/k16/htmllint/htmllint. …

この回答への補足

こんな所に記述しまいますが、今までidが理解出来ない理由が分かりました。

ID 属性:この属性は、要素に名前を割り当てる。この名前は文書中で一意でなければならない。

これについて、一意でなければならない理由がどこにも記されていません。
そのせいですね。
どんなに文章中でそう記されていても、複数存在していても動作しちゃうわけですし。
一意でなけれならない理由が明確にならない限り、理解は難しいです。
特にスクリプトを一切気にしなければ余計に理解に苦しみます。
そして、一意でなけれならない理由は「HTML文書内の特定の位置を示すアトリビュートだから」
という事で初めて理解出来ます。

http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 …

「ハイパーテキストリンクの目標アンカー。」
「スクリプトから特定要素を参照するための手段。」
この2つと、idが重複している場合、スクリプトでは
エラーになるというお話、
http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 …

「id属性とname属性は、同じ 名前空間を共有する。
これはつまり、同一文書では、両属性が、あるアンカーに同じ名前を
定めることができないということを意味する。」
という事、
nameアトリビュートで同一ページ内のある位置に移動するリンクを生成する
事が出来る事から、idが一意でなければならない事が分かりました。

皆さん、有難うございました。

補足日時:2006/07/02 13:28
    • good
    • 0
この回答へのお礼

ありがとうございます。

css側がどうこうと言うより、html側のid定義が重複しなければ良いような気もしますが。
ただ、使い方は分かったので、一応、それに則った記述を行おうと思います。

お礼日時:2006/07/02 13:26

>完全に迷宮入りしてしまいました



難しく考えることはありません。
混乱するのは「id=""」の使い方を分かっていないせいです。

もう一度言いますが、
「一度しか使わないからidを使う」のは間違い。
「スタイルシートにidを使う」必要はありません。
「(すでにある)idにスタイルを指定する」のです。

idが指定されていないページに、わざわざidを使ってスタイルを指定する必要はないです。
いずれ、JavaScriptなどでidが指定された要素などのあるページも作られるでしょう。
そうなってからidを使ったスタイルの指定法を覚えても遅くはありません。

<td style="font-size:10pt">
style="" これをスタイル属性といいます。
ちょっとした変更には便利ですが、この要素にしか使えない、デザインや装飾をまとめて指定するというスタイルシートの概念に外れます。
これを
<td class="font10">として、スタイルシートで
font10{font-size:10pt} と指定しておけば、
他の要素にも指定することができるようになり、今はこの要素にしか使わなくても、将来的に大変便利です。
    • good
    • 0
この回答へのお礼

> idが指定されていないページに、わざわざidを使ってスタイルを指定する必要はないです。

#12の回答の通りに理解しました。
そうすると、全くその通りですね。
HTML文書内で特定したい位置が無いのならば基本は全てclassで良いですね。
cssを記述する順番としては以下でしょうか。


 外部cssファイルの指定エレメント
 htmlファイル内のstyleエレメントの指定エレメント
 外部cssファイルのclass
 htmlファイル内のstyleエレメントのclass
 外部cssファイルのid
 htmlファイル内のstyleエレメントのid
 styleアトリビュート


cssの指定方法について上記4つ(エレメント直接指定、
class、id、styleアトリビュート)しか知らないので、
他にもあれば優先順位が変わりそうです。
適用される順番としては逆ですね。

全通りはややこしそうだったので、とりあえずこんな感じでテストしてみました。
【a.css】
table{ color:black; }
font{ color:black; }
table.tcls{ color:black; }
font.fcls{ color:black; }
table#tcls{ color:black; }
font#fcls{ color:black; }

【a.html】
<LINK Rel="stylesheet" Type="text/css" Href="a.css">
<style type="text/css">
table{ color:blue; }
font{ color:red; }
table.tcls{ color:yellow; }
font.fcls{ color:green; }
table#tcls{ color:cyan; }
font#fcls{ color:magenta; }
</style>

<table><tr><td>あいうえお</td></tr></table>
<font>かきくけこ</font>

<table class="tcls"><tr><td>さしすせそ</td></tr></table>
<font class="fcls">たちつてと</font>

<table class="tcls" id="tcls"><tr><td>なにぬねの</td></tr></table>
<font class="fcls" id="fcls">はひふへほ</font>

<table class="tcls" id="tcls" style="color:orange"><tr><td>まみむめも</td></tr></table>
<font class="tcls" id="fcls" style="color:gray">やゆよ</font>

あまりブラウザを意識したくないというのが前提であって、
JavaScriptは一切使わない予定でしたので、
今回、idを意識する事はあまり無さそうです。

お礼日時:2006/07/02 02:36

私の前の回答、ちゃんと読みました? 参考 URL も四つほど挙げておいたんですけど、読みました?



もう一度いいますが、CSS のことはほっといて、まずは HTML の正しい書き方という観点から考えてください。
HTML の正しい書き方を理解しないと CSS を正しく使いこなすことはできません。

http://homepage2.nifty.com/magicant/techmemo/htm …

参考URL:http://homepage2.nifty.com/magicant/techmemo/htm …
    • good
    • 0

CSS でスタイル指定できるようにするために HTML に id/class を付ける、と言う考え方では、いつまでたっても id/class の違いは理解できません。


CSS のことは抜きにして、純粋に HTML のより良い書き方は何かと言う観点から考えてみてください。

http://oshiete1.goo.ne.jp/kotaeru.php3?q=1444936 …
http://web.xii.jp/iec/html/memo/id-class
http://www.tg.rim.or.jp/~hexane/ach/awht/awht07. …
http://deztec.jp/x/01/tips/page/p0045.html
    • good
    • 0
この回答へのお礼

<td style="font-size:10pt">



<style>
td#f10pt {
font-size:10pt;
}
<td id="f10pt">

の違いという事ですか。1度しか使わないという考え方からしたら、
このid(f10pt)は二度と使わないですよね。
はっきり言って前者の方で十分ですね。
HTMLファイル内にstyleタグを記述すればCSSファイルと
完全に切り分けられているわけでもありませんし・・・。

お礼日時:2006/07/01 18:41

No6です


CSSは同じid複数合ってもいいんですね。
(CSSはclassでしか指定したことなかったんで知りませんでした^^;)
HTMLは多少仕様外の構文でもブラウザが融通利かせて有効にしてしまうこともありますからねぇ。
ですが、CSS以外の部分が絡んでくるとやっかいなことになるので
同じidを複数はやめたほうがいいです。
(そもそもidの意味がなくなってしまう)

>今回の質問で、プログラムでいうとclassはクラス、idはextendsという

違いますね^^;
idとclassに継承関係はありませんからね。

idは個人名
classはグループ名
と考えればよいのでは?

<div id="nakai" class="smap">S</div>
<div id="kimura" class="smap">S</div>
<div id="inagaki" class="smap">S</div>
<div id="chonan" class="smap">S</div>
<div id="katori" class="smap">S</div>

idで指定→中井さ~ん(「い」が違う)赤くなって。
#nakai {
color:red;
}

classで指定→SMAPの皆さん、大きくなってください
.smap {
font-size:20pt;
}


> あんまり気にする所でもないんでしょうかね?

まぁCSSだけに関して言えばid指定が特に有用な場面、
idでないといけない場面てのが少ないでしょうから、
ほとんどclassで指定でいいと思います。
1つだけ違うスタイルにしたいならstyle要素に直接記述しちゃってもいいわけですし。
    • good
    • 0

まず HTML で


ID 属性:この属性は、要素に名前を割り当てる。この名前は文書中で一意でなければならない。
CLASS 属性:この属性は、ある要素に1つのクラス名を割り当てるか、または複数のクラス名を設定する。幾つの要素に対してでも、同じクラス名あるいはクラス名群が割り当てできる。複数のクラス名については、空白文字によって区切らねばならない。

とあり、それだけ診ると ID は不要で CLASS を用いる必要がない、場合によっては ID を用いる選択は不可という場合さえ(同一文書内で同じ指定を複数の箇所に用いたいとか、複数の指定を一箇所に付けたいとか・・・)あり・・・・・。

ただ、HTML として ID 属性はスタイルシートの選択子だけでなく、リンクのアンカーやスクリプトでの特定用とかいろいろ CLASS では出来ない事もあり・・・。
で、既に CSS の識別子以外で ID が用いられていれば、改めて CLASS を用いる必要性もなく・・・。


その上で本筋の CSS。 CSS の識別子として用いる場合の大事な事は、ID は CLASS より優先度が高くなるという事。
同じ要素に ID と CLASS が両方指定されていて、しかも指定内容が競合する場合は ID の指定が採用されます。
また CSS の指定方法には直接 ID, CLASS に個別に指定するだけでなく、組み合わせでいろいろな指定方法があります。そうなると優先度の影響は大きく・・・。


>利用する際、何を判断基準にすれば良いのでしょうか?
意図が何か。一意の名付けなら当然 ID だし、あるグループのひとつである事の明示なだけなら CLASS でしょう。
とは言っても、BODY 要素に CLASS 属性を付けるのは余程の必要性(複数の CLASS を指定したいとか)でなければ不自然だろうし・・・。なにせ BODY 要素はそもそも文書内で1つしかないはずだから、一意のはず・・・。
ソースの流用を考えた場合に、指定内容の優先度をどうするかとか・・・。JavaScript と組み合わせるとさらに・・・・・。

結局、作成者の能力と決め事次第かと・・・。
なにせ個別の指定にしか用いていなければ、優先度なんて関係ないし・・・。

参考URL:http://hp.vector.co.jp/authors/VA022006/css/corr …
    • good
    • 0

>href="./#test" の#testは「id名」ではないです。


すみません。この点、ページ内リンクでIDを呼び出す(移動する)ことも可能なのを思い出しました。
そういう意味では、#testは「id名」であるともいえます。

cssに限って言うなら、No.6さんのいうように、IDは使う必要がないですね。
    • good
    • 0
この回答へのお礼

何度も有難うございます。
cssはclassだけで事は足りる、という事ですね・・・。
完全に迷宮入りしてしまいました(笑)

今回の質問で、プログラムでいうとclassはクラス、idはextendsという
感覚かなー(以下のように)と思っていましたが、そうでもないようで・・・。

<style type="text/css">
.fblue{
color:blue;
}
font#pt15b{
font-size:15pt;
font-weight:bold;
}
</style>
<table border=1>
<tr><td class="fblue">abc</td></tr>
<tr><td class="fblue">def</td></tr>
</table>
<font class="fblue" id="pt15b">ghi</font>
これだと、<td>でも<font>でも色を青にしたくて、
でもghiを表示する<font>は15ptの太字にしたい、みたいな。
こういうパターンで初めてidの意味を成すのでしょうか?

あんまり気にする所でもないんでしょうかね?(笑)

お礼日時:2006/07/01 02:21

同じidは1個しかあってはいけないことになってます。


2つ以上同じIDがあるとエラーとなるので初めの1個目以外のidは無効になります。
必ず1つしかない(ことになってる)ので
どの部位をコントロールするか明確にしないとならないJavascriptなどでは
よくidを指定して使用します。
CSSに限って言えばidを使うメリットはあまりないですね。

class要素はCSS専用っぽいところはありますが、id要素はCSS以外に使われることが多いように思います。
    • good
    • 0
この回答へのお礼

ありがとうございます。
ごめんなさい、教えてください^^;

<style type="text/css">
#fblue{
color:blue;
}
#fblue{
font-size:3pt;
}
</style>
<table border=1>
<tr><td id="fblue">abc</td></tr>
<tr><td id="fblue">def</td></tr>
</table>
<h3 id="fblue">ghi</h3>

これを実行するとタグ側3つともidは有効ですし、
css側(面倒だったのでstyleタグにしましたが)2つも有効になっています。
もしかして『1つ』の意味合いを勘違いしていますか?私。
それともcssで同名複数のid指定は出来るけど、しない方が良い、という事ですか?
それを真とするならば、cssで同名複数のclass指定は良しなのでしょうか?

お礼日時:2006/07/01 02:09

>ID自体は1ページ内で何度も使えるんですよね?


>動作はするみたいですが・・・。
>何度も設定する事が出来ない??

>cssファイルでID(A)を設定していて、

IDと要素名は別物です。

上手く説明できるか分かりませんが……
idはいうなれば「固有名詞」です。
<h1 id="title">あいうえお</h1>
「title」という識別子を割り当てた「h」要素です。
titleという名前の付いた要素に対し、cssで指定ができます。
#title{color:#0000ff;}/* id指定。文字色青 */
文字色青のIDをh要素につける、のではなく、
id="title"が付いているh要素の文字色を青くする、と考えます。
id(識別子)はJavaScriptなどにも使いますね。
同じIDが複数あると、JavaScriptではエラーになります。

<h1 class="title">あいうえお</h1>
「titleという定義付け」したcssを「h」要素に関連付けています。
.title{color:#ff0000;}/* class指定。文字色赤 */
文字色赤に定義付けたクラスセレクタ(title)を、
class=""で呼び出す、という感じです。

<a name="test">bbb</a>
の「name=""」は「name属性」であって、ID(属性)ではないです。
href="./#test" の#testは「id名」ではないです。
    • good
    • 0
この回答へのお礼

む~・・・考え方の違いははっきりと分かりました。
が、結局どっちも挙動が一緒・・・。
id=xxx、class=xxxとしなければ有効にならない点から見たら、
idをclassとして利用してもいい気がします。
1つのタグ内で複数のidを利用する事は不可能なのですよね?

class、idを正しく利用した場合に有利になる点は
一体どこにあるのでしょうか?

お礼日時:2006/07/01 01:59

このQ&Aに関連する人気のQ&A

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

Q年末調整書き方の見本が欲しい。

最近増えてきた質問なので、
専門家の方は張り切って回答しているのではないかと思いますが、
もう一つ、厄介な質問も回答頂けたら幸いです。

ズバリ”書き方が分りません”どこに何を書いたら良いのか
さっぱり、分りません。
裏側には計算方法などがあるのですが、さっぱりです。
書き方が、分らないと言うよりも、忘れました。
去年は見本みたいなものを見て記入したのですが。
今年は、見本が無いためにさっぱりです。
どなたか、見本もしくは、それに近い参考になるようなものを
ご存知でしたら、ご回答宜しくお願い致します。

Aベストアンサー

下記のページをご覧ください。
昨年の分ですが、書き方に変更は有りませんから。

給与所得者の扶養控除等申告書の書き方
http://www.okada-kaikei.com/zeimu/fuyou13.html

給与所得者の保険料控除申告書 兼 給与所得者の配偶者特別控除申告書の書き方
http://www.okada-kaikei.com/zeimu/hoken12.html

QCSS/日本語のID・クラス名について

CSSに、日本語のID・クラス名をつけてもよいのでしょうか?

ネットを検索したところ、
「CSS2からクラス名に日本語が利用可能。但し、IDは日本語不可」
との記述がありました。
本当でしょうか?
誰か詳しい方、教えてください。

▼補足
自分の環境(WindowsIE8)では、クラス名に日本語を利用しても、正常表示されました。しかし、違う環境で不具合がないかや、そもそも推奨されている手法なのかどうかについて、是非知りたいと考えています。

W3C等に準拠しているかどうか、教えてください。

Aベストアンサー

#5の続き。

■XHTML1.0仕様

▼class属性値
BaseCharで定義されている文字を使用できます。

----- (「邦訳:Modularization of XHTML」より)
5.1. 属性集合 (Attribute Collections)

 集合名 : 集合に含まれる属性
 Core  : class (NMTOKENS), id (ID), title (CDATA)
http://msugai.fc2web.com/web/W3C/XHTMLMOD/abstract_modules.html#s_core_collection
-----
 ↓
XML1.0仕様書へ
 ↓
----- (「XML 1.0」より)
3.3.1 属性型
 ...
 | 'NMTOKENS' [ VC: 名前トークン ]
 ...
 妥当性制約: 名前トークン
  NMTOKEN 型の値は Nmtoken 生成規則に合しなければならず、NMTOKENS 型の値は Nmtokens に合致しなければならない。
http://www.doraneko.org/xml/xml10/19980210/Overview.html#sec-attribute-types
-----
 ↓
-----
[8] Nmtokens ::= Nmtoken (S Nmtoken)*
http://www.doraneko.org/xml/xml10/19980210/Overview.html#NT-Nmtokens
-----
 ↓
-----
[7] Nmtoken ::= (NameChar)+
http://www.doraneko.org/xml/xml10/19980210/Overview.html#NT-Nmtoken
-----
 ↓
-----
[4] NameChar ::= Letter | Digit | '.' | '-' | '_' | ':' | CombiningChar | Extender
http://www.doraneko.org/xml/xml10/19980210/Overview.html#NT-NameChar
-----
 ↓
-----
[84] Letter ::= BaseChar | Ideographic
http://www.doraneko.org/xml/xml10/19980210/Overview.html#NT-Letter
 ↓
-----
[85] BaseChar ::= [#x0041-#x005A] | [#x0061-#x007A] | [#x00C0-#x00D6] | [#x00D8-#x00F6] | [#x00F8-#x00FF] | [#x0100-#x0131] |
             ...(中略)...
             [#x3105-#x312C] | [#xAC00-#xD7A3]
http://www.doraneko.org/xml/xml10/19980210/Overview.html#NT-BaseChar
-----

#5の続き。

■XHTML1.0仕様

▼class属性値
BaseCharで定義されている文字を使用できます。

----- (「邦訳:Modularization of XHTML」より)
5.1. 属性集合 (Attribute Collections)

 集合名 : 集合に含まれる属性
 Core  : class (NMTOKENS), id (ID), title (CDATA)
http://msugai.fc2web.com/web/W3C/XHTMLMOD/abstract_modules.html#s_core_collection
-----
 ↓
XML1.0仕様書へ
 ↓
----- (「XML 1.0」より)
3.3.1 属性型
 ...
 | 'NMTOKENS' [ VC: 名前トークン ]
 ...
 妥当性制約: 名前トー...続きを読む

Qアルバイトを辞めた時の職歴の書き方がわかりません。

履歴書の書き方なんですが、職歴の書き方で、アルバイトをやめた時も、一身上の都合と書けばよいのでしょうか?会社の場合、退社と書きますが、アルバイトの場合はなんと書けばよいのでしょうか?アドバイスよろしくお願い致します。

Aベストアンサー

基本的には、最低限、学歴と正社員になった事があったらその職歴をかけば良いです。
ですが、あなたのように長期のバイトの場合は遊んでたと誤解される恐れがあるので、いくつかバイトもかいておいた方が良いかも知れません。短期は省略し、長いのだけで良いと思います。(正社員歴は正直に、バイト歴はバイト先で年金を払っていなければ適当にアレンジしても良いと思います。ともかく『君はコロコロ仕事変わっているんだね』と言われないように書いて下さい。)
書き方は
平成17年1月(株)マクドナルド(アルバイト)
平成19年10月同 退職(または 一身上の都合で退職)
とかで良いと思います。
最悪バイトは書いてこなくていいよと、言われるかも知れませんがそれで落とされる事はないと思いますよ。
余計な事ですが、いま多少なりとも景気が回復してきて募集も増えてきているようなので、できれば正社員応募してみる事をおすすめします。がんばって下さい。

Q【CSS】div や span でクラスやIDを使わない

簡潔に質問させていただきます。

div や span でスタイルを適用する際、
不要であればクラスやIDを省くことは文法として間違っていますか?
要は、<div>テキスト</div> <span>テキスト</div> これだけです。
(スタイルは親要素&セレクタで指定しています)

単なる要素として考えれば問題ないと思いますが、
そもそも単体では意味の無い要素なのでどうなのでしょうか。

尚、ブラウザ(IEとFireFox)では問題なく適用されてました。
色々情報を検索しましたが良い結果が得られませんでしたので、
ご存知の方、ご教授お願いいたします。

Aベストアンサー

<div>や<span>それ自体に意味がないというわけではなく、
「ここからここまでが1つの固まり(ブロック=説、項、段落など)」という意味です。
ただ、<div><span>だけでは「何のための」固まりなのかというのが不明ですので、idやclassなどで指定することで、ただの固まりではない、特別な意味を持った固まりになると、私は思います。

> 不要であればクラスやIDを省くことは文法として間違っていますか?

文法上は間違っていません。
むしろ、省いた方がすっきりすると思いますし、
文字数=ファイルサイズが減らせるためネットワークにも優しい(通信負荷を減らせる)と思います。

もちろん「何番目のdiv」でスタイルシートは作れますが、
「何番目」では何のためのdivかわかりづらく、
複数のページで1つのcssファイルを使用している場合、ページ毎に「何番目」が変わることがあるため、
私はこの作り方は推奨しません。

というわけで、個別にidやclassを付けて、「何のため」にdivやspanで区切ったのか、というのを明記する方が良いと思います。
が、スタイルシートが目的ではありませんから、idやclassが使われているからと言ってスタイルシートで使用するわけではありませんし、
「何のためのdivかを明記するためのidやclass」という作り方をしているのはむしろ少数派、
属性を付けない方がすっきりする、ファイルサイズを減らせると言うことで、idやclassを付けない方法を推奨される方の方が多いと思います。


ちなみに、HTML4/XHTMLの次の企画であるHTML5では、
今までのHTML4やXHTMLで<div id="header"> <div id="menu"> <div id="footer">
などと作っていた物が
<header> <aside>(または<nav><menu>など) <footer>
というようにタグ名に格上げ(?)されていますので、idやclassで区別するのではなく、タグ名で区別できるようになります。(そのかわり、タグの種類が相当増えます。)


<span>についてですが、キーワード(単語)だけであれば、<b>や<i>を推奨します。
ほとんどの解説サイトに「太字にする」「斜体にする」という説明があると思いますが、
本来のHTMLでは、「強調するわけではないが、ページ内のキーワードとなる」という意味のタグだと思います。

その根拠ですが、HTML4/XHTMLの仕様書には<b>や<i>の説明が書かれていませんが、HTML5に上記のように「ドキュメント内のキーワードに使用する」という説明があります。
現に英語サイトでは、「『ページ内の主要単語』という目印」を付けたら「結果的に太字になってしまった」という感じの使われ方のようです。

<span>を使うのは、文章や熟語など、キーワードと言うには長い部分に使うのが良いと思います。


<b>や<i>を使用し、<span>と区別するのも、私個人的なものです。
これは(日本の)殆どの解説サイトの推奨に反した方法ですから、
大多数が推奨される方法に合わせるのでしたら、<b>や<i>を使わない方が良いと思います。

<div>や<span>それ自体に意味がないというわけではなく、
「ここからここまでが1つの固まり(ブロック=説、項、段落など)」という意味です。
ただ、<div><span>だけでは「何のための」固まりなのかというのが不明ですので、idやclassなどで指定することで、ただの固まりではない、特別な意味を持った固まりになると、私は思います。

> 不要であればクラスやIDを省くことは文法として間違っていますか?

文法上は間違っていません。
むしろ、省いた方がすっきりすると思いますし、
文字数=ファイルサ...続きを読む

Q旦那の職場の上司に出産祝いを渡す際の熨斗について。 熨斗の書き方なのですが夫婦の場合、必ず連名で書く

旦那の職場の上司に出産祝いを渡す際の熨斗について。
熨斗の書き方なのですが夫婦の場合、必ず連名で書くのが一般的ですか?
旦那の名前だけでも良いのでしょうか。

Aベストアンサー

あなたも、同じ職場にお勤め?

祝儀であれ不祝儀であれ、お出しするのは一家族一袋でお出ししませんか。
ご主人がお勤めと思いますから、ご主人のお名前でいいですよ。
もし、お務めだとしてもご夫婦と言う事は、相手方は解っています。

表書きは、「御祝」か「御出産祝」でよいのではないでしょうか。

QCSSのクラス名・ID名の指定でワイルドカードか正規表現を使いたい

CSSでクラス名やID名を指定する場合に、
ワイルドカードか正規表現を使いたいと思ったのですが、うまくできません。
使えないのでしょうか?

また、他に、似たクラス名・ID名を一括で指定する方法はありますか?

例)
<div id="cat1">猫が1匹</div>
<div id="cat2">猫が2匹</div>
<div id="cat3">猫が3匹</div>

#cat1, #cat2, #cat3{color:#FF00FF;}

#cat*{color:#FF00FF;}
のようにまとめて指定したい。

Aベストアンサー

CSS2までのセレクタにはワイルドカードも正規表現も使えません。

※ CSS3では属性セレクタが拡張されているので
div:[id^="cat"] {~~~} ・・・・ idがcatで始まるdiv要素
みたいな事もできますが、まだ使えるブラウザが限られるので現実的ではありません。

http://hp.vector.co.jp/authors/VA022006/css/selector.html
http://www.google.com/search?q=css3+%83Z%83%8C%83N%83%5E&hl=ja

Q英語で星の書き方

幼稚園で星の書き方を英語で教えたいのですが、
昔教えてもらったのですがわすれてしまいました・・・

たしか・・
down,up, なんとかなんとか・・・
だったと思うのですが、子供に英語で星の書き方を教える場合
どうやっておしえたら良いでしょうか???
教えて下さい。

Aベストアンサー

#2です。
私もこのお絵かき歌は初めて見ましたので、試行錯誤で実際に書いてみました。

まず、この「星」の書き方ですが、☆の周囲の枠だけではなくて中の交差する線も書く一筆書きということでいいですよね。

で、最初はてっぺんの頂点から左下まで線を書きながら"Down"
次は右上の頂点に上がりながら"over"
次はそこからまっすぐ左上の頂点に向かって真横に線を引きながら"left"
次は右下の頂点に向かって斜め下に線を引きながら"and right"
最後にてっぺんに向かって最後の線を引きながら"draw a star"
完成した☆を見ながら"oh so bright"

こんな感じでいかがでしょうか。お絵かき歌ですからリズムよく歌ってみてください。
リズムの取り方としては先ほど紹介したサイトの表記の斜線で区切られたところがそれぞれ1拍にして
Down / over / left / and right / (ここまでで4拍)
draw / a star / oh so / bright (ここも4拍)
計8拍で歌うようになりますね。

#2です。
私もこのお絵かき歌は初めて見ましたので、試行錯誤で実際に書いてみました。

まず、この「星」の書き方ですが、☆の周囲の枠だけではなくて中の交差する線も書く一筆書きということでいいですよね。

で、最初はてっぺんの頂点から左下まで線を書きながら"Down"
次は右上の頂点に上がりながら"over"
次はそこからまっすぐ左上の頂点に向かって真横に線を引きながら"left"
次は右下の頂点に向かって斜め下に線を引きながら"and right"
最後にてっぺんに向かって最後の線を引きながら"draw a s...続きを読む

QCSSのフォント設定・指示で、複数のフォント指示IDを組み合わせたIDがつくれないでしょうか?

CSSですが、フォント記述が面倒で困っております。
記述したものを組み合わせる宣言をして、XHTMLマークアップの方ではその組み合わせ名だけ記述して済むようにできないものでしょうか?
または、他の方法で簡素化合理化できる方法があればそれでも結構です。
ご教授いただけましたら幸いです。

【フォントサイズ11px】フォントサイズだけを指定したID
【フォントサイズ12px】フォントサイズだけを指定したID
【フォントサイズ14px】フォントサイズだけを指定したID

【リンクカラー緑,hover赤(下線:緑)】リンクだけを指定したID
【リンクカラー白,hover緑(下線:白)】リンクだけを指定したID

【フォントカラー黒(薄色背景用)】フォントカラーだけを指定したID
【フォントカラー白(濃色背景用)】フォントカラーだけを指定したID

【使用する組み合わせ宣言1】上記IDのどれとどれを組み合わせたかを指定したID
【使用する組み合わせ宣言2】上記IDのどれとどれを組み合わせたかを指定したID

というようにして、XHTMLマークアップの方では、例えばテーブルに文章を記述したいなら、テーブルタグに上記の【使用する組み合わせ宣言】のID名だけを記述すればそれでOK、というようにできれば楽になると思うのです。
もっといいのは、CSSで【使用する組み合わせ宣言】のIDは記述必要なく、XHMLの方で組み合わせ宣言できれば最高です。
実際を例に出すと、

------------------------------------------------------------
/* リンク以外のフォント設定 */
------------------------------------------------------------
#font_black {
text-align:left;
color: #FFFFFF;
font-size: 11px;
line-height: 120%;
}

------------------------------------------------------------
/* リンク部分だけのフォント設定 */
------------------------------------------------------------
#font_link_green a:link {
color: #d0ae22;
text-decoration: none;
border-bottom: 1px solid #d0ae22;
}

#font_link_green a:visited {
color: #d0ae22;
text-decoration: none;
border-bottom: 1px solid #d0ae22;
}

#font_link_green a:active {
color: #ff0066;
text-decoration: none;
border-bottom: 1px solid #d0ae22;
margin-bottom: 0px;
}

#font_link_green a:hover {
color: #fde582;
text-decoration: none;
border-bottom: 0px;
}

とCSSで記述しておき、XHTMLの方では、

<table class="#font_black .font_link_green">



などと記載するような(この書き方はあくまで例です)感じです。

このように、CSSのフォント記述において、何か簡素化・合理化する記述方法はないものでしょうか?
普通にやっていたらソースは増えるし色の変更などであちこち書き直す必要があるしで(置換不能なケースもありますし)面倒この上ないですね。
宜しくお願い致します。

CSSですが、フォント記述が面倒で困っております。
記述したものを組み合わせる宣言をして、XHTMLマークアップの方ではその組み合わせ名だけ記述して済むようにできないものでしょうか?
または、他の方法で簡素化合理化できる方法があればそれでも結構です。
ご教授いただけましたら幸いです。

【フォントサイズ11px】フォントサイズだけを指定したID
【フォントサイズ12px】フォントサイズだけを指定したID
【フォントサイズ14px】フォントサイズだけを指定したID

【リンクカラー緑,hover赤(下線:緑)...続きを読む

Aベストアンサー

> それとも自分のこの喜びで喜ぶ場合じゃないもっと合理的な方法があるのかな・・・・^^;

以下はまた余計な説明の1つです。

.hoge1 {
font-size: 11px;
}
.hoge2 {
color: #cc0000;
}
.hoge3 {
border: solid 1px #000000;
}
<p class="hoge1">この段落は文字が小さい</p>
<p class="hoge1 hoge2">この段落は文字が小さくて赤い</p>
<p class="hoge1 hoge2 hoge3">この段落は文字が小さくて赤くボーダーで囲まれている</p>

上記の様な仕様で設計してしまう事は、合理的ではないというか、コンテンツ自体の整合性が低く論理性が薄れる、といった方が良いかもしれません。こういう考え方は言ってしまえば、CSS導入以前にfontタグなどの拡張属性を使用してその場その場で装飾的要素を付加していた仕様を「単に(タグの拡張属性を)記号化して実態を外部ファイルにまとめて書いた」というだけの事になります。CSSは「本来は論理構造のみであった筈のHTML文書に拡張して付加してしまった装飾的要素を取り払い、別物として一括管理する」という様な概念に基づいています。そういう意味では勿論、上記の様な使用法自体は間違いではなく、ケースバイケースでは有用(必然性がある)となる事もあります。
しかし、これではCSSでの定義が装飾そのものに特化しており、論理的な意味を第一とした定義になっていません。ANo.2で回答した「名前」の付け方、ということと関連してきますが、HTML側の論理構造が適切でなければいけないのと同様に、CSSもまた論理的に装飾要素が構成されている事が望ましいのです。何故か?装飾要素は字面の通り「装飾」でしかなく、そのもの自体に「意味」はなく、その実態は常に流動的(デザインが変更されたら併せて変更を余儀なくされる)だからです。上記の様な使用法は結局「装飾」という面を主体とした使用法であり、HTML側の構造が「装飾」に左右される存在になっています。例えば、<p class="hoge1">としていた段落にもやはり「赤い」という装飾も追加したい、となった時にはHTML側も<p class="hoge1 hoge2">と修正しなければなりません。

これに対して、下記の様な仕様であったとします。

.notes {
font-size: 11px;
}
.notes_attention {
font-size: 11px;
color: #cc0000;
}
.notes_special {
font-size: 11px;
color: #cc0000;
border: solid 1px #000000;
}
<p class="notes">この段落は「備考」である(故に文字が小さいという装飾性を与える)</p>
<p class="notes_attention">この段落は「注記」である(故に文字が小さくて赤いという装飾性を与える)</p>
<p class="notes_special">この段落は「特に注目してもらいたいお知らせ」である(故に文字が小さく赤く段落がボーダーで囲まれている)</p>

こういう考え方であれば、CSSのclassの定義自体がHTML側での論理構造と合致している為、例え「装飾性」がどの様に変わろうともHTML側は修正の必要がありません。コーダーは、CSSを有効に利用・管理、進行過程でのデザイン変更の可能性も予め頭に置き、とにかくメンテナンスを合理的に行う為に、デザインを見た段階でまず「的確なHTMLのマークアップ」をする為の論理的意味を各要素のレイアウトやスタイルに対して関連づけて行くところから始めます。

この考え方は、くしくも質問者様の仰っていた

> ただ、一番良いのは、XHTMLのclassで複数のclassセレクタを記述するのではなく、
> これすらもCSSでグループ名でもつけれたら最高ですが。
> これがもしできれば、もしも複数のclassのうちひとつ別のclassと差し替える必要が出たとき(そのclassを記述し直しすればいい気もするので> 本当にこんな事象があるのかわかりませんが)、CSSのグループ登録箇所だけ直せば良いのでラクチンです。

を実装しているものであり、

> これができないと、XHTML側の全ての記述を書き直す羽目になります。

まさにその様な「非効率的な手間」を省く事にもなります。質問者様はclassごとでの装飾要素の重複を嫌われて「装飾要素」のパーツごとに分解し、それを組み合わせて使うやり方を選ばれてしまったわけですが、 個々の装飾要素が各「論理的意味付けのあるセレクタ」において重複している事自体は、CSSとして何の問題もないのです。

> こんなにやりやすいのに、なんで大企業サイトでclass="hoge1 hoge2"という記述を見た記憶がないんだろう・・・
> たまたま見たサイトだけのことなんだろうか・・・・・

それはつまり、残念ながら多くの(CSSを的確に導入しているサイトに限ります。企業であってもお粗末な構成のところは少なくないですから)サイト制作者にとっては、その様な仕様は「やりやすく」はない、ということになるかと。巨大なコンテンツを抱えるサイトほど、その様な効率の悪い構成にはしないでしょう。

しかしながら、質問者様が
> それはそれとして、兎に角現状でもとっても満足です!
であり、ご本人にとってそれが一番やりやすいという事でしたら、それは勿論個人の自由ですので。

それから、質問者様はCSSのシンタックスの理解がまだまだ不足しておられる様です。今回は目先の納期の問題もあり、時間がないのかもしれませんがせめて次のお仕事までにはじっくりと学ばれて正しい知識を身に付けておくべきでしょう。相手が素人さんや趣味のサイトを制作しているなら自由に勝手にやって下さい、とスルーするところですが、この仕事でお金をもらう以上、現在の様な「うろ覚え」の知識でCSSを使う事は許されないと思いますよ。
このスレッドや他のスレッドでのコメントを拝見してきた率直な感想として言わせて頂きましたので、悪しからず。

> それとも自分のこの喜びで喜ぶ場合じゃないもっと合理的な方法があるのかな・・・・^^;

以下はまた余計な説明の1つです。

.hoge1 {
font-size: 11px;
}
.hoge2 {
color: #cc0000;
}
.hoge3 {
border: solid 1px #000000;
}
<p class="hoge1">この段落は文字が小さい</p>
<p class="hoge1 hoge2">この段落は文字が小さくて赤い</p>
<p class="hoge1 hoge2 hoge3">この段落は文字が小さくて赤くボーダーで囲まれている</p>

上記の様な仕様で設計してしまう事は、合理的ではないというか、コン...続きを読む

Q大学入試の志望動機書の書き方について

私立大学の推薦入試を受験しようと思っている女なのですが、『身上書』にある『本学への志望動機』という欄がありまして、いま非常に悩んでいます‥。

書く内容、文章の構成はできたのですが、常体にするか敬体にするかで困っています。
今まで小論文の練習をしてきて、常に常体で書いてきましたので、自分ではなんの疑いも無く常体でいくつもりでした。
国語の先生も常体で良いと言ってくれました。
担任の先生に下書きを見せたところ、特に常体について注意はされませんでした。

しかし、両親は敬体の方が良いと言います‥
『男なら常体でもいいけど、女が常体だと生意気に感じる』というのです。
私としては、書類でマイナスイメージを与えることだけは避けたいのですが‥

常体と敬体、どちらを使ったほうが良いのでしょうか?皆さんの知恵を拝借したく思います(>_<)

Aベストアンサー

常体と形体はどちらでもいいです。

僕は大学院入試の際に志望動機を書きましたが、どっちでもいいという指摘(担当者から)をもらいましたし、常体で大丈夫でした。

大学入試でも変わらないと思いますよ。
心配であれば、推薦入学で合格したOB・OGなどにあたり、内容を見せてもらってみては。

常体と敬体を気にする必要は無いと思います。研究者は男でも女でも常体で文章を書くわけですし、男と女の性差を考慮して選抜するなんてことは僕の知る限り無いですから。

常体の方がわずかですが、文章が短くなる分内容をかける気がします。もし、敬体で書いた方が良いと感じ、かつ志望動機を書くスペースが十分に与えられているならば敬体にすればいいんじゃないでしょうか。

QCSSファイルが見当らないclass名があり、しかもCSSが効いています。どこにあるんでしょうか?

tableのtdやthの背景にうまく画像が入っていてうまいつくりがあったので、方法を調べようとしてソースを見て、CSSファイルを調べるのですが、該当のclass名が検索しても存在しないのです。こんなこと初めてです。
なのにちゃんとCSSは効いています。HTMLソースには記述という記述がないので、どう考えても外部スタイルシートとしか思えないのですが・・・
JavaScriptで操作しているのか?と思ってそのあたりも見はしたのですがわかりませんでした。

以下のURLです。
※ちなみに「比べてください!圧倒的なコストパフォーマンス」というところの表のように、背景画像や2ピクセルでの区切り線、tdやthによって背景画像や色を変更している手法などを知りたいものです。

http://www.rensaba.com/campaign/ocssl/

とりあえず、tableタグにある「class="comparison"」が見当たらないのです。

このソースにかかれてあるCSSファイルは複数ありますが、全て検索かけてみたのですがひとつも出てきませんでした・・・・

この表の作り方だけでなく、いったいどうやって効かせているのかも知りたいです。

宜しくお願い致します。

tableのtdやthの背景にうまく画像が入っていてうまいつくりがあったので、方法を調べようとしてソースを見て、CSSファイルを調べるのですが、該当のclass名が検索しても存在しないのです。こんなこと初めてです。
なのにちゃんとCSSは効いています。HTMLソースには記述という記述がないので、どう考えても外部スタイルシートとしか思えないのですが・・・
JavaScriptで操作しているのか?と思ってそのあたりも見はしたのですがわかりませんでした。

以下のURLです。
※ちなみに「比べてください!圧倒的なコ...続きを読む

Aベストアンサー

http://www.rensaba.com/campaign/ocssl/this.css
にしっかり書かれていますが…


人気Q&Aランキング