A-Nトップ 新規 一覧(更新) 一覧(名前) 検索 ヘルプ RSS

SPAN&DIV リファレンスの変更点

表記

= 変更なし
+ 追加
- 削除
同一行で追加削除があれば変更。

変更点

  1:= 当Wikiに導入されている「span」プラグイン、「div」プラグイン、「div_s」プラグインを利用して、Wikiでの表示をより多彩にする事が出来ます。
  2:= 
  3:= このページではそれらプラグインを使う際に、CSS等をあまり分かっていなくても使えるよう、良く使う設定を例として挙げています。
  4:= 
  5:=  {{div 属性,属性値(プロパティ:値),Wiki書式の文}}　「div」プラグイン
  6:=  {{span 属性,属性値(プロパティ:値),Wiki書式の文}}　「span」プラグイン
  7:=  {{span style,color:red,Wiki書式の文}}　例
  8:= 
  9:= 「div」はブロック要素(前後に改行が伴う)、「span」はインライン要素(改行が伴わない)となっていて、必要に応じてどちらかを使います。
 10:= 
 11:= 設定可能な属性は以下の通りです。その際の設定可能な属性値は属性によって変わります。
 12:= *align　(divのみ)
 13:= *class
 14:= *dir
 15:= *id
 16:= *lang
 17:= *style
 18:= *title
 19:= *xml:lang
 20:= 
 21:= 属性値(プロパティ:値)は「;」で区切って複数設定する事も可能です(styleで文字のサイズと色を指定する等)。
 22:-  {{span style,color:red; font-size:small,Wiki書式の文}}
 22:+  {{span style,color:red; font-size:small,Wiki書式の例文}}
 23:+ {{span style,color:red; font-size:small,Wiki書式の例文}}
 24:= 
 25:= 「span」プラグイン、「div」プラグインの改造により、文字色を設定する「color」等は、属性に「style」でなく「プロバティ」を、属性値に「値」を指定する事も出来るようになっています (簡易、直感的に使えるよう)。
 26:=  {{div style,color:red,文章}}　通常
 27:=  {{div color,red,文章}}　簡易指定
 28:= ただし、簡易指定の場合は色と文字サイズを指定する等、複数の設定を同時に行うような事は出来ません。
 29:= 
 30:= 今現在簡易に設定出来るもの
 31:= *background
 32:= *background-color
 33:= *background-image
 34:= *border
 35:= *border-bottom
 36:= *border-collapse
 37:= *border-color
 38:= *border-left
 39:= *border-right
 40:= *border-spacing
 41:= *border-style
 42:= *border-top
 43:= *border-width
 44:= *caption-side
 45:= *clear
 46:= *clip
 47:= *color
 48:= *cursor
 49:= *direction
 50:= *display
 51:= *float
 52:= *font
 53:= *font-family
 54:= *font-size
 55:= *font-style
 56:= *height
 57:= *letter-spacing
 58:= *line-height
 59:= *list-style
 60:= *list-style-image
 61:= *list-style-position
 62:= *list-style-type
 63:= *margin
 64:= *margin-bottom
 65:= *margin-left
 66:= *margin-right
 67:= *margin-top
 68:= *max-height
 69:= *max-width
 70:= *min-height
 71:= *min-width
 72:= *outline
 73:= *outline-color
 74:= *outline-style
 75:= *outline-width
 76:= *overflow
 77:= *padding
 78:= *padding-bottom
 79:= *padding-left
 80:= *padding-right
 81:= *padding-top
 82:= *position
 83:= *text-align
 84:= *text-decoration
 85:= *text-indent
 86:= *text-transform
 87:= *vertical-align
 88:= *visibility
 89:= *width
 90:= *word-spacing
 91:= 
 92:= 
 93:= 
 94:= {{outline}}
 95:= 
 96:= {{br 3}}
 97:= 
 98:= 
 99:= !!align・・・横方向の表示位置
100:= *表示位置は「left」、「right」、「center」を指定出来ます。インライン要素である「span」プラグインでは「align」は使えません。
101:= *構文
102:=  {{div align,left,ここに書いた文が画面左に表示}}
103:=  {{div align,right,ここに書いた文が画面右に表示}}
104:=  {{div align,center,ここに書いた文が画面中央に表示}}
105:= *例
106:= {{div align,left,ここに書いた文が画面左に表示}}
107:= {{div align,right,ここに書いた文が画面右に表示}}
108:= {{div align,center,ここに書いた文が画面中央に表示}}
109:= 
110:= 
111:= !!color・・・文字色
112:= *文字色には「#と6桁の16進数」、「#と3桁の16進数」、「カラーを表す名前」等を指定出来ます
113:= 
114:= {{span color,aqua,aqua}}
115:= {{span color,black,black}}
116:= {{span color,blue,blue}}
117:= {{span color,fuchsia,fuchsia}}
118:= {{span color,gray,gray}}
119:= {{span color,green,green}}
120:= {{span color,lime,lime}}
121:= {{span color,maroon,maroon}}
122:= {{span color,navy,navy}}
123:= {{span color,olive,olive}}
124:= {{span color,purple,purple}}
125:= {{span color,red,red}}
126:= {{span color,silver,silver}}
127:= {{span color,teal,teal}}
128:= {{span style,color:white;background-color:black,white}}
129:= {{span style,color:yellow;background-color:black,yellow}}
130:= 
131:= *構文
132:=  {{span style,color:文字色,文章}}
133:=  {{div style,color:文字色,文章}}
134:=  {{span color,文字色,文章}}　簡易指定
135:=  {{div color,文字色,文章}}　簡易指定
136:= *例
137:= {{div color,red,「red」は赤色です}}
138:= {{div color,#ff0000,「#ff0000」は赤色です}}
139:= 
140:= 
141:= !!font-style・・・文字スタイル
142:= *文字スタイルには「normal」、「italic」(イタリック体)、「oblique」(斜体)を指定出来ます
143:= *構文
144:=  {{span style,font-style:文字スタイル,文章}}
145:=  {{div style,font-style:文字スタイル,文章}}
146:=  {{span font-style,文字スタイル,文章}}　簡易指定
147:=  {{div font-style,文字スタイル,文章}}　簡易指定
148:= *例
149:= {{div font-style,italic,「italic」で表示}}
150:= {{div font-style,oblique,「oblique」で表示}}
151:= 
152:= 
153:= !!title・・・タイトル (ツールチップ)
154:= *文の上にポインタをしばらく置くと、設定した文が表示されます (ツールチップ等と呼ばれるもの・ブラウザによっては表示されない事も)
155:= *構文
156:=  {{span title,ここに書いた文がマウスオーバーで表示,ここに書いた文が画面に表示}}
157:=  {{div title,ここに書いた文がマウスオーバーで表示,ここに書いた文が画面に表示}}
158:= *例
159:= {{span title,ここに書いた文がマウスオーバーで表示,ここに書いた文が画面に表示}}