CSSスタイルシート講座 - ホームページ作成のリファレンスとサンプル集：AWCS

>Information

このコンテンツは、スタイルシートの基礎知識から記述方法までを、
使用実例サンプル付きで分かり易く解説しています。

>はじめに

CSSとは

CSSとは( Cascading Style Sheet ) の略で、HTMLでは表現しきれない Webページの”デザイン”面を担当する言語です。 W3C( World Wide Web Consortium ) という Web技術の標準化団体によって策定され、スタイルシート言語のひとつになります。

このCSSは、私の見地ではJavaScriptやC言語などと比べても容易なものであり、 ”覚える覚えない”というよりむしろ”使うか使わないか”、いわば”使いこなせるか”が重要であると考えます。よって当コンテンツ CSS では書式や設定、記述方法をわかりやすく解説していくことは無論、Webページ製作の際コピペ等で簡単に使えるようにも工夫していますので、宜しければご参考にして下さい。

CSSの概念

各ブラウザおよびWebオーサリングソフトの技術的進歩により、<table>要素や<font>要素等を使用しHTMLのみで見た目を工夫、デザインすることが可能となりました。しかし元々HTMLはWebページの論理構造を定義する手段でしかなく、この言語のみでWebページのデザインを行うには限界があります。また前述のとおり本来HTMLは論理構造を記述するためのものであり、デザインといったWebの体裁に関する技術を表現する手段ではありません。そこでデザイン面を担当する言語としてスタイルシートが誕生し、CSSが策定されました。

CSSの歴史

Webページ作成において文書構造と視覚表現を分離するものとしてCSSは発表されました。

CSS1（1996年12月）――→ CSS2（1998年5月）

1996年に、これまでのHTMLから新たに文書構造と視覚表現を分離するものとして CSS1 が発表され、その後HTMLのバージョンアップに伴い、XMLへの実装も踏まえて定義された CSS2 が最新バージョンとなります。

>基本書式

設定方法

まず始めに、
ブラウザの誤動作を防ぐため <head> 内に以下の記述をし CSS を設定します。

<meta http-equiv="content-style-type" content="text/css">

上記の記述により『このHTML文章におけるスタイルシートには CSS という種類が使われています』とブラウザ側に伝えています。
ここでCSSとはあくまでスタイルシートのひと種類である、ということを覚えておいて下さい。

ヘッダ方式

スタイルシートの書式は

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

で構成され、『セレクタのプロパティを値にする』と行った感じで設定します。簡単な例でページの背景色を黒にしたい場合は

body {
 background-color : black
}

といった具合です。これを実際HTML文章の中に記述する際には

<style type="text/css">
body {
 background-color : black
}
</style>

のように<head>内に<style>で囲んで書きます。

またCSSに対応していないブラウザに対応するため

<style type="text/css">
<!--
body {
 background-color : black
}
-->
</style>

のようにコメントアウトすることが推奨されます。

尚ここまでの説明があまり解らないという方はHTMLタグ自体が不勉強と思われますので、当サイト

HTMLを参照されることをお勧め致します。

外部スタイル

上記のようにHTML文章内にスタイルを設定するのではなく、外部にスタイルシートの設定を行ったファイルを用意し取り込ませる方法です。

<link href="ファイル名.css" type="text/css" rel="stylesheet">

このタグをHTML文章内に記述することにより、自分で外部に設定したファイル（拡張子は .css ）を読み込ませることが出来ます。

この利便性は、サイト全体のページデザインを統一させたい場合などです。また新バージョンの言語である

XHTMLへの移行を考えていらっしゃる方には外部スタイルの使用を強く推奨致します。

インラインスタイル

タグの属性としてスタイルシートを指定する方法で、例えば先ほどと同じ様にページの背景色を黒にしたい場合は

<body style="background-color : black">

と記述します。これによる効果は<h>や<p>など全ての要素の属性に利用できる為、特定の箇所にだけスタイルの設定を行いたい場合などです。

