- 2008-08-15 (金) 23:28
- XHTML+CSS
CSSはHTMLないし、XHTMLでマークアップした文書をビジュアル的に装飾するマークアップ言語です。
HTMLはこれまでbgcolorやfont要素で見た目を制御する属性・要素がありましたが、XHTMLではこれらの要素・属性はすべて非推奨とされています。（ただしTrasitionalでは一部適用されるものもあります）
CSS
を導入するメリットは色々ありますが、なんと言ってもピクセル単位でレイアウトやフォントのサイズが細かく指定出来る所だと思います。しかも最新バージョ
ンのCSS3では今までJavascriptで制御していた動きを制御出来るプロパティも追加されているので、更に表現の幅が広がります。
CSS3はまだ一部のブラウザではサポートされていないので、今回は一般的に普及しているCSS2.1の基本的あ特徴をご紹介したいと思います。
CSSを適用する手段は全部で3種類あります。
まずは一般的に使われているインラインで指定する部分的な適用方法です。
使い方は簡単で、たとえばp要素で囲まれた部分のテキストを#ff0000の赤文字にしたいとします。
そうするとソースは以下の感じになります。
<p style=”color:#ff0000;”>Sed ut perspiciatis unde omnis iste natus error sit voluptatem
accusantium doloremque laudantium, totam rem aperiam, eaq </p>
この青色の文字部分が指定している属性になります。style属性はCSSを指定する属性になります。
このように、style属性を使う事によって部分的に適用する事が可能です。
また、もう一つの例としてp要素のなかの最も強調したい部分を#000の黒文字にしたいときは以下のようになります。
<p style=”color:#ff0000;”>Sed ut perspiciatis unde <strong style=”color:#000;”>omnis iste natus error</strong> sit voluptatem
accusantium doloremque laudantium, totam rem aperiam, eaq </p>
strong要素は強調という意味を持っていますので、その強調要素にstyle属性でcolor:#000;と指定する事で、strong要素で囲まれた部分だけ黒色で表示されます。
次はhtmlのhead要素内に指定する方法です。
これはhtmlの文書には必ずhead要素にhtmlのmeta情報やlink指定をする部分にstyle要素を書き加え、その中でCSSを指定する方法になります。では例文として。。。
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″ />
<meta http-equiv=”content-style-type” content=”text/css” />
<title>DEMO PAGE</title>
<style type=”text/css”>
p{
font-size:75%;
color:#333;
line-height:1.5em;
}
strong{
color:#ff0000;
}
</style>
</head>
<body>
<p>The quick, brown fox jumps over a lazy dog.
<strong>DJs flock by when MTV ax quiz prog.</strong> Junk
MTV quiz graced by fox whelps. Bawds jog, flick quartz, vex nymphs.
Waltz, bad nymph, for quick jigs vex! Fox nymph </p>
</body>
</html>
という感じです。
これはp要素はフォントサイズ75%、文字色はダークグレー、行間は1.5行分。そしてstrong要素は文字色を赤として指定してます。すると、こんな感じでレンダリングされると思います。
The quick, brown fox jumps over a
lazy dog. DJs flock by when MTV ax quiz
prog. Junk MTV quiz graced by fox whelps. Bawds jog,
flick quartz, vex nymphs. Waltz, bad nymph, for quick jigs vex! Fox
nymph
ここでCSSの文法を説明しておきます。上の例文の<style>で囲まれた所に注目して下さい。
<style type=”text/css”>
p{
font-size:75%;
color:#333;
line-height:1.5em;
}
strong{
color:#ff0000;
}
</style>
分かり易く文字色を変えてみました。この部分に注目して下さい。
オレンジ色の部分に要素が書かれている部分があります。これをCSSではセレクタ、緑色の部分をプロパティ、紫色の部分を値と呼びます。
セレクタにはhtml要素または任意で付けたid属性の値やclass属性の値を付ける事が出来ます。
そしてプロパティですが、これはかならず{}（中カッコ）で囲むのがCSSの文法で決められています。
そ
してプロパティと値の間には必ず:（コロン）を入れ、値の後ろには必ず;（セミコロン）でプロパティの指定を区切ります。これは全てCSSの文法で決めら
れている事で、省略する事は出来ません。これが書いていなかったりすると文法エラーになり、思った通りのレンダリングが出来ません。
CSSのやり始めはこう言った初歩的な文法エラーによるレンダリングの不具合に陥りがちです。ですから、書くときは文法を踏まえて、丁寧に書く事が大切です。
では次に行きます。
次は外部スタイルシートファイルを読み込んで適用する方法です。
外部ファイルを読み込む方法はいくつかあるみたいですが、ここでは一般的に使われている手段を紹介したいと思います。まずは例文を。
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″ />
<meta http-equiv=”content-style-type” content=”text/css” />
<title>DEMO DOCUMENT</title>
<link type=”text/css” rel=”stylesheet” href=”style.css” media=”print,screen,tv” />
</head>
<body>
<p>this document is <strong>demonstration page</strong></p>
</body>
</html>
赤文字部分が外部スタイルシートのして部分になります。外部スタイルシートはlink要素で指定します。
type
属性でリンクしている文書がCSSである事を定義し、rel属性でこのlink要素がstylesheetの指定である事を定義します。そしてhref属
性でリンク先CSSファイルの指定をしまして、更にCSSを適用させる媒体をmedia属性で定義します。適用媒体の指定は複数ある場合は,（カンマ）で
区切ります。上のサンプルではscreen（PCのモニタ）とprint（印刷）とtv（テレビのブラウザ）を指定しています。
では、外部スタイルシートの内部を見てみましょう。
@charset “utf-8″;
p{
font-size:75%;
color:#333;
line-height:1.5em;
}
strong{
color:#ff0000;
}
えー、「さっきのサンプルの使い回しかよ！」って石とか投げないで下さい(；´Д｀)
p要素のセレクタから下は先ほどのサンプルと何ら変わりないので、説明は省きますが、ここで注目してもらいたいのは一番上の「@charset “utf-8″;」というところです。
これは＠charsetルールというCSSファイルの文字コードを指定する構文です。
指
定しなくても大丈夫ですが、指定しておくとfont-familyプロパティで日本語のフォント指定をした際、文字コード宣言が無いとブラウザに寄っては
間違った解釈をしてしまい、思い通りのレンダリングにならない場合があります。また、コメントアウトで「ここからかこの部分の指定」というように後で見て
も分かり易いようにメモ書きすることがありますが、このときも、このメモ書きに日本語が入っていると文字コード宣言が無い場合、次に開いた時文字化けして
しまうことがあります。以上の理由からやはり文字コード宣言はしておくに越した事はないのです。
話が若干それますが、HTMLないし、
XHTMLにも言える事ですが、文書には文字コードがあります。文字コードは通常保存する際に指定して保存しますが、安価なエディタソフトだと指定して保
存する事が出来ません。ホームページを初めて作成する時、普通の方はまずWindowsならメモ帳、Macの場合はSimpleTextまたは
TextEditで作成するかも知れませんがこれらのエディタソフトは、文字コードを指定して保存する事が出来ません。ですので、（X）HTMLやCSS
を書く場合は文字コードを指定して保存出来るエディタソフトを使う事をオススメします。
「そんなエディタソフトあるんかいな？」という方の為に、フリーウェアで使えるエディタソフトを少しご紹介しておきます。参考までに使ってみて下さい。
Windows
TeraPad
フリーで使える高機能なエディタソフト。HTMLやCSSだけでなくPHPやCGIも開発出来る優れもの。http://www5f.biglobe.ne.jp/~t-susumu/library/tpad.html
Mac
mi（みみかきエディット）
フリーで使える高機能エディタソフト。こちらもHTMLやCSSだけでなくPHP・Perl・CGI・Rubyその他もろもろのプログラムも編集出来るものすごく太っ腹な優れもの。プラグインも充実しているので自分好みにカスタマイズ出来るのも魅力の一つ。
http://www.mimikaki.net/
全然、余談ですがこんな高機能なソフトをフリーで使えるなんて…本当に有り難い話です。太っ腹すぎて逆に恐縮です。ほんと開発者さんには頭の下がる思いです。へへーっorz
また、補足というか一番大事なポイントですが、(X)HTMLやCSSを作成して保存する場合、必ず、文書内で指定した文字コードと同じ文字コードを指定して保存する事を忘れないで下さい。
これをやらかすとブラウザで開いても真っ白で何も表示されないとかいう事態になりますので、その辺よく覚えておいて下さい。（私もつい最近このミスをやらかして一人で大騒ぎしていました…）
文字コードの話はまた別の機会に詳しく書きたいと思います。
ひとまず今回はここまでにします。
CSSは結構奥が深いので、一気に覚えようと思うとなかなか大変ですが、整頓されて行く様を見ていると楽しくなって非常に面白いです。HTMLとは違いかなり自由度の高いレイアウトも可能になるので、表現の幅が広がるのが、デザイナー的には嬉しい所ですね。
- Newer: 日本語のダミーテキストの配布サイト
- Older: XHTMLの基本構造のサンプル
Comments:0
Trackbacks:0
- Trackback URL for this entry
- http://wd.kkws.org/archives/8/trackback
- Listed below are links to weblogs that reference
- CSSの基本仕様 from KANZAKI KAINE WEBSITE - WD