独立した外部.CSSファイルを作る方法

外部に独立したCSSファイルを作って「呼び出す」

HTMLファイルを軽くする為に、外に出せるものは全部出してしまいましょう。
HTMLの他にcss専用ファイルを作成して、cssだけを書いておき、HTMLとリンクさせる方法を使えば、さらにHTMLがスッキリします!

まず、フォルダ内の、index.htmlと同じ場所(同じ階層)に「style.css」という名前のファイルを作成します。
(メモ帳などのエディタを開き、保存場所を選んで、style.cssという名前で保存すればOK)

前回の文字やレイアウトをCSS化する理由と同じ例だと下記のようになります。
@charset "shift_jis";

.red {
font-weight:bold; /*太字*/
color:#ff0000; /*赤色*/
font-size:1.5em; /*文字サイズ1.5倍*/
text-align:center; /*中央寄せ*/;

となります。
外部CSSの場合は、CSSだけを書くので<style type=”text/css”>という宣言文は不要です。
代わりにCSS用の文字コード宣言を書きます。

CSSファイル内の文字が半角英数だけの場合は、文字コード宣言があってもなくても、違いが分からないかもしれませんが、コメント部分やフォント指定で日本語を使っていたりしますが、外部CSSが上手く読み込めない場合には文字コード指定が書かれていないだけという事も。

W3Cでも決められている仕様なので忘れずに書いておくようにしましょう。

CSSの文字コード指定は、CSSファイルの一番初めの行に下記のいずれか1つを追加すればOK。

@charset "shift_jis"; /*文字コードがShift_JISの場合*/
@charset "euc-jp"; /*文字コードがEUC-JPの場合*/
@charset "utf-8"; /*文字コードがutf-8の場合*/

ウィンドウズのテキストエディタ(メモ帳など)で文字を書いて保存するとShift_JIS(シフト ジス)になっているかと思いますが、このように、作成して保存するときに「文字コード」は大抵、自動的に設定されています。

詳しく書くとややこしくなるので書きませんが、
CGIファイルなどはEUCが多かったりします。
最近はUTF-8も増えてます。

ダウンロードしたテンプレートやCGIファイルなどを開く場合に、文字コードが違って文字化けする事が多いので、メモ帳ではなくもう少し高性能なテキストエディタを使用する事をおススメします。

スポンサーリンク
HTML・CSS
yui

趣味が高じてフリーランスWEBデザイナーになり早10年。2児の母
ホームページ作りの楽しさと、作ったHPから申込・問合せがどんどん入ってくる楽しさを共感できる人を増やしたくてコツなどを発信しています。

フォローする
速度&安定性が人気のレンタルサーバー
国内最速!『ConoHa WING』
ConoHa WING

初期費用無料最低利用期間無し(日割りOK)、独自SSL無料。

高速・高機能・高安定性はもちろん、分かりやすい管理画面なので初心者でも使いやすい。

「WordPressかんたん移行」機能で他サーバーからの引越しも楽々!特にwordpressの表示が重くて困っている方にオススメのレンタルサーバーです。

高速&初心者でも安心『エックスサーバー』

初心者でも安心の電話サポート付きの高速サーバー。独自SSLも無料。

安定性とセキュリティ対応の早さは特筆!国内高速バックボーンと、独自の高速化機能でwordpressもサクサク動きます。

WordPress簡単インストールや、他サーバーから簡単に引越せる「WordPress簡単移行」、自動バックアップなど全部揃っています。

カゴヤのレンタルサーバー

堅実・安心、サポート力で人気があるサーバーです。高速環境のほか、自社所有のデータセンターで管理・運営されているほか、wordpress専用サーバーなどニーズに併せたプランが豊富なところも魅力。

ホームページの作り方
タイトルとURLをコピーしました