Blog.Ks-Product.com

初音ミクの消失PV(特別編集版)が初音ミクVISION(DVD)に収録されます!詳しくはこちら! 設定不要!プリロード機能付きロールオーバープラグイン jquery.automaticRollover 有名動画サイトの動画の埋め込みが簡単に行える! jquery.createvideo

CSS講座 step:002 読み込み方と記述方法

 

CSSを使うにはいくつか方法があるのですが、外部ファイルとして扱う方法が一番です。

なぜ外部ファイルとして扱うのが一番かというと、複数のHTMLファイルで一つのスタイルシートを共有できるからです。

スタイルシートを共有すると、一つのスタイルシートを変更するだけで、読み込み元のHTMLファイル全てのデザインの変更できるので、数十、数百ページある大規模なサイトなどでは、その効果が実感できるかと思います。また、CSSファイルがキャッシュに残るので同じスタイルを何度も読み込む手間が省けます。

外部スタイルシートを読み込むにはHTMLの<head></head>内に以下のタグを埋め込むだけです。

<link rel="stylesheet" type="text/css" href="css/sample.css" />


この一行だけで完了です。
ちなみにこれは「css」フォルダ内の[sample.css]ファイルを読み込む場合です。

これだけでは読み込めたか分からないので、実際にスタイルを指定してみます。CSSファイルに下記のコードを書き込んでみてください。


@charset "shift_jis";

body{
     background-color:#0000FF;
}

背景が青くなっていれば読み込み成功です。

@charset "shift_jis";」は必ず1行目に書きます。これは使用する文字コードを宣言するもので、これを指定せずに日本語を使用すると、文字化けが起こるので注意!!
ちなみに「body{background-color:#0000FF;}」はbody要素に背景色を指定しています。

次回は、スタイルシート構文についてです。(おそらく。

コメント(0)

コメントが存在しません。

コメントを投稿する

※投稿されたコメントは管理人が承認するまで反映されません。
またHTMLタグはご利用できません。コメント上にHTMLタグを表示させたい場合は全角でご入力ください。

お名前
URL
コメント
名前:
kakeru ( twitter
職業:
フロントエンドエンジニア
生年月日:
1983年4月19日

HTML、CSS、JavaScript、ActionScript、デザイン、映像制作(After Effects、CINEMA 4D)で遊んでます。
最近はjQueryを使ったプログラミングに色んな意味ではまってます。ライブラリ作ってます。

好きなK-POPはf(x)、Brown eyed girls、4minute、B2ST、2PM、KARA、SNSD、Sunny hillということで、K-POPの話題を中心に発信中!

お問い合わせはこちらからどうぞ。
kakeru[at]ks-product.com
([at]を@に置き換えてください)