WEBデザイン、スタイルシート、ホームページテンプレート、デザインテンプレートの無料素材集

SOZAINAVI
sozai-R

@charsetでスタイルシートのエンコード（文字コード）を指定

スタイルシートの記述や、HTML文書のタグなどは、すべて半角英数を用いて記述するということを記憶しておいてくださいね。

HTMLにもEUC-JP、UTF-8、SHIFT-JISといった文字コードがあるように、スタイルシートにも文字のエンコードを指定する必要があります。

HTML文書をEUC-JPで作成するなら、
@charset "euc-jp";
UTF-8で作成するなら、
@charset "utf-8";
SHIFT-JISで作成するなら、
@charset "shift-jis";

このいずれかを、空のstyle.cssファイルの一番最初の行（1行目）に書きます。
" や ; 、半角スペースを忘れないように気をつけてください。

私は、PHPをよく使うので、euc-jp派ですが、一般的によく使われるのは、utf-8、shift-jisです。

HTMLとスタイルシートのエンコ−ドは必ず同じエンコードに合わせてあげてください。HTMLで、

<meta http-equiv="Content-Type" content="text/html; charset=euc-jp" />

と、EUC-JPで書くという宣言をしているのにも関わらず、スタイルシートに、

@charset "utf-8";

と記述してしまうと、スタイルシートの書体を指定するMS Pゴシックこのあたりに文字化けが発生して、自分が意図したデザインが反映されない、もしくは、スタイルシート自体がまったく適用されないといったトラブルの原因になります。

スタイルシートは、こんな感じで書いていきます。
以下を参考にしてくださいね。

@charset "euc-jp";

a {
color: #399;
}

a:hover {
color: #C69;
}
a:visited {
color: #699;
}

body {
font: 14px/1.6 "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
color: #666;
text-align: center;
}

以下省略

私の場合、ホームページ製作ソフトDreamWeaverのデフォルト設定で、文字のエンコードをEUC-JPにしています。

Windows付属のメモ帳ではEUC-JPでの記述ができません。
<meta http-equiv="Content-Type" content="text/html; charset=euc-jp" />
としてHTMLを書いて保存したとしても、いったん閉じたHTMLファイルのソースを見ると文字化けしてしまいます。

メモ帳でHTMLやスタイルシートを書くときは、EUC-JPはやめて、SHIFT-JISか、UTF-8で書くようにしてくださいね。

ページのトップへ

インフォメーション

テンプレートビーでは、
Windows Internet Explorer 6.0：Firefox 3.0.4、Opera9.52、
Macintosh OS 10：Firefox 3.0.4、Safari 3.1.1
にて動作確認を行っております。

紹介しているスタイルシートの中には、一部、特にフォーム系で背景に画像を指定しているものに関しては、こちらが意図したとおりに表示されないものもございます。
なるべく、多くのブラウザに対応できるようにと工夫をしてデザインしておりますが、すべてのブラウザに同じように見せるのはやはり至難の業です。
どうか、その旨、ご了承の上で、ご利用くださいませ。