TOPページ >  スタイルシート(CSS)の記述 > スタイル指定一覧

スタイル指定一覧

ホームページやブログなどのウェブサイトでは、<p>や<div>などのブロックタグおよび<span>などのインラインタグスタイルを指定することができます。ここでは、こうしたタグに指定できるスタイル一覧をご紹介します。別ページで個別に解説しているものは『意味(参照ページ)』欄にリンクが貼ってありますので、詳しくはそちらをご覧ください。

スタイル指定一覧

スタイル意味(参照ページ)キーワード意味(参照ページ)
background背景スタイル一括指定背景色 背景画像URL 繰返し方法 固定指示 画像の表示位置
※半角スペースで区切って指定
background-color背景色#16進数または色名称
background-image背景画像url(画像パスまたはURL)
background-repeat背景画像の繰返し表示方法repeat上下左右に繰返し
x-repeatX方向に繰返し
y-repeatY方向に繰返し
no-repeat繰返しなし
background-position背景画像の位置絶対サイズまたは相対サイズで、左右の表示位置 上下の表示位置の順でスペースで区切って指定
または下記のキーワードで上下の配置と左右の配置をスペースで区切って指定
left左右の配置を左に
center左右の配置を中央に
right左右の配置を右に
top上下の配置を上に
middle上下の配置を中央に
bottom上下の配置を下に
background-attachment背景画像の固定scroll通常
fixed固定
border枠スタイル一括指定全体の枠の太さ 全体の枠の色 全体の枠の太さ
※半角スペースで区切って指定
bordr-width枠の太さ絶対サイズまたは相対サイズ
border-top-width上の枠の太さbordr-widthと同じ
border-bottom-width下の枠の太さbordr-widthと同じ
border-left-width左の枠の太さbordr-widthと同じ
border-right-width右の枠の太さbordr-widthと同じ
border-color枠の色#16進数または色名称
border-top-color上の枠の色border-colorと同じ
border-bottom-color下の枠の色border-colorと同じ
border-left-color左の枠の色border-colorと同じ
border-right-color右の枠の色border-colorと同じ
border-style枠線の種類noneなし
hiddenなし
dotted丸い点線
dashed四角い点線
solid実線
double二重線
groove凹んだような立体枠
ridge尖ったような立体枠
inset中央が凹のような立体枠
outset中央が凸のような立体枠
border-top-style上の枠線の種類border-styleと同じ
border-bottom-sytle下の枠線の種類border-styleと同じ
border-left-style左の枠線の種類border-styleと同じ
border-right-style右の枠線の種類border-styleと同じ
color文字の色#16進数または色名称
font書体、サイズ、行の高さ、太さ、スタイルをまとめて指定イタリックの指定 スモールキャピタルの指定 文字の太さ 文字の大きさ 行の高さ 書体名
※半角スペースで区切って指定
font-family書体の指定'書体名1','書体名2'…
font-size文字の大きさ絶対サイズ、相対サイズまたは下記のキーワード
xx-small超特小
x-small特小
small
medium標準
xx-large超特大
x-large特大
large
smallerより小さく
largerより大きく
font-styleイタリック/斜体の指定normal通常
italicイタリック体
oblique斜体
font-variant英文字スタイルの指定normal通常
small-capsスモールキャピタル
font-weight文字の太さ絶対サイズ、相対サイズまたは100(細い)~900(太い)までの数値を100刻みで指定
heightブロック文章の高さ絶対サイズまたは相対サイズ
leffter-spacing文字間隔絶対サイズまたは相対サイズ
line-height行の高さ絶対サイズまたは相対サイズ
marginマージン一括指定上マージン 右マージン 下マージン 左マージンの順で半角スペースで区切って指定
margin-top上マージン絶対サイズまたは相対サイズ
margin-bottom下マージン絶対サイズまたは相対サイズ
margin-left左マージン絶対サイズまたは相対サイズ
margin-right右マージン絶対サイズまたは相対サイズ
overflowあふれ部分の表示方法visiblewidth、heightを無視して全内容を表示
scrollスクロールバーを付けて表示
hidden表示幅を超えた部分は非表示
auto表示幅を超えた場合にスクロールバーを付けて表示
overflow-x横方向のあふれ部分の表示方法overflowと同じ
overflow-y縦方向のあふれ部分の表示方法overflowと同じ
paddingパディング一括指定上パディング 右パディング 下パディング 左パディングの順で半角スペースで区切って指定
padding-top上パディング絶対サイズまたは相対サイズ
padding-bottom下パディング絶対サイズまたは相対サイズ
padding-left左パディング絶対サイズまたは相対サイズ
padding-right右パディング絶対サイズまたは相対サイズ
positionブロック文章の表示位置static自動
absolutebodyの左上を原点とする座標系
relative直前のブロックタグが原点の座標系
text-align行揃えleft左詰め
center中央揃え
right右詰め
justify均等配置
text-decoration文字の修飾none通常
underline下線
overline上線
line-through取消線
blink点滅
text-indent文字下げ絶対サイズまたは相対サイズ
test-transform大文字/小文字の自動変換none通常
capitalize単語の先頭の一文字を大文字にする
uppercase大文字にする
lowercase小文字にする
unicode-bidi文字方向ltr左から右へ
rtl右から左へ
inherit親エレメントの文字方向を継承
widthブロック文章の幅絶対サイズまたは相対サイズ
work-break禁則処理normal単語ごとに改行
break-all単語/語句を無視して強制的に改行
keep-all単語/語句を無視して強制的に改行語句ごとに改行
word-spacing単語間隔絶対サイズまたは相対サイズ