MB-Support

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

既存の HTML を外部 CSS へと分離させる流れ

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


スタイルシートについて日記を書くのも 3 回目となりました。 前回までで、タグに style を指定して宣言を書く方法と、class と id の使い方を説明したので、文章を構成する HTML と、スタイルを構成する CSS に分離する作業ができると思います。

しかし・・・まぁ・・・最初は戸惑いますね。具体的に何をすれば良いのか? まずは、複雑なデザインの場所はそのまま利用して、単純な部分から分離する作業をすすめてみましょう。 その方が勉強になると思います。まず、おさらいとして宣言の書き方を復習しましょう。

セレクタ { プロパティ : 値 }

セレクタは h1 、 p 、div 、span など、スタイルを適用したい場所を囲むタグ名になります。 プロパティは、color 、font-size 、margin 、padding など、セレクタに適用するスタイルを入力します。 そして、プロパティの後に「:(コロン)」を付けいます。半角スペースを入れても入れなくても構いません。 「:」の後には値を入力します。これは、プロパティに対する値です。 プロパティが color なら、#ffffff (白)や red (赤)、font-size なら、12pt、12px などの数字と単位になります。 最後に「;(セミコロン)」を付けると、そのプロパティに関する宣言が終了した事を意味します。

p { font-size : 12pt; }

次は、同じセレクタに複数のプロパティと値を設定する場合です。これは { 〜 } の間にいくつでも入力できます。

例1

p { 
font-size : 12pt;
color : #000000;
} 

例2