>セレクタ

クラスとID

上記インラインスタイル以外では、クラスセレクタ『 . 』およびIDセレクタ『 # 』を使ってCSSを部分的に適用させることが出来ます。

記述例（HEAD内）

<style type="text/css">
<!--
.fonts {
 color : blue
}
#fonts {
 color : blue
}
-->
</style>

記述例（BODY内）

<span class="fonts">文字 1</span><br>
<span id="fonts">文字 2</span>

↓
Display

文字 1
文字 2

※クラスおよびID属性の効果は同じですが、ID属性はひとつの文章内で重複して使用することはできません。

擬似クラス

要素や属性に分類できない状態に対しては疑似クラスを使用します。具体的にはアンカー要素である <a> に用いられます。

記述例（HEAD内）

<style type="text/css">
<!--
a:link {
 color : blue
}
a:hover {
 text-decoration : none;
 background : #444444
}
-->
</style>

記述例（BODY内）

<a href="../index.html">トップページ</a>

↓
Display

トップページ

a:link: 未訪問ページ（要素）へのスタイル指定
a:visited: 訪問済みページ（要素）へのスタイル指定
a:hover: アンカー要素にマウスカーソルが重なったときのスタイル指定
a:active: アンカー要素をクリックした瞬間のスタイル指定

>CSSの単位

相対的単位

記述例

<style type="text/css">
<!--
img {
 border-width : 3px
}
-->
</style>

em その要素の font-size の値を1とする単位
ex 基準となるフォントの小文字の高さを1とする単位
px ディスプレイの解像度1ピクセルを1とする単位
% 親要素を100%と基準したときの割合

絶対的単位

記述例

<style type="text/css">
<!--
h1 {
 font-size : 12pt
}
-->
</style>

in インチ（1in = 2.54cm）
cm センチメートル
mm ミリメートル
pt ポイント（1pt = 1/72in）
pc パイカ（1pc = 12pt）

キーワード指定

この指定方法はフォントサイズにのみ適用されます。

記述例

<style type="text/css">
<!--
h1 {
 font-size : xx-large
}
-->
</style>

xx-large
x-large
large
medium
small
x-small
xx-small

※ 上記 medium がブラウザのデフォルトの大きさを表し基準となる。

色の指定

記述例

<style type="text/css">
<!--
body {
 background-color : #000000
}
-->
</style>

カラーネーム: W3Cで定義されている16色の色名で指定する方法。
#rrggbb 方式: RGBの値を2桁の16進数で示す方法。参照⇒カラーチャート
#rgb 方式: RGBの値を1桁の16進数に”省略”して示す方法。
rgb(n,n,n)方式: rgbにつづく ( ) の中に10進数の整数またはパーセントで指定する方法。

>テキスト

文字色の指定

記述例（HEAD内）

<style type="text/css">
<!--
strong {
 color : blue
}
-->
</style>

記述例（BODY内）

<strong>文字</strong>

↓
Display

文字

文字の装飾

記述例（HEAD内）

<style type="text/css">
<!--
strong {
 text-decoration : underline
}
-->
</style>

記述例（BODY内）

<strong>文字</strong>

↓
Display

文字

＝値の種類＝
overline上線
underline下線
line-through取り消し線
none装飾なし（デフォルト）

行の高さを指定

記述例（HEAD内）

<style type="text/css">
<!--
.sample {
 line-height : 400%
}
-->
</style>

記述例（BODY内）

<span class="sample">
HTMLとは( HyperText Markup Language ) の略で、<br>
タグという手段を使ってPCが情報を読めるようにできる言語です。
</span>

↓
Display

HTMLとは( HyperText Markup Language ) の略で、
タグという手段を使ってPCが情報を読めるようにできる言語です。

上記の例で、行間の高さが通常の400%に広がりました。
値についてはCSSの単位を参照してください。

