初めてHTMLコーディングでCSS(Cascading Style Sheets)というものを知った時「何ぞ？」と思ったものです。
文字の大きさとか指定できるのはまあ分かります。
「スタイルを外部に記述して読み込む・・・」ピンときませんでしたね。
スタイル記述の方法はいくつかありますのでご紹介。
目次
まずはスタイルの基本的な書き方の説明
記述にはルールが有ります。
スタイル
- idとclassという属性名をつけてスタイルパターンを作成する。
- 親>子>孫という入れ子の指定ができる。（例 pタグの中のspanは赤文字！とか
- ,で区切ることで複数指定できる（例 a,p,spanと書く
CSS記述のサンプル
/* ←コメント開始
上下に書いているようにスラッシュ＋アスタリスクでコメントが記述できる。
スタイルは記述順が重要で、重複しているプロパティがある場合は後に記述したものほど優先される。
また属性名を書くなど詳細に指定しているほど優先され、先に書いていても優先される場合もあります。
p => セレクタ
#wrap , .bold => 属性名
コメント終わり→ */
/*--------------------
ID属性の記述
--------------------*/
#wrap{ /* id属性は#を頭に付ける */
width:500px;
margin:0 auto;
}
/*--------------------
CLASS属性の記述
--------------------*/
.bold, /* ,を挟むことで複数の属性を一括指定 */
.red{
font-size:14px;
}
.bold{ /* class属性は.を頭に付ける */
font-weight:bold;
}
.red{
color:red;
}
/*--------------------
入れ子の記述方法。数パターンあります。
--------------------*/
body p{ /* 半角を挟むことで「※※の中の※※は〜」と指定 */
font-size:10px;
}
body p span{
font-weight:bold;
}
body > p{ /* >を挟むことで「※※の子の※※は〜」と指定できる。 */
background:#fff;
}
body > div p.tx{ /* このように記述するとbody直下のdivのp.txとなる */
font-size:10px;
}
body > p.tx{ /* この場合だとbody直下のp.txとなるので上記p.txへは影響ない */
font-size:14px;
}
/*--------------------
擬似セレクタ ※IE8以前は使えないものが多い
--------------------*/
a:hover{ /* マウスカーソルが上に来た時の処理 */
color:blue;
}
HTMLの側サンプル
<div id="wrap"> <p id="text"><span class="bold red">クラス名は半角開けると複数指定できます。</span></p> </div>
今では当たり前のCSSを使い、外部ファイルにスタイルを記述する方法
HTMLファイル内に書いていたスタイルを外部ファイルに書いて他ページで使いまわせるように生み出されたもの。
※※※.cssという拡張子のファイル。HTMLファイルと同じ文字コードにする、もしくはCSS内の冒頭に文字コード宣言をする必要がある。
HTMLの<head>内で読み込みを宣言。
また、複数読み込む場合は属性順番を揃えることで高速化できる。<rel=”” href=”” type=””>←これ
順番に決まりはない。
CSSの特徴
- IDとCLASSという属性名を付けることができ、スタイルのパターンが作れる。
- 同じCSSを読み込んでいればレイアウトの変更が全ページに反映される。
- 読み込まれたCSSはブラウザにキャッシュされ、同じCSSを利用しているページが高速化される。
CSSの外部読み込み用のタグ
<link rel="stylesheet" href="common/css/basic.css" type="text/css" media="all">
HTMLファイル内に記述する方法
HTMLファイルへもスタイルシートと同じような記述ができます。
ですがこの場合はキャッシュされません。
しかしスタイルシートに記述するほどでもない場合は非常に有効です。
（例 ブログのとある記事だけとか
特徴
どこにでも記述できる。<head>内に書くのが多い。
ブラウザにキャッシュされない。
HTMLファイル内への記述サンプル
<!-- コメントアウトで囲っているのはIEバグ回避のためです。 -->
<html>
<head>
<meta charset="utf-8">
<title>HTMLサンプル</title>
<style>
<!--
#wrap{
background:red;
}
p{
font-size:14px;
}
-->
</style>
</head>
<body>
<div id="wrap">
<p>こんにちわ！</p>
</div>
</body>
</html>
タグに直接記述する方法
HTMLファイルのタグへ直接書くことができます。
こちらはお勧め出来ません。理由としてはメンテナンス性が格段に落ちます。
また他の方が作業する場合に気づかれない事が多く、無駄に時間が取られます。
ただ作業中の検証としては非常に素早くできるので有効です。消すのを忘れずに。
javascriptなど動的な処理を行うスクリプトを入れていた場合、この直接記述が多いです。
<html> <head> <meta charset="utf-8"> <title>HTMLサンプル</title> </head> <body> <div id="wrap" style="background:red;"> <p style="font-size:14px;">こんにちわ！</p> </div> </body> </html>
最後に
スタイル記述は複数の方法があることがお分かりでしょうか。
基本的にはスタイルシートを作って読み込むのがベターです。他の人が見てもどこを変えればいいのかすぐに分かりますからね。
ここで紹介しきれないくらいスタイルの記述は細かく色々あります。
擬似セレクタを使うことで条件分岐ができたり、アニメーションをつけれたり・・・ハックなんてものもありますね。
後は直接セレクタ（pとか）を記述するよりclass属性をつけたほうがブラウザの処理が高速化するとかあります。
※pとかだけだとページ内のp全てを一度探してからとなるようです。
バージョンによって使えないものもあったりと覚えるのは大変です。
多分全部覚えている人はいないのでいつでも引き出せるものを作っておくといいと思います。
