MB-Support

パソコン初心者のサポートページ

外部 CSS を読み込んで、class や id でスタイルを適用する方法

 それが正当。それが基本。そんな事より、重複する記述を減らして、ホームページの更新が楽になる事を念頭に、それまでスタイルを HTML に埋め込んでいたやり方から、外部 CSS へと変更する流れを掲載します。


前回は HTML ファイルにスタイルとデザインに関する宣言をタグに埋め込んでみました。 今回は、これらのタグに埋め込まれた宣言を抽出して、それぞれに名前を付けます。名前を付ける理由は、好きな時に簡単に宣言を適用させるためです。



HTMLソース(メモ帳)

<html>
<head>
<title>題名</title>
</head>
<body>
<p style="background-image:url('画像のアドレス');
background-repeat:no-repeat;background-position:0px;
width:48px;height:55px;float:left;margin-top:0px;
margin-right:20px;margin-bottom:20px;margin-left:0px;"></p>
<p style="text-indent:10px;">
そろそろ暑い夏も終わりか?今年の夏も暑かったですね。
ホームズ先生も夏バテです。
トラの敷物ポーズ。この日記を書いた時は暑かったのですが、ここ数日、雨続き、
しかも、肌寒いとすら感じます。気温は21度。つい先日は30度を超えていたので、
うさぎも体をこわすかも・・
</p>
<br clear="all" />
<p style="float:right;margin-top:0px;margin-right:0px;
margin-bottom:20px;margin-left:20px;">
<img src="画像のアドレス" width="100" height="104" /></p>
<p style="text-indent:10px;">
MB-Support で「ホームページの作り方」を掲載しているページは、
サブサイトと呼んでいるよ。他には、「ワトソンのパソコン教室」や、
「ホームズ備忘録」などがサブサイトに当たります。
「ホームページの作り方」のアイコンは、右のビッグベンです。
特に意味は無いんだよ。
</p>
<br clear="all" />
</body>
</html>

ブラウザ


ページで利用するスタイルをまとめると、左に表示させる管理人の画像、画像を右に寄せて文章を回り込ませるスタイル、文章の先頭にインデントを付けるスタイルの3つになります。 ここでは、管理人の画像に「owner」、画像の右寄せに「picright」、インデントに「in」と名前を付ける事にしました。

.owner	{
	background-image:url("画像アドレス");
	background-repeat:no-repeat;
	background-position:0px;
	width:48px;
	height:55px;
	float:left;
	margin-top:0px;
	margin-right:20px;
	margin-bottom:20px;
	margin-left:0px;
} 

上は、タグに style で埋め込んだ宣言を、自分で付けた名前「ownerの前に「.(ドット)」を付けて、全て書き出したものに過ぎません。 名前の前にドットをつけるので、これは class を作成した事になります。管理人の画像はページの先頭に1度だけ表示するのが絶対であるならば、ドットではなく「#(シャープ)」を付けて id としても良いでしょう。 しかし、何度も利用する可能性が少しでもあるのなら、class を作成するべきです。

また、前回説明した様に、margin の値は1行にまとめる事ができます。上のスタイルでまとめると、以下になります。

.owner	{
	background-image:url("画像アドレス");
	background-repeat:no-repeat;
	background-position:0px;
	width:48px;
	height:55px;
	float:left;
	margin-top:0px 20px 20px 0px;
}

次は画像を右に寄せにして、文章を回り込ませるクラスを作成します。

.picright	{
	float:right;
	margin-top:0px 0px 20px 20px;
}

最後はインデントです。

.in	{
	text-indent:10px;
}

これでHTMLからスタイルに関する記述を抽出する事ができました。 それでは、元のHTMLから、スタイルに関する記述を除去してみましょう。


HTMLソース(メモ帳)

