スタイルシートのサンプル

属性（命令）

意味値（単位等）& sample

color .

文字の色 color:red;

font-size .

文字の大きさフォントサイズ表

text-decoration .

text-decoration:none;: なし（デフォルト）
text-decoration:overline;: 上線
text-decoration:underline;: 下線
text-decoration:line-through;: 取消線
text-decoration:overline underline;: 上線下線

text-align .

ボックス要素の中（ピンクの中）での位置

文字の水平位置左

文字の水平位置真中

文字の水平位置右

vertical-align .

ボックス要素（ピンクの中）での位置

文字の
垂直位置

インライン要素（文字に続ける時）での位置
文字の垂直位置 vertical-align:super;
文字の垂直位置 vertical-align:sub;

インライン要素（画像に続ける時）での位置

vertical-align:top;

vertical-align:middle;

vertical-align:bottom;

ieではインライン要素の bottom は非対応

background . .

背景色を指定したり背景に画像を貼る

background:背景色 url('背景画像アドレス');

background:
背景色 url('背景画像アドレス') no-repeat 80% 70%;
no-repeat⇒繰り返さない
80% 70%⇒右へ80%下へ70%の位置

詳しくは

padding

枠と文字の間隔

padding *;
padding * *;
padding * * *;
padding * * * *;
padding-top:*;
padding-right:*;
padding-bottom:*;
padding-left:*;

上下左右同一の値
上下、左右の値
上、左右、下の値
上、右、下、左の値

ピンクの部分が padding

mm: ミリ
cm: センチ
in: インチ
pt: フォントサイズのポイント
em: 大文字の M
ex: 小文字の x
px: ピクセル
%: パーセント

margin .

要素の端から要素までの間隔
margin ; margin ; margin * ; margin * * ; margin-top:; margin-right:; margin-bottom:; margin-left:*;	上下左右同一の値上下、左右の値上、左右、下の値上、右、下、左の値黒い影黒い影こんな事できます <div style="margin:***;"> 水色の部分が margin

line-height .

行送りを調整

style="line-height:10px;"

style="line-height:30px;"

style="line-height:50px;"

style="line-height:normal;"（デフォルト）

詳しくは line-height サイズ早見表を参考にしてください

border-style

枠線のスタイル

枠線設定をまとめて指定する
border :枠線の色枠線の種類枠線の太さ
border:gray outset 1px;
border:gray dotted medium;

border:#d0d0d0 solid 5px;

border:#d0d0d0 double 5px;

border:#d0d0d0 groove 5px;

border:#d0d0d0 ridge 5px;

border:#d0d0d0 inset 5px;

border:#d0d0d0 outset 5px;

border:#d0d0d0 dotted 5px;

border:#d0d0d0 dashed 5px;

border:none;

border-width .

枠線の太さ thin medium thick

border-color .

枠線の色 style="border:*** solid 1px;"

position

relative
通常の表示位置からの相対位置

通常の表示位置

position:relative;left:50px;top:20px;

absolute
絶対位置で指定された所に表示
通常の表示位置に影響されず思った位置に表示可能

通常の表示位置

通常の表示位置がこの場合以下を指定すれば
position:absolute;right:0px;top:0px;

position:absolute;right:0px;top:0px;

通常の表示位置

通常の表示位置がこの場合でも以下を指定すれば
position:absolute;right:0px;top:0px;

position:absolute;right:0px;top:0px;

top
bottom
left
right

上端からの位置
下端からの位置
左端からの位置
右端からの位置

こんな事できます

黒い影

visibility .

要素の表示、非表示 visible 表示(デフォルト)
hidden 非表示

cursor

style="cursor: auto;"
style="cursor: default;"
style="cursor: pointer;"
style="cursor: crosshair;"
style="cursor: move;"
style="cursor: text;"
style="cursor: wait;"
style="cursor: help;"
style="cursor: n-resize;"
style="cursor: s-resize;"
style="cursor: w-resize;"
style="cursor: e-resize;"
style="cursor: ne-resize;"
style="cursor: nw-resize;"
style="cursor: se-resize;"
style="cursor: sw-resize;"
style="cursor: hand;"（IE）
style="cursor: no-drop;"（IE）
style="cursor: all-scroll;"（IE）
style="cursor: col-resize;"（IE）
style="cursor: row-resize;"（IE）
style="cursor: progress;"（IE）
style="cursor: not-allowed;"（IE）
style="cursor: vertical-text;"（IE）

マウスが乗った時の形状乗っけてみてね

IEはインターネットエクスプローラーのみ

list-style-type

