CSSでのブロックリンクと文字列リンクの使い分け

質問

ご覧頂きましてありがとうございます。
マイホームページを作っています。

テキストエディタで作成しております。
今仮にですが、
■index.html
<div class = "p"><a href = "a">あ</a></div>
<div><a href = "b">い</b></div>
<a href = "c">う</a>

■index.css
a {
color:red
}

とあったときに、
index.htmlの「あ」を含むブロックを赤色に、
index.htmlの「い」を含むブロックを緑色に、
index.htmlの「う」を含む文字列を青色にしたいとするとき、

index.cssのa{***}だけで装飾するわけにも行かず、
困っております。

最終的な目的はサイドのブロックをCSS表記でブロックごとリンクできるようにして、
メインの文字列だけは下線状態のままリンクできるようにしたいです。

わかりにくい表記でご面倒をおかけしますが、
分かる方に教えていただきたくお願い致します。

回答No.3

ORUKA1951 · ベストアンサー

No.2です。
＞まさかマウスをかざしただけで変化するのにはびっくりです。
　それだけじゃないです。肝心なのは、ブラウザの[表示]⇒[スタイル(シート)]で様々なスタイルを選択するとデザインが変わる事です。
　スタイルシートを用いる最大の理由は、文書構造(HTML)とプレゼンテーション(CSS)が独立しているため、スタイルシートを変更するだけでデザインが変えられること。印刷プレビューで分かるように印刷用スタイルとも独立しています。
　複数のHTMLをひとつのスタイルシートでデザインできるため、読み込みの負荷も低減され、HTMLやスタイルシートが簡潔になる事です。
【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
文書の構造をプレゼンテーションと切り離すことで広汎なプラットフォームや多様なメディアでの文書提供コストを低下でき、文書の改訂も容易になるということが、経験的に知られている。
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［Introduction to HTML 4 (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.4.1 )］より

　リンク先のソースを見られたら分かるようにHTMLは極めてシンプルで分かりやすいので、将来誰かメンテナンスすることになっても楽でしょう。

　いきなり高度なスタイルシートに挑戦する必要はありませんが、多くの方は学ぶ順番を間違えています。CSSとは、Cascading Style Sheetの略で、Cascadingの仕組みが最大の利点で、「命」と言ってよい部分なのです。
5.セレクタ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/selector.html )
6.値の割り当て、カスケード処理、継承( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/cascade.html )

　それを知らないとむやみにidやclass名を振って複雑怪奇なHTML,CSSを作ってしまいます。「文書提供コストが高くなり、文書の改訂も難しくなり」何のための文書構造とプレゼンテーションの分離か、わからなくなります。ほんのちょっと変更したいときもできなくなりますし、デザインの変更も難しくなります。

　セレクタやカスケーディングは、決して難しい物じゃなく極めて常識的な仕組みです。例えば
p{}だと段落(p)はと言う意味ですし、div.section p{}だと本文(section)ブロック内の段落(Paragraph)はと言う意味になり、後者のほうがより具体的に指定されているため優先される---ということ。
　{}内の書き方は、idやclass名をゴチャゴチャつけようが付けまいが、変わりません。つけないほうがずっと楽ではありますが・・。

　今は、とにかく文書構造のマークアップに専念して、シンプルなHTMLを書くことを練習しましょう。その時にHTML4.01strict(transitinalやframesetじゃなく)に絞ると良いでしょう。簡単ですし、次期HTML5はHTML4.01strictの改訂と位置づけられていますから。
⇒4.1 定義( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/conform.html#h-4.1 )
　『HTML文書を作る場合には、この仕様における、他のDTDセットではなく strict DTD に適合する文書を作るよう推奨する。』
　『推奨しない要素は、HTMLの将来のバージョンでは廃止になる可能性がある。』

⇒HTML5 における HTML4 からの変更点( http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff )

お礼

ご回答ありがとうございました。
HTMLもCSSも１年以上はやっているのですが、
かなり取りこぼしがあったようで、最初から丁寧に
見なおしてみます。
また、class,idの使い分けがほとんど頭になかったもので
失礼致しました。CSSは本当に便利だとおもいます。
詳細な解説ありがとうございました。

回答No.2

ORUKA1951

＞マイホームページを作っています。
　？？ホームページとはブラウザを起動したときに最初に表示されるページのことですが？？(ブラウザにはオプションでホームページをどれにするか指定できる）少なくとも製作する立場になると正確に用語を使わないと・・

　文書構造とプレゼンテーション--この二つは、きちんと区別しておきましょう---http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.4.1
　DIVはそんなにむやみに使いません。HTML5では他に適当な要素がないときの最後の手段となって原則使いません。『Authors are strongly encouraged to view the div element as an element of last resort, for when no other element is suitable.( http://www.w3.org/TR/2012/CR-html5-20121217/grouping-content.html#the-div-element )』
　HTML4.01でも「id属性及び class属性と併用することで、文書に構造を付加するため( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )」とされてきました。

　例えば、ナビゲーションを示す部分が次のようにマークアップされていたとします。
[HTML4.01用スタイルシート]
div.section{position:relative;min-height:100px;}
div.section div.nav{
position:absolute;top:0;right:0;
width:200px;height:100%;
font-size:0.9em;
}
div.section div.nav ol,div.section div.nav ol li{
list-style-type:none;
margin:0;padding:0;
text-align:center;
line-height:22px;
}
div.section div.nav ol li{
display:block;
height:30px;width:100%;
position:relative;
}
div.section div.nav ol li a{
display:block;
width:192px;height:22px;
text-decoration:none;
border:outset lime 4px;
background-color:rgb(180,255,180);
}
div.section div.nav ol li a:visited{
border-color:green;
background-color:rgb(80,255,80);
}
div.section div.nav ol li a:hover,
div.section div.nav ol li a:focus{
background-color:rgb(220,255,220);
}
div.section div.nav ol li a:active{
background-color:yellow;
border-style:solid;
}
div.section div.nav ol li a[href="/future"]{
color:red;
font-weight:bold;
}
div.section div.nav p{
text-indent:1em;
}

HTMLで文書構造をきちんとマークアップされて入れば、その文書構造に基づきセレクタでスタイルを適用したい要素を指定して、プロパティでデザインして行きます。
★言い換えればデザインのためにHTMLを書くことをしなければ、自由自在にデザインできるということです。

　⇒ナビゲーションリストを様々にデザインしてみよう。( http://www.ichiya.com/WebService/Howto/sample/HTML/nav/navigation1.html )

お礼

CSSのサンプルを見て唖然としました。
こんなに複雑なものなのですね。
でも奥が深くてやる気が湧いてきました。

また、参考のURL拝見しました。
まさかマウスをかざしただけで変化するのにはびっくりです。
どうもご回答ありがとうございました。

回答No.1

play_with_you

難しく考えずに、それぞれIDを振ってスタイルを指定してしまいましょう。今はそれで充分です。
「よりよい」方法はいくらでもありますが、何も分からない状態でいきなり手を出さず、「間違ってない」方法でまずは目的を達成させてしまうべきです。

お礼

ご回答ありがとうございます。
CSSはもう初心者中の初心者でして、
idにしたらいいのかclassにしたらいいのかで迷っています。
アドバイス頂き本当にありがとうございました。