CSSに関して質問です。

.menu{ と #menu{ の違いはなんでしょうか?

回答の条件
  • URL必須
  • 1人2回まで
  • 登録:2005/09/25 23:48:02
  • 終了:--

回答(15件)

id:stnet No.1

stnet回答回数804ベストアンサー獲得回数342005/09/25 23:50:40

ポイント13pt

http://www.tohoho-web.com/css/basic.htm#Class

とほほのスタイルシート入門(基礎知識)

.menuはclassの定義

#menuはid属性の定義になります

id:kuma-ism

idはリンクも設定したclassと考えてよろしいですか?

2005/09/26 01:17:55
id:pmakino No.2

まきのっぴ回答回数355ベストアンサー獲得回数282005/09/26 00:08:38

ポイント13pt

http://www.asahi-net.or.jp/~sd5a-ucd/rec-html401j/struct/global....

The global structure of an HTML document (ja)

ID は一つの HTML 文書の中に一つしか記述できません。また、一つの要素に複数の ID を割り当てることはできません。

一方 CLASS は、一つの HTML 文書中に複数回記述することができますし、一つの要素に複数の CLASS を設定することができます。


ID は特定唯一の要素を指し示す固有名詞、CLASS は一般名詞やグループと考えて、適宜使い分ければ良いかと思います。


ID は付加的にリンクのアンカーポイントともなります。

id:kuma-ism

リンクのアンカーポイントとはリンク元ということですか??付加的にそうなってるのですね。

初心者は使い分ける必要があまりないようですね

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

あとは…menu a {  や menu p{ はどういう意味でしょうか。何回も申し訳ございません。

2005/09/26 01:21:25
id:pmakino No.3

まきのっぴ回答回数355ベストアンサー獲得回数282005/09/26 01:45:41

ポイント13pt

リンク元ではなく、リンク先です。

<h1 id=”TOP”>ページタイトル</h2>

(中略)

<a href=”#TOP”>ページタイトルへ戻る</a>

のように、ページ内リンクが実現できます。<a name=”TOP”> と同様の働きをすると考えてください。


menu a や menu p のような表記は、子孫セレクタです。

例えば .menu a は、CLASS 属性として menu を持っている要素の中にある A 要素を指します。

これは、<div class=”menu”>(中略)<a href=...> というような A 要素のにみ適用され、それ以外の A 要素には影響を与えません。

id:kuma-ism

ありがとうございます。本を読んで頑張ったのですが、本の通り打っても、うまくいきません。

中央にも配置されず、floatの命令もきかずで

ずべて左側によってしまってます↓。

2005/09/26 22:31:33
id:keijix No.4

keijix回答回数27ベストアンサー獲得回数02005/09/26 03:04:21

ポイント13pt

http://css.uka-p.com/base_id_class.shtml

CSSの記述 −idとclassの違い

menu a {  や menu p{ は


「文脈セレクタ」というもので、入れ子の関係を指定することでそのパターンに合う要素のみに適用する方法です。

menuというclassあるいはIDの範囲内にある p や a にCSSを適用するということです。

ですから、仮にdivのIDとしてmaincontenaと別のdivにmenuを設定した場合、maincontenaブロックの中にある aタグ とmenuブロックの範囲内にある aタグ にそれぞれ違ったCSSを適用できます。同じ aタグ でもそのブロックによって見えがかりを変えることができます。

id:kuma-ism

ありがとうございます。

2005/09/26 22:31:59
id:marthin No.5

marthin回答回数4ベストアンサー獲得回数02005/09/26 03:10:01

ポイント13pt

.menuはclass属性 #menuはid属性になります。

何が違うか平たく言うと、

同じclass属性は、ページ内に複数有ってもかまいませんが、

同じid属性は、ページ内に1つのみ。という決めごとが有ります。

(その通りにしなくても、ブラウザが解釈してくれますが…)


また、#menu a { や #menu p { は

#menuの範囲に含まれる aやpにのみ適用させるということです。

例:<div id=”menu”><p>ああ</p></div>には適用されますが、

その他の<p>ああ</p>には適用されないということです。

id:kuma-ism

ありがとうございます。わかりやすいです。本はなぜわかりにくいですね。。

2005/09/26 22:37:24
id:kunimiya No.6

kunimiya回答回数15ベストアンサー獲得回数02005/09/26 03:28:21

ポイント13pt

.menu a{ 、.menu p{は、menuクラスのついたタグ要素内にあるAタグやPタグを対象とするスタイルを設定する書き方であり、「子孫セレクタ」といいます。

また、全ての要素に対してスタイルを設定するときに”html *{...}”のような書き方ができます。

id:kuma-ism

ありがとうございます。

二つの<id>がありまして、一方を左、一方を右に同じ高さで表示したいのですが、

floatで指定しますと高さが変わってしまうか

どちらとも左によってしまいます(教授本では

floatをleftで指定してもrightで指定してもうまくいくと書いてありますが、うまくいきません)

。何かアドバイスがありましたらお願いします。

2005/09/29 09:56:59
id:aki5921 No.7

aki5921回答回数156ベストアンサー獲得回数02005/09/26 07:24:01

ポイント13pt

.menu{ はクラスセレクタです。

<div class=”menu”

とタグの部分に記述したすべての要素にスタイルが適用されます。


#menu{はidセレクタといいます。

<div id=”menu”

とタグに記述した部分に適用されます。idはユニークに付けなければなりませんから、適用されるのは1個です。


なお、スタイルシートでは、「後ろに書いたもの」が優先適用されるようになっていますので、#menuを.menuの特例として、後ろに書くようにすると効果的です。


なお、こんな指定の仕方も可能です。

<style>

.menu{ ×××; } -(1)

p.menu{ △△△; } -(2)

#menu{ ○○○; } -(3)

<body>

<div class=”menu”> -(1)が適用

<img id=”menu” class=”menu” ...></img> -(1)(3)が適用

<p class=”menu”>.....</p> -(1)(2)が適用

</div>

id:kuma-ism

なるほど。。わかりやすいです。ありがとうございます。

2005/09/29 10:05:08
id:MIYATOMO No.8

MIYATOMO回答回数9ベストアンサー獲得回数02005/09/26 09:52:35

ポイント13pt

http://www.cybergarden.net/references/css/

CSSリファレンス | references | CYBER@GARDEN

まず、分解して説明します。


1.menuの前にある『.』と『#』

2.『menu』自体


1.はCSS内での識別用記号で、『.』がclass、『#』がidになります。


classと、IDの違いで、IDが同一ページ内に1つしか記述できないのではなく、ID=”名前”の同一なものが同一ページ内に1つしか使用でき事になってます。


<p id=”menu1”>~</p>

<p id=”menu2”>~</p>

<p id=”menu3”>~</p>


と記述の場合は同一ページ内に存在しても良いです。


classは、何度も使用できますので、

<p class=”menu”>~</p>

<p class=”menu”>~</p>

<p class=”menu”>~</p>

<p class=”menu”>~</p>

が同一ページ内にあっても良いです。


2.の『menu』は、作成者が自分で決める名前ですので、自分で決めます。


この2つを使って、CSSで設定して行きます。


例えば、1つの段落を表す<p>~</p>ですが、

同一ページ内に2つ使用して、違うスタイルにしたい場合、

<p class=”menu1”>~</p>

<p class=”menu2”>~</p>

といった感じで名前を付けます。

それを、CSS内にて、

.menu1 { スタイル内容 }

.menu2 { スタイル内容 }

という感じで、設定する事で、例えば、menu1が背景色を青、menu2は背景色を緑、などと設定する事が可能になります。


また、同じスタイルに統一したい場合は、2つとも同じclassを使用すれば、良い事になります。


<p class=”menu1”>~</p>

<p class=”menu1”>~</p>


menu a {  や menu p{ に関しては、

『menu』という名前を付けた要素の中『a』や『p』に関して、設定する事が出来る記述方法になり、『menu』の要素の外側の『a』や『p』には、影響しないという事になります。

http://www.1uphp.com/con3/css.html

ホームページ作成 - スタイルシートとは? - WEBサイト作成 フリー素材コード の1uphp.com スタイルシート,htmlやFirefox,Operaなどのブラウザの表示結果まで。

id:kuma-ism

ありがとうございます!!!

2005/09/29 10:06:01
id:disable No.9

disable回答回数3ベストアンサー獲得回数02005/09/26 09:53:42

ポイント13pt

セレクタとプロパティという言葉はご存知でしょうか?

セレクタは、.menuなど、CSSにおいて、適用の対象となる要素を指定する部分で、プロパティはbackground-color: #ffffff;など、{}に書く実際のCSSによる見栄えを指定する部分のことを言います。

CSSは、簡単に言うとセレクタとプロパティから成り、セレクタの条件と一致(マッチ)する要素にプロパティを適用します。

H1など、通常の要素をセレクタとして用いる場合、これを単純セレクタと言います。

H1 aというように空白文字類で区切られたセレクタを子孫セレクタと言い、これはH1要素の中にあるA要素のことを指します。H1要素内のA要素には適用されません。子孫セレクタでは、H1要素の中に含まれていれば2つの要素の間にどんな要素が存在してもマッチングの対象になります。

例)

<h1><a>h1 aが適用される</a></h1>

<p><a>h1 aは適用されない</a></p>


そして、id属性やclass属性の値を参照するセレクタをそれぞれ一意セレクタ(#)、クラスセレクタ(.)と言います。

特定の要素に名前を与える場合にid属性をつけ、特にその必要がない場合や、複数の要素を同じ見栄えとしてグループ化したい場合にはclass属性を使うのが一般的でしょう。とはいえ、class属性の値も、文書構造内における意味や目的に合った名前を付けるべきかなとは思います。はてなダイアリーのソースを参照するなどしてみてください。

(セレクタには、その他にも>を使う子供セレクタ、+を使う隣接セレクタ、[]を使う属性セレクタなどがありますが省略します。)

これらのセレクタはそれぞれをすべて組み合わせて複雑な条件として用いることが出来ます。

例) .menu ul li a:link {} /*メニューの中にあるUL要素の中のLI要素の中のA要素の未読リンク*/


また、CSSには詳細度という概念があります。

H1などの単純セレクタは1、クラス・疑似クラス(ex.:first-line)・疑似要素(ex.:link,:visited)などのクラスセレクタは10、IDによる一意セレクタは100の詳細度をそれぞれ持っていて、同じ要素に対するCSSの属性(プロパティ)が重複してある場合、この詳細度が高い方のプロパティが優先されるようになっています。

詳細度の計算は単純な足し算です。

例えば、#hatena div.hatena-diary a:linkというセレクタは、ID(100)+div(1)+class(10)+a(1)+:link疑似要素(10)で、詳細度は122となります。

このセレクタは#hatena a:link(100+1+10=111)というセレクタのプロパティと重複する場合がありますが、プロパティが重複した場合、より詳細度の高い#hatena div.hatena-diary a:linkのものが適用されるというわけです。

この概念を知れば、一意セレクタとクラスセレクタの違いを更に理解して頂きやすくなるかなと思います。


頑張ってください!

id:kuma-ism

はてなは親切な方が多くて助かります。。

2005/09/29 10:06:51
id:arlik No.10

arlik回答回数12ベストアンサー獲得回数02005/09/26 16:18:41

ポイント13pt

http://www.asahi-net.or.jp/~jy3k-sm/css1/2003maki/

HTML版『スタイルシートWebデザイン』

参考文献。

id:kuma-ism

ありがとうございます。

2005/09/29 10:07:15
id:unlucky7 No.11

unlucky7回答回数87ベストアンサー獲得回数02005/09/26 18:49:03

ポイント12pt

#はID属性で、そのページで1度しか使わないものがそれにあたります。

ただ、.も#も結局は見え方は同じなので、私はそれほど気にしていません。

id:kuma-ism

なるほど。。

2005/09/29 10:07:54
id:walf443 No.12

walf443回答回数1ベストアンサー獲得回数02005/09/26 22:37:30

ポイント12pt

.menuはclass、#menuはIDを表します。


classはHTML中で何度でも指定することが出来ます。


例:

<a class=”example1”>example1</a>

<a class=”example1”>example2</a>


IDはHTML中で一つしかない要素を表します。従って下記のようには出来ません。


誤:

<a id=”example1”>example1</a>

<a id=”example1”>example2</a>


正:

<a id=”example1”>example1</a>

<a id=”example2”>example2</a>


従ってCSSの際には一つしか指定しないような内容の場合(サイドメニュー部分など) IDを使い、それ以外の場合はclassを使えば良いと思います。


em a{などのようにスペースで区切って並べると、em要素内にあるすべてのa要素にスタイルが適用されます。


例:

<a href=”example1.html”>example1</a>

<em>

<a href=”example2.html”>example2</a>

<a href=”example3.html”>example3</a>

</em>

<a href=”example4.html”>


この例の場合、example2とexample3に上記のスタイルが適用されます。


リンクのアンカーポイントになるというのは比較的新しい仕様でまだ対応しているブラウザはそれほど多くありません。


例:index.html

<a name=”test”>test</a> → index.html#test

としていたのが、

<h2 id=”test”>test</a>

でも同様にindex.html#testで呼び出せるようになったということです。


今のところアンカーは今までどおりname属性で設定した方が良いでしょう。

id:kuma-ism

ありがとうございます。

うまくいかないのは以下の設定が問題なのでしょうか。。¥マークのところは本では逆スラッシュ

になっていましたが私のPCでは表記されません。。

voice-family : ”¥”}¥””;

voice-family : inherit;

2005/09/29 11:30:20
id:keijix No.13

keijix回答回数27ベストアンサー獲得回数02005/09/29 19:54:57

ポイント12pt

http://blog.y-iweb.com/archives/000005.html

WinIE6以上とIE5x以下との違いを考慮したCSS:CSSを使いこなす

Win IE5以下専用の指定

voice-family: ”¥”}¥””;

voice-family:inherit;

IE6・NN6以上・Opera・MacIE5.xの指定


これは、ボックスの幅の解釈の違いを利用した、

E6・NN6以上・Opera・MacIE5.2などとWin IE5xをわけてCSSを適応させるBox Model Hackです。

id:kuma-ism

ありがとうございます。裏技ですね。

2005/10/02 20:55:40
id:flamelizard No.14

flamelizard回答回数1ベストアンサー獲得回数02005/10/02 00:58:40

ポイント12pt

質問の答えは既に答えられている通りです。


コメントへの回答で構いませんか?


divで括っていると仮定します。


#a{width:任意の幅;}

#l{float:left;width:49.5%;}

#r{float:left:width:49.5%;}


(もしくは、

#l{float:left;width:49.5%;}

#r{margin-left:49.5%;width:49.5%;} )


<div id=”a”>

<div id=”l”>

左の内容

</div>

<div id=”r”>

右の内容

</div>

</div>


でOKかと思います。

id:kuma-ism

ありがとうございます!

2005/10/02 20:56:16
id:arlik No.15

arlik回答回数12ベストアンサー獲得回数02005/10/02 01:14:26

ポイント12pt

http://homepage1.nifty.com/tabotabo/ccc/tilda.htm

【〜】チルダと【\】バックスラッシュと【¥】

要は OS の(font)環境に依存してゐると云ふこと。

大文字の逆斜線でよいのなら数値文字参照で「&#65340;」を指定する、亦は画像(透明 gif)を使ふ。

id:kuma-ism

い、いとむずかし…。

¥マークでもいいということですね。ありがとうございます。

2005/10/02 20:57:44

コメントはまだありません

この質問への反応(ブックマークコメント)

トラックバック

  • question:1127659682でid:kuma-ismさんが求めているもの question:1127659682でid:kuma-ismさんが求めているもの 2006-03-13 16:13:11
    kuma-ismさんが本当に欲しい回答は、中央にも配置されず、floatの命令もきかずでずべて左側によってしまってます↓。、などとあるように、floatの回り込みが上手くできないということだと
「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません