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

提供:Minecraft Japan Wiki
ナビゲーションに移動 検索に移動
ショートカット

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

デザイン/レイアウト用HTMLクラス[編集 | ソースを編集]

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

w3.css (CSSフレームワーク)[編集 | ソースを編集]

HTMLタグで利用できるクラス郡。
ページデザインを統一化したり、レスポンシブなレイアウトを行う事ができる。
BootstrapUIKitなどと同じような機能があるが、クラス名の頭に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}}で使用されている。

画像用クラス[編集 | ソースを編集]

pixel[編集 | ソースを編集]

拡大時にアンチエイリアスさせないでピクセルをくっきりさせる。
[[File:Particle_love.png|64px|class=pixel]]

  • そのまま拡大
  • pixelで拡大

blur[編集 | ソースを編集]

画像をぼかしで隠して表示させる。クリックすると解除される。
[[File:Bricks.png|class=blur]]

invert[編集 | ソースを編集]

画像の色を反転させる
[[File:Minecraft Forge logo.svg|class=invert]]

bg-black[編集 | ソースを編集]

画像の背景色を黒くする
[[File:Minecraft Forge logo.svg|class=bg-black]]

ボックス用クラス[編集 | ソースを編集]

ボックスの枠を変更する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-listmulti-column-list5auto-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

構文ハイライト用クラス[編集 | ソースを編集]

<code>...</code><pre>...</pre>の内容を構文ハイライトする。
<syntaxhighlight>...</syntaxhighlight>でも同様に行えるが、こちらはjavascriptのためサーバー負荷が少ないメリットがある。

class="language-<keyword>"のクラスを指定する。対応している言語:

  • html
  • css
  • javascript
  • json
  • wiki
  • java
ソース
<pre class="language-html">
<script>
window.Prism = window.Prism || {};
window.Prism.manual = true;
</script>
<script src="prism.js"></script>
</pre>
<code class="language-css">p { color: red }</code><br>
<code class="language-wiki"><nowiki>{{#if:{{{ahya|}}}|yes|no}}</nowiki></code>
結果
<script>
window.Prism = window.Prism || {};
window.Prism.manual = true;
</script>
<script src="prism.js"></script>

p { color: red }
{{#if:{{{ahya|}}}|yes|no}}

拡張機能[編集 | ソースを編集]

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

Extension:FontAwesome[編集 | ソースを編集]

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


これらの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>

結果:

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

Cookieは私達のサービスを提供するのに役立ちます。このサービスを使用することにより、お客様はCookieの使用に同意するものとします。