=(^。^)=　25 スタイルシートリファレンス

　　　　　　　　　
body部一括指定　 Font-Awesome
IMEのﾌｫｰｶｽ移動
 IMEの自動設定
 印刷時改ﾍﾟｰｼﾞ
 ｲﾝﾃﾞﾝﾄ　ｲﾝﾗｲﾝ要素
 ｵﾝ･ｵﾌ(JavaScript)
音声　頭文字　画像　ｶｰｿﾙ指定　禁則　均等割付行間空け
 罫線　　ｺﾒﾝﾄ　姿(DIV、P)　ｽｸﾛｰﾙﾊﾞｰ装飾　ｽﾀｲﾙ種類　　ｾﾚｸﾀ　単位
 ﾃｷｽﾄ(ｻｲｽﾞ・装飾・影・回り込み)　配置　背景色・画像
 背景画像の中央配置　ﾊﾟﾃﾞｨﾝｸﾞ　はみだし　　
 ﾌｨﾙﾀｰ・ﾄﾗﾝｼﾞｼｮﾝ　左詰め余白と背景色
 ﾋﾞﾍｲﾋﾞｱ　　表・ﾃｰﾌﾞﾙ
 ﾌｫﾝﾄ　全体の〃ｻｲｽﾞ
 文章の方向　　編集
 ﾎﾟｼﾞｼｮﾝ　　ﾎﾞｰﾀﾞｰ
 ﾏｰｼﾞﾝ　　要素の空白
 ﾘｽﾄ　　ﾘﾝｸの装飾
 ﾘﾝｸの装飾(全ﾍﾟｰｼﾞ)
ﾙﾋﾞ　ﾚｲﾔｰ　ﾛｹｰｼｮﾝ　枠線

　ﾎｰﾑへ

25　スタイルシートリファレンス

css.htm

2024/07/10 08:28　更新

ｽﾀｲﾙｼｰﾄ（ｶｽｹｰﾃﾞｨﾝｸﾞｽﾀｲﾙｼｰﾄ）ﾘﾌｧﾚﾝｽ、W3C　HTML4.0 に準拠。　　　　　色や、ﾌｫﾝﾄ、間隔、配置、境界、ﾏｰｼﾞﾝ、ｶｰｿﾙなどの装飾制御。　　　　all 対応。　　　　　ｺﾋﾟｰ、編集し、簡単にWebで応用できまっ、(^ ^)。　

ﾃﾞﾓ : 　※: 各種応用（例）は、⇒ 7 　CSS　を。

・　ﾄﾞｷｭﾒﾝﾄにCSSﾌﾟﾛﾊﾟﾃｨを追加する方法は、4つ。　　1) ｲﾝﾗｲﾝｽﾀｲﾙ、2) 埋め込みCSS、3) ﾘﾝｸしたCSS、4) ｲﾝﾎﾟｰﾄされたCSS。　　
　　挿入場所は、(1)　head>　～　</head> 間への、 <style type="text/css"></style>　や、　(2)　<body>　～　</body>間への、<span STYLE="　……　　</span>、<div STYLE=　……　</div>、<p STYLE=　……　</p>　などで。

　・　要素のまとめ指定は、『 , 』、属性は『 ; 』で複数を区切り指定可。　　同じものへの複数の定義は後方の定義が優先。　　セレクヤ具体性：同要素に対し、セレクタIDがセレクタCLASSより優先。　　CLASSがセレクタHTML要素名より優先。　　優先順位は、(1) インラインスタイル、(2) ID、(3) CLASS、および(4) HTML要素の順。　　カスケーディングは特定の要素のスタイル順を決定。　　継承は、スタイルプロパティの次の要素への継承を指定。

< ご使用方法 >

　・　保存 : css.htm を右ｸﾘｯｸ、【名前を付けてﾘﾝｸを保存】 - <保存する場所>： ……、などで。

　・　ﾍﾟｰｽﾄ : css.htm　をEdgeなどﾌﾞﾗｳｻﾞｰで開き、目的のﾀｸﾞ（HTML）をﾎｰﾑﾍﾟｰｼﾞ作成ｿﾌﾄなどの ”ﾃｷｽﾄﾓｰﾄﾞで、新しいﾍﾟｰｼﾞや hogehoge.htm（=任意の挿入先ﾌｧｲﾙ名）ﾍﾟｰｽﾄします。　　　※: ﾃｷｽﾄﾓｰﾄﾞ : ｺｰﾄﾞ/HTMLﾀｸﾞ挿入/HTMLﾒﾆｭｰなど。

　･　編集 : hogehoge.htm に ﾃｷｽﾄﾓｰﾄﾞでｺﾋﾟｰ、ﾍﾟｰｽﾄ 後は、ﾎｰﾑﾍﾟｰｼﾞ作成ｿﾌﾄのﾃﾞｻﾞｲﾝや通常ﾓｰﾄﾞ、ﾃｷｽﾄﾓｰﾄﾞ、ﾃｷｽﾄｴﾃﾞｨﾀｰで編集します。　　※: 重要事項。ﾃﾞｻﾞｲﾝﾓｰﾄﾞ（非ﾃｷｽﾄ）で別ﾌｧｲﾙ間のﾍﾟｰｽﾄはCSS情報が付随します。

　　　※: 外部ﾄﾞﾒｲﾝ（ｻｲﾄ）にｱｯﾌﾟﾛｰﾄの画像などの使用は、非表示に注意。　　画像の alt ﾀｸﾞは不可、ｻｲｽﾞ指定の pt などの省略は注意。　　ｽｸﾘﾌﾟﾄ構文中への改行混入に注意。

　･　ｱｯﾌﾟﾛｰﾄﾞは、hogehoge.htm と同じﾎﾙﾀﾞｰに、使用してる上記画像、*.js、*.css をｱｯﾌﾟﾛｰﾄﾞします。　　別ﾎﾙﾀﾞｰの場合は、hogehoge.htm の該当ﾊﾟｽ注意。

　・　作動ﾃｽﾄは Edge～などで。　　更新の確認は、ﾌﾞﾗｳｻﾞｰなどのｷｬｯｼｭのｸﾘｱ後に実施。　　(1) [F5]ｷ- or Ctrl+Rｷｰを押し、最新ﾃﾞｰﾀ読み込みで。　　更に、(2) Edgeを全て閉じ、再起動を行い、【Edge】 - 右上 [……] - [設定] - [ﾌﾟﾗｲﾊﾞｼｰ、検索、ｻｰﾋﾞｽ] - [閲覧ﾃﾞ-ﾀをｸﾘｱ] - ［ｸﾘｱ-するﾃﾞ-ﾀの選択］ - ［ｖ］閲覧の履歴 -［今すくｸﾘｱ］をｸﾘｯｸ。　　留めに、(3) ｻｰﾊﾞｰのﾌｧｲﾙを一旦削除。

　･　※: 関連情報 : 　ｻﾝﾌﾟﾙﾍﾟｰｼﾞ基本、色記号、RGB5　〃6 、〃8 、ﾌｫﾝﾄ、HTMLをﾃｷｽﾄｴｷﾞﾀ-で編集。

(*1) ：　左詰め余白と背景色、背景画像、ﾌｫﾝﾄｻｲｽﾞ指定　（例）

　　　　　カテゴリー

　　　　　　　　　以下、ﾃｷｽﾄｴﾃﾞｨﾀｰやﾃｷｽﾄﾓｰﾄﾞでコピー、ペースト、編集。

HTMLの先頭部

日本語ｼﾌﾄJIS使用（削除不可）
ﾃﾞﾌｫﾙﾄの言語の設定

お気に入りｱｲｺﾝの設定

ﾍﾟｰｼﾞ概要、ｷｰﾜｰﾄﾞ（被検索対応）

body部一括指定（例）
ｽﾀｲﾙｼｰﾄ　はじめ
(*1)～(*3)表ﾀｲﾄﾙ背景

ﾏｰｼﾞﾝ　余白　body 文字色　背景色画像　下線
ﾊｲﾊﾟｰﾘﾝｸ〃
表示済みの〃
ﾏｳｽｵｰﾊﾞｰ時の〃
ｸﾘｯｸ中の〃
ﾌｫﾝﾄ
ｽﾀｲﾙｼｰﾄ　おわり

<div id="xxx3">～</div>　の装飾

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Language" content="ja">
<meta http-equiv="Content-Type" content="text/html; charset=x-sjis">
<meta http-equiv="Content-Style-Type" content="text/css">
<link REL="SHORTCUT ICON" href="favicon_xxxr.ico">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />　　又は　<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" />
<meta name="description" content="………………。">
<meta name="keywords" content="……,……,……,……,……,">

<style type="text/css"></style>
</head>
<body>
……
</body>
</html>