行揃えの指定

記述例（HEAD内）

<style type="text/css">
<!--
.sample {
 text-align : center
}
-->
</style>

記述例（BODY内）

<div class="sample">文字</div>

↓
Display

文字

＝値の種類＝
left左寄せ
right右寄せ
center中央寄せ

文字の垂直位置の指定

記述例（HEAD内）

<style type="text/css">
<!--
.sample {
 vertical-align : sub
}
-->
</style>

記述例（BODY内）

わたしは<span class="sample">お酒が大好き</span>です。

↓
Display

わたしはお酒が大好きです。

＝値の種類＝
super上付き文字
sub下付き文字
top上に揃える
middle中に揃える
bottom下に揃える

文字間隔の指定

記述例（HEAD内）

<style type="text/css">
<!--
.sample {
 letter-spacing : 2em
}
-->
</style>

記述例（BODY内）

<span class="sample">わたしはお酒が大好きです。</span>

↓
Display

わたしはお酒が大好きです。

上記指定値 2em により２文字分文字間隔が広がりました。

インデントの指定

記述例（HEAD内）

<style type="text/css">
<!--
.sample {
 text-indent : 2em
}
-->
</style>

記述例（BODY内）

<span class="sample">
HTMLとは( HyperText Markup Language ) の略で、<br>
タグという手段を使ってPCが情報を読めるようにできる言語です。
</span>

↓
Display

HTMLとは( HyperText Markup Language ) の略で、
タグという手段を使ってPCが情報を読めるようにできる言語です。

上記指定値 2em により２文字分一行目がインデント（字下げ）されました。

文字表記方向の指定

記述例（HEAD内）

<style type="text/css">
<!--
.sample {
 direction : rtl ;
 unicode-bidi : bidi-override
}
-->
</style>

記述例（BODY内）

<span class="sample">わたしはお酒が大好きです。</span>

↓
Display

わたしはお酒が大好きです。

＝directionプロパティの値の種類＝
ltr左から右
rtl右から左

>フォント

フォントの指定

記述例（HEAD内）

<style type="text/css">
<!--
.sample {
 font-family : cursive
}
-->
</style>

記述例（BODY内）

<span class="sample">abcdefghijk</span>

↓
Display

abcdefghijk

値については

フォント表示サンプルを参照してください。

フォントサイズの指定

記述例（HEAD内）

<style type="text/css">
<!--
.sample {
 font-size : 20px
}
-->
</style>

記述例（BODY内）

<span class="sample">文字</span>

↓
Display

文字

値についてはCSSの単位を参照してください。

フォントの太さを指定

記述例（HEAD内）

<style type="text/css">
<!--
.sample {
 font-weight : bold
}
-->
</style>

記述例（BODY内）

<span class="sample">文字</span>

↓
Display

文字

＝値の種類＝
normal 標準（デフォルト）
bold 太字
bolder 一段階太く
lighter 一段階細く

フォントを斜体に指定

記述例（HEAD内）

<style type="text/css">
<!--
.sample {
 font-style : italic
}
-->
</style>

記述例（BODY内）

<span class="sample">文字</span>

↓
Display

文字

フォントをまとめて指定

記述例（HEAD内）

<style type="text/css">
<!--
.sample {
 font : 20px bold italic
}
-->
</style>

記述例（BODY内）

<span class="sample">文字</span>

各値を半角スペースで区切って指定することにより、フォントに関するスタイルをまとめて設定できます。

>背景

背景色を指定

記述例（HEAD内）

<style type="text/css">
<!--
.sample {
 background-color : blue
}
-->
</style>

記述例（BODY内）

<span class="sample">文字</span>

↓
Display

文字

背景に画像を指定

記述例（HEAD内）

<style type="text/css">
<!--
.sample {
 background-image : url("../image/logo.gif")
}
-->
</style>

記述例（BODY内）

<span class="sample">秋のホームページ</span>

