« 薔薇はそう呼ばれずとも、香りを放っている | メイン | Link »

2004年9月17日

CSSのお勉強（その2）

　というわけで「CSS1 Reference（初めてのホームページ講座）」を読んでいきます。参考として「とほほのスタイルシート入門」「The Web KANZAKI」なども読んでいきます。
　前回と同じようにノートを取りましょう。

--
■HTMLへの組み込み方法

CSSのHTMLへの組み込み方法は以下の4通りである。

1.HTMLのLINK要素から外部CSSファイルを読み込む
<link rel="stylesheet" href="../cc_txt.css" type="text/css">

2.@importを用いる
<style type="text/css">
@import url(http://www9.plala.or.jp/cc_text.css);
</style>

3.HTMLのSTYLE要素で直接記述
<STYLE Type="text/css">
<!--
H1{color:#ff0000;}
-->
</STYLE>

4.HTML要素のStyle属性を用いる方法
<p style="color:red;">赤い段落</p>

CSSの目的である「HTMLと見た目の定義の分離」「HTML文書の保守管理の手間を低減」という視点からすると、若い順に利用するべきである。なお、2の方法はIE3.0 では未サポートで、Netscape 4.0 ではブラウザがフリーズするという。当サイトでは、この2種のブラウザはターゲットブラウザから外されているので、問題にはならないが。


■ボックス

　CSSでは余白などの考え方に、ボックスなる概念ものが採用されている。文字通りボックス（四角）で、いくつかの四角が入れ子構造になっていると考えると理解しやすい。一番外側のボックスから名称を挙げていく。

・マージン(margin)
　ブサウザの表示エリアの一番外側。margin : 50pxと設定すると、表示エリアの一番端から上下左右50px内側までがマージンということになる。

・ボーダー(border)
マージンとパディングの間の枠線。当然ながら太さは可変。

・パディング(padding)
　ボーダーの内側で、その中に含まれるテキストとの間の余白を示す。

・幅(width -> その他)
　各ボックスの幅と、内容の幅（テキストなど）の２種類がある。
--

　ここまでわかっていれば、簡単なレイアウトは可能です。そこで以前作ったデザインを簡単に再現してみると、こんな感じになります。なお、今回は別ファイルをつくるのは面倒なので、組み込みの方法として上記の3を使用しました。

　利用したプロパティは以下のとおりです。
・margin
・margin-top
・background-color
・width
・height
・border
・text-align
・font-size
・color
　たいしたレイアウトとはいえませんが、それでも、これだけのプロパティで実現できてしまうのですからCSSとはたいしたものです。　

投稿者 黒川鍵司 : 2004年9月17日 15:39

トラックバック

このエントリーのトラックバックURL:
http://www.ashrization.com/x/admin/mt-tb.cgi/21

コメント