SPAN&DIV 拡張プラグイン テスト

divプラグイン、spanプラグインのテストページです。

 {{div 属性,属性値,Wiki書式の文}}
 {{span 属性,属性値,Wiki書式の文}}

属性値に外部urlを使う事は出来ません。
属性値で管理者の素材用url(homepage3.nifty.com/%7Eio/fswiki-l/sozai/)を指定する場合は「<url>」とします。
属性値でページに添付した素材を指定する場合は「<ten 画像ファイル名>」とします。

Wiki書式の文中に「<br>」があると、その部分が改行に変更されます。

 {{span style,color:green,見出し}}
 内容

見出し 内容

 {{div style,color:green,見出し}}
 内容

内容

 {{span style,color:red,*項目}}

• 項目

上の、赤色で表示されるはずだけど、Mac版IE5.2では変化無し。

 {{span style,background-color:#cc0000;font-size:2px,-------------------------------------}}

------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

「-」を沢山並べて、小さくし、色を付けてヘアライン風に

文字サイズ

 {{span style,font-size:xx-small,xx-small}}

xx-small

 {{span style,font-size:small,small}}

small

 {{span style,font-size: medium,medium}}

medium

 {{span style,font-size:large,large}}

large

 {{span style,font-size:xx-large,xx-large}}

xx-large

 {{span style,font-size:50%,ブラウザ標準の50%}}

ブラウザ標準の50%

 {{span style,font-size:150%,ブラウザ標準の150%}}

ブラウザ標準の150%

 {{span style,font-size:300%,ブラウザ標準の300%}}

ブラウザ標準の300%

 {{span style,font-size:12pt,12pt(絶対指定)}}

12pt(絶対指定)

 {{span style,font-size:40pt,40pt(絶対指定)}}

40pt(絶対指定)

文字飾り

 {{span style,font-weight:bold,ボールド Bold}}

ボールド Bold

 {{span style,font-style:italic,イタリック Italic}}

イタリック Italic

 {{span style,font-family:monospace,monospace}}

abcdefghij これは等幅ではない

abcdefghij これは等幅

プラグイン　 これは等幅ではない

プラグイン　 これは等幅

複合指定

 {{div style,color:blue; font-weight:bold; font-style:italic;　(実際は下の文も続けて書く)
  font-family:Times; font-size:600%,色々font指定}}

文字位置

 {{div style,text-align:center,中央寄せ}}

 {{div style,text-align:right,右寄せ}}

 {{div style,letter-spacing:15pt,文字間隔ABCDEFG}}

行間

Wikiでは、一行以上間をあけないと同じ行として繋がって表示されるので、通常改行するには一行以上間をあけます。

通常の一行目

通常の二行目

通常の三行目

「br」拡張プラグイン構文を使えば、一行の間をあけなくても改行可能。

「br」構文で改行した通常の一行目
「br」構文で改行した通常の二行目
「br」構文で改行した通常の三行目

「SPAN」拡張プラグイン構文を使う事で、行と行の間をコントロールする事が可能(ただし、Safari等ブラウザによっては反映されない、されづらい事も)。以下の行は通常のように一行の間をあけているが、通常の一行間より狭く表示される。

 {{span style,vertical-align:-18px;line-height:1px,SPANを使った一行目}}

SPANを使った一行目vertical -18px設定

SPANを使った二行目vertical -10px設定

SPANを使った三行目vertical 0px設定

文字背景

 {{span style,background-color:yellow,背景色yellow}}

背景色yellow

 {{span style,background-image:URL(<ten 背景に貼るページ添付した画像名>), 文字 }}
 
 {{span style,background-image:URL(<ten old-back.jpg>),画像背景　画像背景　画像背景　画像背景}}

画像背景　画像背景　画像背景　画像背景

 {{span style,background-image:URL(<url>背景に貼る画像名), 文字 }}
 使用出来るのは管理者が用意した画像のみ
 
 {{span style,background-image:URL(<url>aquaDesktop.jpg),画像背景　画像背景　画像背景　画像背景}}

画像背景　画像背景　画像背景　画像背景

文に改行を含めた場合のテスト

ボックス

 {{div style,width:ボックス横幅,文字}}
 {{div style,100px:ボックス横幅,文字}}

 {{div style,border: double thick blue,文字}}

 {{div style,border-top: red ridge 16px; border-right: green double 12px; border-bottom: 〜

フロート (回り込み)

 {{span style,float:left ,画像URL}}文章

右へ回り込み、右へ回り込み、右へ回り込み、右へ回り込み、右へ回り込み、右へ回り込み、右へ回り込み、右へ回り込み、右へ回り込み、右へ回り込み、右へ回り込み、右へ回り込み、右へ回り込み、右へ回り込み

 {{span style,float:right ,画像URL}}文章

左へ回り込み、左へ回り込み、左へ回り込み、左へ回り込み、左へ回り込み、左へ回り込み、左へ回り込み、左へ回り込み、左へ回り込み、左へ回り込み、左へ回り込み、左へ回り込み、左へ回り込み、左へ回り込み、左へ回り込み