ホームページの作り方

CSSを使ったスタイリッシュなページ作り(HTML/CSS入門)

このページでは、CSS(カスケーディング・スタイル・シート)の基本的な書き方と、設定リファレンスを紹介しています。

<<前へ(HTMLによる構造記述)    <ページの先頭へ>    次へ(CSSレイアウト)>>

CSSスタイル(HTMLタグにスタイルを付ける)

「CSSスタイルシート」の標準的なフォーマットは、以下のようになります。

"要素名(タグ名、クラス名、ID名)" {
   "アトリビュート名" : 値;
   "アトリビュート名" : 値;
   "アトリビュート名" : 値;
          :
}

例えばリンクタグ("A"タグ)の指定では以下のようになります。

A {
   color : navy ;
   text-decoration : underline ;
}

本ページのリンクは、上記設定を使用しています。(リンク色が"navy(紺色)で、下線が引いてある)

これらの設定を各種タグに対して書いたものを「.cssファイル」として保存して各ページから参照できるようにすれば「スタイルシート」を用いたホームページの完成となります。

それでは、使用頻度の高い個々のアトリビュートを見ていきます。

文字関連スタイル

アトリビュート 意味
color 文字の色 予約色または
#000000〜#ffffff
(RGBの16進表記)
{color:navy;}
{color:#ffaf32;}
ネイビー
#ffaf32
text-align 文字水平位置 left
right
center
{text-align:left;}
{text-align:right;}
{text-align:center;}

text-decoration 文字飾り none
overline
underline
line-through
{text-de...:overline;}
{text-de...:line-through;}

オーバライン

取り消し線

font-family フォントタイプ 予約語 {font-family:serif;}
{font-family:fantasy;}

日(Eng)

日(Eng)

font-size フォントタイプ 予約語
em(文字基準)
px(ピクセル)
{font-size:medium;}
{font-size:1em;}
{font-size:10px;}

medium

2em

10px

font-weight 文字太さ "bold"または
100〜900
{font-weight:bold;}
{font-weight:500;}

太い

少し太い

font-style フォントスタイル italic
oblique
normal
{font-style:italic;}
{font-style:oblique;}

日(Eng)

日(Eng)

line-height 行間隔 em(文字基準)
px(ピクセル)
%(対文字高)
{line-height:2em;}
{line-height:20px;}
{line-height:120%;}

2行分

20px分

120%分

ボックス関連スタイル

html上の文字の周囲には、箱型の領域があります。この領域のスタイルを変更することによりいろいろな表現のバリエーションが出てきます。

アトリビュート 意味
background-
color
背景の色 予約色または
#000000〜ffffff
(RGB16進表記)
{back..:navy;} ネイビー
background-
image
背景画像 イメージファイル指定 {back...:url(a.gif);} a.gif
background-
repeat
背景画像
繰り返し
repeat
repeat-x
repeat-y
no-repeat
{back...:url(a.gif);
back...:repeat;}
a.gif
border-
 style
 top-style
 right-style
 left-style
 bottom-style
枠線のスタイル 予約語 {border-top-style:dotted;} 点線
border-
 color
 top-color
 right-color
 left-color
 bottom-color
枠線の色 予約色または
#000000〜ffffff
(RGB16進表記)
{border-style
:double;
border-color
:navy;}
ネイビー
border-
 width
 top-width
 right-width
 left-width
 bottom-width
枠線の幅 予約語または
em(文字基準)
px(ピクセル)
%(対文字高)
{border-left-style:solid;
border-left-width:1em;}
1em
margin
 top
 right
 left
 bottom
外側のブロック
との間隔
autoまたは
em(文字基準)
px(ピクセル)
%(対文字高)
{border-style:solid;
margin-left:10px;}
左10px
padding
 top
 right
 left
 bottom
枠線と中身
との間隔
autoまたは
em(文字基準)
px(ピクセル)
%(対文字高)
{border-style:solid;
padding-left:10px;}
左10px
height
width
高さと幅 autoまたは
em(文字基準)
px(ピクセル)
%(対文字高)
{border-style:solid;
width:20px;}
幅20px

ページの先頭へ

予約語集

「CSSスタイルシート」で使用される各種予約語を載せておきます。

予約色

以下にCSSで使える予約色を載せておきます。

色名 色名 色名 色名
Black(#000000) Gray(#808080) Silver(#C0C0C0) White(#FFFFFF)
Red(#FF0000) Lime(#00FF00) Blue(#0000FF)
Maroon(#800000) Green(#008000) Navy(#000080)
Yellow(#FFFF00) Fuchsia(#FF00FF) Aqua(#00FFFF)
Olive(#808000) Purple(#800080) Teal(#008080)

フォントタイプ

以下にフォントタイプで指定できる予約語を載せておきます。

予約語 サンプル
serif

日本語の例(English Case)

sans-serif

日本語の例(English Case)

cursive

日本語の例(English Case)

fantasy

日本語の例(English Case)

monospace

日本語の例(English Case)

フォントサイズ

以下に、フォントのサイズ指定で使用できる予約語を載せておきます。

予約語 サンプル 予約語 サンプル 予約語 サンプル
xx-large

はら

x-large

ほれ

large

ひれ

medium

はれ

small

あへあへ

x-small

うひはぁ

xx-small

あへうひはぁ〜

枠線スタイル

以下に、枠線のスタイル指定で使用できる予約語を載せておきます。

予約語 サンプル
solid solid
double double
dotted dotted
groove groove
ridge ridge
inset inset
outset outset
dashed dashed

枠線幅指定

以下に、枠線の幅指定で使用できる予約語を載せておきます。

予約語 サンプル
thin thin
medium medium
thick thick

<<前へ(HTMLによる構造記述)    <ページの先頭へ>    次へ(CSSレイアウト)>>