SPAN&DIV リファレンス
当Wikiに導入されている「span」プラグイン、「div」プラグイン、「div_s」プラグインを利用して、Wikiでの表示をより多彩にする事が出来ます。
このページではそれらプラグインを使う際に、CSS等をあまり分かっていなくても使えるよう、良く使う設定を例として挙げています。
{{div 属性,属性値(プロパティ:値),Wiki書式の文}} 「div」プラグイン {{span 属性,属性値(プロパティ:値),Wiki書式の文}} 「span」プラグイン {{span style,color:red,Wiki書式の文}} 例
「div」はブロック要素(前後に改行が伴う)、「span」はインライン要素(改行が伴わない)となっていて、必要に応じてどちらかを使います。
設定可能な属性は以下の通りです。その際の設定可能な属性値は属性によって変わります。
- align (divのみ)
- class
- dir
- id
- lang
- style
- title
- xml:lang
属性値(プロパティ:値)は「;」で区切って複数設定する事も可能です(styleで文字のサイズと色を指定する等)。
{{span style,color:red; font-size:small,Wiki書式の例文}}
Wiki書式の例文
「span」プラグイン、「div」プラグインの改造により、文字色を設定する「color」等は、属性に「style」でなく「プロバティ」を、属性値に「値」を指定する事も出来るようになっています (簡易、直感的に使えるよう)。
{{div style,color:red,文章}} 通常 {{div color,red,文章}} 簡易指定
ただし、簡易指定の場合は色と文字サイズを指定する等、複数の設定を同時に行うような事は出来ません。
今現在簡易に設定出来るもの
- background
- background-color
- background-image
- border
- border-bottom
- border-collapse
- border-color
- border-left
- border-right
- border-spacing
- border-style
- border-top
- border-width
- caption-side
- clear
- clip
- color
- cursor
- direction
- display
- float
- font
- font-family
- font-size
- font-style
- height
- letter-spacing
- line-height
- list-style
- list-style-image
- list-style-position
- list-style-type
- margin
- margin-bottom
- margin-left
- margin-right
- margin-top
- max-height
- max-width
- min-height
- min-width
- outline
- outline-color
- outline-style
- outline-width
- overflow
- padding
- padding-bottom
- padding-left
- padding-right
- padding-top
- position
- text-align
- text-decoration
- text-indent
- text-transform
- vertical-align
- visibility
- width
- word-spacing
align・・・横方向の表示位置
- 表示位置は「left」、「right」、「center」を指定出来ます。インライン要素である「span」プラグインでは「align」は使えません。
- 構文
{{div align,left,ここに書いた文が画面左に表示}} {{div align,right,ここに書いた文が画面右に表示}} {{div align,center,ここに書いた文が画面中央に表示}}
- 例
ここに書いた文が画面左に表示
ここに書いた文が画面右に表示
ここに書いた文が画面中央に表示
color・・・文字色
- 文字色には「#と6桁の16進数」、「#と3桁の16進数」、「カラーを表す名前」等を指定出来ます
aqua black blue fuchsia gray green lime maroon navy olive purple red silver teal white yellow
- 構文
{{span style,color:文字色,文章}} {{div style,color:文字色,文章}} {{span color,文字色,文章}} 簡易指定 {{div color,文字色,文章}} 簡易指定
- 例
「red」は赤色です
「#ff0000」は赤色です
font-style・・・文字スタイル
- 文字スタイルには「normal」、「italic」(イタリック体)、「oblique」(斜体)を指定出来ます
- 構文
{{span style,font-style:文字スタイル,文章}} {{div style,font-style:文字スタイル,文章}} {{span font-style,文字スタイル,文章}} 簡易指定 {{div font-style,文字スタイル,文章}} 簡易指定
- 例
「italic」で表示
「oblique」で表示
title・・・タイトル (ツールチップ)
- 文の上にポインタをしばらく置くと、設定した文が表示されます (ツールチップ等と呼ばれるもの・ブラウザによっては表示されない事も)
- 構文
{{span title,ここに書いた文がマウスオーバーで表示,ここに書いた文が画面に表示}} {{div title,ここに書いた文がマウスオーバーで表示,ここに書いた文が画面に表示}}
- 例
ここに書いた文が画面に表示
サイト内に表記された商品名、会社名等は各社の登録商標もしくは商標です。