↓
Display

秋のホームページ

背景画像の繰り返し方法を指定

記述例（HEAD内）

<style type="text/css">
<!--
.sample {
 background-image : url("../image/logo.gif") ;
 background-repeat : no-repeat
}
-->
</style>

記述例（BODY内）

<span class="sample">秋のホームページ</span>

↓
Display

秋のホームページ

上記の例では、背景画像が繰り返さず左側一点にだけ表示されています。

＝値の種類＝
repeat デフォルト、画面いっぱいに敷き詰めて表示
repeat-x x軸、横方向にのみ繰り返して表示
repeat-y y軸、縦方向にのみ繰り返して表示
no-repeat Display参照。繰り返さずに一点だけ表示

背景画像の見せ方応用編

★ 壁紙を背景の真ん中に1枚だけ貼る

記述例（HEAD内）

<style type="text/css">
<!--
.sample {
 background:url("壁紙のURL") #000000 no-repeat fixed 50% 50%
}
-->
</style>

＝値の解説＝
fixed で背景を固定
50% 50% で背景画像の位置を真ん中に指定
例として背景画像を右下に指定したいのならば上記値は 100% 100% となる。

>リスト

リストマークを指定

記述例（HEAD内）

<style type="text/css">
<!--
ul {
 list-style-type : square ;
}

ol {
 list-style-type : decimal ;
}
-->
</style>

記述例（BODY内）

<ul>
<li>酒</li>
<li>たばこ</li>
<li>女</li>
</ul>

<ol>
<li>酒</li>
<li>たばこ</li>
<li>女</li>
</ol>

↓
Display

酒
たばこ
女

酒
たばこ
女

上記は、<ol>（序列リスト）と <ul>（非序列リスト）の２例を挙げています。
詳しくは当サイトコンテンツHTML内

リストも参照してみてください。

＝値の種類＝
disc 黒丸
circle 白丸
square 四角
decimal 10進数
lower-roman 小文字ローマ字
upper-roman 大文字ローマ字
lower-alpha 小文字アルファベット
upper-alpha 大文字アルファベット
none マークなし

リストマークに画像を指定

記述例（HEAD内）

<style type="text/css">
<!--
ul {
 list-style-image : url("../image/page.gif")
}
-->
</style>

記述例（BODY内）

<ul>
<li>酒</li>
<li>たばこ</li>
<li>女</li>
</ul>

↓
Display

酒
たばこ
女

>ボックス

ボックスの枠線を指定

記述例（HEAD内）

<style type="text/css">
<!--
.sample {
 border : 1px white solid
}
-->
</style>

記述例（BODY内）

<div class="sample">秋のホームページ</div>

↓
Display

秋のホームページ

上記の値では、1ピクセル（px）の白い（white）実線（solid）を枠（border）のスタイルに指定した、ということを意味しています。

＝値の種類＝
solid 実線
dotted 点線
dashed 破線
double 二重線
groove へこんだように見える線
ridge 浮き上がったように見える線
inset 内側がへこんだように見える線
outset 内側が浮き上がったように見える線
none デフォルト
hidden 枠線を表示しない

ボックスの幅と高さを指定

記述例（HEAD内）

<style type="text/css">
<!--
.sample {
 border : 1px white solid ;
 width : 100px ;
 height : 100px
}
-->
</style>

記述例（BODY内）

<div class="sample">秋のホームページ</div>

↓
Display

秋のホームページ

上記の値では、1ピクセル（px）の白い（white）実線（solid）の枠（border）を横（width）100px、縦（height）100pxの大きさに指定した、ということを意味しています。

パディングを指定

ボックスの内容領域と枠との間隔は『パディング』とよばれ、これの大きさを指定する方法です。

記述例（HEAD内）

<style type="text/css">
<!--
.sample {
 border : 1px white solid ;
 width : 100px ;
 height : 100px ;
 padding-top : 100px ;
 padding-right : 100px ;
 padding-bottom : 100px ;
 padding-left : 100px
}
-->
</style>

