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】 - 右上 [……] - [設定] - [プライバシー、検索、サービス] - [閲覧デ-タをクリア] - [クリア-するデ-タの選択] - [v]閲覧の履歴 -[今すくクリア] をクリック。  留めに、(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"><!--

.xxx0 { background: #F9F8F9 url('wttec.gif'); }
.xxx1 { background-color:#E3E0DC; }
.xxx2 { background-color:#FFFFFF; }

body { margin:3px 10px; padding:0px 0px; color:#000000; background: #F9F8F9 url('wttec.gif'); text-decoration:none }
a:link { color:#190049; background-color:#FBFAFE; text-decoration:none; }
a:visited { color:#333; background-color:#EDECEF; text-decoration:none; }
a:hover { color:#1F002E; background-color:#D3FE7C; text-decoration:underline; }
a:active { color:#1F002E; background-color:#C3FEBB; text-decoration:underline; }
font {font-size:12px; line-height:14px;}
body,tr,td,form{ font-family:メイリオ.Lucida Sans Regular,MS PGothic,; font-size: 12px}
--></style>
</head>
<body>
 ……
</body>
</html>
 

<style type="text/css"><!--
body { color:#000000; background: #F9F8F9 url('../wttec.gif'); text-decoration:none }
#xxx3 a:link { color:#190049; background-color:#FBFAFE; text-decoration:none; }
#xxx3 a:visited { color:#333; background-color:#EDECEF; text-decoration:none; }
#xxx3 a:hover { color:#1F002E; background-color:#D3FE7C; text-decoration:underline; }
#xxx3 a:active { color:#1F002E; background-color:#C3FEBB; text-decoration:underline; }
font {font-size:12px; line-height:14px;}
body,tr,td,form{ font-family:MS PGothic,メイリオ,MS Gothic,Lucida Sans Regular; font-size: 12px}
--></style>
</head>
<
body>

<div id="xxx3" style="position: absolute; top:200px;padding:10px 10px">

</div>

<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">&lt;P&gt; タグを使った背景画像挿入(例)</font></p>

(*2) : スタイルの種類  

     カテゴリー          以下、テキストエディターやテキストモードでコピー、ペースト、編集。
この列は、ペースト不要 

インライン要素を彩色
ブロック   〃

段落   〃 
(右の”オレンジ1〜4”の記述は全て同色)

 

<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>
 

 

 コンテキスト セレクタ
 
特定のスタイルを別のセレクタ中の1つのセレクタのインスタンスに適用できる。  コンテキスへのドリルダウン宣言できる。
  ※: 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はコントラスト〔濃い → 中 →  薄い:FF8000〕 
※:関連・詳細情報


 

<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='1');">
<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;">&nbsp;太陽風ДζΨΠ∀ </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;">&nbsp;太陽風ДζΨΠ∀ </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;">&nbsp;太陽風ДζΨΠ∀ </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;">&nbsp;太陽風ДζΨΠ∀ </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="MS Pゴシック" 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="MS Pゴシック" 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 style="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(フォント幅)

<style type="text/css"><!--
#arial { font: normal14pxArial ;color:#26003E}
#century { font: normal 14px Century ;color:#26003E}
#georgia { font: normal 14px Georgia ;color:#26003E}
#lucidac { font: normal 14px Lucida Console ;color:#26003E}
#lucidar { font: normal 14px Lucida Sans Regular ;color:#26003E}
#lucidas { font: normal 14px Lucida Sans Unicode ;color:#26003E}
#MSG { font: normal 14px MS Gothic ;color:#26003E}
#MSPG { font: normal 14px MS PGothic ;color:#26003E}
#MSUG { font: normal 14px MS UI Gothic ;color:#26003E}
#tahoma { font: normal 14px Tahoma ;color:#26003E}
#times { font: normal 14px Times New Roman ;color:#26003E}
#tcm { font: normal 14px Trebuchet MS ;color:#26003E}
#verdana { font: normal 14px Verdana ;color:#26003E}
--></style>

<span style="font:normal 13px #482C73 Lucida Sans Console;">テキスト</span>

<div style="position: relative; top: px; left: px; margin-top: px; margin-bottom:px; font:normal 13px Lucida;">

<span style="background-color:#FEFEFE; color:#482C73"><b> Warp </b></span>

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

<a href="http://www.apple.com/itunes/"><font color="#FF99FF">テキスト</font></a>

<div style="position:relative; padding-bottom:5px;font:normal 13px Lucida Console;">を表示。</div>

 

 

<head>

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
</head>

<body>
<i class="fa fa-link" aria-hidden="true"></i>
<body>

 

ページ全体のフォントサイズ指定(例)
フォント フォントサイズ 行サイズ

 

body 文字色 背景色 下線
ハイパーリンク 〃
表示済みの〃
マウスオーバー時の〃
クリック中の〃
文字サイズ 行高さ
フォント(左優先) サイズ

 

背景色・フォント色
 

ハイパーリンク付き画像、背景色・フォント色
 

<style type="text/css"><!--
body{ font-family: "MS Pゴシック", "MS ゴシック"; font-size: 12px; line-height:13px;}
--></style>

<style type="text/css"><!--
body { color:#000000; background: #F9F8F9 url(''); text-decoration:none; }
a:link { color:#3C0055; background-color:#FBFAFE; text-decoration:none; }
a:visited { color:#270037; background-color:#EDECEF; text-decoration:none; }
a:hover { color:#FFFFFF; background-color:#01A3AD; text-decoration:underline; }
a:active { color:#FFFFFF; background-color:#02A8AA; text-decoration:underline; }
font {font-size:12px;line-height:13px;}
body,tr,td,form{ font-family:メイリオ,MS PGothic,MS Gothic,Verdana; font-size: 12px}
-->
</style>

<span style="font:normal 13px Lucida Sans Console;background-color:#200045;">〜</span>
 

<a href="http://〜.htm"><span style="font:normal 12px メイリオ;background-color:#F5EFFC; color:#002300">&nbsp; <img border="0" src="https://〜/flash.gif" width="23" height="17" align="absbottom" title="〜">〜 </a></span>

 

  頭文字

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

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 枠サイズ 凹罫線 罫線サイズ 〃色 余白 枠背景色 フォント種類 サイズ 太字 背景色 数値色 数値間隔 数値

テキスト色変化

<span style="font-family:Tahoma; font-size:10pt; font-weight:bold; background-color:#4D4858; color:#ACDDEA; letter-spacing:2px">&nbsp;6030970</span>

<div style="position:absolute; left:300; top:48; width:86; height:12; font-family:; font-size:pt; font-weight:; color:; border-style:inset; border-width:1; border-color:#C1BAD1; padding-left:2; padding-right:2; padding-top:1; padding-bottom:1; background-color:#FFFFF5; class="oka1" id="001" title="=(^。^)="><span style="font-family:Tahoma; font-size:10pt; font-weight:bold; background-color:#4D4858; color:#EAACBC; letter-spacing:2px">&nbsp;6030973</span></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%
 

<body topmargin="10" rightmmargin="10" bottommargin="10" leftmargin="10">

<BODY TOPMARGIN="20" LEFTMARGIN="40" BGCOLOR="#FFFFFF" LINK="#000066" VLINK="#666666" TEXT="#000000">
 

 
ロケーション

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

 

 

 

 

 

 

 

 

<style type="text/css">
td {padding-left: 4px 2px 4px 2px}
</style>

<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、style、color
下のwidth、style、color
左のwidth、style、color
右のwidth、style、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;"

<div style="position:relative; left:px; top:px; width:px; height:px; border-left: 1px solid #F0F0F4; border-top: 1px solid #F0F0F4; border-right: 1px solid #E2E2E7; border-bottom: 1px solid #E2E2E7; padding-left:0; padding-right:0; padding-top:1; padding-bottom:1; background-color:#FFFFFF;background-image: url('');">
 

  アウトライン(フォーカス時、表示線)

上下左右の、幅 スタイル 色
  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
 

<body style="min-width:200px; max-width:500px;">
<img src="xxx.gif" title="xxx" style="width:50px; height:50px;">
 

 

 

表示範囲
 

自動
継承

 

表示のオン/オフ

表示
非表示
継承

※: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

<div style="direction:rtl; unicode-bidi:bidi-override;">右から左</div>
 

  テキストの回り込み
 


無し


左右

(例):すべての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
          TUV
          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 SampleCSS-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 id="banner" style="position:absolute; top:10; left:10;"></div>

<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〜
縦方向のみ

<div style="width:10em; height:3em; overflow:scroll;">
   :
</div>

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〜

通常
高速(順次表示)

(例):@

 

 

※: 応用(例):A  ページトップバー

背景画像

 

 

アイコン画像

 

タイムスタンプ 凹枠線 背景画像

 

 

 

 


※: 応用(例):B 影付きトップナビバー

※: 応用(例):C 凸丸角の表(テーブル)

※: 応用(例):(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"> <!--webbot bot="Timestamp" s-type="EDITED" s-format="%Y.%m.%d %H:%M" --> 更新 </span></div><!--</span>webbot bot="HTMLMarkup" endspan --></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標準


十矢
東矢
北東矢
北西矢
北矢
南東矢
南西矢
南矢
西矢
Iビーム
━ ビーム
砂時計

標準+砂時計
全方スクロール
列幅変更
手+禁止
禁止
行高さ変更
指定((゚∇゚))
指定(貝)

 

 

<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">Iビーム</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>

<body>
<INPUT TYPE="text" NAME="name1" CLASS="auto">
<INPUT TYPE="text" NAME="name1" CLASS="active">
<INPUT TYPE="text" NAME="name1" CLASS="inactive">
<INPUT TYPE="text" NAME="name1" CLASS="disabled">
<body>

(例):  <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); }
 

<script type="text/javascript">
<!--
attachEvent("onclick", func);
function func() {
   this.style.width = "100px";
   this.style.height = "100px";
}
-->
</script>
 

<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) rightward(さらに時計回りに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和文WakatonoHTML縦書き変換 縦書きHTML 縦書きJavaScript-たてがき君縦書きHTMLエディタばせう 、AST HTML 変換Virtical HTML竹取原稿エディタ検索結果 

 
コメント


/* コメント  */      ※:スクリプトのコメントは、<!-- コメント文  --> や、// コメント文 
  数値の単位

インチ
センチ
ミリ
ポイント(=1/72インチ)
パイカ( =12ポイント)

1文字分
フォント高さ
文字高さ
ピクセル(=解像度に依存)
パーセント



in
cm
mm
pt
pc

em
ex
px
%

 

相対単位 : emexpx  絶対単位 : incmmmptpc
○は絶対的(フォントサイズに非依存)、×は相対的(フォントサイズに依存)
 
  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>

<style type="text/css"><!-- body{
background-image:url(haikeigazou.jpg);
background-color: #FFFBFF ;
background-repeat:no-repeat;
background-position: 50% 50%;
background-attachment: fixed;
} --></style>
</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>
 

背景画像の中央配置
背景画像ファイル名 
横 縦位置
<head>
<style type="text/css"><!-- body{background-image:url(haikeigazou.jpg);background-repeat:
no-repeat;background-position: 50% 50%;} --></style>
</head>
背景画像の中央配置 (背景画像スクロール停止)
背景画像ファイル名
<head>
<style type="text/css"><!-- body{background-image:url(haikeigazou.jpg);background-repeat:
no-repeat;background-position: center;background-attachment : fixed;} --></style>
</head>

(※: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使用(削除不可)

マウスオーバー時のテキスト  背景 下線表示

マウスオーバー時の下線非表示(逆も可)

 

<meta http-equiv="Content-Type" content="text/html; charset=x-sjis">
<style><!-- A:hover {
COLOR: #8000e2; BACKGROUND-COLOR: #f3edee; TEXT-DECORATION: underline
}
A {TEXT-DECORATION: none}
--></style>

  ※:個別のハイパーリンクの下線非表示

 

(*5) : スクロールバー、背景色・背景画像などでの装飾

     カテゴリー          以下、テキストエディターやテキストモードでコピー、ペースト、編集。
〔この列ペースト不要〕 8,0)">右下影
トラック 

フォーム背景画像(空欄可)
フォーム背景色(背景画像優先)  フォーム入力文字色

リンクを新しいWinで開を標準

お気に入り、タスクバーに表示するページ名(≠ファイル名)

 

<meta http-equiv="Content-Type" content="text/html; charset=x-sjis">
<link REL="SHORTCUT ICON" href="faviconj.ico">

<style><!--
body,textarea,input,select,form {
scrollbar-3d-light-color:#999999;  /* 3D左上照部   */ 
scrollbar-arrow-color:#FF0064;    /* 矢、▼▲    */ 
scrollbar-base-color:black;       /* 全体       */ 
scrollbar-dark-shadow-color:#D0BEC8; /* 右下暗影   */ 
scrollbar-face-color:#907882;    /* 頂部        */ 
scrollbar-highlight-color:#999999;  /* 左上照部     */ 
scrollbar-shadow-color:black;     /* 右下影       */ 
scrollbar-track-color:#A6A093}   /*  トラック       */   
textarea {
BACKGROUND-IMAGE: url(blst01.gif)
}
textarea,input,select { background-color : #FFFBFF ; color : #3C0000 ;}
-->
</style>

<base target="_blank">

<title>XXXXXX</title>

 

※: 関連・詳細情報  エディター3(即時モニター)、スクロールバーカラー 5(即時モニター)、スクロールバーカラー 234

 


Copyright (C) 2024(太陽風ДζΨΠ∀) All rights reserved.  96/10/12 〜 24/07/10 08:28:34  (1997/03/05〜2021/01/28)  (2021/01/03〜)