■ジャンル別リファレンス

スタイルシートの種類と簡単な使いかたについて。

▼スタイルシートの種類

スタイルシートはカスケーディング・スタイルシートの略称です。
一般的にスタイルシートは以下の通り３種類あります。

・インラインスタイルシート

<div style="要素:サイズや属性;"></div>
※普通は<div～/div>や<span～/span>で範囲を囲みます。

・内部スタイルシート

内部スタイルシートの記述は<head>～</head>の間に書きます。（１ページごと）

<html>
<head>
<title>Webページのタイトル</title>
<style type=text/css>
h1. {font:10px;color:#000000;}
tr. {font:12px;color:#111111;}
a:link {color:#aa0000;}
</style>
</head>
<body>

・外部スタイルシート

・ＣＳＳファイル
外部スタイルシートは、別のcssファイルに仕様を書き必要に応じて呼び出して使います。
しまりが欲しい時(外部ＣＳＳで共通フォーマット)、更新を楽にしたい(外部ＣＳＳを使う) に使えます。

<html>
<head>
<title>Webページのタイトル</title>
<link rel=stylesheet href="▲" type="text/css">
</head>
<body>
▲･･･スタイルシートのｕｒｌ
任意のフォルダに"xxxxx.css"というファイルをつくりスタイルシートを記述

・内部・外部スタイルシートの呼び出し方

各自設定したスタイルシートを呼び出すには「class」を使用します。

<div class="●">属性の適用範囲</div>
●：好きな名前を半角英数で指定します。

▼スタイルシートの優先順位

全て同時に指定した場合の優先度は「インライン＞内部＞外部」となります。
外部スタイルシートで細かく設定していても、インラインで個別に要素指定してやれば、
インラインの方が適用されます。使用例としては、
Webサイト全体の統一感を出す為に外部スタイルシートを使用し
特定のWebページ専用の書式を設定する為に内部スタイルシートを使用し
Webページ内でワンポイントとなる所、一回限りの書式を設定する為にインラインスタイルシートを使用します。

▼書き方例／　※内部・外部スタイルシート共通

h1. {font:10px;color:#000000;}
tr. {font:12px;color:#111111;}
a:link {color:#aa0000;}

▼書き方例２／　リンク表示を変更する（読み方）（Ａ：ＬＩＮＫ）

a:link {color:black; text-decoration="none"}通常リンク、文字は黒で下線はなし
a:visited {color:navy; text-decoration="none"}一度クリックした後、文字はネイビーで下線はなし
a:active {color:green }アクティブなリンク（箱点線の状態）はグリーン
a:Hover {color:white; background-color:green}マウスがきたら文字は白に、背景色はグリーンに

▼テキスト、文字列の操作

フォントの見た目を飾る(font)

・フォント（文字）

フォントの色を変える(color)

・カラー（色）

<style=color:色;>

色は直接"red"と名前で指定したり"#ffffff"と指定する事が出来ます。
色見本は ColorVolenteをご参照ください。

行間隔を変えて、テキストを読みやすくする(line-height)

・ラインハイト（行間）

テキストの表示は通常100%となっています。一般的に読みやすい行間隔120～130% と言われています。
当サイトではより読みやすいように<style=line-height:150%;>と指定しています。

▼スペース、余白(margin　/　padding)

主に位置を微調整する時に使用します。

・マージン（外空白）

<margin:上　右　下　左;>

上下左右のマージン（余白）を時計回りに指定します。
この使い方が、メインの使い方になります。

margin-top:
margin-right:
margin-bottom:
margin-left:

上下左右のマージンをそれぞれ個別に指定します。

・パディング（内空白）

<padding:上　右　下　左;>

padding-top:
padding-right:
padding-bottom:
padding-left:

上下左右のパディングをそれぞれ個別に指定します。

※マージンとパディングの違いは余白が外側にあるか、内側にあるかにのみです。使い方書き方はほぼ同じです。どのような使い方をすれば両者の差異がはっきりでるかは、今後公開予定です。

▼線を引く(border)

▼カッコイイ線が引きたい
「ボーダー」と読みます
思い切って枠をつけてみる(border)

・borderボーダー（線や枠線）

<div style="border:1px solid #aa0000">～</div>
※通常はこの書き方をすればＯＫです

■ 枠線（基本）

border:
border-top:
border-right:
border-bottom:
border-left:

border:は上下左右に線を引きます。topは上に、rightは右に、bottomは下に、leftは左に個別に線を引きます。また下で説明する、width、 style、 colorを一度に指定する事ができます。

■枠線の太さ

border-width:
border-top-width:
border-right-width:
border-bottom-width:
border-left-width:

・太さの指定
thin（細線）、medium（規定値：中線）、thick（太線）、1px（幅指定）

■枠線の種類

border-style:
border-top-style:
border-right-style:
border-bottom-style:
border-left-style:

・枠線の種類を指定
none（線無し）、dotted（点線）、dashed（粗い点線）、solid（実線）、double（二重線）、groove（谷線）、ridge（山線）、inset（内線）、outset（外線）、inherit（継承）

■枠線の色

border-color:
border-top-color:
border-right-color:
border-bottom-color:
border-left-color:

・色の指定
色の名前（REDなど）または、RGB形式（#aa0000）で指定する

※一番長い書き方
例）<div style="border:1px solid #aa0000">～</div>　は
例）<div style="border:1px;border-width:solid;border-color:aa0000;">～</div>
とも書くことができます。どちらがクールか一目瞭然ですね。

▼レイアウト

▼余白を支配する
余白などに、画像やテキストを自在に配置するには、positionポジションのabsolite絶対位置指定を使います
配置位置を決めるには、画面上の座標（ｘ、ｙ）を（top、left）で指定します。

このように書くと、画面左上の座標（0,0）を起点として上から100px、左から150pxの位置に画像やテキストを配置します。

・positionポジションの説明

▼好きな場所に配置したい(ポジション：絶対位置)

パラメータ

static（規定値：本来の位置）
relative（本来の位置からの相対位置指定）
absolute（絶対位置指定）
fixed（絶対位置に固定）
inherit（継承）

top、leftを組み合わせて座標の位置を調整します。
フォント装飾
画像化する(div～divでブロック化する)
サイズを固定する(font:10px;)
色付けのコツ

・floatフロート

パラメータ

画像などの表示位置を指定します
left（左端）
right（右端）
none（規定値：指定しない）
inherit（継承）

img タグの align属性と同じです
right または left を指定するとテキストがその周りを回り込むように表示されるようになります

※（コラム）書き方の秘訣？「ココからココまで」

属性を書くときのコツは同じ指定の繰り返しをなくす事。
つまりドコからドコまで、同じ属性を使うのかを見極める（決める）事
で、無駄なタグを書かないように注意する事が秘訣です。

実際に書きためたＨＴＭＬソースを見直してみると「ココはアソコと同じ色でいいや」、
「ココとココは同じ事の繰り返しだ」など、びっくりするくらい出てくる事があります。

ＷＥＢサイト運営が長くなり、更新も頻繁にするようになる頃に、
あなたも一度ＨＴＭＬソースを読み直してみてはいかがでしょうか？

また、この事はＳＴＹＬＥシートだけに限った事ではなく、一般的なタグの書き方にももちろん通じます。