記述例（BODY内）

<div class="sample">秋のホームページ</div>

↓
Display

秋のホームページ

上記の指定で、上下右左 100px 分文字と枠との間隔が広がりました、ということを意味しています。

＝プロパティの種類＝
padding-top 上側の間隔
padding-right 右側の間隔
padding-bottom 下側の間隔
padding-left 左側の間隔

マージンを指定

ボックス枠と隣接する他のボックスとの間隔は『マージン』とよばれ、これの大きさを指定する方法です。

記述例（HEAD内）

<style type="text/css">
<!--
.sample {
 border : 1px white solid ;
 width : 100px ;
 height : 100px ;
 margin-left : 100px
}
-->
</style>

記述例（BODY内）

<div class="sample">秋のホームページ</div>

↓
Display

秋のホームページ

上記の指定で、左側 100px 分他の枠との間隔が開きました、ということを意味しています。

＝プロパティの種類＝
margin-top 上側の間隔
margin-right 右側の間隔
margin-bottom 下側の間隔
margin-left 左側の間隔

>フィルタ

フィルタ機能とはInternet Explorerが独自に拡張した、画像やテキストに特殊効果を設定できるプロパティです。Windows版バージョン 4.0 以上から有効であり、Netscape等他のブラウザでは無効になります。

記述例（HEAD内）

<style type="text/css">
<!--
.sample {
 filter : 値
}
-->
</style>

影をおとす

記述例（HEAD内）

