ご迷惑おかけしております。見づらくてすみません ブラウザの種類によっては正常に表示されません 遊び目的ですので、本格的にタグを覚えたい方 はタグ辞典などを参考にして下さい。 |
タグを使ったアートや文字を飾ったり、画像を飾ったりしています ブラウザの種類によっては、正常に表記されない場合がございます ブラウザの文字のサイズの設定の仕方によって 正常に表記されない場合がございます(中なら良いかな?) また、方法は一例であってもっと簡単に表記できるやり方も有るかも知れません。 |
音楽を聴きながらなど、ながらでやっていたり気まぐれで記述しているため、誤りが有るかも知れません。 一応、オーサリングで確認していますが。 属性=”値” の引用符「”」は、HTML4.01では場合によって省略できる。 例:font color="red" → font color=red など |
ジャバスクリプト
|
あいうえお
あいうえお
あいうえお
あいうえお
あいうえお
あいうえお
囲い文字 <nobr><font size="6"color="red" style="background:yellow;border:double;font-size:22px;"><b><i>あいうえおかきくけこ</i><u>あいうえおかきくけこ</u><s>あいうえおかきくけこ</s><i><s>あいうえおかきくけこ</s></i></b> </font></nobr> nobr::改行しない b(ボールド:太字)、i(イタリック:斜体)、u(アンダーライン:下線)、s(取消線) 点線 <font color="red" style="background:blue;border:dotted;font-size:25px;">あいうえおかきくけこ</font> 破線 <font color="red" style="background:blue;border:dashed;font-size:25px;">あいうえおかきくけこ</font> 実線 <font color="red" style="background:blue;border:solid;font-size:25px;">あいうえおかきくけこ</font> 二重線 <font color="red" style="background:blue;border:double;font-size:25px;">あいうえおかきくけこ</font> 溝線 <font color="red" style="background:blue;border:groove;font-size:25px;">あいうえおかきくけこ</font> 稜線 <font color="red" style="background:blue;border:ridge;font-size:25px;">あいうえおかきくけこ</font><br><br> アウトセット <font color="red" style="background:blue;border:outset;font-size:25px;">あいうえおかきくけこ</font> インセット <font color="red" style="background:blue;border:inset;font-size:25px;">あいうえおかきくけこ</font> color="red" は文字の色 スタイルの、background:blue はバックの色 font-size:25px は文字のサイズ ::字体 face:: <font face="HG創英角ポップ体" size="5">あいうえお</font> <font face="麗流隷書" size="5">あいうえお</font> <font face="魚石行書" size="5">あいうえお</font> <font face="MS Pゴシック" size="5">あいうえお</font> <font face="HG行書体"size="5">あいうえお</font> <font face="ARマッチ体B" size="5">あいうえお</font> 注:スタイルではなく、<font size="?">あいうえお</font> のようにして文字の大きさを指定した場合は、数値は1から7までで、(一番小さい)1<7(一番大きい)となる。 標準値は3 <font size="-1">の場合は、一段階小さい文字(標準値3だと、2に相当) <font size="+1">の場合は、一段階大きい文字(標準値3だと、4に相当) 字体の前に「@」を付けると横文字になる <font face="@MS Pゴシック" size="5">あいうえお</font> <font face="@HG行書体" size="5">あいうえお</font> <font face="@ARマッチ体B" size="5">あいうえお</font> 逆文字 <font face="MS Pゴシック" style="position:absolute;filter:FlipV();font-size:25px;">あいうえお かきくけこ</font> 変な文字 <font style="filter:wave(add=1,freq=3,lightstrength=2,phase=8,strength=6);width:100%;font-size:25pt;">あいうえお</font> スライダーを付ける(はみ出した部分の処理) <font style="width:80px;height:80px;overflow:auto;"> <pre> あいうえお<br> あいうえお<br> あいうえお<br> あいうえお<br> あいうえお<br> あいうえお </pre></font> ::overflow:auto は、必要に応じてスクロールできるようにします overflow:scroll は、スクロールして見られるようにします スクロールバー各部分の色づけ scrollbar-base-color (ベース色:スクロールバー全体の色調を指定) scrollbar-face-color (表面の色) scrollbar-arrow-color (矢印の色) scrollbar-highlight-color (ハイライトの色) scrollbar-shadow-color (影の色) scrollbar-3dlight-color (左端と上端の色) scrollbar-darkshadow-color (右端と下端の色) scrollbar-track-color (トラックの色) 例<font style="width:200px;height:400px;overflow:auto;scrollbar-face-color:red;scrollbar-arrow-color:yellow;・・・・・・・・・・;"> 点滅マーキー <marquee scrolldelay="500" scrollamount="230" width="300"><font size="5" color="red">点滅します</font></marquee> |
![]() かきくけこ さしすせそ たちつてと |
注意:画像のURLは、実際のものではありません <IMG src="img/ja/menu_paso.gif"> ノーマル |
英小文字+α10進アスキーコード a=97 b=98 c=99 d=100 e=101 f=102 g=103 h=104 i=105 j=106 k=107 l=108 m=109 n=110 0=111 p=112 q=113 r=114 s=115 t=116 u=117 v=118 w=119 x=120 y=121 z=122 <=60 >=62 "(ダブルクォーテーション)=34 -(ハイフン)=45 &=38 改行コード=13 例::f のようにします |
英小文字+α16進アスキーコード a=61 b=62 c=63 d=64 e=65 f=66 g=67 h=68 i=69 j=6A k=6B l=6C m=6D n=6E 0=6F p=70 q=71 r=72 s=73 t=74 u=75 v=76 w=77 x=78 y=79 z=7A <=3C >=3E "(ダブルクォーテーション)=22 -(ハイフン)=2D &=26 改行コード=D 例::f jのようにします |
::10進を16進に変換:: 例*5678(10進)を16進に A、5678÷16=354余り14 B、354÷16=22余り2 C、22÷16=1余り6 このように16で割り商と余りを求め、さらに商を16で割って余りを求め繰り返していく。 16で割ることが出来るところまで。 (15余り2だと、15は16で割れません。) 最終、この場合は(C)の式の商は1で余りは6、式Bの余りは2、Aの余りは14 1,6,2,14に注目。 ここで、10進の1は16進では1 (10進、16進)=(0,0)、(1,1)、(2,2)、(3,3)、(4,4)、(5,5) (6,6)、(7,7)、(8,8)、(9,9)、(10,A)、(11,B)、(12,C) (13,D)、(14,E)、(15,F) です。 14は、16進ではEだから、162Eとなります。 256だと、256÷16=16余り0 16÷16=1余り0 100(16進)になります 関数電卓で行ったほうがはるかに速い |
<font color=red style="width:300px;background:blue;border:solid purple 6px;font-size:25px;">あいうえおかきくけこ</font> border:solid purple 6px は、線の太さは6ピクセル、色は紫、実線 <font color=red style="background:blue;border-top:solid purple 7px;font-size:25px;">あいうえおかきくけこ</font> 上に線 <font color=red style="background:blue;border-bottom:solid purple 7px;font-size:25px;">あいうえおかきくけこ</font> 下に線 <font color=red style="background:blue;border-left:solid purple 7px;font-size:25px;">あいうえおかきくけこ</font> 左に線 <font color=red style="background:blue;border-right:solid purple 7px;font-size:25px;">あいうえおかきくけこ</font> 右に線 |
ブラウザの種類によっては、表示のされ方が違う場合がございます。 ボックスについて 各要素は、ボックスと呼ばれる四角い領域を生成します この領域は、次の4つの部分から成ります ボックスの構造
単位について:: px ピクセル(モニターの表示単位) pt ポイント(1pt=1/72in=0.3528mm) pc パイカ(1pc=12pt=4.2333mm) in インチ(1in=25.4mm) cm センチメートル mm ミリメートル em その範囲で有効なフォントの高さ(font-sizeの値)を1とする単位 ex その範囲で有効なフォントのアルファベットの小文字「x」の高さを1とする単位 % 他の基準となる大きさに対する割合で、基準はそれぞれ異なる 色指定::()内は例 *RGB16進数指定 #に続けて、#RRGGBBのように16進数で2桁ずつ指定 R=Red、G=Green、B=Blue (#ff0000、#cc99cc、#ffccaa) *RGB16進数指定 #に続けて、#RGBのように16進数で1桁ずつ指定 (#f00、#c9c、#fca) 2桁ずつ指定から省略して1桁ずつで表示 例えば#c9cは、#cc99ccと同じ *色名 色の名前で指定(red、green、blue、purple、black、orange) *rgb(R,G,B) RGBを0から255の10進数で指定 例:rgb(100,0,90) #ff0000だと、rgb(255,0,0) *rgb(R%,G%,B%) RGBを0から100%の割合で指定 例:rgb(20%,70%,80%) #ff0000だと、rgb(100%,0%,0%) *システムカラーで指定 (ActiveBorder、ButtomText、など) 注:16進数のffは、10進数の255、割合の100%に相当 ボックスの基本用語::トップ(top)、ボトム(bottom)、レフト(left)、ライト(right) margin(マージン)、border(ボーダー)、padding(パディング) マージン margin-top:?? 上マージン margin-bottom:?? 下マージン margin-left:?? 左マージン margin-right:?? 右マージン 「??は、単位を付けた数値、%指定、autoで自動設定」 例::margin-top:50px margin-top:20% margin-left:auto など ::まとめて指定:: margin:?? ?? ?? ?? マージン 上 右 下 左(各値は半角スペースで区切る) 「??は、単位を付けた数値、%指定、autoで自動設定」 margin:20px 値が1つの場合 上下左右 margin:20px 10px 値が2つの場合 値1上下 値2 左右 margin:20px 10px 15px 値が3つの場合 値1上 値2左右 値3下 margin:20px 10px 15px 12px 値が4つの場合 上 右 下 左 例::margin:30px 10px (上下が30pxで、左右が10px) 内容の周りの空間:パディング padding-top:?? 上の空間 padding-bottom 下の空間 「??は、単位を付けた数値、%指定、autoで自動設定」 以下マージンと同じように::padding:??でまとめて指定できるし、値が1つから4つの場合がある 枠線の太さ:ボーダーウィズス(読み方が間違ってるかもしれない) border-top-width:?? 上の枠線の太さ 「??は、単位を付けた値、キーワード指定」 thin 細い線を指定 medium 通常の太さ指定 thick 太い線を指定 以下同様に::border-width:??でまとめて指定できるし、値が1つから4つの場合がある 初期値は、medium widthは、img属性なんかでもおなじみだね! 「幅」 枠線の色指定:ボーダーカラー border-top-color:?? 上の枠線の色 「??は、色名、RGB値16進指定 など red、blue、#ff0000等」 以下同様に::border-color:??でまとめて指定できるし、値が1つから4つの場合がある 初期値は、「color:色指定」で設定されている値 border-color:?? ?? ?? ?? border-color:red 値が1つの場合 上下左右 border-color:red green 値が2つの場合 値1上下 値2 左右 border-color:red blue green 値が3つの場合 値1上 値2左右 値3下 border-color:red blue green orange 値が4つの場合 上 右 下 左 枠線の形式指定:ボーダースタイル border-top-style:?? 上の枠線の形式 「??は、dotted(点線)、dashed(破線)、solid(実線)、double(二重線)、groove(溝線)、ridge(綾線)、outset(アウトセット)、inset(インセット)、none(表示しない)、hidden(表示しない:枠線が重なる場合に自分自身の値が優先される)」 以下同様に::border-style:??で値がまとめて指定できるし、1つから4つの場合もある 初期値は、none border-style:?? border-style:solid 値が1つの場合 上下左右 border-style:solid double 値が2つの場合 値1上下 値2 左右 border-style:solid double outset 値が3つの場合 値1上 値2左右 値3下 border-style:solid double outset inset 値が4つの場合 上 右 下 左 枠線ごとにまとめて指定する::トップ、ボトム、レフト、ライト border-top:?? ?? ?? 上の枠線個別の設定 border-bottom:?? ?? ?? 下の枠線個別の設定 border-left:?? ?? ?? 左の枠線個別の設定 border-right:?? ?? ?? 右の枠線個別の設定 border:?? ?? ?? 上下左右の枠線に同じ値を設定 「??は、styleの値、colorの値、widthの値::半角のスペースで区切る」 styleの値が指定されていないとcolorとwidthの効果が現れません。 記述の順番が違っていても大丈夫です。 指定されなっかた値については、初期値が適用される 例:: border:solid red 5px 上下左右の枠線に、実線:5pxの太さ:色は赤 こんなことも: <font style="border:solid red 5px;border-top:none;">あいうえお</font> 文字「あいうえお」を5pxの赤色の実線で囲むのだが、上線は引かない。(border-top:none;) 幅と高さ width:?? 幅「??は、単位を付けた数値、%指定、autoで自動設定」 height:?? 高さ「??は、単位を付けた数値、%指定、autoで自動設定」 背景:バックグラウンド background-color:?? 背景色指定 「background-color:red background-color:#ffff00 など、transparentは、色を透明にする」 background-image:url("・・・・・・・・") 背景画像指定 例::<font style="background-image:url("img/ja/menu_paso.gif");height:200px;width:200px;">ここに文字</font> 幅、高さとも200pxに指定。この場合、それより小さい画像だと幾つか敷き詰められ、余った部分は、サイズに応じてカットされます。 大きい画像だと、サイズに応じてカットされます。 「background:red url("../img/abcd.jpg")」のようにまとめることもできる background-repeat 背景画像の繰り返し方を指定 repeat 画像を縦横方向に繰り返して表示(初期値) no-repeat 画像を繰り返さず1つだけ表示 repeat-x 横方向に繰り返して表示する repeat-y 縦方向に繰り返して表示する 画像が敷き詰められない部分には、背景色が表示 <font style="background:#ffff00 url("img/ja/menu_paso.gif");background-repeat:repeat-x;width:400px;height:200px;">あいうえおかきくけこ</font> background-position 背景画像の位置を指定 横方向(x)と縦方向(y)の位置をスペースで区切って指定し、値を一つだけ指定した場合は、もう一方はcenterになる left 背景画像を左寄せにする center 背景画像を中央寄せにする right 背景画像を右寄せにする top 背景画像を上寄せにする bottom 背景画像を下寄せにする 実数値 位置を数値に単位を付けて指定 割合 パーセントで指定する 「background-position:right bottomやbackground-position:60px 150px」のように両方の位置を指定する場合、background-repeatでno-repeatを指定しておかないと効果が得られない。 例:まとめて記述 <font style="background:#ff0000 url("・・・・/・・・.jpg") repeat-x center;width:600px;height:400px;">・・・・・・・・・・</font> (背景色は#ff0000、urlは・・・・・・、繰り返し方はrepeat-x、位置はcenter、背景の大きさは幅600pxで高さが400px) フォントファミリー(フォントを指定する) font-family:?? MS Pゴシック、MS P明朝、Arial、平成明朝、studz、HG創英角ポップ体、など フォントのサイズ font-size:80% font-size:25px font-size:12pt font-size:x-large など 単位を付けた数値で指定、%で指定 キーワード指定(初期値medium) xx-small 非常に小さい 9pxに相当 x-small 小さい 10pxに相当 small やや小さい 12pxに相当 medium 通常サイズ 16pxに相当 large やや大きい 18pxに相当 x-large 大きい 24pxに相当 xx-large 非常に大きい 32pxに相当 larger ひとまわり大きい smaller ひとまわり小さい フォントの太さ:フォントウエート font-weight:?? normal(通常:数値400相当) bold(一般的:数値700相当) lighter(一段階細い) bolder(一段階太い) 100から900の100単位の数値::400でノーマル、700でボールド 初期値は、normal 文字にスモールキャピタルを指定する font-variant:?? small-caps 文字をスモールキャピタル(アルファベットの小文字を、サイズの小さい大文字で表示すること)にする nomal 通常の状態にする 初期値は、normal 文字を斜体に指定:フォントスタイル font-style:?? 値にitalicまたはobliqueを指定すると文字が斜体になる nomal 通常の状態にする 初期値は、normal font style="font:style variant weight size/height family;" のようにまとめることも出来る 赤色、青色、緑色の順番で並べる 赤色の、style variant weightは順番を入れ替えて指定できる line-height(行の高さ)は、/を付けて指定する styleはfont-styleの値、variantはfont-variantの値、weightはfont-weightの値、sizeはfont-sizeの値、heightはline-heightの値、familyはfont-familyの値 サイズとフォント名は省略不可 例::font style="font:bolder 30px HG創英角ポップ体; 文字の太さをbolder、大きさを30px、フォントをHG創英角ポップ体に指定 例::font style="font:30px;" 文字の大きさのみ30pxに指定 例::font style="font:italic 20px/150% MS Pゴシック 斜体の20pxの大きさの文字で、MS Pゴシックにて記述され、行の高さは150% 文字間隔:レタースペーシング他 letter-spacing:?? (??は単位付きの数値、normalで標準の状態にする) 初期値は、normal <font color="red" style="font-size:40px;letter-spacing:-15px;">●●●●●</font> ●●●●● <font color="red" style="font-size:70px;line-height:65%;" title="おはよ〜う">●</font><font color="blue" style="font-size:23px;vertical-align:85%;margin-left:-50px;">^o^</font> line-height:?? は行の高さ(??は単位付きの数値、%、normalで通常の高さ) 初期値は、normal vertical-align:?? は縦方向の位置 vertical-align:top 指定された要素の上をその行の上に合わせる middle 中心をその行の「ベースライン+小文字Xの半分の高さ」に合わせる bottom 指定された要素の下をその行の下に合わせる baseline 文字をベースラインに配置する super 文字を上付きにする sub 文字を下付にする text-top 要素の上辺を親要素のフォントの上辺と揃える text-bottom 要素の下辺を親要素のフォントの下辺と揃える 数値 文字の縦方向(垂直)位置を数値に単位を付けて指定する 注::マージンやパディング要素には、設定できない 初期値は、baseline 例::文字を<font size=-1 style="vertical-align:super;">上付き</font>にする。 例::文字を<font size=-1 style="vertical-align:sub;">下付き</font>にする。 左が、vertical-alignを加えたもの、右が無しのもの line-height:65% とすることで、------部分と重なっています(行間が縮まった) title="おはよ〜う" はタイトルです 下記の●の部分にマウスポインタを当ててみて下さい title の値に、改行タグ<br>を使うとそのまま<br>と表示されるから、「・・・・・・
;・・・・・・」のように、アスキーコードを使うと良い。 ●^o^●^o^ ------------------------------------ 顔と顔の空白には、margin を使っています <font color="red" style="font-size:16px;letter-spacing:50px;">●●●</font> ●●● 応用例::四角形に丸を重ねる <font color="red" style="font-size:95px;">■</font><font color="yellow" style="font-size:75px;vertical-align:8%;margin-left:-84px;">●</font> ■● 色紙を重ねる <font color="red" style="font-size:95px;letter-spacing:-70px;">■</font><font color="yellow" style="font-size:90px;letter-spacing:-70px;vertical-align:-10%;">■</font><font color="blue" style="font-size:80px;letter-spacing:-70px;vertical-align:-20%;">■</font> ■■■ 丸を重ねる <font color="red" style="font-size:50px;letter-spacing:-40px;">●</font><font color="yellow" style="font-size:50px;letter-spacing:-40px;vertical-align:-30%;">●</font><font color="blue" style="font-size:50px;letter-spacing:-40px;vertical-align:-50%;">●</font><font color="red" style="font-size:50px;letter-spacing:-60px;">●</font><font color="yellow" style="font-size:50px;letter-spacing:-60px;vertical-align:-30%;">●</font><font color="blue" style="font-size:50px;letter-spacing:-60px;vertical-align:-50%;">●</font> ●●●●●● 配置位置を決めるposition:や、重なる順序指定のz-index:は使っておりません! text-align:?? 行揃えを指定する auto テキストを自動的に配置する left テキストを左揃えで表示する center テキストを中央揃えで表示する right テキストを右揃えで表示する justify テキストを両端揃えで表示する text-decoration:?? テキストデコレーション(文字の装飾) underline テキストの各行にアンダーラインを引く overline テキストの各行に上線を引く line-through テキストの各行に取消線を引く blink 文字を点滅させる(IEは非対応) none 飾りを付けずに表示(初期値) 「style="text-decoration:underline overline line-through;"」のように、複数利用も可(半角スペースで区切る) <a href="http://www.yahoo.co.jp" target=_blank" style="text-decoration:none;">検索ページへ</a> とすると、「検索ページへ」の下に付く、リンクがあることを示すアンダーラインが無くなる。 text-indent:?? テキストの先頭にインデント(字下げ)を付ける ??は、20px、2emなどの数値か% 1emは1文字分のサイズに相当 word-spacing:?? ワードスペーシング ??は、20px、10ptなどの数値 normalで、標準に戻す。 初期値は、normal 英語のように一つ一つ区切って使う言語に対し間隔をあける(半角スペースなどで区切られた単語の間隔を指定する) 例:<font style="word-spacing:20px;">This is a pen</font> text-transform:?? 英文の大文字、小文字の表記方法を指定 英文の一文字目を大文字にしたり、すべての文字を大文字あるいは小文字で表示したりする。 none テキスト通りに表示する(初期値) capitalize 先頭の文字を大文字にする uppercase すべてを大文字にする lowercase すべてを小文字にする 例::<font style="text-transform:capitalize;">This is a pen</font> 太文字の部分が大文字になる white-space:?? 空白や改行をそのまま表示する normal 連続する半角スペースやタブ、改行を一つの半角スペースとして扱う pre 連続する半角スペースやタブ、改行を入力されている通りにそのまま表示する。 計算式やプログラムソースなどの半角スペースやタブ、改行をそのまま表示させたい場合に便利。 nowrap 連続する半角スペースやタブ、改行を一つの半角スペースに変換して、改行せずに表示する。 表示の形式 display:none その要素自体が無い状態 display:block 要素をブロック要素(見出しや段落、表など一つにまとまったブロックを構成する要素のことで、一般的には前後に改行が入る)として表示する 例えば、「あああああ<font style="display:block;">いいいいい</font>あああああ」と記述すると あああああ いいいいい あああああ のように改行されて表示される display:inline 要素をインライン要素(文章の一部として含まれる要素で、リンク、強調、略語などで、一般的には前後に改行が入らない)として表示する 例えば、「あああああ<font style="display:inline;">いいいいい</font>あああああ」と記述すると あああああいいいいいあああああ のように改行されず表示する(ただし、ディスプレイの幅によります) visibility:hidden その要素の表示領域は確保されるが、見えない状態(透明)になる <font size="5" style="visibility:hidden;">あいうえお</font> 領域確保 <font size="5" style="display:none;">あいうえお</font> 領域は確保されない 例:「あああ」の間に幅60pxの空白 <font style="background:red;height:30px;width:60px;">あああ</font><font style="visibility:hidden;height:30px;width:60px;"></font><font style="background:red;height:30px;width:60px;">あああ</font> ああああああ :::::例:::::: <font color="red" style="background:blue;border-top:green 7px solid;font-size:25px;">あいうえおかきくけこ</font> ::背景色は青、上に7pxの緑色の実線の枠が付き、「あいうえおかきくけこ」の文字が25pxの大きさで赤く表示される 各属性は、; でつなぐ。 おなじみのものタグ b 太文字 i 斜体 s 取消線 u アンダーライン a アンカー a href="・・・・・・・・・・・・・・・・ ブラウザを別途開く場合は、<a href="http://www.・・・・・・・・" target="_blank"> リンクをクリックするごとにブラウザが開き困る場合は、ターゲットを「_$」などにすると良いと思います。 target="_$" font size= 文字の大きさ 1から7まで(1が最小、7が最大) font fase= 文字の種類 HG創英角ポップ体 MS Pゴシック ARマッチ体B など font color= 文字の色 red、blue、#ff0000、rgb(255,0,0)、rgb(100%,0%,0%) など br 改行 その他 h 見出し h1 から h6 まで(1が最大、6が最小) pre 指定した範囲のテキストを、入力した通りに等幅フォントで表示 big 文字を大きく(具体的にどの程度サイズを変更するかは決まっていない) small 文字を小さく(具体的にどの程度サイズを変更するかは決まっていない) p 段落を表す(その部分が一つの段落であることを示し、一般的なブラウザでは、この要素の前後に一行分のスペースが取られて表示される) |
|||||||||||||||||||||||||||
その他応用編 レインボー <font color="#ff0000" style="font-size:90px;letter-spacing:-82px">●</font><font color="#ff9900" style="font-size:75px;letter-spacing:-82px;vertical-align:7%">●</font><font color="#ffff00" style="font-size:60px;letter-spacing:-82px;vertical-align:17%;margin-left:13px">●</font><font color="#008000" style="font-size:45px;letter-spacing:-82px;vertical-align:33%;margin-left:30px">●</font><font color="#0000ff" style="font-size:30px;letter-spacing:-82px;vertical-align:68%;margin-left:44px">●</font><font color="#000080" style="font-size:20px;letter-spacing:-82px;vertical-align:115%;margin-left:57px">●</font><font color="#800080" style="font-size:11px;letter-spacing:-82px;vertical-align:235%;margin-left:68px">●</font> ●●●●●●● ●●●●●●●■ 右側のものはソースの後尾に、<font color="#ffccff" style="font-size:98px;letter-spacing:-82px;vertical-align:-39%;margin-left:26px">■</font> を付け足し、背景と同じ色の(このページは#ffccff)■で下半分をマスクしている 台形 <font color="red" style="font-size:70px;letter-spacing:-45px">▲</font><font color="red" style="font-size:70px;letter-spacing:-45px;vertical-align:4%">■</font><font color="red" style="font-size:70px;letter-spacing:-45px;vertical-align:4%">■</font><font color="red" style="font-size:70px;letter-spacing:-45px">▲</font> ▲■■▲ ●に文字を重ねる <font color="blue" style="font-size:80px">●</font><font color="red" style="writing-mode:tb-rl;font-size:28px;font-weight:900;vertical-align:-60%;margin-left:-12%"><pre>鈴木</pre></font> ● 鈴木 ガイコツ <font style="background:black;height:160px;width:140px;padding:20px"> <font color="ffffee" style="font-size:95px;letter-spacing:-40px">●</font><font color="#ffccff" style="font-size:25px;letter-spacing:-40px;vertical-align:140%">● ●</font><font color="ccccff" style="font-size:25px;vertical-align:30%;margin-left:-7px">▲</font><font color="ffffee" style="font-size:17px;letter-spacing:-3px;vertical-align:-78%;margin-left:-35px">■|■|■</font><font color="ffffee" style="font-size:17px;letter-spacing:-3px;vertical-align:-158%;margin-left:-44px">■|■|■</font> </font> ●● ●▲■|■|■■|■|■ ▲の位置 ノーマル:<font color="red" style="background:yellow;width:100px;height:50px;font-size:20px">▲</font> 中央:<font color="red" style="background:yellow;width:100px;height:50px;font-size:20px;text-align:center">▲</font> 右揃え:<font color="red" style="background:yellow;width:100px;height:50px;font-size:20px;text-align:right">▲</font> ▲▲▲ 1:<font style="background:yellow;width:100px;height:50px"></font><font color="red" style="font-size:20px;vertical-align:top">▲</font> 2:<font style="background:yellow;width:100px;height:50px"></font><font color="red" style="font-size:20px;vertical-align:middle">▲</font> 3:<font style="background:yellow;width:100px;height:50px"></font><font color="red" style="font-size:20px;vertical-align:50%">▲</font> 4:<font style="background:yellow;width:100px;height:50px"></font><font color="red" style="font-size:20px;vertical-align:text-top">▲</font> 5:<font style="background:yellow;width:100px;height:50px"></font><font color="red" style="font-size:20px;vertical-align:text-bottom">▲</font> 左から下にかけて、1,2,3,4,5 ▲ ▲▲ ▲▲ 配置 position: position:absolute 絶対的な位置に配置する(top:100px;left:200pxとすると、その位置に絶対的配置される。全く同じ大きさの違った画像をtop:100px;left:200pxに配置させた場合、その位置で重なってしまう。) position:relative 相対的な位置に配置する:指定された要素を本来表示されるべき位置から相対的に移動させて表示(要素Aがtop:100px;left:200pxの位置にあったとする。さらに要素BをAと同じtop:100px;left:200pxの位置に配置する。重なるのではなく、要素Aの位置は保たれる。) position:fixed 絶対的な位置に固定配置する:要素を絶対的位置に配置し、その要素はウインドウ上のその位置に固定されて、スクロールしても位置は変わらない(N6以降、Mac版IE5、Op6のみ対応) top:?? 上からの距離 bottom:?? 下からの距離 left:?? 左からの距離 right:?? 右からの距離 ??は、単位付きの数値、% z-index:? 重なる順序:数値(整数値)が大きいほど上に重ねられた状態で表示される 例:このページの左上角にある色紙が重なった様がそうです <font color="red" style="font-size:95px;position:absolute;top:0px;left:0px;z-index:1;">■</font><font color="yellow" style="font-size:90px;position:absolute;top:0px;left:0px;z-index:2;">■</font><font color="blue" style="font-size:80px;position:absolute;top:0px;left:0px;z-index:3;">■</font> 画像の場合 <img src="http://abcde.co.jp/images/aaa/xyz.gif" width="90" height="150" border="0" style="position:absolute;top:10px;left:10px;"> ■■■ |
|||||||||||||||||||||||||||
writing-mode:tb-rl 文字を縦書きにする lr-tb だと横書き <font style="writing-mode:tb-rl;">あいうえおかきくけこ</font> float 回り込みの指定 left 指定した要素を左側に配置し、後に続く内容を右に回り込ませる right 指定した要素を右側に配置し、後に続く内容を左に回り込ませる none 回り込みをしない(初期値) 例::画像の右に「あいうえお」の文字 <img src="img/ja/menu_paso.gif" style="float:left;">あいうえお clear 回り込みを解除する left 左側の要素に対する回り込みを解除 right 右側の要素に対する回り込みを解除 both 左右両側の要素に対する回り込みを解除 none 回り込みを解除しない(初期値) 例::縦文字に横文字を挟む <font style="writing-mode:tb-rl;float:left"> あいうえおかきくけこ あいうえおかきくけこ</font> <font style="float:left;margin-top:10%"> さしすせそ<br> さしすせそ</font> <font style="writing-mode:tb-rl;float:left;margin-left:10px"> あいうえおかきくけこ あいうえおかきくけこ</font> zoom:?? ズーム(文字や画像を大きくする) ??は、単位の付けない数字、% normal(通常、初期値) zoom:2、zoom:200%はどちらも2倍に拡大(余り大きな数値を用いないこと) <font style="writing-mode:tb-rl;text-decoration:underline;">あいうえお</font> のように記述すると、縦書き文字の右側にラインが引かれます。 <font style="writing-mode:tb-rl;text-decoration:line-through;">あいうえお</font> のように記述すると、縦書き文字の中央にラインが引かれます。 <font style="writing-mode:tb-rl;text-decoration:overline;">あいうえお</font> とすると「左側に引かれるのかな?」と思うが、右側に引かれます。 そこで、 <font style="writing-mode:tb-rl;text-decoration:underline;text-underline-position:below;">あいうえお</font> とすると、左側に引かれます。 text-underline-position (下線の位置を変更する。) above 下線を文字の上に指定する。縦書きの場合は文章の右側に表示する。 below 下線を文字の下に指定する。縦書きの場合は文章の左側に表示する。(IE5.5初期値) auto 言語が日本語で(lang属性をjaとした場合)、縦書きの場合は下線を右側に表示し、それ以外はbelowと同じ。(IE6以降初期値) auto-pos autoと機能は同じ。 <font style="writing-mode:tb-rl;border-left:solid black 1px;">あいうえお</font> または <u><font style="writing-mode:tb-rl;text-underline-position:below;">あいうえお</font></u> のようにしても線が左側に引かれます。 こちらの方が簡単。 direction:??;unicode-bidi:??; directionで文字の表記方向を指定して、unicode-bidiでその指定内容を有効にする。 direction:ltr 左から右へ:初期値 direction:rtl 右から左へ unicode-bidi:bidi-override 有効にする unicode-bidi:embed 状況により unicode-bidi:normal 通常:初期値 directionでrtlを指定しただけでは、文章を右から左に流すことができない。文章を右から左に流したい場合には、unicode-bidiを追加してbidi-override を指定する。 <font style="direction:rtl;unicode-bidi:bidi-override;">あいうえおかきくけこ</font> |
|||||||||||||||||||||||||||
お遊び 文字をクリックするとメーラーが開く <a href="mailto:?subject=ご意見">メール下さい</a> subを使わない下付き文字 <font style="font-size:30px">H<font style="vertical-align:-35%">2</font>SO<font style="vertical-align:-30%">4</font></font> supを使わない上付き文字 <font style="font-size:50px">∫</font><font style="font-size:30px;vertical-align:20%;margin-left:-2%">X<font style="vertical-align:35%">3</font>dx=<font style="vertical-align:-50%;margin-right:-13px">4</font>-<font style="vertical-align:50%;margin-left:-13px">1</font>X<font style="vertical-align:35%">4</font>+C</font> vertical-alignのsub、superを使うともっと簡単に記述出来そうですね! H2SO4 ∫X3dx=4-1X4+C behavior ビヘイビア:動き、挙動 文字の移動:右から左 <font style="behavior:url(#default#time)" onend="x=600;setInterval('MOVE1.style.marginLeft=x;x=x-20;if(x<=0){x=600}',50)" t:dur="0.1"></font><font id="MOVE1" color="red">あいうえお</font> 文字の大文字に注意して下さい behaviorは、動きという意味があります。 マーキータグの移動属性にも使われています。 style="behavior:url(#default#time)" は、基本 id="MOVE1"とすることで、オブジェクト化(独立)させる文章の名前をMOVE1としています。 このように、文章や画像を独立させなければなりません x=600 で開始位置を決めます。 x=x-20は、xの値を20ずつ減らしていきます。 変数xは、yでもaでもかまいません。 if(x<=0){x=600} xが0になったなら再度x=600として始めます。 setIntervalは、指定されたミリ秒が経過するたびに動作が行われる(この例の場合、50ミリ秒ごとにxの値が20ずつ減っていく) 50の数値を変えると、移動の速さが変わります。(小さいほど速い:1000で1秒) onendは、動作が終了したときの処理 t:dur=は、表示している秒数(1で1秒、0だと止まったまま:この例の場合、0.1秒後に移動が始まります) その他、属性に次のものがあります t:repeat=は、表示回数(indefiniteを設定すれば無限) t:begin=は、表示が開始される秒数(ただし、t:timeline="seq/par"の設定に依存) t:timeline=は、seqだと1つの子要素の表示が終了してから次の子要素の表示が開始されます。この場合、t:beginは前の表示が終了してから開始されるまでの秒数になります。 parだと子要素の表示がバラバラに開始されます。 t:beginはページが表示されてから開始されるまでの秒数となります。 t:timeaction=は、visibilityだと単に非表示になるだけなので位置関係が維持される(初期値)。 displayでは非表示の時にはそのオブジェクトの存在を消し、次に表示されるオブジェクトは同じ位置に表示されます。 MOVE1は、0.1秒後に左マージン600pxの位置から20ずつ(580,560,540・・・・・)と50ミリ秒間隔で減らしていき、0になったら600の位置に戻って繰り返します。 文字の移動:左から右 <font style="behavior:url(#default#time)" onend="y=0;setInterval('MOVE2.style.marginLeft=y;y=y+20;if(y>=600){y=0}',50)" t:dur="0.1"></font><font id="MOVE2" color="red">あいうえお</font> 見本は有りません。 記述すると他のスタイルがばらける恐れがあるので! <font style="behavior:url(#default#time)" onend="x=1000;setInterval('MOVE1.style.marginLeft=x;x=x-990;if(x<=0){x=1000}',10)" t:dur="0.1"></font><font id="MOVE1" style="background:white;width:400px;height:100px"></font> <font style="behavior:url(#default#time)" onend="y=0;setInterval('MOVE2.style.marginLeft=y;y=y+990;if(y>=1000){y=0}',10)" t:dur="0.1"></font><font id="MOVE2" style="background:white;width:400px;height:100px"></font> マウスカーソルを当てると文字が出て、離すと消える <font id="IN" style="behavior:url(#default#time2)" end="IN.mouseout" begin="IN.mouseover" timeaction="style" style="background:yellow" size="6" color="#ffccff">出してあげる</font> style="behavior:url(#default#time2)"は、基本 id="IN"とすることで、オブジェクト化(独立)させる文章の名前をINとしています。 このように、文章や画像を独立させなければなりません color="#ffccffは、このページの背景色と同じ色です。 サイズ6の大きさで同色で「出してあげる」と書いています。 マウスカーソルが乗ったときに、スタイル「background:yellow」が実行され、文字が浮かび上がります。 begin="IN.mouseout" end="IN.mouseover と逆さまにすると、一旦マウスを当て離した時に文字が浮かび上がります。 さらにその文字にマウスポインタを当てると文字は消え、離すと浮かび上がります。 mouseover:カーソルが乗ったときのイベント mouseout:カーソルが離れたときのイベント begin:開始状態 end:終了状態 timeaction="style" styleで記述された動作をしなさい idはこの場合INとしていますが、NNでもXXでもかまいません マウスカーソルを当てると文字が消える <font id="OUT" style="behavior:url(#default#time2)" end="OUT.mouseout" begin="OUT.mouseover" timeaction="style" style="background:red" size="6"color="red">消してあげる</font> マウスカーソルを当てると、赤い文字に赤い背景が重なります。 マウスカーソルを当てると文字が消える2 <font id="OUT2" style="behavior:url(#default#time2)" end="OUT2.mouseout" begin="OUT2.mouseover" timeaction="style" style="visibility:hidden" size="6" color="red">消してあげる2</font> マウスカーソルを当てると、visibility:hiddenが実行されます。 その他、応用 <font id="BIG" style="behavior:url(#default#time2)" end="BIG.mouseout" begin="BIG.mouseover" timeaction="style" style="font-size:35px" color="red" size="2">大きくしてあげる</font> <font id="WIDTH" style="behavior:url(#default#time2)" end="WIDTH.mouseout" begin="WIDTH.mouseover" timeaction="style" style="letter-spacing:50px" size="5" color="red">広くしてあげる</font> <font id="MAR" style="behavior:url(#default#time2)" end="MAR.mouseout" begin="MAR.mouseover" timeaction="style" style="margin-left:150px" size="5" color="red">ずらしてあげる</font> <font color="red" style="font-size:95px">■</font><font id="MAR1" style="behavior:url(#default#time2)" end="MAR1.mouseout" begin="MAR1.mouseover" timeaction="style" style="font-size:75px;vertical-align:8%;margin-left:-84px" color="yellow" size="7">●</font> パターン1 <font color="red" style="font-size:95px">■</font><font id="MAR2" style="behavior:url(#default#time2)" onend="MAR2.mouseout" begin="MAR2.mouseover" timeaction="style" style="font-size:75px;vertical-align:8%;margin-left:-84px" color="yellow" size="7">●</font> パターン2 **endとonendのちがいは、下で試して下さい <font id="POS" style="behavior:url(#default#time2)" end="POS.mouseout" begin="POS.mouseover" timeaction="style" style="font-size:75px;position:absolute;left:200px;top:200px" color="yellow" size="6">●</font> <font color="#ff0000" style="font-size:90px;letter-spacing:-82px">●</font><font id="A1"style="behavior:url(#default#time2)" onend="A1.mouseout" begin="A1.mouseover" timeaction="style" color="#ff9900" style="font-size:75px;letter-spacing:-82px;vertical-align:7%">●</font><font id="A2"style="behavior:url(#default#time2)"onend="A2.mouseout" begin="A2.mouseover" timeaction="style" color="#ffff00" style="font-size:60px;letter-spacing:-82px;vertical-align:17%;margin-left:13px">●</font><font id="A3"style="behavior:url(#default#time2)" onend="A3.mouseout" begin="A3.mouseover" timeaction="style" color="#008000" style="font-size:45px;letter-spacing:-82px;vertical-align:33%;margin-left:30px">●</font><font id="A4"style="behavior:url(#default#time2)" onend="A4.mouseout" begin="A4.mouseover" timeaction="style" color="#0000ff" style="font-size:30px;letter-spacing:-82px;vertical-align:68%;margin-left:44px">●</font><font id="A5"style="behavior:url(#default#time2)" onend="A5.mouseout" begin="A5.mouseover" timeaction="style" color="#000080" style="font-size:20px;letter-spacing:-82px;vertical-align:115%;margin-left:57px">●</font><font id="A6"style="behavior:url(#default#time2)" onend="A6.mouseout" begin="A6.mouseover" timeaction="style" color="#800080" style="font-size:11px;letter-spacing:-82px;vertical-align:235%;margin-left:68px">●</font> ↓ この下にマウスポインタを当ててみて! 出してあげる 消してあげる 消してあげる2 大きくしてあげる 広くしてあげる ずらしてあげる 黄色の●にマウスポインタを当ててみて! ■● ■● ● 小さい●にマウスポインタを当ててみて! ●●●●●●● ヤマハの「XGmusic」フォントが入っていると音符や音楽記号になります <font face="XGmusic">abcdefghijABCDEFGHIJKLMNOPQRSTUVWXYZ</font> a b c d e f g h i j A B C D E F G H I J K L M N O P Q R S T U V W X Y Z |
::マックでは、表示される形が変わります:: <font style="cursor:crosshair;font size:25px;">あいうえお</font> クロス <font style="cursor:pointer;font size:25px;">あいうえお</font> ポインター <font style="cursor:move;font size:25px;">あいうえお</font> ムーブ <font style="cursor:text;font size:25px;">あいうえお</font> テキスト <font style="cursor:wait;font size:25px;">あいうえお</font> ウェイト <font style="cursor:help;font size:25px;">あいうえお</font> ヘルプ <font style="cursor:w-resize;font size:25px;">あいうえお</font> リサイズ <font style="cursor:n-resize;font size:25px;">あいうえお</font> <font style="cursor:se-resize;font size:25px;">あいうえお</font> <font style="cursor:ne-resize;font size:25px;">あいうえお</font> hand autoにマウスポインターを当ててみて下さい ポインターは「hand」 テキストは「auto」でも使える |
コンピューターの設定が標準である場合は上下とも同じ方向に矢印が向きます 左から右 : 上から下 : 左上から右下 : 右上から左下 w-resize n-resize se-resize ne-resize e-resize s-resize nw-resize sw-resize 以下、英字にマウスポインタを当ててみて下さい デフォルト default ::エクスプローラ6以降で対応しているもの:: col-resize row-resize no-drop not-allowed all-scroll progress vertical-text |
<font style="cursor:url('http://www.xxx.co.jp/xxx/xxx.bin')">あいうえお</font> 注::「http://www.xxx.co.jp/xxx/xxx.bin」はカーソルのURLで、これは一例です。 この記述通り行ってもうまくいきません。 好みのカーソルを好みのURLに置き、そのURLを記述することで、文字上にマウスカーソルをかざすとカーソルの形状が変わります。 |
特殊文字 ∞ ∞ √ √ ∑ ∑ ⇒ ⇒ ⇔ ⇔ ≠ ≠ ‡ ‡ † † ⊂ ⊂ ♠ ♠ ♣ ♣ ♥ ♥ ♦ ♦ |
注:画像のURLは、実際のものではありません
<FONT STYLE="width:270px;height:270px;background:red;border:8px green inset"> |
注:画像のURLは、実際のものではありません
padding (内側の余白)を使う padding 上 右 下 左 |
基本 filter:フィルタの種類(属性=値,属性=値) 注::width、heightを使って幅、高さを指定するか、positionでabsoluteを指定し表示位置を指定するか、しないと設定が無効になる場合があります。 例:<font style="position:absolute;filter:FlipH();">あいうえおかきくけこ</font> ティーカップ掲示板では、positionのp、filterのfは文字コードで。 Alpha() テキストや画像の透明化 opacity=? 開始透明度 0(透明)から100(不透明) finishOpacity=? 終了透明度 0(透明)から100(不透明) style=? (?は0から3) グラデーションスタイル 0は全体をopacityで指定した値に透過します。その他のフィルタプロパティは指定しても無意味。 1はstartX、startYで指定した座標からfinishX、finishY指定した座標へ、opacityで指定した値からfinishOpacityで指定した値へ透過。 2は中心から放射状に、opacityで指定した値からfinishOpacityで指定した値へ透過。 3は中心からピラミッド状に、opacityで指定した値からfinishOpacityで指定した値へ透過 startX=?, startY=?, finishX=?, finishY=? 各値0から100 グラデーションをかける領域指定 スタート地点のX,Y座標及び終了地点のX,Y座標 Blur() テキストや画像にブレを持たす add=true(1)またはfalse(0) true(1)を指定すると元の画像をブレた絵の上に重ねて表示し、false(0)は重ねない (add=1 と add=true は同じ) direction=? ブレの方向指定:45度単位(真上0、右上45、右90、右下135、真下180、左下225、左270、左上315) strength=? ブレの距離(ピクセル値) pixelradius=? 対象をどの範囲でぼかすかを指定 0から100 shadowopacity=? 画像の透明度 0:完全透明から 1:そのまま(完全非透過) 0.5 .4のように makeshadow=trueかfalse trueは対象を影効果として扱い、対象を黒で塗りつぶす。 falseはそのまま Chroma() 画像の中の指定した色を透明化 color=#?????? 透明化したい色の指定 (例:color=#000000、color=red) DropShadow() 画像やテキストにずらしたようなシャドウ(影)を付ける color=xxxxx 影色の指定 カラーを8桁で表記した場合は、00は完全に透過でFFは全く透過しない (#FF0000FFは、非透過のブルー) offx=?, offy=? 影の移動距離:ピクセル値(offxは右:-値は左、offyは下:-値は上方向) positive=true(1)またはfalse(0) 影の反転(false:反転指定では、画像の透明化された部分にまで影をつけられる) FlipH() 画像やテキストの左右反転 FlipV() 画像やテキストの上下反転 Gray() 画像やテキストの白黒化 Glow() 画像やテキストに炎のような影付け(発光) color=xxxxxx 影の色 color=red color=#ffff00 など strength=? 影を付ける度合い、ピクセル値(1:弱から255:強) Invert() 色(色合い、明るさ、彩度)を反転 Mask() マスク:画像やテキストの透明部を指定色で塗りつぶし、非透明部を透明(切り抜き)にする color=xxxxxx 透明部を塗りつぶす色を指定。 カラーを8桁で表記した場合は、00は完全に透過でFFは全く透過しない (#FF0000FFは、非透過のブルー) Shadow() シャドウ:影付け color=xxxxx 影の色 direction=? 方向指定:45度単位(真上0、右上45、右下135、真下180) Strength=? 影を付ける度合い(0から100) Wave() ウェーブ:画像やテキストに波かけの効果を持たす add=0(false)か1(true) 波の上に元の物を重ねるかどうかの指定(0は重ねない) freq=? 波の個数指定(数値) lightStrength=? 光の強さを0から100の間で指定(数値が大きいほど強い) phase=? 波の開始位相(位置)を0から100の間で指定 strength=? 波の横幅(数値) Xray() レントゲン写真のような効果 progid:DXImageTransform.Microsoft.BasicImage() いろいろな効果を付ける rotation=? 0はそのまま、1は90度回転、2は180度回転、3は270度回転 opacity=? 画像の透明度 0:完全透明から 1:そのまま(完全非透過) 0.5 .4のように mirror= 1を指定すると鏡に映した状態になる(左右反転):0はそのまま invert= 1を指定すると色合い、明るさ、彩度が変わる(各画素のRGB値の#FFFFFFから引いた値):0はそのまま x-ray= 1を指定するとレントゲン写真効果:0はそのまま grayscale= 1を指定するとグレースケール画像:0はそのまま progid:DXImageTransform.Microsoft.AlphaImageLoader() 画像の扱い 使用例: <font style="background:red;height:200px;width:200px;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='abcde.gif',sizingmethod=scale);"></font> src= 画像の位置 高さ、幅とも200ピクセルの赤い背景の上に画像が現れます。 sizingmethod=cropでは背景は指定した大きさ画像は背景の大きさに切り取られる(背景が100px×100pxだと画像はその大きさにカット)、sizingmethod=imageでは背景は画像の大きさ画像はそのままの大きさ、sizingmethod=scaleでは画像を指定された範囲に拡大・縮小して表示する progid:DXImageTransform.Microsoft.Emboss() グレー化した画像に凹凸をもたらす(文字だとグレー化するだけであまり効果無し) bias=? 画像の隆起度合いを-1 〜 1で指定。1が最も隆起していて、0が平坦、-1が最も窪む。 この属性、値の取得は出来ても、指定は出来ないようです? progid:DXImageTransform.Microsoft.Engrave() 画像をグレー化し、彫刻したようなくぼみをもたらす(文字だとグレー化するだけであまり効果無し) bias=? 画像の隆起度合いを-1 〜 1で指定。1が最も隆起していて、0が平坦、-1が最も窪む。 この属性、値の取得は出来ても、指定は出来ないようです? progid:DXImageTransform.Microsoft.MotionBlur() 動きのあるブレ direction=? ブレの方向指定:45度単位(真上0、右上45、右90、右下135、真下180、左下225、左270、左上315) strength=? ブレの距離(ピクセル値) add= trueは、効果適用後、元のイメージを上書き表示し、falseは、しない progid:DXImageTransform.Microsoft.Pixelate() 画像の目を粗くする(タイル状) maxsquare=? (数値が大きいほど粗くなる) progid:DXImageTransform.Microsoft.Matrix() 画像を360度x360度、自在に回転・拡大縮小させる filtertype= 拡大縮小時の色の取り方::bilinearは、対象となる画素色を定義する方法として最も近い4画素から平均値を採る方法を用いる。 nearestは、対象となる画素色を定義する方法として最も近い画素の値を採る方法を用いる。 dx=? 対象を回転・拡大縮小させる始点の内容辺左上からのX座標をピクセル値で指定 dy=? 対象を回転・拡大縮小させる始点の内容辺左上からのY座標をピクセル値で指定 m11=? 1行1列目の対象の横方向の倍率を指定 m12=? 1行2列目の対象の底辺を横方向にどれくらいずらすかを高さに対する比率で指定 m21=? 2行1列目の対象の右辺を縦方向にどれくらいずらすかを幅に対する比率で指定 m22=? 2行2列目の対象の縦方向の倍率を指定 sizingmethod= clip to originalは、指定された範囲内でのみ表示し、はみ出した部分は切り取り。 auto expandは、回転・拡大縮小に合わせて、要素の大きさを変更し、この場合、dx、dyは無効 progid:DXImageTransform.Microsoft.Gradient() グラデーション効果をかける startColorstr=xxxxxx 始まりの色 endColorstr=xxxxxx 終わりの色 gradientType=? 0は上下にかけて、1は左右にかけて カラーを8桁で表記した場合は、00は完全に透過でFFは全く透過しない (#FF0000FFは、非透過のブルー) |
![]() ![]() |
Alpha() | |
![]() |
![]() |
<img src="../pasocom/part1/toshiba.jpg" width="188" height="147" style="filter:Alpha(opacity=30);"> | <img src="../pasocom/part1/toshiba.jpg" width="188" height="147" style="filter:Alpha(opacity=50,style=2);"> |
![]() |
あいうえお |
<img src="../pasocom/part1/toshiba.jpg" width="188" height="147" style="filter:Alpha(opacity=50,finishOpacity=30,style=1,startX=50,startY=50,finishX=130,finishX=130);"> | <font color="red" style="font size:20px;width:80%; filter:Alpha(opacity=70,style=1);">あいうえお</font> |
Blur() | |
![]() |
![]() |
<img src="../pasocom/part1/toshiba.jpg" width="188" height="147" style="filter:Blur(direction=90,strength=140);"> | <img src="../pasocom/part1/toshiba.jpg" width="188" height="147" style="filter:Blur(direction=45,strength=140,add=1);"> |
あいうえお | あいうえお |
<font color="red" style="font size:20px;width:80%;filter:Blur(direction=90,strength=140);">あいうえお</font> | <font color="red" style="font size:20px;width:80%;filter:Blur(direction=270,strength=140,add=1);">あいうえお</font> |
Chroma() | |
![]() |
あいうえお あいうえお |
<img src="../gif/neko.gif" width="50" height="50" style="filter:Chroma(color=#928f9b);"> | <font style="font size:20px;width:80%;style;filter:Chroma(color=red);">あ<font color="red">いう</font>えお</font> |
DropShadow() | |
![]() |
![]() |
<img src="../gif/neko.gif" width="50" height="50" style="filter:DropShadow(color=red,offx=5,offy=-5);"> | <img src="../gif/neko.gif" width="50" height="50" style="filter:DropShadow(color=yellow,offx=5,offy=-5,positive=0);"> |
あいうえお | あいうえお |
<font color="red" style="font size:20px;width:80%;filter:DropShadow(color=blue,offx=2,offy=2);">あいうえお</font> | <font color="red" style="font size:20px;width:80%;filter:DropShadow(color=blue,offx=2,offy=2,positive=0);">あいうえお</font> |
FlipH() | |
![]() |
あいうえお |
<img src="../pasocom/part1/toshiba.jpg" width="188" height="147" style="filter:FlipH();"> | <font color="red" style="font size:20px;width:80%;filter:FlipH();">あいうえお</font> |
FlipV() | |
![]() |
あいうえお |
<img src="../pasocom/part1/toshiba.jpg" width="188" height="147" style="filter:FlipV();"> | <font color="red" style="font size:20px;width:80%;filter:FlipV();">あいうえお</font> |
Gray() | Invert() |
![]() |
![]() |
<img src="../pasocom/part1/toshiba.jpg" width="188" height="147" style="filter:Gray();"> | <img src="../pasocom/part1/toshiba.jpg" width="188" height="147" style="filter:Invert()"> |
Glow() | |
![]() |
あいうえお |
<img src="../gif/neko.gif" width="50" height="50" style="filter:Glow(color=red,strength=60);"> | <font style="width:80%;filter:glow(strength=5,color=red);" color="#ff0066" size="5">あいうえお</FONT> |
Mask() | Shadow() |
画像やテキストの透明部を指定色で塗りつぶし、非透明部を透明にする | あいうえお |
<font style="width:80%;filter:Mask(color=white);">画像やテキストの透明部を指定色で塗りつぶし、非透明部を透明にする</font> | <font style="width:80%;filter:shadow(color=red,direction=115,strength=40);" color="blue" size="5">あいうえお</FONT> |
Wave() | |
![]() |
画像やテキストに波かけの効果を持たす |
<img src="../pasocom/part1/toshiba.jpg" width="188" height="147" style="filter:Wave(freq=3,lightStrength=30,phase=45,strength=5);"> | <font style="width:100%;filter:Wave(freq=2,lightStrength=20,phase=10,strength=2);">画像やテキストに波かけの効果を持たす</font> |
Xray() | progid:DXImageTransform.Microsoft.BasicImage() |
![]() |
![]() |
<img src="../pasocom/part1/toshiba.jpg" width="188" height="147" style="filter:Xray();"> | <img src="../pasocom/part1/toshiba.jpg" width="188" height="147" style="filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3,opacity=0.3);"> |
progid:DXImageTransform.Microsoft.Emboss() | progid:DXImageTransform.Microsoft.Engrave() |
![]() |
![]() |
<img src="../pasocom/part1/toshiba.jpg" width="188" height="147" style="filter:progid:DXImageTransform.Microsoft.Emboss();"> | <img src="../pasocom/part1/toshiba.jpg" width="188" height="147" style="filter:progid:DXImageTransform.Microsoft.Engrave();"> |
progid:DXImageTransform.Microsoft.MotionBlur() | |
![]() |
あいうえおかきくけこ |
<img src="../pasocom/part1/toshiba.jpg" width="188" height="147" style="filter:progid:DXImageTransform.Microsoft.MotionBlur(direction=90,strength=100);"> | <font style="width:80%;font size:20px;filter:progid:DXImageTransform.Microsoft.MotionBlur(direction=45,strength=30);">あいうえおかきくけこ</font> |
progid:DXImageTransform.Microsoft.Pixelate() | |
![]() |
あいうえおかきくけこ |
<img src="../pasocom/part1/toshiba.jpg" width="188" height="147" style="filter:progid:DXImageTransform.Microsoft.Pixelate(maxsquare=8);"> | <font style="width:80%;font size:20px;filter:progid:DXImageTransform.Microsoft.Pixelate(maxsquare=3);">あいうえおかきくけこ</font> |
progid:DXImageTransform.Microsoft.AlphaImageLoader() | |
<font style="background:red;width:70px;height:70px;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=../gif/neko.gif,sizingmethod=crop);"></font> <font style="background:red;width:70px;height:70px;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=../gif/neko.gif,sizingmethod=image);"></font> <font style="background:red;width:70px;height:70px;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=../gif/neko.gif,sizingmethod=scale);"></font> |
|
progid:DXImageTransform.Microsoft.Matrix() | |
![]() |
|
<img src="../pasocom/part1/toshiba.jpg" width="188" height="147" style="filter:progid:DXImageTransform.Microsoft.Matrix(filtertype=bilinear,dx=5,dy=8,m12=0.1,m11=0.6,m21=0.2,m22=0.6);"> | |
progid:DXImageTransform.Microsoft.Gradient() | |
あいうえお | あいうえお |
<font style="FILTER:progid:DXImageTransform.Microsoft.Gradient(endColorstr=red,startColorstr=yellow,gradientType=1);width:300px;height:50px;border-style:solid;border-color:green;background-color:purple;">あいうえお</Font> | <font style="FILTER:progid:DXImageTransform.Microsoft.Gradient(endColorstr=red,startColorstr=blue,gradientType=0);width:80%;">あいうえお</Font> |
<font color="red" size="5"><marquee scrollamount="6" width="380"> ***** <MARQUEE scrollamount="3" direction="up" behavior="alternate" width="200" height="100"> <MARQUEE scrollamount="20" behavior="alternate"> <b>あいうえお あいうえお</b> </marquee></marquee> ***** </marquee></font> <FONT style="font-size:100px;">大文字</font> 大文字 <FONT style="width:100%;filter:Glow(color=red);font-size:100px;">大文字2</font> 大文字2 |
注:画像のURLは、実際のものではありません <MARQUEE scrolldelay="500" scrollamount="230" width="300"><img src="img/menu_paso.gif" border="0"></MARQUEE> <MARQUEE scrolldelay="500" scrollamount="230" width="300"><img src="img/menu_paso.gif" style="border:6px red solid"></MARQUEE> 点滅、画像枠あり <img src="img/menu_paso.gif" width="150" height="150" style="border-top:8px red solid;border-bottom:8px red solid;border-right:10px blue inset;border-left:10px blue inset"> 枠付き画像 <font color="red" style="background-image:url("img/menu_paso.gif");height:70;width:160;font-size:30px"><b>あいうえお<br>かきくけこ</b></font> 画像の上に文字 |