CSS（スタイルシート）の外部ファイル化についての説明

3910GO-ブログカスタマイズ
3910GO-ブログカスタマイズ　＞　 CSSリファレンス ＞　CSS（スタイルシート）の外部ファイル化

CSS（スタイルシート）の外部ファイル化

スタイルシートを知るためにまずは、スタイルシートの外部ファイル化の仕組みを説明させて頂こうと思います。

最近は、スタイルシートを外部ファイル化してそこからスタイルを呼び出すという方法が多く用いられ、ほとんどのブログサービスでもこの方法が使われています。

私もスタイルシートは外部ファイルにしているので、当サイトでの説明も外部ファイル化したスタイルシートの使い方になっています。

基本的にブログサービスに関しましては、既にHTMLのヘッダーにスタイルシートを外部ファイル化する記述がありますので、それについてカスタマイズする必要は特にないのですが、一応、どういった仕組みになっているかということだけ説明させて頂こうと思います。

まずはこちらのHTMLのヘッダーの例文をご覧下さい。

<?xml version="1.0" encoding="utf-8"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

<head>

<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>ページのタイトル</title>
<link rel="stylesheet" href="外部スタイルシートのURL.css" type="text/css" />
<link rel="alternate" type="application/rss+xml" title="RSS" href="RSSのURL.xml" />

</head>

<body>

ここが実際に視覚的に出力される記述

</body>

</html>

これはMARUTA（マルタ）ブログのHTMLソースを簡素化したものですが、このHTMLの<head>～</head>内に注目して下さい。

すると

<link rel="stylesheet" href="外部スタイルシートのURL.css" type="text/css" />

という記述があるのがわかると思います。

これがスタイルシートを外部ファイル化する記述で、ほとんどのブログサービスのHTMLテンプレートにこの記述があることが確認して頂けると思います。（※全てのブログサービスが外部ファイル化しているテンプレートを使っているとは限りません。）

このタグの『外部スタイルシートのURL.css』という部分に記載されているURLが、実際にスタイルシートが置かれているURLで、ここにあるスタイルシートを書き換えるだけで、簡単にデザインの変更が行なえるという優れた面を持っています。（※無料ブログサービスを利用している場合は、管理画面のテンプレート編集でCSS（スタイルシート）を書き換えるだけで自動的にこちらのスタイルシートが書き換わります。）

ブログサービスを使っていない方の為に一応、外部ファイル化の方法を簡単にまとめておきます。

  1. 作成したスタイルシートを.cssとういう拡張子で保存し、そのファイルをサーバーにアップロードする。
  2. そのスタイルを呼び出したいページのHTMLの<head>～</head>内に　<link rel="stylesheet" href="外部スタイルシートのURL.css" type="text/css" />　をコピペする。
  3. コピペしたタグの『外部スタイルシートのURL.css』という部分を自分がアップロードしたスタイルシートのURLに書き換える。

これで外部にあるスタイルを呼び出すことができます。（※無料ブログをお使いの方は、始めからHTMLのヘッダーにこの記述がありますので特にカスタマイズは不要です。）

後は、HTMLと外部スタイルシートを関連付けるようにHTMLとCSSの記述を書き直せばデザインの変更が行なえるので、続いてはそれについての説明をさせて頂きます。



ソーシャルボタン


ここは■002：CSS（スタイルシート）の外部ファイル化

■001：CSS（スタイルシート）とは？　 ■002：CSS（スタイルシート）の外部ファイル化　 ■003：CSS（スタイルシート）の使い方　 ■004：CSS（スタイルシート）の書き方　 ■005：必要最低限のCSS属性辞典　 ■006：デザインを崩さない為にCSSをチェック　



カテゴリ

CSSリファレンス



3910GO　＞　3910GO-ブログカスタマイズ

Copyright　(C)　2008-2015　3910GO.　All rights reserved.