Own products

  • 新規事業のアイディア創造機

Tutorial

CSS基礎文法最速マスター

この記事の読了時間：約11分56秒

  • このエントリーをはてなブックマークに追加

最近ネット界隈で流行中の「基礎文法最速マスター」シリーズ。

Parlから始まったこのシリーズですが、いまやPHPやRubyをはじめ、JavaScriptからVBA、果てはjQueryに至るまで、かなりの数の言語が「基礎文法最速マスター」シリーズ化されています。

そこでワタクシもどーにか便乗してやろーと画策しまして、得意分野のCSSについてまとめてみたいと思います。

まぁCSSはプログラム言語とは呼びませんが、プログラマさんなんかは結構苦手意識のある方も多いようなので、ちょっとでも参考になればと思いますー。

CSSの基礎

CSSとは

一言で言えば、(X)HTMLでマークアップされたページの見栄えをコントロールするためのものです。

CSSを使う事で、(X)HTML側ではページの内容や構造だけの記述に留める事が出来るので、検索エンジンにも優しく、デザインの変更も容易になる（と言われてますが、実際はそーでもないｗ）

CSSの基礎知識

まずはじめに、(X)HTMLで下記のように書かれたものがあるとします（以下、これを元に解説をしていきます）。

<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>さんぷるさいとだぉ☆</title>
</head>
<body>
	<div id="test_id">
		<h1>見出し１なのです</h1>
		<p class="test_class">
			実は昨晩、激辛チゲを食べまして。
		</p>
		<div>
			<h2>見出し２で御座います</h2>
			<p class="test_class">
				お尻が痛すぎて遅刻しました。
			</p>
			<p class="test_class">
				悪気は無いので許してください。
			</p>
		</div>
	</div>
</body>
</html>

なお、idとは「固有の」という意味で、ひとつの文書中に同じid名が複数出現してはいけません。逆にclassとは「（要素の）種類・分類」というような意味合いなので、ひとつの文書中に同じclass名が複数出現してもOK。

CSSの書き方 ～セレクタ編～

マークアップしたタグや、それらのタグに振られたidやclassを指定して、文字色・高さ・幅・余白・行間などといった「見た目」を設定していきます。

div {
	//見た目の設定を記述
	//この例では、divタグ全てに設定が反映されます。
}

書き方は上記のように、タグやidなどを指定して、波括弧｛｝で設定を囲みます。

これらタグやid名などの「指定する対象」の事を、「セレクタ」と呼びます。

セレクタにidを指定したい場合はid名の前に＃（シャープ）を、同じようにclassの場合はclass名の前に．（ドット）を記述します。

//idで指定する場合
#test_id {
	//見た目の設定を記述
	//この例では、div id="test_id" の部分に設定が反映されます。
}

//classで指定する場合
.test_class {
	//見た目の設定を記述
	//この例では、p class="test_class" の部分に設定が反映されます。
}

タグやclassは同じページ内に複数存在する可能性がありますが、それらを個別に指定したい場合は、親要素から順に指定していく事で対応できます。

この場合、親要素と子要素の間に、半角スペースを置くのがミソです。

//複数存在するセレクタの中から個別に設定したい場合
div#test_id p {
	//見た目の設定を記述
	//この例では、div id="test_id" に内包されている p の部分全てに設定が反映されます。
}

また、違うセレクタに同じ設定を施したい場合には、カンマで区切って列記できます。

//違うセレクタに同じ設定を施したい場合
h1,h2 {
	//見た目の設定を記述
	//この例では、h1 と h2 に設定が反映されます。
}

CSSの書き方 ～プロパティ編～

見た目の設定は、「属性（プロパティとも呼ぶ）：値；」という書き方で、プロパティと値の間に：（コロン）を、行末に；（セミコロン）を記述して設定していきます（正確には「各プロパティの区切りとしてセミコロンを使う」という表現が正しいので、一番最後になる行末にはセミコロン入れなくてもOKです。）。

div {
	color:#ff0000;
	padding-top:10px;
	//この例では、divタグ全ての「文字色」に「#00ff00（緑）」を、さらに「内側の余白（上部）」に「10px」を設定します。
}

div#test_id p {
	margin:10px 0 0 15px;
	//この例では、div id="test_id" に内包されている p の「外側の余白」に「上10px、右0、下0、左15px」を設定します。
}

設定できるコト（プロパティの種類）はたくさんあるので、そこら辺は下記のようなサイトで都度、逆引き的に調べるのが良いかと思います。

CSSプロパティ逆引きサイト：

CSSの応用

デフォルトCSSの初期化