<body>
　

	<body>部見出し transparent：透明	<style type="text/css"><!-- body {background-color: #FF00FF} h1 {background-color: #FF00FF} h2 {background-color: transparent} p {background-color: #FF00FF)} --></style>
	左詰め余白　背景色と背景画像　ﾌｫﾝﾄｻｲｽﾞ	<style type="text/css"><!-- body { margin-left: 5%; background: url(blst01.gif) #FFF5E1; font-size: 10pt } --></style>
	背景画像左端敷き詰め	<head> <style type="text/css"> body { background-image: url('xxxx.jpg');background-repeat: repeat-y } </style> </head>
	背景画像上端敷き詰め	<head> <style type="text/css"> body { background-image: url('xxxx.jpg');background-repeat: repeat-x} </style> </head>
	背景画像中央配置	<head> <style type="text/css"> body { background-image: url('xxxx.gif');background-repeat: no-repeat;background-position: center; } </style> </head>
	背景画像非ｽｸﾛｰﾙ	<head> <style type="text/css"> body { background-image: url('xxxx.gif');background-repeat: no-repeat;background-attachment: fixed } </style> </head>
	中央背景画像非ｽｸﾛｰﾙ	<head> <style type="text/css"> body { background: #00ff00 url('xxxx.gif') no-repeat fixed center; } </style>
	ﾎﾞﾀﾝの背景・前景（文字）色（例）	<INPUT TYPE="button" VALUE="再読込み" style="background:#A020F0;color:#FFFFDC;" onClick="window.location='taxture2.htm'">
	<body>部の余白（例）	<style type="text/css"> body { margin: 0,5,0,5; 　//　上右下左 } </style>
	<body>ﾀｸﾞに記述の余白（例） ※:rightmmargin、bottom 〃省略時は上下左右対象。	<body topmargin="10" rightmmargin="10" bottommargin="10" leftmargin="10">gt; 　 <BODY TOPMARGIN="20" LEFTMARGIN="40" BGCOLOR="#FFFFFF" LINK="#000066" VLINK="#666666" TEXT="#000000">
	ﾃｷｽﾄｴﾘｱの背景画像(wttec.gif)	<center> <form name="xx001"> <textarea rows="12" cols="50" name="xx002" style="background-image:url(wttec.gif); color:3A005F;"> </textarea> </form></center>

ﾃｷｽﾄ背景画像 - <P>ﾀｸﾞ使用

<p style="background-image:url(haikeiguwazou.gif)"><font color="#54006C"><P>　ﾀｸﾞを使った背景画像挿入（例）</font></p>

(*2) ：　ｽﾀｲﾙの種類　　

　　　　　カテゴリー

　　　　　　　　　以下、ﾃｷｽﾄｴﾃﾞｨﾀｰやﾃｷｽﾄﾓｰﾄﾞでコピー、ペースト、編集。

	この列は、ﾍﾟｰｽﾄ不要　ｲﾝﾗｲﾝ要素を彩色ﾌﾞﾛｯｸ　　　〃段落　　　〃　（右の”ｵﾚﾝｼﾞ1～４”の記述は全て同色）	<span STYLE="color:#A020F0">ﾊﾟｰﾌﾟﾙ、Purple</span> <div STYLE="color:#FFC800">ｵﾚﾝｼﾞ、Orange</div> <p STYLE="color:#FFC800">ｵﾚﾝｼﾞ1、Orange1</p> <p STYLE="color:Orange">ｵﾚﾝｼﾞ2、Orange2</p> <p STYLE="color:rgb(100%,78%,0%)">ｵﾚﾝｼﾞ3、Orange3</p> <p STYLE="color:rgb(255,200,0)">ｵﾚﾝｼﾞ4、Orange4</p>
	ﾘﾝｸされたｽﾀｲﾙｼｰﾄ　ｲﾝﾎﾟｰﾄされたｽﾀｲﾙｼｰﾄ	<head> <LINK REL="stylesheet" TYPE="text/css" HREF="xxxx.css"> </head> @import: url(xxxx.css) ;
	ｾﾚｸﾀ CLASSとIDの2種。ｾﾚｸﾀとしてのHTMLｴﾚﾒﾝﾄ（A）ｾﾚｸﾀとしての CLASS 　CLASSは、任意ｴﾚﾒﾝﾄに適用するHTML属性。ｽﾀｲﾙ宣言　※: ｾﾚｸﾀは . で始まります。 =(^。^)= Classy, red, and bold. Blue italic. =(^。^)= 太字 and 斜体.	<STYLE> <!--　A { text-decoration:none; }　-->　 </STYLE> <STYLE> <!-- .clsBlue { font-color:blue; } --> </STYLE> 　 <B CLASS="clsBlue">=(^。^)= Classy, blue, and bold.</B> <BR> <I CLASS="clsBlue">Blue italic.</I> <BR> <B>=(^。^)= 太字</B> and <I>斜体.</I>
	ｾﾚｸﾀとしての ID 　IDは、ｴﾚﾒﾝﾄの特定のｲﾝｽﾀﾝｽの識別に使用。　ID属性で選択されるｽﾀｲﾙは、#　を付す。　　（・!・）　=(^。^)= 薔薇... 　　ｸﾞﾙｰﾌﾟ化されたｾﾚｸﾀ　複数のｾﾚｸﾀが同じｽﾀｲﾙを共有する場合、ｶﾝﾏ区切りでｸﾞﾙｰﾌﾟ化できます。	<STYLE> <!-- #idPinkP { color:pink; text-indent:10px; font-size:12pt; } #idBoldItal { font-weight:bold; font-style:italic; } --> </STYLE> <P ID="idPinkP"> （・!・） =(^。^)=<SPAN ID="idBoldItal">薔薇</SPAN>...</P> 　 <STYLE> <!-- H1, H2, H3 { font-family:MSP Gothic,MS Gothic; color:#FF00FF; } --> </STYLE>
	ｺﾝﾃｷｽﾄｾﾚｸﾀ　特定のｽﾀｲﾙを別のｾﾚｸﾀ中の１つのｾﾚｸﾀのｲﾝｽﾀﾝｽに適用できる。　　ｺﾝﾃｷｽへのﾄﾞﾘﾙﾀﾞｳﾝ宣言できる。　　※: H4 中の I のｲﾝｽﾀﾝｽだけが宣言されたｽﾀｲﾙを持つ。 <DIV> および<SPAN>ｴﾚﾒﾝﾄ	<STYLE> <!-- H4 I { color:#00FFFF; } --> </STYLE> 　 <STYLE> <!-- DIV { background-color: black; color:red; font-weight:bold; } SPAN { background-color: royalblue; color:white; } --> </STYLE> <P>Some text about to run into a big DIV tag <DIV>これはDIV（例）。</DIV>　ﾌﾞﾛｯｸであり、周囲と改行で区切ります。</P> <P> SPAN は周囲のｺﾝﾃﾅと一緒に”流し込み”が行われるｲﾝﾗｲﾝｴﾚﾒﾝﾄ。 <SPAN>これは、SPAN（例）。</SPAN> and make a smooth getaway.</P>
	ﾃｷｽﾄに影を付ける　※: 応用（例文字色： rgb(81,0,134) 影角度： 135 影色： silver ﾃｷｽﾄ：太陽風ДζΨΠ∀　=(・。.・)= H1要素の右2px、下3px位置にぼかし 4pxの赤影、右5px、下6pxにぼかし無しのH1要素と同色影	<p><font size="7"><span style="color: rgb(81,0,134); width:100%;filter:shadow(color=silver,direction=135);">太陽風ДζΨΠ∀　=(・。.・)=</span></font> </p> 　　 H1 { text-shadow: red 2px 3px 4px, 5px 6px; }
	ﾌｨﾙﾀｰ　 ※: 関連情報	ﾌｨﾙﾀｰとﾄﾗﾝｼﾞｼｮﾝﾄﾞﾛｯﾌﾟｼｬﾄﾞｳ（投影）　　ｼｬﾄﾞｳ（曳影）　ﾍﾟｰｼﾞ切り替え　　ﾌｨﾙﾀｰ 0　0a　0b　0c　ﾄﾗﾝｼﾞｼｮﾝ 0　　　　　　　 CSS-StaticFilter Alpha Filter　BasicImage　Blur　Chroma　DropShadow　Emboss　Engrave　Glow　Mask　MotionBlur　Shodow　Wave　 CSS-Ttransitions Barn　Brinds　CheckerBoard　Fade　GradientWipe　Inset　Iris　Pixelate　RadialWipe　RandomBars　RandomDissolve　Slide　Sprial　Stretch　Strips　Wheel　Zigzag
	半透明背景の、DIV 位置、ｻｲｽﾞ、背景色、吹き出し、ﾌｨﾙﾀｰ（Opacity:非透明度）、表（ﾃｰﾌﾞﾙ）	<!--webbot bot="HTMLMarkup" startspan --> <!--　■　----　位置調整のためのDIV有りは、　↓ この間をコピー＆ペーストします。 --> <!-- 　　　　　　　　　　　　　表示枠位置　　　　　表示枠ｻｲｽﾞ　　　　　　　座標　　　　　　　　　　　　　　表示枠背景色 --> <div style="position:absolute; top:20; left:50; width:337; height:40; z-index:0; visibility:visible; background-color:#FFFFFF" title="=（゜。.゜）="　 STYLE="filter:progid:DXImageTransform.Microsoft.Alpha( Opacity=90, FinishOpacity=90)"> <table width="150" border="1" cellspacing="0" cellpadding="2" bgcolor="#FFFFF4" style="border-collapse: collapse" bordercolorlight="#F1F0FB" bordercolordark="#D5CED3"> <tr> <td bgcolor="#FFFFFF" valign="top" align="left"> <!--　★　-----------　↓ この間をコピー＆ペーストします。 ------------　--> ここに、ｺﾝﾃﾝﾂを記述。 <!--　★　-----------　↑ この間をコピー＆ペーストします。 ------------　--> </td> </tr> </table> </DIV> <!--　■　----　位置調整のためのDIV有りは　↑ この間をコピー＆ペーストします。 --> <!--webbot bot="HTMLMarkup" endspan -->
	ｸﾞﾗﾃﾞｰｼｮﾝ（ﾍﾟｰｼﾞ背景色）背景　ﾘﾝｸ　表示済みﾘﾝｸﾝｸ　ｱｸﾃｨﾌﾞﾘﾝｸの各色（任意値） 0：縦効果　１：横効果 #FFF8F5F5：開始色 #FF54006C：終了色 FFはｺﾝﾄﾗｽﾄ〔濃い → 中 → 薄い：FF → 80 → 00〕　 ※:関連・詳細情報	<body STYLE="filter:progid:DXImageTransform.Microsoft.Gradient(gradientType='0',startColorstr=’#FFFFFFFF’,endColorstr='#FF8032CD')" bgcolor="#F8F5F5" link="#54006C" vlink="#62000D" alink="#00FFFF">
	ｸﾞﾗﾃﾞｰｼｮﾝ（DIV背景色）ﾌﾞﾛｯｸの縦位置　横位置　幅　高さ　ﾌｫﾝﾄ　ﾃｷｽﾄ色　開始色　終了色　縦効果: 0　横効果 : 1　　FFはｺﾝﾄﾗｽﾄ〔濃い → 中 → 薄い：FF → 80 → 00〕任意のﾃｷｽﾄ、ﾀｲﾄﾙ縦・横ﾌﾞﾛｯｸ範囲はそれぞれ <～から、　～>迄。　削除もこの範囲単位で。 ※: 関連・詳細情報 1	<div style="POSITION: relative; TOP: 10; left:5; width:100%; height:15; font-family:MSP Gothic,MS Gothic; color:FFF5F5; font-size: 10pt; font-weight: normal; padding:10px; border:1px solid black; z-index: 5; filter:progid:DXImageTransform.Microsoft.Gradient(startColorstr='#FF8250FF',endColorstr='#FFFFFFE1', gradientType='１');"> <div style="font-size:11pt; font-weight:normal"></div>任意のﾃｷｽﾄ、ﾀｲﾄﾙ、……を記述できます。 - 横 </div> 　 <div style="POSITION: relative; TOP: 30; left:5; width:100%; height:70; font-family:MSP Gothic,MS Gothic; color:FFFFEB; font-size: 10pt; font-weight: normal; padding:10px; border:1px solid black; z-index: 5; filter:progid:DXImageTransform.Microsoft.Gradient(startColorstr='#FFFFEBEB', endColorstr='#FF502828', gradientType='0');"> <div style="font-size:11pt; font-weight:noemal">=(^。^)=</div><br>任意のﾃｷｽﾄ、ﾀｲﾄﾙ、……を記述できます。 - 縦 </div>
	ﾊｲﾊﾟｰﾘﾝｸの装飾ﾍﾟｰｼﾞのﾘﾝｸの背景色（例）〃表示済みﾘﾝｸの背景色（例）〃　ﾏｳｽｵｰﾊﾞｰﾘﾝｸの背景色（例）ﾍﾟｰｼﾞの背景色　ﾘﾝｸ色　表示済みﾘﾝｸ色　ﾏｳｽｵｰﾊﾞｰﾘﾝｸ色（<body>ﾀｸﾞ部分を編集）	<style tyep="text/css"> <!--a:link {background: #FFFFFF } a:visited {bnackground: #FFFFF5 } a:hover { background: #f3edee } --></style> <body bgcolor="#F5F3F3" link="#54006C" vlink="#62000D" alink="#00FFFF">
	ﾘﾝｸ文字色・背景色指定文字色： COLOR:#A52A2A; 背景色： BACKGROUND-COLOR: #FFFFFF R e a lc om 　ﾘﾝｸ： <a href=　～	<p><a href="http://www.real.com/" target="_blank" title="吹き出し文字"> <span style="COLOR: #A52A2A; BACKGROUND-COLOR: #FFFFFF">R</span> <span style="COLOR: #00008B; BACKGROUND-COLOR: #FFFFFF">e</span> <span style="COLOR: #FF7F50; BACKGROUND-COLOR: #FFFFFF">a</span> <span style="COLOR: #FF00FF; BACKGROUND-COLOR: #FFFFFF">lc</span> <span style="COLOR: #00FF00; BACKGROUND-COLOR: #FFFFFF">om</span></a></p> <a href="http://www./……/xxx.html" target="_blank" title="吹き出しﾃｷｽﾄ。" style="color: #FCF4F7; background-color: #7B6893">”ﾘﾝｸ先名”へ</a>
	ﾘﾝｸ文字色・背景画像指定文字色： COLOR:#E2EBB1; 背景画像： BACKGROUND-IMAGE:url(http://www.……/30tbrb1.gif)" 　ｱｲｺﾝ付きﾊｲﾊﾟｰﾘﾝｸｽﾀｲﾙｼｰﾄ　 ※:align(配置)="" left(左)　right(右)　top(上)　texttop(上ﾃｷｽﾄ)　middle(中央縦)　absmiddle(全体の中央)　baseline(ﾍﾞｰｽﾗｲﾝ)　bottom(下)　absbottom(全体の下)　center(中央)	<p><a href="http://www.real.com/" target="_blank" title="吹き出し文字"> <span style="COLOR: #E2EBB1; BACKGROUND-IMAGE:url(http://www.pat.hi-ho.ne.jp/oka_tosho/tab_menu12/30tbrb1.gif)">Real.com</span> </a></p> 　 <a title="ｽﾀｲﾙｼｰﾄ（CSS）のﾘﾌｧﾚﾝｽ。　常駐ｽﾗｲﾄﾞ50音ｲﾝﾃﾞｯｸｽ付き。" href="css.htm"><span style="color:#070058; background-color:#D5D0CB"> <img border="0" src="http://xml-xsl.sakura.ne.jp/aotama.gif" width="17" height="17"><b> ｽﾀｲﾙｼｰﾄ </b></span></a>
	ﾍﾟｰｼﾞのﾘﾝｸ文字色・背景色指定 ※：定義済みｸﾗｽ背景色ﾊｲﾊﾟｰﾘﾝｸ表示済みﾏｳｽｵｰﾊﾞｰｸﾘｯｸ中	<head> <style type="text/css"> <!-- body { background-color: #F8F5F5; } a:link { color:#55006C; background-color:#f3edee; text-decoration:none; } a:visited { color:#3E0010; background-color:#F3F2F4; text-decoration:none; } a:hover { color:#8000e2; background-color:#E8E5E9; text-decoration:underline; } a:active { color:#0FC1C2; background-color:#E1DDE9; text-decoration:underline; } --> </style> </head>

	ﾏｳｽｵｰﾊﾞｰ時ﾘﾝｸ色・下線・背景色の装飾有無 ※:関連・詳細情報	<head> <style type="text/css"><!-- A:hover { COLOR: #8000e2; BACKGROUND-COLOR: #f3edee; TEXT-DECORATION: underline } A { TEXT-DECORATION: none } --></style> </head> <body bgcolor="#F8F5F5" link="#54006C" vlink="#62000D" alink="#007AA8 "> <!--　★　------　↓ この間から選び、コピー、編集、ペーストします。 ----------　--> <p><a href="index2.html" title="色変化無し、下線無し" target="_blank" style="font-family:Tahoma; text-decoration:none"><span style="padding-left:2; padding-right:2; padding-top:1; padding-bottom:1; color:#007AA8 ; background-color:#DBD9DF; letter-spacing:2px;"> 太陽風ДζΨΠ∀ </span></a></p> <p><a href="index2.html" title="色変化無し、下線色変化" target="_blank" style="font-family:Tahoma; font-size:12px; line-height:13px; text-decoration: underline"><span style="padding-left:2; padding-right:2; padding-top:1; padding-bottom:1; color:#007AA8 ; background-color:#DBD9DF; letter-spacing:2px;"> 太陽風ДζΨΠ∀ </span></a></p> <p><a href="index2.html" title="色変化無し、下線表示" target="_blank"><span style="font-family:Tahoma; font-size:12px; line-height:13px; text-decoration: underline； padding-left:2; padding-right:2; padding-top:1; padding-bottom:1; color:#007AA8 ; background-color:#DBD9DF; letter-spacing:2px;"> 太陽風ДζΨΠ∀ </span></a></p> <p><a href="index2.html" title="色変化、下線表示" target="_blank"><span style="font-family:Tahoma; font-size:12px; line-height:13px; text-decoration: underline； padding-left:2; padding-right:2; padding-top:1; padding-bottom:1; color:; background-color:#DBD9DF; letter-spacing:2px;"> 太陽風ДζΨΠ∀ </span></a></p> <!--　★　------　↑ この間から選び、コピー、編集、ペーストします。 ----------　--> </body>
	ﾘﾝｸ文字色・背景色指定、ﾏｳｽｵｰﾊﾞｰ時変化などの装飾。 ※: 関連・詳細情報　　 ※: 背景色の変化　ﾘﾝｸｶﾗｰ　 1　ﾘﾝｸ装飾　ﾀﾞｲﾅﾐｯｸｽﾀｲﾙ　　ｸﾞﾗﾃﾞｰｼｮﾝ　 2	<head> <style type="text/css"><!-- A:hover { COLOR: #8000e2; BACKGROUND-COLOR: #f3edee; TEXT-DECORATION: underline } A { TEXT-DECORATION: none } --></style> </head> <body bgcolor="#F8F5F5" link="#54006C" vlink="#62000D" alink="#007AA8 "> <p><a target="_blank" style="color: #F9E8EC; background-color: #5F00A8"href="http://www.google.co.jp/" title="色変化なし、下線表示">1 Google日本</a>　　　色変化なし、下線表示</font></p> <p><font size="2"><font color="#F19701" size="2"><b><span style="background-color: #D9C8F1"> <a href="http://www.google.co.jp/"　target="_blank" title="文字色変化なし、背景色変化"><font color="#C00365">2 Google日本</font></a></span></b></font>　　文字色変化なし、背景色変化</p> <<p><a href="http://www.google.co.jp/" target="_blank" title="文字色変化なし、下線表示"> <span style="background-color: #CFC1AD; color: #BA0041">3 Google日本</span></a></font><font face="ＭＳＰゴシック" size="2"><font size="2">　　文字色変化なし、下線表示</p> <p><font color="#000000"><a href="http://www.google.co.jp/" target="_blank" title="文字色変化なし、下線表示"><span style="COLOR: #A50061; BACKGROUND-COLOR: #FFFFFF">4 Google日本</span></a>　　文字色変化なし、下線表示</font></p> <p><font color="#03FCE3"><span style="background-color: #D3E391; color: #9D44FF"><a href="http://www.google.co.jp/" target="_blank" title="文字・背景色変化、下線表示">5 Google日本</a></span></font></font><font face="ＭＳＰゴシック" size="2">　　文字・背景色変化、下線表示</P> <p><span style="background-color: #D9CCF2; color: #FFFFFF"><strong><a href="http://www.google.co.jp/"　target="_blank" title="文字・背景色変化、下線表示">6 Google日本</a></strong></span>　　文字・背景色変化、下線表示</font></font></p> <p>色個別変化<a href="http://www.google.co.jp/" target="_blank" title="色個別変化"><h5 onmouseover="style.color='#00BF94'" onmouseout="style.color='#BF005E'" onclick="style.color='#FF8B00'">7 Google日本</h5></a></p> </body>
	下線無しﾊｲﾊﾟｰﾘﾝｸ	<a here="xxx.html" style="text-decoration:none">ﾊｲﾊﾟｰﾘﾝｸ</A>
	行間を少し空ける	<style type="text/css"><!-- body { line-height: 150% } --></style>
	URL　（画像の例）	background: url(http://www.…… xxx.gif)
	ﾃｷｽﾄ横配置ﾜｰﾄﾞ間ｽﾍﾟｰｽ文字間ｽﾍﾟｰｽ左寄せ中央揃え右寄せ均等割付 <p>右寄せ（ｱｸｾｽｶｳﾝﾀｰ）画像配置（相対ﾃｷｽﾄ） ※:　応用（例）　表に画像・ｱｲｺﾝを配置画像（左ｽﾍﾟｰｽ）均等割付〔<p>や、<div>、<table>、<th>、<td>などに〕	word-spacing:10px letter-spacing:1px text-align: left text-align: center text-align: right text-align: justify <p align="right"><font size="3" face="Lucida Console" color="#333333"><!--webbot bot="Timestamp" S-Type="REGENERATED" S-Format="%Y/%m/%d %H:%M %Z" --> 更新</font></p> align(配置)="" left(左)　right(右)　top(上)　texttop(上ﾃｷｽﾄ)　middle(中央縦)　absmiddle(全体の中央)　baseline(ﾍﾞｰｽﾗｲﾝ)　bottom(下)　absbottom(全体の下)　center(中央)　　 hspace="50" text-justify:inter-word text-justify:newspaper text-justify:distribute-all-lines text-justify:inter-ideograph text-justify:inter-auto
	ﾃｷｽﾄ縦配置ﾍﾞｰｽﾗｲﾝ下中下付き文字位置ﾃｷｽﾄの下限ﾃｷｽﾄの上端上 %	vertical-align:baseline vertical-align:bottom vertical-align:middle vertical-align:sub vertical-align:super vertical-align:text-bottom vertical-align:text-top vertical-align:top vertical-align:xx%

ﾃｷｽﾄｻｲｽﾞ

通常の太さ
太字
極小さく
さらに小さく
小さく
中位
大きく
さらに大きく
極大きく
20ポイントで
2倍の大きさで
ｱﾙﾌｧﾍﾞｯﾄ小文字やや小太字

文字ｻｲｽﾞ固定

font-weight: normal
font-weight: bold
font-size: xx-small
font-size: x-small
font-size: small
font-size: medium
font-size: large
font-size: x-large
font-size: xx-large
font-size: 20pt
font-size: 200% font-variant: small-caps

ﾌｫﾝﾄ

記述（例）

font: style variant
weightsize/height family

font-style: style
font-variant: variant
font-weight: weight
font-size: size

line-height: height
font-family: family

font-stretch: stretch
font-size-adjust: adjust

<span id="xx">毎に、ﾌｫﾝﾄ・ｻｲｽﾞ・ｽﾀｲﾙ・色を指定

spanﾌｫﾝﾄ指定（細字ｻｲｽﾞ色種類）

divﾌｫﾝﾄ指定

背景色・ﾌｫﾝﾄ色

ﾊｲﾊﾟｰﾘﾝｸ付き、背景色・ﾌｫﾝﾄ色

ﾊｲﾊﾟｰﾘﾝｸ付き、ﾌｫﾝﾄ色

DIV　位置、ﾌｫﾝﾄ

Font-Awesome

font-awesome.css　New！icons　icons一覧
　

※: 応用（例）Font-Awesome、ﾄｯﾌﾟﾅﾋﾞﾊﾞｰ61

body{font-family"MS Pゴシック", sans-serif;}

BODY,TD,TH { font: italic bold 100%/150% serif;}　　※:sizeとheightは/区切り。　
H1,H2 { font-style: italic} 　　　値= caption icon menu message-box small-caption status-bar inherit（継承）

H1,H2 { font-varint: small-caps}　　　※:normal italic oblique inherit
font-variant: variant　　　　　　　　　　※:normal small-caps inhibit
DT { font-weight: bold }　　　　　　　　 ※:normal bold bolder lighter 100～900など　　　
BODY,TH,TD{ font-size: 16pt }　　　　※:xx-small x-small small medium large x-large xx-large larger smaller 10in 10cm 10mm 10pt 10pc（絶対） 10px 10ex 10em（相対） 120%（割合）

BODY,TH,TD{ line-height: 130% }　　 ※:1.5em 150%　（行間）
BODY,TH,TD{ font-family: 'MS PGothic,MS Gothic'; } 　　※:ﾌｫﾝﾄ例（Win）、Osaka 細明朝体平成角ｺﾞｼｯｸ（Mac）

none 0.5 inhibit（高さと幅の比率）
normal wider narrower ultra-condensed extra-condensed condensed semi-condensed semi-expanded expanded extra-expanded ultra-expanded inherit（ﾌｫﾝﾄ幅）

<a title="吹き出し" style="color:#99025E;background-color:#FFF" href="database4.htm"><b> 携帯電話最新情報！</b></a>

ﾍﾟｰｼﾞ全体のﾌｫﾝﾄｻｲｽﾞ指定（例）
ﾌｫﾝﾄ　ﾌｫﾝﾄｻｲｽﾞ　行ｻｲｽﾞ

body 文字色　背景色　下線
ﾊｲﾊﾟｰﾘﾝｸ〃
表示済みの〃
ﾏｳｽｵｰﾊﾞｰ時の〃
ｸﾘｯｸ中の〃
文字ｻｲｽﾞ　行高さ
ﾌｫﾝﾄ（左優先）　ｻｲｽﾞ

背景色・ﾌｫﾝﾄ色
　

ﾊｲﾊﾟｰﾘﾝｸ付き画像、背景色・ﾌｫﾝﾄ色
　

頭文字

単語の頭文字大文字
全て大文字
全て小文字
変化無し

text-transform:capitalize text-transform:uppercase text-transform:lowercase text-transform:none

ﾃｷｽﾄ装飾

文字色を青で
背景色を青で
無し
下線
打ち消し線
上線
下上線
点滅

※: 関連・詳細情報（背景色変化）　ﾏｳｽｵｰﾊﾞｰﾀﾞｲﾅﾐｯｸ変化
　

color: #5A016F
background: #DCD2F4
text-decoration: none
text-decoration: underline
text-decoration: line-through
text-decoration: overline text-decoration: underline overline text-decoration:blink

太さ、背景色、ﾃｷｽﾄ色、文字間隔

DIV　枠ｻｲｽﾞ　凹罫線　罫線ｻｲｽﾞ　〃色　余白　枠背景色　ﾌｫﾝﾄ種類　ｻｲｽﾞ　太字　背景色　数値色　数値間隔　数値

ﾃｷｽﾄ色変化

個別のﾊｲﾊﾟｰﾘﾝｸの下線非表示

<A HREF="http://www.xxxx.xx.jp/xxxxx/xxxxx.html" style="text-decoration:none;">リンク文字</A>

ｲﾝﾃﾞﾝﾄ

1文字下げ
50ドット字下げ
2ｲﾝﾁ字下げ
2ｾﾝﾁ字下げ
20ﾐﾘ字下げ
50ﾎﾟｲﾝﾄ字下げ
ﾍﾟｰｼﾞの10%字下げ

　
text-indent: 1em text-indent: 50px
text-indent: 2in
text-indent: 2cm
text-indent: 20mm
text-indent: 20pt
text-indent: 10%

ﾏｰｼﾞﾝ（外余白）
ﾎﾞｰﾀﾞｰの外

上右下左、各xﾎﾟｲﾝﾄ
上、右左。下、5ﾎﾟｲﾝﾄ
上下、左右、5ﾎﾟｲﾝﾄ
上右下左、全て5ﾎﾟｲﾝﾄ

上ﾏｰｼﾞﾝ5ﾎﾟｲﾝﾄ
下ﾏｰｼﾞﾝ5ﾎﾟｲﾝﾄ
左ﾏｰｼﾞﾝ5ﾎﾟｲﾝﾄ
右ﾏｰｼﾞﾝ5ﾎﾟｲﾝﾄ
上ﾏｰｼﾞﾝを2ﾌｫﾝﾄ高
左ﾏｰｼﾞﾝをﾍﾟｰｼﾞ幅の10%
　

<body>ﾀｸﾞに記述の余白（例）

※:rightmmargin、bottom 〃省略時は上下左右対象。

　
　
　
margin:xpt xpt xpt xpt margin:5pt 5pt 5pt margin:5pt 5pt margin:5pt margin-top:5pt margin-bottom:5pt margin-left: 5pt margin-right: 5pt
margin-left: 2em
margin-left: 10%

ﾛｹｰｼｮﾝ

Measurement and Location Sample　Measuring Element Dimension and Location　Location

ﾊﾟﾃﾞｨﾝｸﾞ（内余白）　
ﾎﾞｰﾀﾞｰの内

上右下左、それぞれxﾎﾟｲﾝﾄ
上、右左。下、5ﾎﾟｲﾝﾄ
上下、左右、5ﾎﾟｲﾝﾄ
上右下左、全て5ﾎﾟｲﾝﾄ

上余白5ﾎﾟｲﾝﾄ
下余白5ﾎﾟｲﾝﾄ
左余白5ﾎﾟｲﾝﾄ
右余白5ﾎﾟｲﾝﾄ

padding:xpt xpt xpt xpt
padding:5pt 5pt 5pt
padding:5pt 5pt
padding:5pt

padding:xpt xpt xpt xpt
padding-top:5pt
padding-bottom:5pt
padding-left: 5pt
padding-right: 5pt

ｾﾙ内余白
ｾﾙ内余白
上下：2px　左右：6pt
上下：0.5cm　左右：1.0cm

<html>
<head>
<style type="text/css">
td {padding: 2px 6pt}
td.twovalues {padding: 0.5cm 1.0cm}
</style>
</head>
<body>
<table border="1">
<tr>
<td>
上下：余白2px　左右余白：6pt
</td>
</tr>
</table>
<br>
<table border="1">
<tr>
<td class="twovalues">
上下：余白0.5cm　左右余白：1.0cm
</td>
</tr>
</table>
</body>
</html>
　

ﾎﾞｰﾀﾞｰ（枠線、罫線）
　
上下左右の、幅　ｽﾀｲﾙ　色
　　xxx=top right bottom left

上下左右の、幅　ｽﾀｲﾙ
上下左右の、幅　ｽﾀｲﾙ
上の、幅　ｽﾀｲﾙ

<div style="border: 1px solid gray;">任意の文字列</div>
<div style="border-xxx: 1px solid gray;">任意の文字列</div>
　

H1 { border-width: 1px; border-style: solid; }
H1 { border-width: thick; border-style: solid; }　　　　　※:thin（細）　medium（中）　thick（太）　xxxxpx（xxxx:指定数値）
H1 { border-width: thick; border-top-style: solid; }
　

上右下左、全てxﾎﾟｲﾝﾄ
上のwidth、ｓｔｙｌｅ、color
下のwidth、ｓｔｙｌｅ、color
左のwidth、ｓｔｙｌｅ、color
右のwidth、ｓｔｙｌｅ、color

※：<div>　などのﾌﾞﾛｯｸに使用

枠線色

枠線ｽﾀｲﾙ
点線
破線
実線
2重線
溝線
峰線
凹
凸
solid dotted　※：複数指定可

上、右、下、左の枠線太さ
上の枠線太さ
下の枠線太さ
左の枠線太さ
右の枠線太さ

左・上（明るく）　右・下（暗く）

罫線応用いろいろ

DIV（位置　明暗罫線　余白　背景色・画像）

border:xpt
border-top:xxx
border-bottom:xxx
border-left:xxx
border-right:xxx

boder-color:#xxxxxx

border-style：none
border-style：dotted
border-style：dashed
border-style：solid
border-style：double
border-style：groove
border-style：rigde
border-style：inset
border-style：outset

boder-width:xpt xpt xpt xpt
boder-top-width:xpt
boder-bottom-width:xpt
boder-left-width:xpt
boder-right-width:xpt

　

style="border-left: #F0F0F4 1px solid; border-top: #F0F0F4 1px solid; border-right: #E2E2E7 1px solid; border-bottom: #E2E2E7 1px solid;"

ｱｳﾄﾗｲﾝ（ﾌｫｰｶｽ時、表示線）

上下左右の、幅　ｽﾀｲﾙ　色
　　xxx=top right bottom left

A { outline: 1px solid gray; }
A { outline-xxx: 1px solid gray; }
　

姿（ﾋﾞｼﾞｭｱﾙ）

ﾌﾞﾛｯｸ
ｲﾝﾗｲﾝ
ﾘｽﾄ
表示しない

※: 応用（例）丸角枠

画像などの表示位置※：ﾃｷｽﾄの回り込み解除は、clearで

幅
高さ
最小の幅
最小の高さ
最大の幅
最大の高さ
　

width、heightは、auto（自動）可
max-width、max-heightは、none（無制限）可

display:xx
display:block
display:inline
display:list-item
display:none

　

<img src="xxx.gif" width=50 height=50 title="xxx" style="float:right;">　　※：left（左）　right（右）　none（非指定）　inherit（継承）
　

width:300px
height:300px
min-width:100px
min-height:100px
max-width:900px
max-height:900px
　

表示範囲
　

自動
継承

　

表示のｵﾝ/ｵﾌ

表示
非表示
継承

※：JavaScriptで表示のｵﾝ/ｵﾌ可

<img src="xx.gif" style="position:absolute; clip:rect(10px,60px,60px,10px);">　　　※：position:absoluteと併用のみ

auto
inherit
rect(10px,60px,60px,10px)

<span style="visibility:hidden">xxxxxx</span>　

visible
hidden
inherit
　

ｶｳﾝﾀｰ値挿入

章や節の前に番号を表示

counter-increment（増加）
counter-reset（ﾘｾｯﾄ）　
　

数値
小文字ﾛｰﾏ数字
大文字ﾛｰﾏ数字
漢数字
あいう
アイウ

　

H1:before {
content: "第" counter(chapter) "章 ";
counter-increment: chapter;
counter-reset: section;
}
H2:before {
content: counter(chapter) "." counter(section) ". ";
counter-increment: section;
}
　

decimal
lower-roman
upper-roman
cjk-ideographic
hiragana
katakana

　

<ol>の出現毎にitemが初期化、<li>前でitemを.で連結

ﾘｽﾄﾉﾏｰｶｰ表示　

marker-offsetとdisplay: markerの組み合わせ

OL { counter-reset: item; }
LI { display: block; }
LI:before {
content: counters(item, ".") ". ";
counter-increment: item;
}

LI:before {
display: marker;
marker-offset: 3em;
content: counter(item) ". ";
counter-increment: item;
}
　

<div>、<p>（例）

<html>
<head>
<style type="text/css">
div {display: none}
p {display: inline}
</style>
</head>
<body>
<div>
このdivは、非表示。
</div>
<p>
このｲﾝﾗｲﾝ要素は、
</p>
<p>
2文節に渡り表示されない。（1行で表示される）
</p>
</body>
</html>
　

文章の方向　※：ie5～

左 → 右
右 → 左
上位の継続

通常
directionを有効
directionを無効
directionを継承

縦書き 2

direction:xx
direction:ltr
direction:rtl
direction:inherit

unicode-bidi:xx
unicode-bidi:normal
unicode-bidi:bidi-override
unicode-bidi:embed
unicode-bidi:inherit

ﾃｷｽﾄの回り込み
　

無し
左
右
左右

（例）：すべてのH1は左寄せの図がなくなってから置かれます。

※: 画像に回り込むﾃｷｽﾄ（例）

<img src="xxx.gif" width=50 height=50 title="xxx" style="float:right">
<br style="clear: both;">

clear:xx
clear:none
clear:left
clear:right
clear:both

H1: { clear: left }

ﾘｽﾄ
type image position まとめ指定
　

list-style-type:●
　○
■
　　　　　　　　　　数字
　　　　　　　　　 ⅰⅱ　ⅲ
　　　　　　　　　 ⅠⅡⅢ
　　　　　　　　　　a　b　c
　　　　　　　　　 A　B　C
　　　　　　　　　　無し

ﾏｰｶｰのｲﾒｰｼﾞ

ﾏｰｶｰの位置
　行内
　行外
　

ﾘｽﾄのｱｲｺﾝ
ｱｲｺﾝ画像URL・ﾌｧｲﾙ

list-style:xx yy zz

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

list-style-image:xx

list-style-position:xx
list-style-position:inside
list-style-position:outside

<html>
<head>
<style type="text/css">
ul
{
list-style: square inside url("guwazou.gif")
}
</style>
</head>
<body>
<ul>
<li>ﾘｽﾄ文字1</li>
<li>ﾘｽﾄ文字2</li>
<li>ﾘｽﾄ文字3</li>
</ul>
</body>
</html>

ﾎﾟｼﾞｼｮﾝ

本来の位置
絶対位置指定
相対位置指定
通常
絶対位置に固定
継承

上位置
左位置
幅
高さ

画像などの位置　左
画像などの位置　右
画像などの位置　

（例1）:

（例2）:
85、xxxなどは任意値

CSS-Measurement and Location Sample CSS-Measuring Element Dimension and Location　DIV_0　1　1a　2　2a　2b　配置div

position:static
position:absolute
position:relative
position:static
position:fixed
position:inherit

top：xx
left：xx
width：xx
height：xx

flote:left
flote:right
flote:none

<DIV STYLE="position: absolute; left: 85; top: 45; width: xxx; height: xxx; z-index: 1"><IMG SRC="xxxx.gif"></DIV>
<DIV STYLE="position: absolute; left: 150; top: 56;width: xxx; height: xxx; z-index: 2"><IMG SRC="xxxx.gif"></DIV>
<DIV STYLE="position: absolute; left: 250; top: 20;width: xxx; height: xxx; z-index: 5"><IMG SRC="xxxx.gif" ></DIV>
<DIV STYLE="position: absolute; left: 400; top: 35;width: xxx; height: xxx; z-index: 3"><IMG SRC="xxxx.gif"></DIV>
<DIV STYLE="position: absolute; left: 150; top: 240;width: xxx; height: xxx; z-index: 6"><IMG SRC="xxxx.gif"></DIV>
<DIV STYLE="position: absolute; left: 320; top: 150;width: xxx; height: xxx; z-index: 8"><IMG SRC="xxxx.gif"></DIV>
<H1 STYLE="position: absolute; left: 120; top: 260; z-index: 7">太陽風ДζΨΠ∀　=(・。.・)=</H1>

z軸表示順

画像は、ﾃｷｽﾄの下。

<html>
<head>
<style type="text/css">
img.x
{
position:absolute;left:0px;top:0px;z-index:-1
}
</style>
</head>
<body>
<img class="x" src="xxxx.gif" width="xxx" height="xxx">
</body>
</html>

画像は、ﾃｷｽﾄの上。

<html>
<head>
<style type="text/css">
img.x
{
position:absolute;left:0px;top:0px;z-index:1
}
</style>
</head>
<body>
<img class="x" src="xxxx.gif" width="xxx" height="xxx">
</body>
</html>

要素の空白

規定値、通常
自動改行せず、空白のまま
自動改行せず、空白は詰める
継承

write-space:xx
write-space:normal
write-space:pre
write-space:nowrap
write-space:inherit

領域はみ出し
　　

はみだし

ｽｸﾛｰﾙﾊﾞｰで
隠す
表示（=省略時）
自動

※：<div>、<apan>、<field>に、<textarea>：hiddenのみ。

横方向のみ　※：ie5～
縦方向のみ

overflow:xx
overflow:scroll
overflow:hidden
overflow:visible
overflow:auto

overflow-x:xx
overflow-y:xx

表（ﾃｰﾌﾞﾙ）
※：ie5～
通常
隣接枠線重なり

ｷｬﾌﾟｼｮﾝ : top、bottom、right、left、inherit（継承）

ﾚｲｱｳﾄ : auto、fixed、inherit

※: 応用（例）ﾚｲﾔｰ
　

border-collapse:xx
border-collapse:separate
border-collapse:collapse

CAPTION { caption-side: bottom; }

TABLE { table-layout: fixed; width: 300px; }

枠線 : collapse（隣と重ね）、separate（隣と離し）、inherit
　

隙間 : 2px 3px=横 2px、縦 3px、10px=縦・横共10px

中身無しｾﾙの枠線 : show（表示）、hide（非表）、inherit（継承）

TABLE.col { border-collapse: collapse; }
TABLE.sep { border-collapse: separate; }
TD { border: 1px solid red; }
　

TABLE { border-collapse: separate; border-spacing: 10px; }

TABLE { empty-cells: show; }

順次表（ﾃｰﾌﾞﾙ）表示　※：ie5～

通常
高速（順次表示）

（例）：①

※: 応用（例）：②　　ﾍﾟｰｼﾞﾄｯﾌﾟﾊﾞｰ

背景画像

ｱｲｺﾝ画像

ﾀｲﾑｽﾀﾝﾌﾟ　凹枠線　背景画像

※: 応用（例）：③　影付きﾄｯﾌﾟﾅﾋﾞﾊﾞｰ

※: 応用（例）：④　凸丸角の表（ﾃｰﾌﾞﾙ）

※: 応用（例）：(5)　ﾏｳｽｵｰﾊﾞｰで、影付きﾃｰﾌﾞﾙを表示。

※: 応用（例）：(6)　ﾊﾞﾅｰ画像（概要ﾃｷｽﾄ・ﾊｲﾊﾟｰﾘﾝｸ付きｱｲｺﾝ）

table-layout:xx
table-layout:auto
table-layout:fixed

<table style="table-layout:fixed">
　　……
</table>

<div style="border-left: #D8D7E9 1px solid; border-top: #D8D7E9 1px solid; border-right: #C9C5E4 1px solid; border-bottom: #C9C5E4 1px solid;">
<div align="center">
<table border="0" width="100%" cellspacing="0" background="30tbwh2.gif">
<tr>
<td width="83"><div style="width:83"><a name="top"></a><a target="_top"
href="oritatami3c.html">　ﾎｰﾑ</a> へ</div></td>
<td width="300"><div style="width:300"><font color="#006C5A"><strong>
<font face="メイリオ" size="4">=(・。.・)=　ころちゃん f +larbo+ </font></div></td>
<td width="40"><a href="koro-tyanf.html" target="_blank"><img width="25" height="28" title="コピー、編集し、簡単にWebで応用できまっ、(^ ^)。"
src="https://xml-xsl.sakura.ne.jp/hbxroom1.gif" align="top" border="0"></a></td>
<td width="675"><a
href="koro-tyanf.html">koro-tyanf.html</a> </td>
<td width="6">　</td>
<td width="196"><div style="width:170px; height:15px"><div style="position:relative; left:xxxpx; top:xxxpx; color:#1A1728; background-color:#CECCD6; width:170px; height:14px;border-style:inset; border-width:1px; border-color:#C1BAD1; padding-left:0px; padding-right:2px; padding-top:1px; padding-bottom:1px; background-image: url('30tbwh1_r.gif');"><span style="font-family: Lucida Console; font-size: 12px; color: #6200A2; font-weight: normal">　 更新　</span></div></div></td>
</tr>
</table>
</div>
</div>

ｶｰｿﾙ指定

cursor:xx
cursor:auto
cursor:default
cursor:crosshair
cursor:hand
cursor:move
cursor:e-resize
cursor:n-resize
cursor:ne-resize
cursor:nw-resize
cursor:se-resize
cursor:sw-resize
cursor:s-resize
cursor:w-resize
cursor:text
cursor:vertical-text
cursor:wate
cursor:help
cursor:progress
cursor:all-scroll
cursor:col-resize
cursor:no-drop
cursor:not-allowed
cursor:row-resize
cursor:url(http://www./……/xxx/m_busy.ani)">指定（(ﾟ∇ﾟ)）
cursor:url(http://www./……/xxx/DA_BUSY.ANI)">指定（貝）
cursor:pointer

ｶｰｿﾙ指定 （例）

<head>
<style type="text/css">
body {cursor:crosshair
}
</style>
</head>

ﾃﾞﾓ : ﾏｳｽｵｰﾊﾞｰで（例）を表示します。
ﾌﾞﾗｳｻﾞ標準
十
PC標準
手
手
十矢
東矢
北東矢
北西矢
北矢
南東矢
南西矢
南矢
西矢
Ｉﾋﾞｰﾑ
━ ﾋﾞｰﾑ
砂時計
？
標準+砂時計
全方ｽｸﾛｰﾙ
列幅変更
手+禁止
禁止
行高さ変更
指定（(ﾟ∇ﾟ)）
指定（貝）

<span style="cursor:auto">ﾌﾞﾗｳｻﾞ標準</span><br />
<span style="cursor:crosshair">十</span><br />
<span style="cursor:default">PC標準</span><br />
<span style="cursor:pointer">手</span><br />
<span style="cursor:hand">手</span><br />
<span style="cursor:move">十矢</span><br />
<span style="cursor:e-resize">東矢</span><br />
<span style="cursor:ne-resize">北東矢</span><br />
<span style="cursor:nw-resize">北西矢</span><br />
<span style="cursor:n-resize">北矢</span><br />
<span style="cursor:se-resize">南東矢</span><br />
<span style="cursor:sw-resize">南西矢</span><br />
<span style="cursor:s-resize">南矢</span><br />
<span style="cursor:w-resize">西矢</span><br />
<span style="cursor:text">Ｉﾋﾞｰﾑ</span><br />
<span style="cursor:vertical-text">━ ﾋﾞｰﾑ</span><br />
<span style="cursor:wait">砂時計</span><br />
<span style="cursor:help">？</span><br />
<span style="cursor:progress">標準+砂時計</span><br />
<span style="cursor:all-scroll">全方ｽｸﾛｰﾙ</span><br />
<span style="cursor:col-resize">列幅変更</span><br />
<span style="cursor:no-drop">手+禁止</span><br />
<span style="cursor:not-allowed">禁止</span><br />
<span style="cursor:row-resize">行高さ変更</span><br />
<span style="cursor:url(m_busy.ani)">指定（(ﾟ∇ﾟ)）</span><br />
<span style="cursor:url(DA_BUSY.ANI)">指定（貝）</span>

ｱﾆﾒｶｰｿﾙ指定
ｱﾆﾒｶｰｿﾙﾘｱﾙﾀｲﾑ変更
ｶｰｿﾙに付随画像
ｶｰｿﾙに纏わり付く画像
ｶｰｿﾙの数珠飾り

印刷時改ﾍﾟｰｼﾞ　※：ie
ﾀｸﾞ前
自動
定常
左白まで
右白まで

ﾀｸﾞ後
自動
定常
左白まで
右白まで

（例）：
　

改ﾍﾟｰｼﾞ禁止

ﾃｰﾌﾞﾙ途中の改ﾍﾟｰｼﾞ禁止

改ﾍﾟｰｼﾞしない
自動
継承
　

印刷ﾍﾟｰｼﾞｻｲｽﾞ

自動印字
縦方法印字
横方向印字

印刷時ﾄﾝﾎﾞ

裁断ﾄﾝﾎﾞ
調整ﾄﾝﾎﾞ
無し
継承　

定義済みﾍﾟｰｼﾞ設定の名前を参照

最下部に印字行数
最上部に印字行数　

page-break-before:xx
page-break-before:auto
page-break-before:always
page-break-before:left
page-break-before:right

page-break-after:xx
page-break-after:auto
page-break-after:always
page-break-after:left
page-break-after:right

h1 { page-break-before: left }

TABLE { page-break-inside: avoid; }　

avoid
auto
inherit

　　

@page { size: 21.0cm 29.7cm; }　

auto
portrait
landscape
　

@page { marks: crop; }　

crop
cross
none
inherit　

@page yoko { size: landscape; }
#xyz { page: yoko; }

orphans
windows

IMEﾌｫｰｶｽ移動
　

通常
ﾌｫｰｶｽ時on
ﾌｫｰｶｽ時off
禁止

ﾒｰﾙｱﾄﾞﾚｽ：
<input type="text" style="ime-mode: disabled;">　　※：auto（自動）　active（ﾌｫｰｶｽ時ｵﾝ）　inactive（ﾌｫｰｶｽ時ｵﾌ）　disabled（IME非使用）

ime-mode:xx
ime-mode:auto
ime-mode:active
ime-mode:inactive
ime-mode:disabled
　

IMEの自動設定

※：入力ﾌｫｰﾑﾌｨｰﾙﾄﾞのIME（日本語入力ｼｽﾃﾑ）の自動設定（例）：
　

自動ﾓｰﾄﾞ
日本語　〃
英語　　〃
未使用　　〃

適用するﾓｰﾄﾞを1行選び、<form>部に記述。

ﾌｫｰﾑに直接記述し、日本語ﾓｰﾄﾞに設定（例）

<head>
< style type="text/css">
.auto {ime-mode:auto;}
.active {ime-mode:active;}
.inactive {ime-mode:inactive;}
.disable {ime-mode:disabled;}
</style>
</head>

（例）：　　<input style="ime-mode: active;" type="text" name="name" size="40">

ﾋﾞﾍｲﾋﾞｱ　　※：ie5～

JavaScriptのURL、<object>ﾀｸﾞのidなど。

（例）：calender2.htm

全画像ｸﾘｯｸで、100x100ｻｲｽﾞに。　

xx.htcﾌｧｲﾙ　

ｸﾘｯｸ　→　続きを、右に表示します。

ｸﾘｯｸ　→　続きを、下行に表示します。

※: 応用（例）　折り畳みｺﾝﾃﾝﾂ
隠されたｺﾝﾃﾝﾂ（画像、ﾃｷｽﾄなど）を射出表示/折り畳み。
　

behavior:url(xxxx)

　

IMG { behavior:url(http://www./……/xxx./xx.htc); }
　

<span onCLICK="document.all.sb.style.display= document.all.sb.style.display=='none' ? '' : 'none'" title="ｸﾘｯｸ → 続きを、右に表示します。" style="cursor:hand">≫</span>
<span id=sb style="display:none">　■ｺﾝﾃﾝﾂ</span>

<div onCLICK="document.all.d1.style.display= document.all.d1.style.display=='none' ? '' : 'none'" title="ｸﾘｯｸ　→　続きを、下行に表示します。" style="cursor:hand">More ...</div>
<div id=d1 style="display:none">　■ｺﾝﾃﾝﾂ</div>
　

音声　

volume　読み上げ音量

speak

pause　間　　
　pause-before　前
　pause-after　後
cue
　cue-after　後
　cue-before　前

play-during　背景音

azimuth　水平方向
　-360deg～360deg（角度）
　

elevation　垂直角度
　-90deg～90deg（角度）

speech-rate　速度　
　

voice-family　声の候補

pitch　ﾋﾟｯﾁ
　pitch-range　抑揚　
　stress　ｱｸｾﾝﾄ抑揚
　richness　通り易さ

speak-punctuation　区切り文字の読み方　

speak-numeral　数字の読み方

speak-header　ｾﾙのﾍｯﾀﾞ情報を読むかどうか

H1 { volume: loud; }　　※：0～100　120%　silent（無音）　x-soft（ﾚﾍﾞﾙ0）　soft（ﾚﾍﾞﾙ25）　medium（ﾚﾍﾞﾙ50）　loud（ﾚﾍﾞﾙ75）　z-loud（ﾚﾍﾞﾙ100）　inherit（継承）

ACRONYM { speak: spell-out; }　　※：none（読まない）　normal（通常）　spell-out（一文字ずつ）　inherit（継承）

H1 { pause-before: 5s; }　　※：1s（1秒）　100ms（0.1秒）　100%（平均）　inherit（継承）　引数=1は前後

H1 { cue: url(in.wav) url(out.wav); }　　　※：url(xxx.wav)：URL　none（無し）　inherit（継承）　cue（前後）

happy { url(happy.wav) mix repeat; }　　　※：mix（親の背景音に重ねる）　repert（繰り返す）　auto（自動）　none（無し）　inherit（継承）

.ishihara { azimuth: far-right; }　　　 /* 石原さんは右側 */
.suzuki { azimuth: far-left behind; } /* 鈴木さんは左後ろ */　　

※：left-side（-90deg）　far-left（-60deg）　left（-40deg）　center-left（-20deg）　center（0deg）　center-right（20deg）　right（40deg）　far-right（60deg）　right-side（90deg）　これらにbehind（背後）を加えると向きが後ろ　leftward（さらに半時計回りに20deg）　ｒｉｇｈｔward（さらに時計回りに20deg）　inherit（継承）

.airplane { elevation: abobe; }　　※：below（-90deg）　level（0deg）　avove（90deg）　higher（さらに+10deg）　lowerhigher（さらに-10deg）　inherit（継承）

.ishihara { speech-rate: x-fast; }　 /* 石原さんの台詞は早口で */　　　
※：180（180語/分）　x-slow（80語）　slow（120語）　medium（180～200後）　fast（300語）　x-fast（500語）　faster（さらに+40語）　slower（さらに-40語）　inherit（継承）

<.ishihara { voice-family: comedian, male; }　　　※：male（男）　female（女）　child（こども）

.ishihara { pitch: low; }　　※：120Hz　1kHz　x-low（低い）　low（低め）　medium（普通）　high（高め）　x-high（高い）　inherit（継承）

.ishihara { pitch-range: 65; stress: 70; richness: 75; }　　　　※：0～100　inherit（継承）

CODE { speak-punctuation: code; }　　　※：code（文字どうり発音）　none（区切り有り、発音無し）　inherit（継承）

.userId { speak-numeral: digits; }　　　※：digits（いち　にぃ　さん）　continuous（ひゃくんじゅうさん）　inherit（継承）

TABLE { speak-header: always; }　　　　※：once（同じﾍｯﾀﾞを参照する一連のｾﾙの前で一度読む）　always（全ての関連ｾﾙの前で読む）　inherit（継承）
　

JavaScriptでの”ｵﾝ・ｵﾌ”指定

通常表示
top=0、right=50、bottom=50、left=0　範囲表示

z軸表示順

visibility:visible
visibility:hidden
visibility:inhibit

clip：auto
clip：rect(0,50,50,0)

z-index:x

禁則ie5～

『。』、『、』禁則処理
『っ』、『ゃ』禁則処理

英文単語の切れ目で改行
英文・和文で改行
英文・和文単語の切れ目で改行

line-break:normal
line-break:strict

word-break:normal
word-break:break-all
word-break:keep-all

ﾙﾋﾞ<ruby>　の配置

自動
左寄り
中央
右寄り
均割り
均割り
行末の処理変更

ruby-align:auto
ruby-align:left
ruby-align:center
ruby-align:right
ruby-align:distribute-letter
ruby-align:distribute-space
line-edige

ﾙﾋﾞﾀｸﾞ（例）

<RUBY>
<RB>
<p>蜻蛉<RP>( <RT>かげろう<RP>) </RUBY> が羽化しています。 </p>
<RUBY>
<p>蜻蛉<RT>カゲロウ</RUBY> が羽化しています。 </p>

ﾙﾋﾞ関連情報

縦書き
※: 関連・詳細情報 1 2

ﾃｷｽﾄ縦書きｺﾝﾊﾞｰﾀｰ、ﾙﾋﾞ振りﾏｸﾛ、

ﾃｷｽﾄ縦書きHTMLｺﾝﾊﾞｰﾀｰ、縦書きﾊﾟｯﾄﾞ99、和文、Wakatono、HTML縦書き変換、縦書きHTML 、縦書きJavaScript-たてがき君、縦書きHTMLｴﾃﾞｨﾀばせう、AST HTML 変換、Virtical HTML、竹取、原稿ｴﾃﾞｨﾀ、縦、検索結果

ｺﾒﾝﾄ

/*　ｺﾒﾝﾄ　 */　　　　　　※：ｽｸﾘﾌﾟﾄのｺﾒﾝﾄは、　や、//　ｺﾒﾝﾄ文

数値の単位

ｲﾝﾁ
ｾﾝﾁ
ﾐﾘ
ﾎﾟｲﾝﾄ（=1/72ｲﾝﾁ）
ﾊﾟｲｶ（ =12ﾎﾟｲﾝﾄ）

1文字分
ﾌｫﾝﾄ高さ
文字高さ
ﾋﾟｸｾﾙ（=解像度に依存）
ﾊﾟｰｾﾝﾄ

in
cm
mm
pt
pc

em
ex
px
%

相対単位 : em、ex、px　　絶対単位 : in、cm、mm、pt、pc
○は絶対的（ﾌｫﾝﾄｻｲｽﾞに非依存）、×は相対的（ﾌｫﾝﾄｻｲｽﾞに依存）
　

	em	ex	px	in	cm	mm	pt	pc
IE6.0(Win)	×	×	○	○	○	○	○	○
Opera 6.0(Win)	○	○	○	○	○	○	○	○
Netscape 6.0(Win)	×	×	×	×	×	×	×	×
Netscape 4.0(Win)	×	×	○	×	×	×	×	×

(*3) ：　背画像の中央配置ｷｰﾌﾟ、ｽｸﾛｰﾙ停止　　

　　　　　カテゴリー

　　　　　　　　　以下、ﾃｷｽﾄｴﾃﾞｨﾀｰやﾃｷｽﾄﾓｰﾄﾞでコピー、ペースト、編集。

背景画像（※：0）

body部 （※：1）
背景画像ﾌｧｲﾙ名 （※：2）
背景色 （※：3）
繰り返し （※：4）
横　縦位置 （※：5）
ｽｸﾛｰﾙしない （※：6）

background-repeat:repeat-x
※: 応用（例）訪問

<head>

<div style="color:#1B0000; width:720;height:19;padding：7px 5px 0px 5px；background-color:#FFFFFF; background-image: url('https://xml-xsl.sakura.ne.jp/30tbwh1_r.gif'); background-repeat:repeat-x; border-left: 1px solid #F0F0F4; border-top: 1px solid #F0F0F4; border-right: 1px solid #E2E2E7; border-bottom: 1px solid #E2E2E7">　　
<script>
if (Count()==1){
document.write("=（゜。.゜）=　　はじめまして…*。")
When()
}
else if (Count()>1)
document.write("=（゜。.゜）=　ようこそ　…*。　いらっしゃい！。『　" + When() +"　』　以来ですわ～ぁ、…*。")
</script></div>
　

背景画像の中央配置
背景画像ﾌｧｲﾙ名　
横　縦位置

背景画像の中央配置　（背景画像ｽｸﾛｰﾙ停止）
背景画像ﾌｧｲﾙ名

（※：0）　color、image、repeat、attachment、position などを一度に指定、順序自由、省略可。
　（※：1）　body や、span、table、textarea、input、select、form 適用可。
　（※：2）　背景画像のﾌｧｲﾙ名や、URL。　　NetscapeNavigator の表（ﾃｰﾌﾞﾙ）対応は確認要。
　（※：3）　transparent(透明色)も。
　（※：4）　repeat(敷き詰める)、repeat-x(横方向のみ)、repeat-y(縦方向のみ)、no-repeat(ひとつだけ)
　（※：5）　横位置を left、center、right、0～100%、ｽﾍﾟｰｽ区切りに、また縦位置を top、center、bottom、0～100% で。　（※：6）のfixedと合わせ、位置指定可。
　（※：6）　ｽｸﾘｰﾝｽｸﾛｰﾙを無視する=fixed、〃に従う=scroll。

(*4) ：　ｽｸﾛｰﾙﾊﾞｰ、背景色・背景画像などでの装飾　

　　　　　カテゴリー

　　　　　　　　　以下、ﾃｷｽﾄｴﾃﾞｨﾀｰやﾃｷｽﾄﾓｰﾄﾞでコピー、ペースト、編集。

	ﾏｽｵｰﾊﾞｰでﾊｲﾊﾟｰﾘﾝｸ色〔red〕変化	<style type="text/css"><!-- A:hover { color: red } --></style>
	ﾌｫｰﾑﾌｨｰﾙﾄﾞ〔ﾃｷｽﾄﾎﾞｯｸｽ、ﾄﾞﾛｯﾌﾟﾀﾞｳﾝﾒﾆｭｰ、ﾌﾟｯｼｭﾎﾞﾀﾝ〕の背景と文字色	<style type="text/css"><!-- textarea,input,select { background-color : #643CB4 ; color : #FFFFE1 ;} --></style>

ｼﾌﾄJIS使用（削除不可）

ﾏｳｽｵｰﾊﾞｰ時のﾃｷｽﾄ　背景　下線表示

ﾏｳｽｵｰﾊﾞｰ時の下線非表示（逆も可）

　※：個別のﾊｲﾊﾟｰﾘﾝｸの下線非表示

(*5) ：　ｽｸﾛｰﾙﾊﾞｰ、背景色・背景画像などでの装飾

　　　　　カテゴリー

　　　　　　　　　以下、ﾃｷｽﾄｴﾃﾞｨﾀｰやﾃｷｽﾄﾓｰﾄﾞでコピー、ペースト、編集。

〔この列ﾍﾟｰｽﾄ不要〕 8,0)">右下影
ﾄﾗｯｸ　

ﾌｫｰﾑ背景画像（空欄可）
ﾌｫｰﾑ背景色（背景画像優先）　 ﾌｫｰﾑ入力文字色

ﾘﾝｸを新しいWinで開を標準

お気に入り、ﾀｽｸﾊﾞｰに表示するﾍﾟｰｼﾞ名（≠ﾌｧｲﾙ名）

<title>XXXXXX</title>

※: 関連・詳細情報ｴﾃﾞｨﾀｰ3（即時ﾓﾆﾀｰ）、ｽｸﾛｰﾙﾊﾞｰｶﾗｰ 5（即時ﾓﾆﾀｰ）、ｽｸﾛｰﾙﾊﾞｰｶﾗｰ、 2、3、4