<html>
<head>
<title>題名</title>
</head>
<body>
<p></p>
<p>
そろそろ暑い夏も終わりか?今年の夏も暑かったですね。
ホームズ先生も夏バテです。
トラの敷物ポーズ。この日記を書いた時は暑かったのですが、ここ数日、雨続き、
しかも、肌寒いとすら感じます。気温は21度。つい先日は30度を超えていたので、
うさぎも体をこわすかも・・
</p>
<br clear="all" />
<p>
<img src="画像のアドレス" width="100" height="104" />
</p>
<p>
MB-Support で「ホームページの作り方」を掲載しているページは、
サブサイトと呼んでいるよ。他には、「ワトソンのパソコン教室」や、
「ホームズ備忘録」などがサブサイトに当たります。
「ホームページの作り方」のアイコンは、右のビッグベンです。
特に意味は無いんだよ。
</p>
<br clear="all" />
</body>
</html>

ブラウザ


上はタグに埋め込まれた style="〜" を全て除去した状態です。シンプルな文章と画像が表示されるだけになりましたね。 そして、スタイルシートに依存した管理人の画像も表示されなくなりました。 次は、先ほど抽出したスタイルの宣言を書いてみましょう。

どこに書くべきかは、最初の スタイルシート CSS で説明しましたね。 このレイアウトを1ページだけしか利用しないのであれば、 <head> 〜 </head> の間に挿入します。


HTMLソース(メモ帳)

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis" 
x-undefined>
<meta http-equiv="Content-Style-Type" content="text/css">
<title>題名</title>
<STYLE TYPE="text/css">
<!--
.owner  {
              background-image:url("画像アドレス");
              background-repeat:no-repeat;
              background-position:0px;
              width:48px;
              height:55px;
              float:left;
              margin-top:0px 20px 20px 0px;
} 
.picright {
              float:right;
              margin-top:0px 0px 20px 20px;
}
.in          {
               text-indent:10px;
}
-->
</style>
</head>
<body>
<p></p>
<p>
そろそろ暑い夏も終わりか?今年の夏も暑かったですね。
ホームズ先生も夏バテです。
トラの敷物ポーズ。この日記を書いた時は暑かったのですが、ここ数日、雨続き、
しかも、肌寒いとすら感じます。気温は21度。つい先日は30度を超えていたので、
うさぎも体をこわすかも・・
</p>
<br clear="all" />
<p>
<img src="画像のアドレス" width="100" height="104" />
</p>
<p>
MB-Support で「ホームページの作り方」を掲載しているページは、
サブサイトと呼んでいるよ。他には、「ワトソンのパソコン教室」や、
「ホームズ備忘録」などがサブサイトに当たります。
「ホームページの作り方」のアイコンは、右のビッグベンです。
特に意味は無いんだよ。
</p>
<br clear="all" />
</body>
</html>


もし、日記のページが複数あり、この宣言を複数のページで利用したいのであれば、外部スタイルシートに入力します。 下は、外部スタイルシート名を「diary.css」として、このファイルにスタイルを入力しています。外部スタイルシートの作り方は、 「 スタイルシート CSS 」 で説明しています。


diary.css (メモ帳)

/*管理人の画像*/
.owner  {
              background-image:url("画像アドレス");
              background-repeat:no-repeat;
              background-position:0px;
              width:48px;
              height:55px;
              float:left;
              margin-top:0px 20px 20px 0px;
} 
/*画像右回り込み*/
.picright {
              float:right;
              margin-top:0px 0px 20px 20px;
}
/*インデント*/
.in          {
               text-indent:10px;
}


現時点ではクラスが3つしかないので、混乱する事はないでしょう。 しかし、サイトを構築するにつれ、クラスが増えていくと思われます。 クラス名と id 名は同じものがあってはなりませんが、量が増えていくと名前から判断できなくなるかも知れません。 そんな時は、/* 〜 */ を入力して、間にコメントを挿入できます。 /* から */ で囲まれた部分は、スタイルとして認識されません。 また、/* 〜 */ の間に改行を入れても問題ありません。



後は、この「diary.css」ファイルを、各ホームページに読み込ませるようにします。 ここでは、「css」フォルダに「diary.css」を保管しました。もし、「css」フォルダと異なるフォルダから指定する場合のアドレスは右の様になります。

サイトのトップの階層にあるページから「diary.css」を読み込ませるアドレスは、「css/diary.css」となり、階層のフォルダから読み込む場合は、「../css/diary.css」となります。 HTMLで画像ファイルを指定する場合と同じですね。

