CSS(スタイルシート)の外部化／ホームページ作成ビギナーズガイド

[PR]

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

CSS(スタイルシート)の外部化

CSS(スタイルシート)を外部ファイル化するメリット

複数ページの見た目を一括で管理できる

例えば、背景画像を変えたいと思ったときに、CSS(スタイルシート)を外部ファイル化している場合は、CSSファイルだけを書き換えれば、全ページの背景画像を一括で変えることができます。そうでない場合は1ページずつ書き換えなければなりません。

SEO(検索エンジン対策)

HTMLファイルをスリム化して、検索エンジンがコンテンツを読み易くします。例えば当サイトのCSSファイルはW3Cのバナーをクリックすると見られますが、こんな大量の記述がhead内にあったら、なかなかコンテンツまでたどり着いてくれないわけです。

転送量を下げることができる

CSSファイルはユーザーのPCにキャッシュされる(一時保存される)ので、同じ外部CSSファイルで複数のHTML文書の見栄えを指定すると転送量を下げることができます。 (→転送量とは)

あるページを見たユーザーが別のページに移動する場合、同じ外部CSSファイルで見栄えを制御していれば、CSSファイルはキャッシュされたものが読まれるので、転送量の削減になります。
(注)キャッシュしないようにブラウザを設定するユーザーもいます。

CSS(スタイルシート)を外部化する手順

CSS(スタイルシート)入門講座5で使ったサンプル5を例に説明します。

CSSファイルの文字コード指定

まずテキストエディタを開き、一番上に次のように書きます。 (おすすめのテキストエディタはこちらで紹介しています→無料ソフト・無料ツール)

@charset "文字コード";

これはCSSファイルの文字コードを示すものです。必須ではないですが、文字化けを回避するために書いておいたほうがいいでしょう。文字コード指定は一行目に書きます。

普通はHTMLファイルと同じ文字コードで保存すればよいでしょう。このサンプルの場合は「UTF-8」ですが、「Shift_JIS」「euc-jp」「iso-2022-jp」など、必要に応じて書き替えて下さい。

スタイルシートの記述

次に、headタグ内のスタイルシートの記述を全部切り取って、文字コード以下の部分に貼り付けます。

<head>
（省略）
<style type="text/css">
<!--

body {
font-size:95%;
font-family:verdana, sans-serif;
}
（省略）
.block {
margin-left:20px;
}

-->
</style>
</head>

このサンプルでは切り取り＆貼り付けでやっていますが、実際はCSSファイルに直接スタイルシートの内容を書いていけばいいです。

拡張子を「.css」にして保存

ファイル名の末尾を「.css」にして、つまり拡張子を「.css」にして、保存します。ここでは「samplecss.css」という名前で保存しました。

CSSファイルの記述内容をテキストファイルにしたサンプルがこちら →CSSサンプル(このテキストファイルの文字コードはShift_JISにしてあります)

head内に残った部分は削除します。

<head>
（省略）

</head>

CSSファイルをアップロード

保存したcssファイル(ここではsamplecss.css)をアップロードします。ここではアップロードしたCSSファイルのURLは「http://blog.cnobi.jp/v1/blog/user/1943da0542557188190b5078643da695/1161727975」になりました。

head内で外部スタイルシートを指定

head部分に次のように書き加えます。

<head>
（省略）

</head>

以上です。できたページがこちら→サンプルページ
サンプルページ5と見た目は変わりませんが、head内に<style type="text/css">～</style>でたくさん書かれていたものが、<link～rel="stylesheet">の一行になっています。

CSS(スタイルシート)入門講座

CSS(スタイルシート)レイアウト:2カラム 1｜HOME｜CSS(スタイルシート)入門講座5

お名前(N)
タイトル(T)
メールアドレス(M)
URL(U)
コメント(C)	コメントをどうぞ。
パスワード(P)
送信(S)

トラックバック