螺旋デザイン｜はじめてのCSS　基礎知識：CSSはどこに書く？

基礎知識：CSSはどこに書く？

2008/04/07 10:46

複数の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のみ可）が出来ないので、気をつけよう。  または

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">  </style> </head> <body> ・・・ 書き込まれたHTMLしか参照できない。また、たくさん書くとSEO的にも良くない。職業コーダーの人はよっぽどの事情が無い限りこの方法は使わない方がいいですよ。