今回は、「diary.css」に背景画像として管理人のアイコンを読み込ませています。 この画像へのアドレスは、「diary.css」からの位置であり、「diary.css」を読み込ませたHTMLファイルからの位置ではありません。


HTMLソース(メモ帳)

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis" 
x-undefined>
<meta http-equiv="Content-Style-Type" content="text/css">
<link rel="stylesheet" type="text/css" href="css/diary.css" />
<title>題名</title>
</head>
<body>

以上で外部スタイルシートに書かれた class や id を利用できる環境が整いました。次は、タグから class を指定してスタイルを読み込ます設定です。


HTMLソース(メモ帳)

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<meta http-equiv="Content-Style-Type" content="text/css">
<link rel="stylesheet" type="text/css" href="css/diary.css" />
<title>題名</title>
</head>
<body>
<p class="owner"></p>
<p class="in"> そろそろ暑い夏も終わりか?今年の夏も暑かったですね。 ホームズ先生も夏バテです。 トラの敷物ポーズ。この日記を書いた時は暑かったのですが、ここ数日、雨続き、 しかも、肌寒いとすら感じます。気温は21度。つい先日は30度を超えていたので、 うさぎも体をこわすかも・・ </p> <br clear="all" /> <p class="picright"> <img src="画像のアドレス" width="100" height="104" /> </p> <p class="in"> MB-Support で「ホームページの作り方」を掲載しているページは、 サブサイトと呼んでいるよ。他には、「ワトソンのパソコン教室」や、 「ホームズ備忘録」などがサブサイトに当たります。 「ホームページの作り方」のアイコンは、右のビッグベンです。 特に意味は無いんだよ。 </p> <br clear="all" /> </body> </html>

ブラウザ


クラスを呼び出すには、タグに class="クラス名"を、id を呼び出すには、タグに id="id名" を埋め込みます。

上の例では、最初に p に、class の名前である owner が指定されています。 つまり、この p に読み込まれるスタイルは、

.owner  {
              background-image:url("画像アドレス");
              background-repeat:no-repeat;
              background-position:0px;
              width:48px;
              height:55px;
              float:left;
              margin-top:0px 20px 20px 0px;
} 

になります。これだけの文章を管理人の画像を表示する度に記入していたのでは大変ですね。 しかし、外部スタイルシートを利用すれば、 <p class="owner"></p> と入力するだけで済みます。

この様に、何度も利用するスタイルの場合は、外部ファイルにまとめておき、必要な部分に class や id で適用する事で、文章とスタイルを切り離す事ができます。

例えば、画像を文章の右に回り込ませる時は、<p class="picright"><画像></p> としています。これのスタイルは以下になります。

.picright	{
	float:right;
	margin-top:0px 0px 20px 20px;
}

これを、各ページにスタイルや HTML のタグとして埋め込んでいるぺージが 100 ページほどあるとします。 サイトを改良する時に、どうしても文章の左に回り込ませたくなっとします。 各ぺージの回り込みに関する指定を、100 ページ全て変更する必要があるでしょう。 しかし、スタイルを外部に保管して読み込ませている場合は、diary.css ファイルの以下の部分を変更するだけで、100 ページ全てに反映できます。 ージ全てに反映できます。

.picright {
              float:left;
              margin-top:0px 20px 20px 0px;
}

スタイルを読み込ませない場合、ソースに入力された順番に上から下へと文章と画像が表示されます。 検索サイトのロボットは、この単純なソースだけを読んでいくので、クローラーに対してもやさしいソースとなります。

しかし、それよりも嬉しい事は、やはり制作する人間が、サイトを管理する事ができ、日々更新するページのタグ入力を極力減らす事ができるところでしょう。




戻る 一覧表示 次へ


BTOパソコン・ゲームPC・自作パソコンなら【TSUKUMO】 - 自作PCに必要なパーツ、豊富な品揃え

Copyright © 2013 MB-Support パソコン初心者のサポートページ All Rights Reserved.

管理人サイト閲覧方法プライバシーポリシー著作権/免責事項