No.4ベストアンサー
- 回答日時:
No.3です。
>詳細度とか見たことすらないですけど、階層構造の深さだなとは何となく分かります。
CSS(カスケーディングスタイルシート)を使うときは、プロパティより先に、カスケーディングの仕組みを学んでおかないとなりません。そうしないと、要素(タグ)にいちいちIDやclass名を振ってしまい、とんでもない文字数のHTMLが出来上がるし、後から「わけわかめ」になります。
HTMLは文書構造を示し、スタイルシートでプレゼンテーションを指定することでHTMLは極めて簡略化できる・・はずなのに・・divやclassやidてんこ盛りの巨大なHTMLを書いてしまう。
決して難しいものじゃなくて、ごくごく一般的に理解できる常識的な内容です。
a:link{color:magenta;} /* 詳細度[0,0,0,1] (colorは継承するプロパティ) */
リンクのa要素の色はマゼンタにしましょう。
div.header a:link{color:red;} /* (1)詳細度[0,0,2,2] */
headerクラスのdiv(汎用ブロック)の子孫( 半角スペース)のリンクaは赤ですよ。
div.header div.nav a:link{color:green;} /* (2)詳細度[0,0,3,3] */
しかし、その中のナビゲーションブロック内のリンクaは、緑
div.header div.nav a+a+a:link{color:aqua;}/* (4)詳細度[0,0,3,5] */
そのうちで、兄にふたつのaをもつa:linkは水色
div.header div.nav a+a:link{color:yellow;}/* (3)詳細度[0,0,3,4] */
兄がふたつのaは水色
div.section p a:link{color:blue;}/* (5)詳細度[0,0,2,2] */
一方本文(section)内の段落中のa:linkは青
(6)は詳細度が[1,0,0,0]として計算される。
詳細度は
*(全称セレクタ)、タグの属性(<body link="blue">)はゼロ
要素(タグのこと)、擬似要素(:first-leterとか)は、d=1
属性a[href]、クラス(a.class)、擬似クラス(:linkとか)は c=1
一意セレクタ(ID)は、b=1
HTMLの属性中のstyleでの指定は、a=1
[a,b,c,d]という数として数えます。
そのプロパティが継承されるか否かは常識的なものです。たとえばcolorプロパティは、親の段階で決めれば子々孫々まで有効ですが、borderプロパティは継承されません。
値の割り当て、カスケード処理、継承 ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2 … )
カスケーディングスタイルシートの本当に大事な根幹部分です。もし理解していれば、HTMLをどう書けばよいかもわかるはずです。idはリンクの終端、class名は文書(の意味的)構造を示すものをつける。と言う意味は、CSSのCを知ると理解できるかと。
【引用】____________ここから
DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する
 ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ここまで[The global structure of an HTML document (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )]より
