頻繁に使うスタイルシート一覧と書き方
--- 書いて試せるホームページ制作講座 ---
前のページに戻る

頻繁に使うスタイルシート一覧

広告


文章全般
・ color:
文字の色をカラーナンバーまたは色名
・ text-align:
文字の左寄せ右寄せセンタリングをleft,right,center,justifyで指定
・ text-decoration:
文字のアンダーライン、打消し線等をnone,underline,overline,line-through,blinkで
・ line-height:
行の高さ(行間)
・ letter-spacing:
文字間の幅
・ text-transform:
大文字小文字の指定をnone,capitalize,lowercase,uppercaseで
・ text-indent:
テキストの一行目のインデント幅を数値+単位(省略はpx)で
BOXの形状と装飾
・ width:
ボックスの横幅を数値+単位(省略はpx)、%値、autoで
・ height:
ボックスの縦幅を数値+単位(省略はpx)、%値、autoで
・ margin-top,margin-bottom,margin-left,margin-right:
上下左右のマージンを数値+単位(省略はpx)、%値、autoで
・ margin:
マージンの一括指定で必要な値をスペースで区切って指定 
・ padding-top,padding-bottom,padding-left,padding-right:
上下左右のパディングを数値+単位(省略はpx)、%値、autoで
・ padding:
パディングの一括指定で必要な値をスペースで区切って指定
・ border-top-color,border-bottom-color,border-left-color,border-right-color:
上下左右のボーダー色をカラーナンバー、色名、transparent(透明)で
・ border-color:
ボーダー色の一括指定で必要な値をスペースで区切って指定
・ border-top-width,border-bottom-width,border-left-width,border-right-width:
上下左右のボーダーの太さを数値+単位(省略はpx)またはthin,medium,thickで
・ border-width:
ボーダーの太さの一括指定で必要な値をスペースで区切って指定
・ border-top-style,border-bottom-style,border-left-style,border-right-style:
上下左右のボーダーの形状をnone,hidden,solid,double,groove,ridge,inset,outset,dashed,dottedで
・ border-style:
ボックスの枠線の形状をnone,hidden,solid,double,groove,ridge,inset,outset,dashed,dottedで
・ border-top,border-bottom,border-left,border-right:
上下左右のそれぞれのボーダーの色、太さ、形式を設定
・ border:
ボックスの上下左右ボーダーの色、太さ、形式一括指定で、必要な値をスペースで区切って指定
[参考ページ] ⇒ スタイルシートでBOX要素を装飾するスタイルシートで枠線を作る


広告


表示形式と位置
・ display:
要素の表示形式をnone,block,inlineで
・ position:
top、left、z-indexなどの指定方法をstatic、relative、absolute、fixedで
・ top,bottom,left,right:
上下左右からの位置を数値+単位(省略はpx)、%値、autoで
・ z-index:
奥行きを数値+単位(省略はpx)、autoで
・ float:
文字の回り込みの設定をleft,right,noneで
・ clear:
文字の回り込みを解除をleft,rightで
・ overflow:
表示しきれない部分の処理をvisible,hidden,scroll,autoで
・ visibility:
可視不可視をvisible,hidden,collapseで
・ clip:
表示する範囲をrect(上辺,右辺,下辺,左辺) で指定(左上からのピクセル値)position:absoluteと併用して使用
[参考ページ] ⇒ ドキュメントを決められた範囲に収めるスタイルシート


フォント(文字)
・ font-family:
フォント名、「,」で区切って複数指定可能、font-family: "MS P明朝";など
・ font-size:
フォントサイズを数値+単位(省略はpx)で指定
・ font-weight:
フォントの太さを数値+単位(省略はpx)やnormal,bold,lighter,bolderなどで指定
・ font-style:
フォントのスタイルをnormal,italic,obliqueなどで指定
・ font-variant:
フォントの小文字を大文字にする
・ font:
フォントの一括指定で必要な値をスペースで区切って指定
[参考ページ] ⇒ フォントサイズの絶対指定と相対指定


