.
スタイルシートのサンプル
スタイルシートのサンプル
属性( 命令 ) 意味 値( 単位等 )& 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
ピクセル
%
パーセント
<td style="padding:***;">
<div style="padding:***;">
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;
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;"
<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]で
全選択してコピーできます
sample.html と保存
ie等のブラウザで
開くとで下のように
基本形
黄色い部分の設定
table{...}
ピンク部分の設定
p{...}
アイボリー部分の設定
h3{...}
緑部分の設定
blockquote{...}

日付

タイトル部分

コメント
コメント

コメント
color
タイトル部分を赤に
h3{
background:ivory;
color:red;}
赤い部分を追加して

タイトル部分が赤に

日付

タイトル部分

コメント
コメント

コメント
background
背景色を変える
table{
background: lightblue;}
yellow を lightblue に変えると
背景色がlightblueに変わります

日付

タイトル部分

コメント
コメント

コメント
background:背景色 url('背景画像アドレス');
画像アドレスを指定して背景画像を貼ります
padding
blockquote{
background:lightgreen;
padding:1em;}
赤い部分を追加すると
緑のボックス内の
文字が内側に1文字分(1em)入ります

日付

タイトル部分

コメント
コメント

コメント
margin
blockquote{
background:lightgreen;
margin:1em;}
赤い部分を追加すると
緑部分の境界が1文字分(1em)に

日付

タイトル部分

コメント
コメント

コメント
font-size
p{
background:pink;
font-size:10pt;}
blockquote{
background:lightgreen;
font-size:15pt;}
日付
この部分の文字の大きさを10ptに
緑の枠の中の
文字を15ptにします

日付

タイトル部分

コメント
コメント

コメント
フォントの大きさについては
フォントサイズ早見表 を参考にしてください
text-align
h3{
background:ivory;
text-align:right;}
blockquote{
background:lightgreen;
text-align:center;}
タイトル部分を右寄せ
緑枠の中を真中寄せ

日付

タイトル部分

コメント
コメント

コメント
vertical-align
コメント
<span style="color:red;font-size:8pt; vertical-align:top; ">←上</span>
コメント
<span style="color:red;font-size:8pt; vertical-align:middle; ">←真中</span>
コメント
<span style="color:red;font-size:8pt; vertical-align:bottom; ">←下</span>

日付

タイトル部分

コメント←上
コメント←真中

コメント←下
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;

日付

タイトル部分

コメント
コメント

コメント
line-height
blockquote{
background:lightgreen;
line-height:30px;}
詳しくは
line-height サイズ早見表
を参考にしてください

日付

タイトル部分

コメント
コメント

コメント
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;}

日付

タイトル部分

コメント
コメント

コメント
position
p{
background:pink;
position:relative;
top:43pt;
}
日付 の部分を移動

日付

タイトル部分

コメント
コメント

コメント
visibility
p{
background:pink;
visibility:hidden;}
日付の部分を消す
日付の部分は表示されないだけで
スペースは確保されます

日付

タイトル部分

コメント
コメント

コメント