<style type="text/css">
<!--
.sample {
 width: 100% ;
 height:20px;
 filter : DropShadow(color=#ffffff,offx=10,offy=5,positive=true)
}
-->
</style>

記述例（BODY内）

<span class="sample">秋のホームページ</span>

↓
Display

秋のホームページ

上記の指定で、右方向（offx）に 10px 、下方向（offy）に 5px の位置に白い（#ffffff）影を落としたような立体的な効果が表現されます。

＝プロパティの種類＝
color 影の色
offx 影の右方向への距離（ - マイナスの数値指定で左方向）
offy 影の下方向への距離（ - マイナスの数値指定で上方向）
positive 影を透過（trueかfalse ないしは 1か0 で透過の有無を指定）

影を伸ばす

記述例（HEAD内）

<style type="text/css">
<!--
.sample {
 width: 100% ;
 filter : Shadow(color=#ffffff,direction=120,strength=5)
}
-->
</style>

記述例（BODY内）

<span class="sample">秋のホームページ</span>

↓
Display

秋のホームページ

＝プロパティの種類＝
color 影の色
direction 影の向き（45度単位）
strength 影の長さ（1～255）

発光させる

記述例（HEAD内）

<style type="text/css">
<!--
.sample {
 width: 100% ;
 filter : Glow(color=#999999,strength=5)
}
-->
</style>

記述例（BODY内）

<span class="sample">秋のホームページ</span>

↓
Display

秋のホームページ

＝プロパティの種類＝
color 発光の色
strength 発光の強さ（1～255）

ぼかす

記述例（HEAD内）

<style type="text/css">
<!--
.sample {
 width: 100% ;
 filter : Blur(makeshadow=true,pixelradius=10,shadowopacity=0.80)
}
-->
</style>

記述例（BODY内）

<span class="sample">秋のホームページ</span>

↓
Display

秋のホームページ

＝プロパティの種類＝
pixelradius ぼかしの量（ 0～100 ）
shadowopacity ぼかしの濃度（ 0.0～1.0 ）
makeshadow 影の表示（trueかfalse ないしは 1か0 で表示の有無を指定）

表示方向を反転

記述例（HEAD内）

<style type="text/css">
<!--
.sample {
 width: 100% ;
 filter : fliph()
}
-->
</style>

記述例（BODY内）

<span class="sample">秋のホームページ</span>

↓
Display

秋のホームページ

＝プロパティの種類＝
fliph() 左右の反転
flipv() 上下の反転

>その他

マウスカーソルの形を指定

当サイトの

DHTMLでもご紹介しているJavaScriptのレイヤーという考え方が、このマウスカーソルの形を変える方法では劇的な効果がありますが、以下はCSSのみで変更する場合の記述方法です。

記述例（HEAD内）

<style type="text/css">
<!--
.sample {
 cursor : help
}
-->
</style>

記述例（BODY内）

<div class="sample">マウスカーソルをこの文字の上に乗せてみて下さい</div>

↓
Display

マウスカーソルをこの文字の上に乗せてみて下さい

↑実際マウスカーソルをこの文字の上に乗せてみて下さい。カーソルの形状が変化したと思います。

＝値の種類＝
help ？マーク
crosshair 十字
default 標準（矢印が多い）
pointer アンカー上
move 移動可
text I ビーム
wait 砂時計
e-resize 右方向にリサイズ可
ne-resize 右上方向にリサイズ可
nw-resize 左上方向にリサイズ可
n-resize 上方向にリサイズ可
se-resize 右下方向にリサイズ可
sw-resize 左下方向にリサイズ可
s-resize 下方向にリサイズ可
w-resize 左方向にリサイズ可
auto ブラウザのデフォルトの形

※ 上記CSSの記述ではあくまでマウスカーソルの形状が変わるだけであって、実際オンマウスの対象物を動かしたりリサイズさせたりは出来ません。

スクロールバーの色を指定

この機能はInternet Explorerが独自に拡張したプロパティです。バージョン 5.5 以上から有効であり、Netscape等他のブラウザでは無効になります。

簡単な記述例（HEAD内）

<style type="text/css">
<!--
body {
 scrollbar-face-color : red
}
-->
</style>

↑この記述だけでも十分スクロールバーの色は変わっている（この場合は赤色）のですが、さらに細かい設定方法としては

詳細な記述例（HEAD内）

<style type="text/css">
<!--
body {
 scrollbar-face-color : #444444;
 scrollbar-highlight-color : #888888;
 scrollbar-shadow-color : #444444;
 scrollbar-3dlight-color : #696969;
 scrollbar-arrow-color : #777777;
 scrollbar-track-color : #555555;
 scrollbar-darkshadow-color : #000000;
 scrollbar-base-color : #ffffff
}
-->
</style>

上記の例は当サイトで採用している配色です。参照⇒

カラーチャート

スクロールバーを消す

記述例（HEAD内）

<style type="text/css">
<!--
body {
 overflow : hidden
}
-->
</style>

>PDF

	当webページ（http://www.awcs.org/css/）をpdfファイルで閲覧することが出来ます。
	http://www.awcs.org/css/_.pdf

CSS

AWCS

CSS※Reference & basic source samples for beginners.

目次

コーディング

機能

CSSとは

CSSの概念

CSSの歴史

設定方法

ヘッダ方式

外部スタイル

インラインスタイル

クラスとID

擬似クラス

相対的単位

絶対的単位

キーワード指定

色の指定

文字色の指定

文字の装飾

行の高さを指定

行揃えの指定

文字の垂直位置の指定

文字間隔の指定

インデントの指定

文字表記方向の指定

フォントの指定

フォントサイズの指定

フォントの太さを指定

フォントを斜体に指定

フォントをまとめて指定

背景色を指定

背景に画像を指定

背景画像の繰り返し方法を指定

背景画像の見せ方応用編

リストマークを指定

リストマークに画像を指定

ボックスの枠線を指定

ボックスの幅と高さを指定

パディングを指定

マージンを指定

影をおとす

影を伸ばす

発光させる

ぼかす

表示方向を反転

マウスカーソルの形を指定

スクロールバーの色を指定

スクロールバーを消す

CSS
※Reference & basic source samples for beginners.