style="list-style-type:disc;"
style="list-style-type:circle;"
style="list-style-type:square;"
style="list-style-type:decimal;"
style="list-style-type:lower-roman;"
style="list-style-type:upper-roman;"
style="list-style-type:lower-alpha;"
style="list-style-type:upper-alpha;"
style="list-style-type:none;"

pre top home(geo) home(goo) close

<style type="text/css"><!--  
table  {
	color:#000000;
	font-size:12pt;
	background:yellow;
	margin-left:auto;
	margin-right:auto;}

p             {
	background:pink;}

h3            {
	background:ivory;}

blockquote    {
	background:lightgreen;}
--></style>
<div style="text-align:center;">
<table>
	<tr>
		<td>
			<p>
				日付
			</p>
			<h3>
				タイトル部分
			</h3>
			<blockquote>
				コメント<br>
				コメント<br><br>
				コメント
			</blockquote>
		</td>
	</tr>
</table>
</div>

左記のソースです
windows
下記を[Ctrl]+[A]で
全選択してコピーできます
mac
下記を

+[A]で
全選択してコピーできます

<style type="text/css"><!--  
table  {
	color:#000000;
	font-size:12pt;
	background:yellow;
	margin-left:auto;
	margin-right:auto;}

p             {
	background:pink;}

h3            {
	background:ivory;}

blockquote    {
	background:lightgreen;}
--></style>
<div style="text-align:center;">
<table>
	<tr>
		<td>
			<p>
				日付
			</p>
			<h3>
				タイトル部分
			</h3>
			<blockquote>
				コメント<br>
				コメント<br><br>
				コメント

			</blockquote>
		</td>
	</tr>
</table>
</div>

sample.html と保存

ie等のブラウザで
開くとで下のように

基本形

黄色い部分の設定: table{...}
ピンク部分の設定: p{...}
アイボリー部分の設定: h3{...}
緑部分の設定: blockquote{...}

日付

タイトル部分

pre top home(geo) home(goo) close

color

タイトル部分を赤に

h3{
background:ivory;
color:red;}
赤い部分を追加して

タイトル部分が赤に

日付

タイトル部分

pre top home(geo) home(goo) close

background

背景色を変える
table{
background: lightblue;}
yellow を lightblue に変えると

背景色がlightblueに変わります

日付

タイトル部分

background:背景色 url('背景画像アドレス');

画像アドレスを指定して背景画像を貼ります

pre top home(geo) home(goo) close

padding

blockquote{
background:lightgreen;
padding:1em;}

赤い部分を追加すると

緑のボックス内の
文字が内側に1文字分(1em)入ります

日付

タイトル部分

pre top home(geo) home(goo) close

margin

blockquote{
background:lightgreen;
margin:1em;}

赤い部分を追加すると

緑部分の境界が1文字分(1em)に

日付

タイトル部分

pre top home(geo) home(goo) close

font-size

p{
background:pink;
font-size:10pt;}

blockquote{
background:lightgreen;
font-size:15pt;}

日付

この部分の文字の大きさを10ptに

緑の枠の中の
文字を15ptにします

日付

タイトル部分

フォントの大きさについては
フォントサイズ早見表を参考にしてください

pre top home(geo) home(goo) close

text-align

h3{
background:ivory;
text-align:right;}

blockquote{
background:lightgreen;
text-align:center;}

タイトル部分を右寄せ

緑枠の中を真中寄せ

日付

タイトル部分

pre top home(geo) home(goo) close

vertical-align

コメント
←上

コメント
←真中

コメント
←下

日付

タイトル部分

pre top home(geo) home(goo) close

text-decoration

p{
background:pink;
text-decoration:underline;}

h3{
background:ivory;
text-decoration:overline;}

blockquote{
background:lightgreen;
text-decoration:line-through;}

text-decoration:overline underline;

日付

タイトル部分

pre top home(geo) home(goo) close

line-height

blockquote{
background:lightgreen;
line-height:30px;}

詳しくは
line-height サイズ早見表
を参考にしてください

日付

タイトル部分

pre top home(geo) home(goo) close

border .

border:枠の色枠の種類枠の太さ;

center{
background:yellow;
border:black dotted 5px;}
p{
background:pink;
border:red solid 1px;}
h3{
background:ivory;
border:#d0d0d0 inset 2px;}
blockquote{
background:lightgreen;
border:#800000 outset 3px;}

日付

タイトル部分

pre top home(geo) home(goo) close

position
p{
background:pink;
position:relative;
top:43pt;}

日付の部分を移動

日付

タイトル部分

pre top home(geo) home(goo) close

visibility
p{
background:pink;
visibility:hidden;}
日付の部分を消す

日付の部分は表示されないだけで
スペースは確保されます

日付

タイトル部分

pre top home(geo) home(goo) close