.menu{ と ＃menu｛ の違いはなんでしょうか？
No.1
804
34
13pt
http://www.tohoho-web.com/css/basic.htm#Class
とほほのスタイルシート入門（基礎知識）
.menuはclassの定義
#menuはid属性の定義になります
No.2
35830
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 は付加的にリンクのアンカーポイントともなります。
リンクのアンカーポイントとはリンク元ということですか？？付加的にそうなってるのですね。
初心者は使い分ける必要があまりないようですね
。。ありがとうございました。
あとは…menu a { や menu p{ はどういう意味でしょうか。何回も申し訳ございません。
No.3
35830
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 要素には影響を与えません。
ありがとうございます。本を読んで頑張ったのですが、本の通り打っても、うまくいきません。
中央にも配置されず、floatの命令もきかずで
ずべて左側によってしまってます↓。
No.4
270
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タグ でもそのブロックによって見えがかりを変えることができます。
ありがとうございます。
No.5
40
13pt
.menuはclass属性 #menuはid属性になります。
何が違うか平たく言うと、
同じclass属性は、ページ内に複数有ってもかまいませんが、
同じid属性は、ページ内に1つのみ。という決めごとが有ります。
（その通りにしなくても、ブラウザが解釈してくれますが…）
また、#menu a { や #menu p { は
#menuの範囲に含まれる aやpにのみ適用させるということです。
例：<div id=”menu”><p>ああ</p></div>には適用されますが、
その他の<p>ああ</p>には適用されないということです。
ありがとうございます。わかりやすいです。本はなぜわかりにくいですね。。
No.6
150
13pt
.menu a{ 、.menu p{は、menuクラスのついたタグ要素内にあるＡタグやPタグを対象とするスタイルを設定する書き方であり、「子孫セレクタ」といいます。
また、全ての要素に対してスタイルを設定するときに”html *{...}”のような書き方ができます。
ありがとうございます。
二つの＜id＞がありまして、一方を左、一方を右に同じ高さで表示したいのですが、
floatで指定しますと高さが変わってしまうか
どちらとも左によってしまいます（教授本では
floatをleftで指定してもrightで指定してもうまくいくと書いてありますが、うまくいきません）
。何かアドバイスがありましたらお願いします。
No.7
1560
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>
なるほど。。わかりやすいです。ありがとうございます。
No.8
90
13pt
http://www.cybergarden.net/references/css/
CSSリファレンス | references | CYBER@GARDEN
まず、分解して説明します。
１．menuの前にある『.』と『#』
２．『menu』自体
１．はＣＳＳ内での識別用記号で、『.』がclass、『#』がidになります。
classと、ＩＤの違いで、ＩＤが同一ページ内に１つしか記述できないのではなく、ＩＤ＝”名前”の同一なものが同一ページ内に１つしか使用でき事になってます。
<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>
が同一ページ内にあっても良いです。
２．の『menu』は、作成者が自分で決める名前ですので、自分で決めます。
この２つを使って、CSSで設定して行きます。
例えば、１つの段落を表す<p>～</p>ですが、
同一ページ内に２つ使用して、違うスタイルにしたい場合、
<p class=”menu1”>～</p>
<p class=”menu2”>～</p>
といった感じで名前を付けます。
それを、ＣＳＳ内にて、
.menu1 { スタイル内容 ｝
.menu2 { スタイル内容 ｝
という感じで、設定する事で、例えば、menu1が背景色を青、menu2は背景色を緑、などと設定する事が可能になります。
また、同じスタイルに統一したい場合は、２つとも同じ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などのブラウザの表示結果まで。
ありがとうございます！！！
No.9
30
13pt
http://www.y-adagio.com/public/standards/tr_css2/toc.html
Cascading Style Sheets, Level 2
セレクタとプロパティという言葉はご存知でしょうか？
セレクタは、.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のものが適用されるというわけです。
この概念を知れば、一意セレクタとクラスセレクタの違いを更に理解して頂きやすくなるかなと思います。
頑張ってください！
はてなは親切な方が多くて助かります。。
No.11
870
12pt
#はID属性で、そのページで1度しか使わないものがそれにあたります。
ただ、.も#も結局は見え方は同じなので、私はそれほど気にしていません。
なるほど。。
No.12
10
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属性で設定した方が良いでしょう。
http://www.asahi-net.or.jp/~sd5a-ucd/rec-html401j/struct/links.h...
Links in HTML documents (ja)
ありがとうございます。
うまくいかないのは以下の設定が問題なのでしょうか。。￥マークのところは本では逆スラッシュ
になっていましたが私のPCでは表記されません。。
voice-family : ”￥”}￥””;
voice-family : inherit;
No.13
270
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をわけてＣＳＳを適応させるBox Model Hackです。
ありがとうございます。裏技ですね。
No.14
10
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かと思います。
ありがとうございます！
No.15
120
12pt
http://homepage1.nifty.com/tabotabo/ccc/tilda.htm
【〜】チルダと【＼】バックスラッシュと【￥】
要は OS の（font）環境に依存してゐると云ふこと。
大文字の逆斜線でよいのなら数値文字参照で「＼」を指定する、亦は画像（透明 gif）を使ふ。
い、いとむずかし…。
￥マークでもいいということですね。ありがとうございます。
17
17
1
idはリンクも設定したclassと考えてよろしいですか？