2009/12/22
Q＆A形式で学ぶHTML,CSS講座 VOL 47
■------------------------------------------------------------------------
ホームページ作成 いまさらHTML,CSS講座【Q＆A形式で学ぶHTML,CSS講座】
■------------------------------------------------------------------------
■ VOL 47
--------------------------------------------------------------------------
ご購読ありがとう御座います。
--------------------------------------------------------------------------
当メールマガジンでは、ホームページ作成において、必要な知識や、HTML、CSSを
Q＆A形式で学ぶ事が出来ます。
■ スタイルシート編
--------------------------------------------------------------------------
■ マージン
--------------------------------------------------------------------------
CSSでは、要素が生成する範囲をボックス（Box）と言います。
ボックスを構成する領域のひとつであるマージンは、最も外側の領域で、他の
要素との境となる領域になります。
参考URL
http://homepagelecture.web.fc2.com/imasara_html/margin.htm
--------------------------------------------------------------------------
それでは、以下の問いにチャレンジしてみて下さい。
--------------------------------------------------------------------------
Q1
<div>ABCDEFG</div>
<div>HIJKLMN</div>
上記は、2行のテキストをそれぞれ「ひとつのまとまり」として表示しています。
1行目のテキスト（A～G）に「marginプロパティ」を用いて「A～G」と「H～N」の
間に10pxの空白を指定して下さい。
Q2
<img src="red.jpg" alt="" width="100" height="100">
<img src="blue.jpg" alt="" width="100" height="100">
上記は100px×100pxの画像を横に並べて表示しています。
最初の画像（red.jpg）に「marginプロパティ」を用いて「red.jpg」と「blue.jpg」の
間に20pxの空白を指定して下さい。
--------------------------------------------------------------------------
以下、答えになります。
A1
<div style="margin-bottom: 10px;">ABCDEFG</div>
<div>HIJKLMN</div>
A2
<img src="red.jpg" alt="" width="100" height="100" style="margin-right: 20px;">
<img src="blue.jpg" alt="" width="100" height="100">
Q1、Q2の例で、
div{margin-bottom: 10px;}
または、
div.example{margin-bottom: 10px;}
img{margin-right: 20px;}
または、
img.example{margin-right: 20px;}
などのように、head要素や外部スタイルシートにまとめて記述することもできます。
「example」は、任意のclass名です。
参考URL
http://homepagelecture.web.fc2.com/imasara_html/css_selector.htm
今回は以上です。
次回は パディングとボーダー についてQ＆Aを作成する予定です。
お疲れ様でした。
最後までお読み頂き、ありがとう御座います。
本講座は、「いまさらHTML,CSS講座」をベースに作成しています。
先に進みたい方は、以下URLをご参照下さい。
いまさらHTML,CSS講座
http://homepagelecture.web.fc2.com/
RSS
http://homepagelecture.web.fc2.com/index.xml
写真の掲載をメインとしたブログもやってます^ ^
EOS 40D と LUMIX DMC LX3
http://eos40ddmclx3.blogspot.com/
RSS
http://eos40ddmclx3.blogspot.com/rss.xml
Photograph of HCM Pro
http://hcm-pro.blogspot.com/
RSS
http://hcm-pro.blogspot.com/rss.xml
