CSSの種類と使用例

CSSで文字に変化を

※新規ウインドウで開きます PDF印刷Eメール

文字の色や配置を指定するCSS
変化例 プロパティ 値 書き方の例

文字色を指定する

 color 色コード、又は色名 p{color: #339966;}
文字の水平方向の位置を指定する
左揃え
中央揃え
右揃え
両端揃え
text-align
left
center
right
justify
td{text-align: left;}
文字の垂直方向の位置を指定する
行の下部。上側下側
上揃え 中央揃え 下揃え
vertical-align
行内セル内
baseline top
super middle
sub bottom

span{vertical-align: baseline;}

td{vertical-align:top;}
文字の装飾を指定する

装飾なし

下線

上線

取り消し線

点滅

 text-decoration
none
underline
overline
line-through
blink
p{text-decolation: none;}
文字の水平方向・垂直方向を指定するプロパティは画像やテーブルセルなどにも指定できます。
垂直方向の指定は、一行の文字列内で指定するかテーブルのセルに指定するかで表記が異なります。

文字の形や大きさを指定するCSS
変化例 プロパティ 値 書き方の例
文字のサイズを指定する
文字サイズ15px
文字サイズ150%
文字サイズxx-small
文字サイズlarger
font-size 「数値＋単位」で指定するか、下記のように指定
xx-small
x-small
small
medium
large
x-large
xx-large
larger
smaller

xx-smallからxx-largeまでは１段階ずつ大きくなっていきます。
largerは現在の大きさから１段階大きく、
smallerは１段階小さくなります。

 td{font-size: 15px;}
文字の太さを指定する
通常
太い
１段階太い
１段階細い
font-weight
normal
bold
bolder
lighter

p{font-weight:bold;}

文字の斜体を指定する

斜体とイタリック体

 font-style
normal
oblique
italic
span{font-style: italic;}
font-styleのobliqueとitalicの違いは、単純に斜めに傾くか筆記体風に傾くかです。
表示するブラウザによって、どちらを指定したも表示に差がない場合があります。
   

CSSで装飾

※新規ウインドウで開きます PDF印刷Eメール

背景を指定するCSS
変化例 プロパティ 値 書き方の例
背景色を指定する background-color 色コード、
又は色名、
transparent(透明)		 td{background-color: #339966;}
背景画像を指定する background-image url(背景画像のURL) td{background-image:url(images/stories/aomori_img.gif);}
背景画像の繰り返し方法を指定する

全体に
繰り返す

水平方向に
繰り返す

垂直方向
に繰り返す

繰り返さず、
１つだけ配置
background-repeat
repeat
repeat-x
repeat-y
no-repeat
td{background-repeat:repeat;}
背景画像の位置を指定する

左上に
配置

中央に
配置

右下に
配置

左から2em、
上から10px
の位置に配置
background-position 水平方向・垂直方向の順で
「数値＋単位」で指定するか、
下記のように指定
水平方向垂直方向
left top
center center
right bottom

td{background-position:left top;}

td{background-position:2em 10px;}
まとめると以下のようになります。
背景色黄色
背景画像を水平方向に繰り返し
垂直方向中央に配置

td{
background-color: #ffff00;
background-image:url(images/stories/aomori_back.gif);
background-repeat:repeat-x;
background-position: center center;
}
以下のように、全てまとめて一括指定する事も出来ます。
td{background: #ffff00 url(images/stories/aomori_back.gif) repeat-x center center;}
値の間は半角スペースで区切ります。
表記の順番に決まりは無く、背景色などを指定する必要が無い時は省略しても構いません。

枠線のデザインを指定するCSS
変化例 プロパティ 値 書き方の例
枠線のスタイルを指定
枠線のスタイルを
上下左右別々に指定

border-style

border-top-style
border-right-style
border-bottom-style
border-left-style
none
solid
double
dashed
dotted
groove
ridge
inset
outset
td{border-style: solid;}
枠線の太さを指定する
細い枠線
標準の枠線
太い枠線

border-width

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

 「数値＋単位」で指定するか、
下記のように指定
thin
medium
thick

td{border-width:thin;}
枠線の色を指定する
 border-color 色コード、又は色名で指定 div{border-color: #0000ff;}
borderもまとめて一括指定出来ます。
border:double 5px #ff6633; border-top: solid 3px #66cc00;
border-right: solid 2px #ff6633;
border-bottom: double 5px #66cc00;
border-left: solid 20px #66cc00;

枠線との間隔を指定するCSS
変化例 プロパティ 値 書き方の例
枠線と内容との
間隔を指定する

padding

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

 「数値＋単位」か「auto」で指定。
autoは規定の間隔		 td{padding:10px;}
枠線と
周囲との間隔を指定する

margin

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

 「数値＋単位」か「auto」で指定。
autoはブラウザが自動で設定する

table{
margin-top:10px;
margin-right:auto;
margin-bottom:10px;
margin-left:auto;
}
tableなどのブロック要素のmargin-rightとmargin-leftをautoにすると、
中央寄せになります。

リスト表示の記号の種類や位置を指定するCSS
変化例
  • リストの行頭記号
  1. または行頭番号

のマークの種類を指定
プロパティ 値 書き方の例
list-style-type
  • disk
  • 黒丸
  • circle
  • 白丸
  • square
  • 四角
  1. decimal
  2. アラビア数字
  1. lower-roman
  2. ローマ数字 小文字
  1. upper-roman
  2. ローマ数字 大文字
  1. lower-alpha
  2. アルファベット小文字
  1. upper-alpha
  2. アルファベット大文字
  • none
  • 記号無し
 ol{list-style-type:disk;}

変化例
  • リストの行頭記号または行頭番号を
  • 画像にする
プロパティ 値 書き方の例
list-style-image url(画像のURL)か「none」
 ul{list-style-image: url(images/stories/aomori_back.gif);}

変化例
  • リストの行頭記号
    または行頭番号の位置を
  • 外側か
    内側に指定
プロパティ 値 書き方の例
list-style-position
outside
inside
li{list-style-position:outside;}
listのスタイルも下記のようにまとめて一括指定できますが、
list-style-typeとlist-style-imageを同時に指定すると
list-style-typeは反映されません。
li{list-style:square inside;}
   

CSSで配置指定

※新規ウインドウで開きます PDF印刷Eメール

大きさを指定するCSS
変化例 プロパティ 値 書き方の例
幅を指定する

幅150px
width 「数値＋単位」か「auto」で指定。 td{width:150px;}
高さを指定する

高さ5em
height 「数値＋単位」か「auto」で指定。

td{height:5em;}

回り込みの指定や解除をするCSS
変化例 プロパティ 値 書き方の例

左揃えにし、続く文字や
画像を右側に回り込ませる

回り込みを解除 

右揃えにし、続く文字や
画像を左側に回り込ませる

 float
left
right
none
img{float:left;}
clear
left
right
both
none

img{clear:both;}
noneを指定した時は回り込みの指定や解除を行いません。
clear:both;は左揃えと右揃え両方の回り込み指定をまとめて解除します。
   

CSSでリンクのデザイン

※新規ウインドウで開きます PDF印刷Eメール

疑似クラス

CSSには、自分で設定する「クラス」の他にあらかじめ用意されている「疑似クラス」があります。
リンク要素とセットで使用し、以下のように記述します。

a:link{color:#ff0000;}

セレクタと疑似クラスの間は「:(コロン)」で区切ります。

疑似クラス 説明
:link 未アクセスのリンク部分を指定
:visited アクセス済みのリンク部分を指定
:hover 選択したリンク部分を指定
:active クリックしたときのリンク部分を指定

HTMLで指定した時はページ全体の指定になりましたが、
CSSで指定する時は、クラスやIDと組み合わせることで
一部のリンクにのみスタイルを適用することが出来ます。

td id="csslink1"

#csslink1 a:link{color:#ff0000;}
#csslink1 a:visited{color:#999999;}
#csslink1 a:hover{color:#ffffff; background-color:#ff0000;}
#csslink1 a:active{color:#ff3333;}

td id="csslink2"

#csslink2 a:link{color:#0000ff; text-decoration:none;}
#csslink2 a:visited{color:#00ff00;}
#csslink2 a:hover{color:#ffffff; background-color:#0000ff;}
#csslink2 a:active{color:#3333ff;}

td id="csslink3"

#csslink3 a:link, #csslink3 a:visited{color:#ffffff; background-color:#02c4ff; border:3px ridge #027699;}
#csslink3 a:hover, #csslink3 a:active{background-color:#028ab3;}

a:linkで設定したスタイルは他の疑似クラスにも適用されます。
上記例のcsslink3では文字色と枠線は常に同じで、
リンクを選択かクリックした時に背景色のみ変更されるように指定しています。