ヘルプ:HTMLクラスと拡張機能

ショートカット

HTMLのデザインclass・CSSフレームワーク、または拡張機能による特殊な構文の一覧。

デザイン/レイアウト用HTMLクラス

テンプレートではないが、記事をさまざまに表現するためのHTMLタグ用クラス。
以下のように指定することで効果が現れる。
<span class="＜ここに指定＞"></span>

w3.css (CSSフレームワーク)

HTMLタグで利用できるクラス郡。
ページデザインを統一化したり、レスポンシブなレイアウトを行う事ができる。
BootstrapやUIKitなどと同じような機能があるが、クラス名の頭にw3-と付くため、他のクラスを上書きしない。
また、レスポンシブに特化しているため、サイズが小さく機能も限定的。

色クラス一覧

参照：

フォント変更クラス

asciiart

<div class="asciiart">...</div>と指定すると、そのdivタグの間のフォントがアスキーアート(AA)に利用可能な、「MS Pゴシック」に、無ければ「モナーフォント」(自動読み込み)になります。
また、改行<br />を使用しなくても自動で改行されるようになります。

<div class="asciiart">
　　 　 　|￣￣￣￣￣|
　　　　　| 　　　　　 　 .|　　フゥン
　　　　　|‐┐rｪｭ　rｪｭ|
　　　　　|⌒'　r‐「:￣|┤
　　　　　| . 　 |　|＿,」 |
　　　.「￣￣~ L＿＿_,」
　　 /　　　　 ∩ノ ⊃　ヽ
　　(　 ＼　／　＿ノ ;|　 |
　　 ＼　“　　／＿＿|　 |
　　　　＼ ／＿＿＿ ／
</div>

　　　　|￣￣￣￣￣| 　　　　　| 　　　　　　 .|　　フゥン　　　　　|‐┐rｪｭ　rｪｭ| 　　　　　|⌒'　r‐「:￣|┤ 　　　　　| . 　 |　|＿,」 | 　　　.「￣￣~ L＿＿_,」　　 /　　　　 ∩ノ ⊃　ヽ　　(　＼　／　＿ノ ;|　 | 　　＼　“　　／＿＿|　 | 　　　　＼／＿＿＿／

monospace

<div class="monospace">...</div>と指定すると、そのdivタグの間のフォントが等幅フォントになる。

例：asciiartとの組み合わせ

<div class="asciiart monospace">
┌───────┐
│ 　　　　　　 │
│ ■■　　■■ │
│ ■■　　■■ │
│ 　  ■■　　 │
│ 　■■■■　 │
│ 　■■■■　 │
│ 　■　　■　 │
└───────┘
</div>

┌───────┐ │ 　　　　　　 │ │ ■■　　■■ │ │ ■■　　■■ │ │ 　 ■■　　 │ │ 　■■■■　 │ │ 　■■■■　 │ │ 　■　　■　 │ └───────┘

minetext

フォントを変更するcssクラス。

<span class="minetext">サンプル サンプル サンプル</span>

サンプルサンプルサンプル

インタラクトクラス

クリック操作でエレメントの要素などが変化する汎用クラス。テンプレート用。

check-toggler

<input>が利用できないMediaWikiで<input type='checkbox' />と同等の機能を持つトグル属性を提供するクラス。
チェック中はcheckedクラスが付加される。
このクラスそのものには見た目を変化させる機能はないため、cssスタイルで設定する必要がある。

例：

<span class='mytoggler check-toggler'>ここをクリックすると色が変わるよ<span>:見えたり消えたり</span></span>

.mytoggler {
    background-color: blue;
    color: white;
}
.mytoggler.checked {
    background-color: red;
}
.mytoggler.checked span {
   display: none;
}

結果

ここをクリックすると色が変わるよ:見えたり消えたり

radio-toggler

<input>が利用できないMediaWikiで<input type='radio' />と同等の機能を持つトグル属性を提供するクラス。
class='radio-toggler' のボックスの配下に class='toggler' のエレメントを配置する必要がある。

例：

<div class='radio-toggler sample-radio'>
<span class='toggler' data-checked data-for='#element1'>Test1</span>
<span class='toggler' data-for='#element2'>Test2</span>
<span class='toggler' data-for='#element3'>Test3</span>
</div>

サンプルcss

.sample-radio {
  border: solid 1px #ccc;
  background-color: white;
}
.sample-radio .toggler:before {
    font-family: "FontAwesome";
    font-weight: lighter;
    margin-right: 0.3em;
    cursor: pointer;
    content: '\f0c8';
}
.sample-radio .toggler[data-checked]:before {
    content: '\f14a';
}

Test1 Test2 Test3

いずれかの.togglerエレメントがクリックされるとdata-checked属性がradio-togglerのグループ内で排他的に付与される。
attributeに data-checked が存在するかでチェック状態か判別可能。
また、class='toggler'のエレメントのdata-for属性に連動させたいエレメントのselectorワードをセットしておくと、対象のエレメントにdata-for-checked属性が付与される。

このクラスそのものには見た目を変化させる機能はないため、cssスタイルで設定する必要がある。

このクラスは{{w3TabPanel}}で使用されている。

ボックス用クラス

ボックスの枠を変更するcssクラス。<span>や<div>、<table>に使用できる。
W3.CSSのボックスの見た目を変更するクラスについては以下のリンクを参照。

pxl-border

{| class="pxl-border w3-margin"
| {{color|white|サンプル サンプル サンプル}}
|}

サンプルサンプルサンプル

minebox

{| class="minebox w3-margin"
| {{color|white|サンプル サンプル サンプル}}
|}

サンプルサンプルサンプル

gui-button

{| class="gui-button"
| サンプル サンプル サンプル
|}

サンプルサンプルサンプル

{| class="gui-button disabled"
| サンプル サンプル サンプル
|}

サンプルサンプルサンプル

箇条書き(リスト)用クラス

multi-column-list

<div class="multi-column-list">...</div>と指定すると、縦に長い記事を自動で横3分割に分ける事ができる。
*や:などのリスト構文を囲んで使用すると便利。
なおスマートフォンでは縦1列になる。

<div class="multi-column-list">
* {{BlockSprite|dandelion}}タンポポ
* {{BlockSprite|poppy}}ポピー
* {{BlockSprite|blue orchid}}ヒスイラン
* {{BlockSprite|allium}}アリウム
* {{BlockSprite|azure bluet}}ヒナソウ
* {{BlockSprite|red tulip}}赤色のチューリップ
* {{BlockSprite|orange tulip}}橙色のチューリップ
* {{BlockSprite|white tulip}}白色のチューリップ
* {{BlockSprite|pink tulip}}桃色のチューリップ
* {{BlockSprite|oxeye daisy}}フランスギク
* {{BlockSprite|cornflower}}ヤグルマギク
* {{BlockSprite|lily of the valley}}スズラン
* {{BlockSprite|wither rose}}ウィザーローズ
</div>

タンポポ
ポピー
ヒスイラン
アリウム
ヒナソウ
赤色のチューリップ
橙色のチューリップ
白色のチューリップ
桃色のチューリップ
フランスギク
ヤグルマギク
スズラン
ウィザーローズ

multi-column-list5

<div class="multi-column-list5">...</div>と指定すると、縦に長い記事を自動で横5分割に分ける事ができる。
*や:などのリスト構文を囲んで使用する。
なおタブレットでは4列、スマートフォンでは縦1列になる。

<div class="multi-column-list5">
* {{BlockSprite|dandelion}}タンポポ
* {{BlockSprite|poppy}}ポピー
* {{BlockSprite|blue orchid}}ヒスイラン
* {{BlockSprite|allium}}アリウム
* {{BlockSprite|azure bluet}}ヒナソウ
* {{BlockSprite|red tulip}}赤色のチューリップ
* {{BlockSprite|orange tulip}}橙色のチューリップ
* {{BlockSprite|white tulip}}白色のチューリップ
* {{BlockSprite|pink tulip}}桃色のチューリップ
* {{BlockSprite|oxeye daisy}}フランスギク
* {{BlockSprite|cornflower}}ヤグルマギク
* {{BlockSprite|lily of the valley}}スズラン
* {{BlockSprite|wither rose}}ウィザーローズ
</div>

タンポポ
ポピー
ヒスイラン
アリウム
ヒナソウ
赤色のチューリップ
橙色のチューリップ
白色のチューリップ
桃色のチューリップ
フランスギク
ヤグルマギク
スズラン
ウィザーローズ

auto-column-list

<div class="auto-column-list">...</div>と指定すると、縦に長い記事を自動で横に分割することができる。
*や:などのリスト構文を囲んで使用する。
自動で分割数が変動するため、タブレットやスマートフォンでも利用できる。

<div class="auto-column-list">
* {{BlockSprite|dandelion}}タンポポ
* {{BlockSprite|poppy}}ポピー
* {{BlockSprite|blue orchid}}ヒスイラン
* {{BlockSprite|allium}}アリウム
* {{BlockSprite|azure bluet}}ヒナソウ
* {{BlockSprite|red tulip}}赤色のチューリップ
* {{BlockSprite|orange tulip}}橙色のチューリップ
* {{BlockSprite|white tulip}}白色のチューリップ
* {{BlockSprite|pink tulip}}桃色のチューリップ
* {{BlockSprite|oxeye daisy}}フランスギク
* {{BlockSprite|cornflower}}ヤグルマギク
* {{BlockSprite|lily of the valley}}スズラン
* {{BlockSprite|wither rose}}ウィザーローズ
</div>

タンポポ
ポピー
ヒスイラン
アリウム
ヒナソウ
赤色のチューリップ
橙色のチューリップ
白色のチューリップ
桃色のチューリップ
フランスギク
ヤグルマギク
スズラン
ウィザーローズ

all-span

<div class="all-span">...</div>と指定すると、multi-column-list、multi-column-list5、auto-column-listが指定された範囲内でも1行で表示する。
見出しなどに使用する。

list-style-none

<div class="list-style-none">...</div>と指定してリスト構文を囲んで使用すると、リスト構文*から・を消す事ができる。

<div class="list-style-none">
* {{BlockSprite|dandelion}}タンポポ
* {{BlockSprite|poppy}}ポピー
* {{BlockSprite|blue orchid}}ヒスイラン
* {{BlockSprite|allium}}アリウム
* {{BlockSprite|azure bluet}}ヒナソウ
</div>

タンポポ
ポピー
ヒスイラン
アリウム
ヒナソウ

treelist / treeview

<div class="treelist">...</div> または <div class="treeview">...</div>で括ったリストをツリー状に変化させます。

<div class="treelist">
*Level 1
*Level 1
**Level 2
***Level 3
***Level 3
**Level 2
*Level 1
</div>

Level 1
Level 1
- Level 2
  - Level 3
  - Level 3
- Level 2
Level 1

<div class="treeview">
*Level 1
*Level 1
**Level 2
***Level 3
***Level 3
**Level 2
*Level 1
</div>

Level 1
Level 1
- Level 2
  - Level 3
  - Level 3
- Level 2
Level 1

表組み用クラス

表組みのクラス指定の部分に追加すると効果が現れる。
{| class="wikitable <ここに追加>"

mw-collapsible

{| class="wikitable mw-collapsible"
MediaWiki標準。Wikitableクラスの表組みを格納可能にするクラス。

{| class="wikitable mw-collapsible" 
! 列1 !! 列2 !! 列3
|-
| 100 || 400 || 700
|-
| 200 || 500 || 800
|-
| 300 || 600 || 900
|}

列1	列2	列3
100	400	700
200	500	800
300	600	900

mw-collapsedを一緒に記述するとページ読み込み時に格納状態となる。

{| class="wikitable mw-collapsible mw-collapsed"  
! 列1 !! 列2 !! 列3
|-
| 100 || 400 || 700
|-
| 200 || 500 || 800
|-
| 300 || 600 || 900
|}

列1	列2	列3
100	400	700
200	500	800
300	600	900

cross

{| class="wikitable cross"
wikitableクラスの表組みのクロス集計型の表（最初行の見出しセル＋各行の最初に見出しセルがついたタイプ）に使用する。
デフォルトでは !で指定した見出しセルはすべて同じグレーだが、これを使うと先頭行のみライトブルーになる。

{| class="wikitable cross" 
!  !! 列1 !! 列2 !! 列3
|-
! 行1
| 100 || 400 || 700
|-
! 行2 
| 200 || 500 || 800
|-
! 行3
| 300 || 600 || 900
|}

見出し	列1	列2	列3
行1	100	400	700
行2	200	500	800
行3	300	600	900

zebra

{| class="wikitable zebra"
wikitableクラスの表組みの偶数行と奇数行で色を互い違いに変える。

{| class="wikitable zebra" 
! 列1 !! 列2 !! 列3
|-
| 100 || 400 || 700
|-
| 200 || 500 || 800
|-
| 300 || 600 || 900
|}

列1	列2	列3
100	400	700
200	500	800
300	600	900

sortable

{| class="wikitable sortable"
wikitableクラスの表組みで値によるソートを可能にする。
crossと同時には使用できない。

{| class="wikitable sortable" 
! 名前 !! データ1 !! データ2
|-
| いろは || 5 || 100
|-
| にほへ || 6 || 90
|-
| とちり || 7 || 80
|-
| ぬるを || 8 || 70
|}

名前	データ1	データ2
いろは	5	100
にほへ	6	90
とちり	7	80
ぬるを	8	70

table-first-white

{| class="wikitable table-first-white"
表組みの各行の最初のセルの背景色を白にします。

|で指定したセルは先頭行からすべて。
!で指定した見出しセルは先頭行は無視されます。

{| class="wikitable table-first-white" 
! 見出し !! 列1 !! 列2 !! 列3
|-
| 行1 || 100 || 400 || 700
|-
| 行2 || 200 || 500 || 800
|-
| 行3 || 300 || 600 || 900
|}

見出し	列1	列2	列3
行1	100	400	700
行2	200	500	800
行3	300	600	900

scroll

{| class="wikitable scroll"
横に長い表組みがスマホなどで画面内に収まらない場合に自動でスクロールバーを付ける。
{{scroll begin}}と異なり、ビジュアルエディタの編集を阻害しない。※ただし元から{{GamedataTable}}など別のテンプレートで囲まれている場合は表組みとして編集できない。

{| class="wikitable scroll" 
|-
| 100|| 101|| 102|| 103|| 104|| 105|| 106|| 107|| 108|| 109|| 110|| 111|| 112|| 113|| 114|| 115|| 116|| 117|| 118|| 119|| 120|| 121|| 122|| 123|| 124|| 125
|-
| 200|| 201|| 202|| 203|| 204|| 205|| 206|| 207|| 208|| 209|| 210|| 211|| 212|| 213|| 214|| 215|| 216|| 217|| 218|| 219|| 220|| 221|| 222|| 223|| 224|| 225
|-
| 300|| 301|| 302|| 303|| 304|| 305|| 306|| 307|| 308|| 309|| 310|| 311|| 312|| 313|| 314|| 315|| 316|| 317|| 318|| 319|| 320|| 321|| 322|| 323|| 324|| 325
|}

100	101	102	103	104	105	106	107	108	109	110	111	112	113	114	115	116	117	118	119	120	121	122	123	124	125
200	201	202	203	204	205	206	207	208	209	210	211	212	213	214	215	216	217	218	219	220	221	222	223	224	225
300	301	302	303	304	305	306	307	308	309	310	311	312	313	314	315	316	317	318	319	320	321	322	323	324	325

拡張機能

MediaWikiの拡張機能によって追加された機能。
HTMLタグの拡張や{{#ABC:パラメーター}}のようなパーサー関数、__NOTITLE__や{{NUMBEROFARTICLES}}のようなマジックワードとよばれる構文が利用できる。

Extension:FontAwesome

FontAwesomeのアイコンフォントが使用できます。

https://fontawesome.com/icons

これらのExtension構文で表示できます。

`{{#far: bell}}`
`{{#fas: arrow-alt-circle-right}}`
`{{#fab: wikipedia-w}}`

以下のような書き方では表示できないので注意。

<i class="fab fa-angellist"></i>

Extension:Math

LaTeXの構文を使った数式表現が行える拡張機能。
ソース：
<math>m = \frac{m_0}{\sqrt{1-\frac{v^2}{c^2}}}</math>

結果：
$m = \frac{m_0}{\sqrt{1-\frac{v^2}{c^2}}}$

Extension:Tabber

タブによって内容を動的に切り替える拡張機能。
{{w3TabPanel}}との違いは、デザインと各内容をタブを切り替えた瞬間に構文解析(動的にパーサー)するので、テンプレートを使用していたりインクルードしていた場合に切り替えの動作が軽い。
ソース：

<tabber>
タブ1 = 内容1<br>
ああああああああああああああああああ
|-|
タブ2 = 内容2<br>
いいいいいいいいいいいいいいい
</tabber>

結果：

内容1

ああああああああああああああああああ

内容2
いいいいいいいいいいいいいいい

Extension:Youtube

YoutubeやNocovideoなどの動画プレイヤーを表示できます。
例：

<youtube width="200" height="120">CCz1kmfqL7g</youtube>

対応動画サイト
Youtube	`<youtube>...</youtube>`
Nicovideo	`<nicovideo>...</nicovideo>`
Google Videos	`<gvideo>...</gvideo>`
Archive.org video	`<aovideo>...</aovideo>`
WeGame	`<wegame>...</wegame>`
Tangler forum	`<tangler>...</tangler>`
Gametrailers	`<gtrailer>...</gtrailer>`
GoGreenTube	`<ggtube>...</ggtube>`

Extension:CSS

{{#css:
～～～～ここにスタイルシートを定義～～～
}}

このような記述でページにHTMLの<style>...</style>タグと同等にスタイルシートを適用させることが可能です。
ページをおしゃれに飾りたい時などにどうぞ。
url(～～～)の文字列は禁止されているようなので使用できません。
また、以下のように：

{{#css:MyStyles.css}}

別に保存されたcssページ名を指定すると、複数のページで同じcssを利用することもできます。

Extension:NoTitle

__NOTITLE__ページ先頭にと書いておくと、ページの頭の太字のページのタイトルが表示されなくなる。
画像でタイトルを表示したい場合などに使用する。

Extension:RSS

RSSフィードを読み込んで表示できる。

ソースの例：: <rss max=10>https://www.minecraft.net/ja-jp/feeds/community-content/rss</rss>

参照：Extension:RSS

Extension:Variables

Wiki構文中に変数を利用できるようになる。

ソースの例：: {{#vardefine: abc | 100 }} 変数に値を定義; {{#var: abc }} 変数から値を取得(100 が返る)

※この拡張機能は将来的に使用できなくなる可能性があります。現在は外部から移植されたテンプレートの一部で使用されているため、互換性のため追加されています。

参照：Extension:Variables

ヘルプ:HTMLクラスと拡張機能

デザイン/レイアウト用HTMLクラス

w3.css (CSSフレームワーク)

フォント変更クラス

asciiart

monospace

minetext

インタラクトクラス

check-toggler

radio-toggler

ボックス用クラス

pxl-border

minebox

gui-button

箇条書き(リスト)用クラス

multi-column-list

multi-column-list5

auto-column-list

all-span

list-style-none

treelist / treeview

表組み用クラス

mw-collapsible

cross

zebra

sortable

table-first-white

scroll

拡張機能

Extension:FontAwesome

Extension:Math

Extension:Tabber

Extension:Youtube

Extension:CSS

Extension:NoTitle

Extension:RSS

Extension:Variables

案内メニュー

Minecraft Japan Wiki

検索