2009/03/24
Q＆A形式で学ぶHTML,CSS講座 VOL 42
■------------------------------------------------------------------------
ホームページ作成 いまさらHTML,CSS講座【Q＆A形式で学ぶHTML,CSS講座】
■------------------------------------------------------------------------
■ VOL 42
--------------------------------------------------------------------------
ご購読ありがとう御座います。
--------------------------------------------------------------------------
当メールマガジンでは、ホームページ作成において、必要な知識や、HTML、CSSを
Q＆A形式で学ぶ事が出来ます。
■スタイルシート編
--------------------------------------------------------------------------
■ セレクタ
--------------------------------------------------------------------------
head要素、外部スタイルシートに記述する場合、スタイルシートは、
セレクタ {プロパティ: 値; }
のように構成され、この構成を ルールセットと言います。
セレクタは、スタイルを指定する対象を記述し、セレクタにはいくつかの記述
パターンがあります。
参考URL
http://homepagelecture.web.fc2.com/imasara_html/css_selector.htm
--------------------------------------------------------------------------
それでは、以下の問いにチャレンジしてみて下さい。
--------------------------------------------------------------------------
Q1
div{color: blue;}
上記はbody要素のdiv要素に記述したテキストが青色になるようにスタイルを
指定しています。この指定を「p要素」にも適用できるように上記の指定を変更して
下さい。
Q2
em{color: blue;}
上記はbody要素のem要素に記述したテキストが青色になるようにスタイルを
指定しています。この指定を「div要素」に記述した「em要素」のテキストのみに
適用するように指定を変更して下さい。
Q3
<em style="color: blue;">abcdefg</em>
上記「em要素」はテキストが青色になるように要素に直接スタイルを
適用していますが、
.bluetxt{color: blue;}
上記のように任意のclass名（ここでは「bluetxt」）をセレクタにし、class名を
指定した要素のテキストが青色になるようにスタイルを指定しましたので、
<em style="color: blue;">abcdefg</em>
をclass名での指定により青色で表示するように変更して下さい。
--------------------------------------------------------------------------
以下、答えになります。
A1
div,p{color: blue;}
要素をカンマ「 , 」で区切り記述することで複数の要素に同じスタイルを適用する
ことができます。
A2
div em{color: blue;}
親要素に半角スペースで区切り、子、孫要素名で指定すると、親要素内の子、孫要素に
スタイルが適用されます。
A3
<em class="bluetxt">abcdefg</em>
ピリオド( . )に続けて、任意のclass名をつけセレクタを指定すると、class="任意の
class名" と指定した要素にスタイルが適用されます。
classの指定は、HTML文書内で何度でも指定することができますので、要素を限定しない
スタイルの指定や、スタイルをグループ分けする際に有効です。
また、シャープ( # )に続けて、任意のid名つけセレクタを指定すると、
id="任意のid名" と指定し、要素にスタイルを適用する方法もありますが、1つのHTML
文書内において、同じid名を「2つ以上指定することはできません」のでこちらは
HTML文書の骨格のスタイルを指定する場合などに有効です。
今回は以上です。
次回は ページ全体の基本指定 についてQ＆Aを作成する予定です。
お疲れ様でした。
最後までお読み頂き、ありがとう御座います。
本講座は、「いまさらHTML,CSS講座」をベースに作成しています。
先に進みたい方は、以下URLをご参照下さい。
いまさらHTML,CSS講座
http://homepagelecture.web.fc2.com/
RSS(最新情報、写真素材のUP状況、メルマガの配信状況などをお知らせしています。)
http://homepagelecture.web.fc2.com/index.xml
ホームページで使えそうな写真素材を配布しています。加工自由のフリー素材
ですので、良かったらお使い下さい。
http://homepagelecture.web.fc2.com/material_index.htm
携帯待ち受けサイズにリサイズした写真の配布も開始しました。
画面対応サイズは「480×864 / 480×640 / 240×400 / 240×320」です。
http://www.katch.ne.jp/~j-world/
写真ブログを始めました。
EOS 40D と LUMIX DMC LX3
http://eos40ddmclx3.blogspot.com/
RSS
http://eos40ddmclx3.blogspot.com/feeds/posts/default?alt=rss
Photograph of HCM Pro
http://hcm-pro.blogspot.com/
RSS
http://hcm-pro.blogspot.com/feeds/posts/default?alt=rss
