CSS/スタイルシートの基本

スタイルシートを使って文字の色を変えたり、表示位置を変える等、表示方法を変える事が出来ます。htmlのタグが何を記述しているのかを定義するのに対し、スタイルシートではどのように表示するのかを定義します。本ページではスタイルシートの基本として、使い方からボックス、回り込み等について説明しています。

文字の色はスタイルシートで指定します

 文字の色は以下のようにhtmlでも指定出来ます。

【htmlでの文字色指定例】
<font color=red>「キャンプ入門サイト」</font><br>
<br>
<font color=blue>1.キャンプで用意するもの</font><br>
 テント<br>
 寝袋<br>
<br>
<font color=blue>2.着いてすぐに行う事</font><br>
 テント設営<br>
 バーベキューの用意<br>
<br>
<font color=blue>3.後片付け<br>
 バーベキューの片づけ</font><br>
 テント収容

 colorでredと指定した文字は赤、blueと指定した文字は青で表示されます。タグを閉じる時は</タグ>と記述すると以降はそのタグが無効になります。つまり、ここでは赤色や青色が無効になります。逆に閉じない間はその設定が有効のまま、つまり赤や青のままになります。

 ブラウザで表示すると以下になります。

スタイルシートの基本1

 但し、見て分かる通りタグの方が多くなってきました。本格的にページを書く時はhtmlで指定しているとタグだらけになって分かりにくくなりますし、このように色等の表現方法をhtmlで指定する事は規格で推奨されていません。

 このため、スタイルシートを使って記述し、htmlではそれを読み込むようにします。

【スタイルシートの例】
h3 {
color: red;
}

p {
color: blue;
}

 上記はhtmlで<h3>タグが指定されると赤色、<p>タグが指定されると青色で表示するように定義しています。

 このファイルをcss等のフォルダを作成してファイル名style.css等で保存します。フォルダ名やファイル名は好きな名前で大丈夫ですが、メモ帳で保存する場合はデフォルトの拡張子がtxtになるため、「ファイルの種類」で「すべてのファイル」を選んでおく必要があります。

 次にhtmlですが、以下のように書き直します。

【スタイルシートを使ったhtmlの例】
<link rel="stylesheet" type="text/css" href="css/style.css">
<h3>「キャンプ入門サイト」</h3>

<p>1.キャンプで用意するもの</p>
<li>テント</li>
<li>寝袋</li>

<p>2.着いてすぐに行う事</p>
<li>テント設営</li>
<li>バーベキューの用意</li>

<p>3.後片付け</p>
<li>バーベキューの片づけ</li>
<li>テント収容</li>

 最初の行が利用するスタイルシートを指定する記述です。css/style.css部分で先ほど保存したスタイルシートのフォルダとファイル名を指定します。

 2行目の<h3>はタグでスタイルシートで赤色を定義した部分になります。その次の<p>もタグで青色を定義した部分になります。

 ブラウザで表示すると以下のように表示されます。

スタイルシートの基本2

 今回、<br>がなくても改行されているのは<h3>や<p>が最初から意味を持っているためです。<h3>は題、<p>は段落を示すタグで、それぞれ改行して上下に余白を取って表示されるようになります。

 又、<li>はリストを示すタグで、図のようにデフォルトでは「・」を付けて改行して表示します。

 今回は文字の色についてだけ説明しましたが様々な指定が可能で、スタイルシートを用いる事でhtmlを短く出来るため、分かり易くなります。

 スタイルシートはメモ帳でも作成可能ですが、「HTML Project2」や「NoEditor」等を使うと編集が楽になります。

 スタイルシートはhtmlと別に表現方法を記述する仕組み全般を指します。CSSは一般的に使われているスタイルシートの一種になりますが、多くの場合は区別なく使われています。

ボックス

 文字の色等、簡単な指定はすぐに分かると思いますが、作り始めてすぐに分かりにくいと思う部分がボックスです。

 ボックスはいわゆる箱であり、スタイルシートで箱の形や背景等を決めます。htmlではその箱を配置していく事でスタイルシートで定義した箱の形や背景で表示出来るようになります。

スタイルシートの基本3

 h3やp、li等も全てボックスで、定義を変更する事で例えば枠を付けたり出来ます。先ほど作ったhtmlでは以下のようにボックスが配置されています。

スタイルシートの基本4

回り込み

 ボックスの種類によってはそのまま記述すると前のボックスの下に表示されますが、回り込む事も出来ます。よくこれを利用してサイドバー等を作ります。

スタイルシートの基本5

 例えば以下のようにリストを本文にして右に回り込ませ、1.2.3.項を左サイドバーにする事も可能です。

スタイルシートの基本6

 上の図のようにするためにはスタイルシートは以下のように記述します。

【回り込みのCSS記述例】
#page {
width: 400px;
}

#main {
float: right;
}


h3 {
text-align: center;
color: red;
}

p {
color: blue;
}

.clear {
clear:both; }

 #pageではページ全体の幅を400pxと指定しています。重要なのは#main部分と.clear部分で#mainは本文を入れるボックスの定義でfloat:right;により右に回り込む事を定義しており、.clearはその回り込みを解除する定義をしています。

 pageやmainの前に#が付いているのは独自定義を示しています。このため、h3やp等決まった名前ではなく自分で分かり易い名前を付けれます。

 clearの前に「.」が付いているのはクラスを示しています。例えば、同じh3でも赤色にしたい場合や青色にしたい場合があると思います。その場合は.red、.blue等でクラスを定義し、htmlで<h3 class="red">と指定すると赤、<h3 class="blue">と指定すると青で表示する等、場合分けが出来ます。

 次はhtmlです。

【回り込みのhtml記述例】
<link rel="stylesheet" type="text/css" href="css/style.css">

<div id="page">
<h3>「キャンプ入門サイト」</h3>

<div id="main">

<li>テント</li>
<li>寝袋</li>
<li>テント設営</li>
<li>バーベキューの用意</li>
<li>バーベキューの片づけ</li>
<li>テント収容</li>
</div>

<p>1.キャンプで用意するもの</p>
<p>2.着いてすぐに行う事</p>
<p>3.後片付け</p>

<div class="clear"></div>
<h3>Copyright</h3>

</div>

 重要なのは<div id="main">と<div class="clear"></div>部分です。<div id="main">はmainという本文用のボックスを配置してその中にリストを入れています。mainはスタイルシートで定義した独自定義でidで指定して使います。mainの終わりは青で示した</div>です。

 mainはスタイルシートで右に回り込む定義をしているため、その下の「<p>1.キャンプで用意するもの</p>」以降は左に表示されます。

スタイルシートの基本7

<div class="clear"></div>は回り込みを解除するボックスを作っています。これはダミーのボックスで表示されませんが、このボックスを作って回り込みを解除しない場合、Copyright部分が左に寄ってしまいます。

 回り込みを解除する必要がある具体例として、サイドバーを作った後、フッターを真ん中に表示したい場合は回り込みを解除しておく必要があります。又、回り込みを利用してリストを縦ではなく横に表示する事も可能ですが、この際も回り込みを解除しておかないと次の内容が回り込みしたままになります。

サイト関連1

ホームページ作成「htmlの基本
  • このエントリーをはてなブックマークに追加