要素の背景
・ background-color:
背景色をカラーナンバー、色名、transparent(透明)で
・ background-image:
背景画像をurl()関数で画像URIを指定background-image:url("〜.jpg");など
・ background-repeat:
背景画像のリピート方法repeat(全面)repeat-x(横)repeat-y(縦)no-repeat(一つ)
・ background-position:
背景画像の開始位置left,right,top,bottom,center、または数値か%値で横方向値と縦方向値を空白で区切る
・ background-attachment:
背景画像のスクロール方法をfixed(固定)、scroll(スクロール)
・ background:
背景の一括指定で必要な値をスペースで区切って指定
[参考ページ] ⇒ ホームページの色を作るスタイルシートで背景を作る


広告


表の仕様
・ table-layout:
テーブルの表示方法をfixedかautoで
・ border-collapse:
セルのボーダーの表示方法をcollapseかseparateで
・ border-spacing:
セルのボーダーの上下左右の間隔を数値+単位(省略はpx)で
・ vertical-align:
インライン要素やTH、TD要素の表示される行の中での縦方向の位置
リストの仕様
・ list-style-image:
リストの見出し画像をurl()関数で画像URIを指定list-style-image:url("〜.jpg");など
・ list-style-position:
リスト項目の二行目以降のインデントをoutside,insideで
・ list-style:
リストの一括指定で必要な値をスペースで区切って指定
カーソル
・ cursor:
カーソルの形状をcrosshair(十字型)pointer(リンク)move(移動)text(l)wait(砂時計)他で



スタイルシートの書き方

広告


一つのタグだけにスタイルを設定する

 設定するタグのstyle要素にstyle="スタイル名:値;"の書式で記述します。

 以下の青色の四角い編集枠内は書き換える事が可能で、「ソースを実行」ボタンで書き換えたソースがWebページとして開かれます。ソースを自由に書き直してお試しください。




広告


一種類のタグだけにスタイルを設定する

 <HEAD>〜</HEAD>の間に以下の書式で必要なだけ記述します。

<STYLE type="text/css"> <!-- タグ名{スタイル名:値;スタイル名:値;・・・} タグ名{スタイル名:値;スタイル名:値;・・・} タグ名{スタイル名:値;スタイル名:値;・・・} --> </STYLE>




広告


一種類のタグの特定の箇所だけにスタイルを設定する

 <HEAD>〜</HEAD>の間に以下の書式で必要なだけ記述します。特定の箇所にはclass要素でクラス名を設定します。

<STYLE type="text/css"> <!-- タグ名.クラス名{スタイル名:値;スタイル名:値;・・・} タグ名.クラス名{スタイル名:値;スタイル名:値;・・・} タグ名.クラス名{スタイル名:値;スタイル名:値;・・・} --> </STYLE>




広告


タグの種類に関係なく特定の箇所だけにスタイルを設定する

 <HEAD>〜</HEAD>の間に以下の書式で必要なだけ記述します。特定の箇所にはclass要素でクラス名を設定します。

<STYLE type="text/css"> <!-- .クラス名{スタイル名:値;スタイル名:値;・・・} .クラス名{スタイル名:値;スタイル名:値;・・・} .クラス名{スタイル名:値;スタイル名:値;・・・} --> </STYLE>




広告


複数のHTMLファイルに同じスタイルを設定する(外部ファイルを作る)

 拡張子cssのテキストファイルを作り、以下の書式で必要なだけ記述します。

タグ名.クラス名{スタイル名:値;スタイル名:値;・・・} .クラス名{スタイル名:値;スタイル名:値;・・・} タグ名{スタイル名:値;スタイル名:値;・・・}

 制作したcssファイルを各HTMLファイルの<HEAD>〜</HEAD>の間に以下の書式でリンクします。

<LINK rel="stylesheet" href="制作したcssファイル名" type="text/css">





みやけ工房INDEXHome All Rights Reserved. Copyright (C) 2004- Miyake_kobo.