この回答への補足
返信の内容は批判ではなく率直な感想です。
なので気に障ったらごめんなさい。
やっぱり普通の人にとって簡略化できるより、
汚くても出来るor出来ないかの方が重要です。
このテーマは私も疑問に思っていることなので
また別の機会に質問してみたいと思います。
再度のご回答どうもです。
言いたいことはよく分かりますよ。
でも普通の人にとってはやっぱり難しいです。
ホームページソフトのメーカーが簡単にできるというから
足を突っ込んで中途半端になっちゃう人が多いです。
自分もみごとにその中の一人ですから。
本当は1から習う順番があるんでしょうが
そんな事したら売れなくなるからじゃないでしょうか。
No.3
- 回答日時:
a要素でには、href属性やname属性をもちますから、a:linkとは、<a href="">の意味ですね。
わたざわたざclassなどで悩む必要はありません。HTMLが文書構造にしたがって正しくマークアップされていれば・・・
[例]
<body>
<div class="header">
<h1>見出し</h1>
<p>なんたらかんたら<a href="">リンク</a>へ<p><!-- (1) -->
<div class="nav">
<ol>
<li><a href=""></a></li><!-- (2) -->
<li><a href=""></a></li><!-- (3) -->
<li><a href=""></a></li><!-- (4) -->
</ol>
</div>
</div>
<div class="section">
<h2>見出し</h2>
<p>なんたらかんたら<a href="">リンク</a>へ<p><!-- (5) -->
<div class="aside">
<h3>コラム記事</h3>
<p>なんたらかんたら<a href="" style="color:silver;">リンク</a>へ<p><!-- (6) -->
・・・・・
だとしたら、
a:link{color:magenta;} /* 詳細度[0,0,0,1] (colorは継承するプロパティ) */
div.header a:link{color:red;} /* (1)詳細度[0,0,2,2] */
div.header div.nav a:link{color:green;} /* (2)詳細度[0,0,3,3] */
div.header div.nav a+a+a:link{color:aqua;}/* (4)詳細度[0,0,3,5] */
div.header div.nav a+a:link{color:aqua;}/* (3)詳細度[0,0,3,4] */
div.section p a:link{color:blue;}/* (5)詳細度[0,0,2,2] */
(6)は詳細度が[1,0,0,0]として計算される。
CSS(カスケーディングスタイルシート)のカスケーディング機能を使うと、HTMLさえきちんと書けていれば、スタイルシートのためだけにclass名やidを使わなくても、特定の部分の要素のスタイルホ変更できます。
カスケーディングは、スタイルの出所、継承、詳細度などをひっくるめて利用します。
この前も詳しくお世話になりました。
これは前の方の説明を更に詳しくしたものですね。
今なら理解できるけどa+a+aって???
何か凄く深淵な世界を見せられている気がします。
詳細度とか見たことすらないですけど、
階層構造の深さだなとは何となく分かります。
No.2
- 回答日時:
こちらから応用ができるでしょう。
http://www.scollabo.com/banban/apply/ap5.html
タグに直接当てれば良いのだそうです。
タグごとにという話であれば、ol headerとかを作って
ol header li a:{linl:red}とかでやれば良いでしょう。
これでvisitedとかもいけると思いますが未検証なので悪しからず。
これは全く気付きませんでしたorz_
その通りリストです。
上段と下段で違う色にしたかったので。
とても自分の力だけでは無理ですね。
取り敢えずうまく動いたみたいです。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・14歳の自分に衝撃の事実を告げてください
- ・架空の映画のネタバレレビュー
- ・「お昼の放送」の思い出
- ・昨日見た夢を教えて下さい
- ・ちょっと先の未来クイズ第4問
- ・【大喜利】【投稿~10/21(月)】買ったばかりの自転車を分解してひと言
- ・メモのコツを教えてください!
- ・CDの保有枚数を教えてください
- ・ホテルを選ぶとき、これだけは譲れない条件TOP3は?
- ・家・車以外で、人生で一番奮発した買い物
- ・人生最悪の忘れ物
- ・【コナン30周年】嘘でしょ!?と思った○○周年を教えて【ハルヒ20周年】
- ・ハマっている「お菓子」を教えて!
- ・最近、いつ泣きましたか?
- ・夏が終わったと感じる瞬間って、どんな時?
- ・10秒目をつむったら…
- ・人生のプチ美学を教えてください!!
- ・あなたの習慣について教えてください!!
- ・牛、豚、鶏、どれか一つ食べられなくなるとしたら?
- ・都道府県穴埋めゲーム
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
HTML要素のid/class名の長さに...
-
idの中のid指定
-
liリストタグの背景色に色がつ...
-
外部css定義したclassをht...
-
CSSの適用を一部だけ除外したい。
-
サイトにjQueryが使用されてい...
-
最近、HTMLのヘッダーをIDで定...
-
htmlの文字が縦書きになる
-
widthやheightの数値に単位(px...
-
htmlのolやulなどlistにtitleや...
-
リストマーカーをボックス内に...
-
HTML属性での「""」 「''」違い
-
css初心者 フレックスボックス...
-
ulタグやliタグの中でbrタグ...
-
リストの数字のフォントサイズ...
-
含む含まないという概念自体の...
-
質問1.
-
「諸要素」とはどういう意味で...
-
【ヒトの神秘】美男美女から何...
-
HTMLで組織図を作成する方法
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
HTML要素のid/class名の長さに...
-
idの中のid指定
-
CSSのクラス名・ID名の指定でワ...
-
htmlのid属性って必要なの?
-
個別にリンクの色を変える方法
-
サイトにjQueryが使用されてい...
-
最近、HTMLのヘッダーをIDで定...
-
<span>で2重にかけているものを...
-
外部css定義したclassをht...
-
子孫セレクタの読み方をおしえ...
-
CSSに同じclass名がいっぱい‥。...
-
liリストタグの背景色に色がつ...
-
【VBA/HTML】IE画面内のページT...
-
「目次」と「サブ目次」のスタ...
-
CSS, リンクの色を一部変えるに...
-
リンク文字の 一部だけ色を変...
-
ページの左右の余白(枠外)に...
-
divでくくった中の要素にa link
-
透過背景を解除するにはどうす...
-
brにクラスをつけてcssでdispla...
おすすめ情報