サンプルのhtmlコードをそのままコピペしてブラウザで見てみると、html側では何も指定していないはずなのに、何故かh1やh2の文字が大きく表示されたり、pとpの間に余白があったりします。

これは、実はブラウザ側で初期状態があらかじめ設定されているからなのです。

しかしながら、この「ブラウザ側での初期設定」ってのが非常に厄介で、IEとFirefoxではその「初期状態」が全然違うのです！

この初期設定をリセットしたい場合、世の偉人たちが開発した通称「リセットCSS」という技法を使います。

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}

:focus {
	outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

リセットCSSはこれだけじゃなく、かなりたくさん出回っているんですが、上記CSSは恐らく一番メジャーな「Eric Meyer's Reset」というものです。

他にも有名どころとしては「Yahoo User Interface Reset CSS（YUI Reset CSS）」や「Generic Reset（全称セレクタによる一括初期化）」などがあります。

まぁ用途は全て同じ「ブラウザ側のデフォルトCSS設定の初期化」なので、どれでも気になったものを使えば良いかと。

リセットCSSのまとめ記事：

ブラウザごとのCSS設定

前述の「IEとFirefoxでは初期状態が全然違う」という件をはじめ、IEはCSSの解釈がとってもとってもとってもおかしいです。常軌を逸しています。正気の沙汰で（以下略

もちろんIEだけでなく、他のブラウザもそれぞれリセットCSSだけでは吸収しきれない微妙な違いがあったりして、ブラウザ単位でCSSを変えたいという衝動に駆られたりします。

その場合、PHPなどで動的に切り替えちゃうって手ももちろんアリですが、そこまでしなくてもCSSの記述だけでブラウザ別に対応させることが可能です。

それがいわゆる「CSSハック」ってヤツ。

基本的に、まず分けたくなるのが「IE 対 その他」。さらにIEの中でも「IE6 と IE7 と それ以外」で分ける必要が出てくると思います。

これらのハックに関しては、当ブログの記事「（恐らく）最も簡単な、対IE用CSSハック術」で詳しく書いてありますので、ご参考までにどーぞ。

また、IEだけじゃなく、もっと色々なブラウザ用のハックが知りたいという方は、以下のような記事がオススメです。

CSSハックのまとめ記事：

IE独自のバグと対処策

繰り返しになりますが、IEはCSSの解釈が酷い有様なので、仕様に則った正しいCSSを書いても、ほとんどの場合IEはオリジナリティ溢れる解釈をして、とんでもない表示結果を返してくれます。

それら一つ一つを解説していくのは、それだけで一つのサイトが出来ちゃうほど膨大な量で、ここでは詳しく解説できませんので、下記に「IE独自のバグと修正方法に関する記事」をまとめておきます。

やはり手順としては、まずFirefoxやoperaなどCSSの仕様に準拠したブラウザをベースにCSSを組み立てていって、確認時に忘れずにIEをチェック、挙動がおかしい部分は別途、IE用のハックを使って個別に対処、ってのがスタンダードなんじゃないでしょーか。

IE独自のバグと対処策まとめ記事：

「基礎文法最速マスター」シリーズ

今回のエントリーとは直接関係はありませんが、有用かと思ったので2010年2月4日時点での「基礎文法最速マスター」シリーズを列記して、今回のエントリーを〆たいと思います。

ご清聴、誠にありがとーございましたっ！

「基礎文法最速マスター」シリーズ：

「基礎文法最速マスター」シリーズのまとめ記事：

こーしてみるとかなりシリーズ化されてんだなー。

ネットの伝播力、プライスレス☆

  • このエントリーをはてなブックマークに追加

関連する記事

同じカテゴリーの記事

コメント一覧

2 Responses to [CSS基礎文法最速マスター]

ちく より：

2010/02/04 5:43 PM

;（セミコロン）は正確には文末ではなく各プロパティの区切りに入れます．なので，
div {
color: red
}
や
p {
color: red;
border: 1px solid blue
}
も正しい書き方です．

smkn より：

2010/02/05 12:24 AM

＞ちく さん

ご指摘ありがとーございます！
「行末」って言った方が分かりやすいかと思ったんですが、基礎文法と銘打つ以上、正しい表現をするべきでした。
本文中も修正いたしましたー☆

コメントを投稿する

お名前

ご連絡先メールアドレス※非公開

コメント

CAPTCHA


  • このブログのRSSを購読する
  • このブログをtwitterでつぶやく
  • このブログをFacebookで共有する
  • このブログをはてなブックマークで共有する

Contact

    お名前※必須

    ご連絡先メールアドレス

    お問い合わせ内容※必須

    CAPTCHA

    captcha

    Blog parts

    Affiliate