p { font-size : 12pt; color : #000000; } 

例3

<p style="font-size:12pt;color:#000000;">

プロパティごとに「;(セミコロン)」を付けて終了を宣言しているので、意味は分かると思います。 外部スタイルシートや、head に入力する場合、改行しても構いません。 分かりやすくするために、半角スペースやタブを入れて整えても良いでしょう(全角スペースは駄目)。 タグに直接入力する場合は改行しません(例3)。


さて、管理人の日記を例にして、スタイルシートを適用する方法を説明します。 日記を書くときは、よく以下の文章構成を利用します。もちろん、これは管理人の場合であって、みんな好きにレイアウトすればいいと思います。


ブラウザ


毎回この様に書いているのですから、重複するタグも多くあります。 そして、この重複こそが、スタイルシートで管理する上で重要になります。 まず、上の文章でポイントを抽出してみましょう。

日記のはじめには、奇妙な画像が左に挿入されています。これは日記を書くときは、ほぼ必ず入力しています。 そして、文章の先頭はインデントを付けている(1文字分あける)。 場合によっては、画像を右に挿入する場合がある。 このたった3つのポイントで管理人の日記は構成されています。まずは、HTMLだけでこれを書いてみましょう。


HTMLソース(メモ帳)

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

ブラウザ


ホームページを始めた時は、こんなやり方で日記を書いていました。管理人の画像を、align="left" で回りこませ、hspace と vspace で画像の 回りに余白を確保していました。 文章のはじまりは、全角スペースを挿入していました。hspace と vspace は便利なのですが、左右、上下の余白を別々にコントロールできず、同じ量だけ余白を確保してしまいます。 スタイルシートでは、上、右、下、左の余白分量を指定する事ができます。いろいろ問題があるのですが、これをスタイルシートに置き換えてみましょう。


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>

ブラウザ


なんか・・・余計ごちゃごちゃになった? 大丈夫です。順番に説明すれば、たいした事やっていませんから。 そして、これを毎回入力する訳ではありません。スタイルの部分は、クラスを使う事で簡単に何度も呼び出せますから。

まず、この日記のテンプレートには、2つの画像が存在します。 最初の管理人の画像は、文章の左に回りこませて、毎回利用する画像です。 2つめの画像は、毎回文章を右に回り込ませるものの、画像自体は変更すると仮定します。 なぜならば、最初の管理人の画像はトレードマークとして利用しますが、2つめは日記の内容に応じて画像を変更するからです。

毎回同じ画像を挿入すると分かっているのなら、わざわざ img src を使って画像を指定するのは面倒ではないでしょうか? こうした重複するデザインは、スタイルシートが得意とする所です。 管理人の画像を全てスタイルに置き換えてしまいましょう。

スタイルを挿入するには、なんらかのタグが必要になります。 ここでは、ブロックレベル(上下に余白が入る)p を利用したいと思います。 まずは、 <p></p>を挿入します。この p タグに、毎回利用する管理人の画像を指定します。画像を指定するには、バックグランド(背景画像)を指定すると考えて下さい。 つまり、<p></p>に背景画像として管理人の画像を指定するのです。

<p style="background-image:url('管理人の画像のアドレス');
background-repeat:no-repeat;background-position:0px;"></p>

背景画像を指定するスタイルは、background-image:url('絶対パス、もしくは、相対パス'); となります。背景として指定しますが、ここでの目的はあくまでも1つの画像を表示したいだけです。 そこで、background-repeat:no-repeat; と続けて入力してリピートさせない指定をします。<p>〜</p>で囲まれた範囲で、背景画像を表示するポジションは、左上0pxを指定します(background-position:0px;)。



これで、背景画像は管理人の画像が1回だけ表示される設定ができたものの、<p>〜</p>の範囲だけに適用されます。 つまり、<p>〜</p> の間に何も入力されていなければ、背景画像を表示するスペースが存在しない事になります。

そこで、画像のサイズを指定して <p>〜</p> の大きさを強制的に指定します。


width:48px;height:55px;

width は横サイズで、heightは高さです。

画像のサイズを知りたければ、画像ファイルにカーソルを移動して右クリックします。 表示されたメニューの「プロパティ」を左クリックすると、そのファイルの詳細情報が確認できます。 画像サイズが記載されている場所は、「概要」タブです。


ここまでの内容を図で説明すると、以下の様になります。<p></p> で四角形を作り、四角形の左上0pxから背景画像を1度だけ表示しています。

管理人の画像を表示する事はできましたが、日記のテンプレートとしては、文章の左に回り込ませたいと考えます。 そこで、今度は align="left" の部分をスタイルに変換します。回り込ませるスタイルのプロパティは、float で、値に left 、right を指定します。 左に回り込ませたいので、float : left ; と入力すれば良いでしょう。

最後は画像の余白を指定します。画像が表示された四角い <p></p> の回りに均等に余白を入れる場合は、

margin : 数字px;

を挿入します。これを細かく指定する場合は、

margin-top : 数字px; (上)
margin-right : 数字px; (右)
margin-bottom : 数字px; (下)
margin-left : 数字px; (左)

と分解する事ができます。 つまり、以下の二つは同じです。

margin : 10px;
margin-top:10px;margin-right:10px;margin-bottom:10px;margin-left:10px;

左に回り込ませると、文章と接するのは右と下です。 右と下にだけ余白を20px入れたい場合は、

margin-top : 0px;
margin-right : 20px;
margin-bottom : 20px;
margin-left : 0px;

とします。また、これを省略して書くこともできます。

margin : 0px 20px 20px 0px;

数字は、上、右、下、左の順で、半角スペースを挿入します。


説明が下手なので、少し長くなってしまいましたが、HTMLでホームページを制作しているユーザーなら理解するのは簡単だと思います。 2つめの画像は、右回りと余白の設定だけなので、上でやった事の一部を利用すれば完成できます。

<p 
style="float:right;margin-top:0px;margin-right:0px;
margin-bottom:20px;margin-left:20px;"><img src="画像のアドレス" 
width="100" height="104" />
</p>

青文字は単純に画像を表示するタグです。 今度は画像を変更するので、画像指定の部分はそのまま残し、 <p>画像</p>の <p> の部分に、文章の右回りと、余白を指定します。 画像を右に回り込ませた時、文章が接するのは左と下です。

文章は <p> 〜 </p> で一段落として入力しますが、最初にインデントを指定します(一文字分あける)。

<p style="text-indent:10px;">

プロパティ text-indent:値; となります。 正確に一文字分あけるのは無理なので、px単位で微調整すれば良いでしょう。 これで、文章の最初の全角スペースを全て除去する事ができます。

次はこれらのタグに直接入力したスタイルを、HTMLファイルから切り離して何度でも利用できる様にします。 この段階で終わってしまうと、単純に面倒な事をしたに過ぎません。 次はスタイルシートより、サイト構成を管理しやすくなる方法を説明します。




戻る 一覧表示 次へ


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

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

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