はじめてのCSS:やさしさいっぱいのCSSが肌にしみこむ!カモ。

基礎知識:CSSはどこに書く?

トモ・リーン
さて!
いよいよ・・・
トモ・リーン
コーディングに入る前に・・・
ケンジ
ズコーーーーーーっ!
ケンジ
って、まだ組まないのかよっ!!
トモ・リーン
うぷぷ。
CSSってどこに書くのか知ってる?
ケンジ
俺は外づけしてるぜ!
トモ・リーン
そうね。
それが一番効率がいいわ。
ケンジ
他にもこんなやり方があるわよ。
外付け

複数のHTMLファイルから参照できるので、複数のページで同じスタイルを利用したいときに便利。

実際のやり方
HTMLのhead部分 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja">
<head>
<title>CSS外付けサンプル</title>
<link href="CSSファイルまでのパス/CSSファイル名.css" rel="stylesheet" type="text/css" />
</head>
<body>
・・・
「CSSファイルまでのパス/CSSファイル名.css」にあるCSSファイル @charset "utf-8";
/* ふつうにスタイルを書いていってください */
.sample {
float:left;
margin: 0 12px;
}
インポート

CSSファイルを別のCSSファイルに読み込む。CSSファイルが多数あるものを1つにまとめたり出来る。

実際のやり方
HTMLのhead部分 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja">
<head>
<title>CSSインポートサンプル</title>
<link href="CSSファイルまでのパス/CSSファイル名.css" rel="stylesheet" type="text/css" />
</head>
<body>
・・・
「CSSファイルまでのパス/CSSファイル名.css」にあるCSSファイル @charset "utf-8";
/* リンクしたいファイルまでのパスを書きます。ファイルへのリンクは複数書けます */
@import "リンクしたいCSSファイルまでのパス/CSSファイル名.css";
@import "リンクしたいCSSファイルまでのパス/CSSファイル名_その2.css";
リンクしたいCSSファイルまでのパス/CSSファイル名.css @charset "utf-8";
/* ふつうにスタイルを書いていってください */
.sample {
float:left;
margin: 0 12px;
}
以下のコメントを利用したブラウザ別のCSS読み込み制御(win IEのみ可)が出来ないので、気をつけよう。 <!--[if lte IE 6]><link href="CSSファイルまでのパス/CSSファイル名.css" rel="stylesheet" type="text/css" /><![endif]-->
または
<!--[if lte IE 7]><link href="CSSファイルまでのパス/CSSファイル名.css" rel="stylesheet" type="text/css" /><![endif]-->
直書き

HTMLのheadタグ内に直接書き込む。非常にお手軽。

実際のやり方
HTMLのhead部分 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja">
<head>
<title>CSS直書きサンプル</title>
<style type="text/css">
<!--
.sample {
float:left;
margin: 0 12px;
}
-->
</style>

</head>
<body>
・・・
書き込まれたHTMLしか参照できない。また、たくさん書くとSEO的にも良くない。職業コーダーの人はよっぽどの事情が無い限りこの方法は使わない方がいいですよ。
ケンジ
うぐっ・・・・・・。
で、トモ・リーンはどの方法を使ってるの?
トモ・リーン
私は外付けね。
インポートはしてないわね。
どのCSSが付いているのかパッと見で分かりやすいから。
ケンジ
直書きは論外として、インポートはどんなときに使ったらいいかな?
トモ・リーン
headタグ内のCSSのリンクを減らしたい人向きね。
トモ・リーン
直書き以外の方法なら、どれでもいいけど、サイト内で揃えておくと管理がしやすいわよ。
今回のポイント!
CSSはHTMLにリンクさせて外部ファイルにしよう!