{{tag>dokuwiki プラグイン デモ}}

====== 【Dokuwiki】Wrap Plugin のデモ ======

DokuWiki の [[doku>plugin:wrap|Wrap Plugin]] の機能を試してみるページです。

===== columns クラス =====

__クラス名__
  * column：左書き言語の場合 left、右書き言語の場合、right と同じ
  * left：左寄せ
  * right：右寄せ
  * center：中央寄せ
  * col2...col5：複数列で表示 (2, 3, 4, 5)
  * colsmall, colmedium, collarge：複数列で表示 (small, medium, large)

<WRAP group>
<WRAP half column>
__Wiki ソース__
<code>
<WRAP column>column</WRAP>\\
<WRAP left>left</WRAP>\\
<WRAP right>right</WRAP>\\
<WRAP center>center</WRAP>\\
<WRAP col2>col2 これはサンプルです。col2 これはサンプルです。col2 これはサンプルです。col2 これはサンプルです。col2 これはサンプルです。col2 これはサンプルです。col2 これはサンプルです。col2 これはサンプルです。col2 これはサンプルです。col2 これはサンプルです。</WRAP>\\
<WRAP colsmall>colsmall これはサンプルです。colsmall これはサンプルです。colsmall これはサンプルです。colsmall これはサンプルです。colsmall これはサンプルです。colsmall これはサンプルです。colsmall これはサンプルです。colsmall これはサンプルです。colsmall これはサンプルです。colsmall これはサンプルです。</WRAP>\\
<WRAP colmedium>colmedium これはサンプルです。colmedium これはサンプルです。colmedium これはサンプルです。colmedium これはサンプルです。colmedium これはサンプルです。colmedium これはサンプルです。colmedium これはサンプルです。colmedium これはサンプルです。colmedium これはサンプルです。colmedium これはサンプルです。</WRAP>\\
<WRAP collarge>collarge これはサンプルです。collarge これはサンプルです。collarge これはサンプルです。collarge これはサンプルです。collarge これはサンプルです。collarge これはサンプルです。collarge これはサンプルです。collarge これはサンプルです。collarge これはサンプルです。collarge これはサンプルです。</WRAP>\\
</code>
</WRAP>
<WRAP half column>
__表示結果__
<WRAP column>column</WRAP>\\
<WRAP left>left</WRAP>\\
<WRAP right>right</WRAP>\\
<WRAP center>center</WRAP>\\
<WRAP col2>col2 これはサンプルです。col2 これはサンプルです。col2 これはサンプルです。col2 これはサンプルです。col2 これはサンプルです。col2 これはサンプルです。col2 これはサンプルです。col2 これはサンプルです。col2 これはサンプルです。col2 これはサンプルです。</WRAP>\\
<WRAP colsmall>colsmall これはサンプルです。colsmall これはサンプルです。colsmall これはサンプルです。colsmall これはサンプルです。colsmall これはサンプルです。colsmall これはサンプルです。colsmall これはサンプルです。colsmall これはサンプルです。colsmall これはサンプルです。colsmall これはサンプルです。</WRAP>\\
<WRAP colmedium>colmedium これはサンプルです。colmedium これはサンプルです。colmedium これはサンプルです。colmedium これはサンプルです。colmedium これはサンプルです。colmedium これはサンプルです。colmedium これはサンプルです。colmedium これはサンプルです。colmedium これはサンプルです。colmedium これはサンプルです。</WRAP>\\
<WRAP collarge>collarge これはサンプルです。collarge これはサンプルです。collarge これはサンプルです。collarge これはサンプルです。collarge これはサンプルです。collarge これはサンプルです。collarge これはサンプルです。collarge これはサンプルです。collarge これはサンプルです。collarge これはサンプルです。</WRAP>\\
</WRAP>
</WRAP>

===== widths クラス =====

__クラス名__
  * half：1 / 2 の幅で表示
  * third：1 / 3 の幅で表示
  * twothirds：2 / 3 の幅で表示
  * quarter：1 / 4 の幅で表示
  * (%)：幅を % で指定
  * (px)：幅を px で指定
  * (em)：幅を em で指定

<WRAP group>
<WRAP half column>
__Wiki ソース__
<code>
<WRAP group>
<WRAP half column>half これはサンプルです1。half これはサンプルです1。half これはサンプルです1。half これはサンプルです1。half これはサンプルです1。</WRAP>
<WRAP half column>half これはサンプルです2。half これはサンプルです2。half これはサンプルです2。half これはサンプルです2。half これはサンプルです2。</WRAP>
<WRAP third column>third これはサンプルです。third これはサンプルです。third これはサンプルです。third これはサンプルです。third これはサンプルです。</WRAP>
<WRAP twothirds column>twothirds これはサンプルです。twothirds これはサンプルです。twothirds これはサンプルです。twothirds これはサンプルです。twothirds これはサンプルです。</WRAP>
<WRAP quarter column>quarter これはサンプルです1。quarter これはサンプルです1。quarter これはサンプルです1。quarter これはサンプルです1。quarter これはサンプルです1。</WRAP>
<WRAP quarter column>quarter これはサンプルです2。quarter これはサンプルです2。quarter これはサンプルです2。quarter これはサンプルです2。quarter これはサンプルです2。</WRAP>
<WRAP quarter column>quarter これはサンプルです3。quarter これはサンプルです3。quarter これはサンプルです3。quarter これはサンプルです3。quarter これはサンプルです3。</WRAP>
<WRAP quarter column>quarter これはサンプルです4。quarter これはサンプルです4。quarter これはサンプルです4。quarter これはサンプルです4。quarter これはサンプルです4。</WRAP>
<WRAP column 30%>30% これはサンプルです。30% これはサンプルです。30% これはサンプルです。30% これはサンプルです。30% これはサンプルです。</WRAP>
<WRAP column 100px>100px これはサンプルです。100px これはサンプルです。100px これはサンプルです。100px これはサンプルです。100px これはサンプルです。</WRAP>
<WRAP column 20em>20em これはサンプルです。20em これはサンプルです。20em これはサンプルです。20em これはサンプルです。20em これはサンプルです。</WRAP>
</WRAP>
</code>
</WRAP>
<WRAP half column>
__表示結果__
<WRAP group>
<WRAP half column>half これはサンプルです1。half これはサンプルです1。half これはサンプルです1。half これはサンプルです1。half これはサンプルです1。</WRAP>
<WRAP half column>half これはサンプルです2。half これはサンプルです2。half これはサンプルです2。half これはサンプルです2。half これはサンプルです2。</WRAP>
<WRAP third column>third これはサンプルです。third これはサンプルです。third これはサンプルです。third これはサンプルです。third これはサンプルです。</WRAP>
<WRAP twothirds column>twothirds これはサンプルです。twothirds これはサンプルです。twothirds これはサンプルです。twothirds これはサンプルです。twothirds これはサンプルです。</WRAP>
<WRAP quarter column>quarter これはサンプルです1。quarter これはサンプルです1。quarter これはサンプルです1。quarter これはサンプルです1。quarter これはサンプルです1。</WRAP>
<WRAP quarter column>quarter これはサンプルです2。quarter これはサンプルです2。quarter これはサンプルです2。quarter これはサンプルです2。quarter これはサンプルです2。</WRAP>
<WRAP quarter column>quarter これはサンプルです3。quarter これはサンプルです3。quarter これはサンプルです3。quarter これはサンプルです3。quarter これはサンプルです3。</WRAP>
<WRAP quarter column>quarter これはサンプルです4。quarter これはサンプルです4。quarter これはサンプルです4。quarter これはサンプルです4。quarter これはサンプルです4。</WRAP>
<WRAP column 30%>30% これはサンプルです。30% これはサンプルです。30% これはサンプルです。30% これはサンプルです。30% これはサンプルです。</WRAP>
<WRAP column 100px>100px これはサンプルです。100px これはサンプルです。100px これはサンプルです。100px これはサンプルです。100px これはサンプルです。</WRAP>
<WRAP column 20em>20em これはサンプルです。20em これはサンプルです。20em これはサンプルです。20em これはサンプルです。20em これはサンプルです。</WRAP>
</WRAP>
</WRAP>
</WRAP>


===== alignments クラス =====

__クラス名__
  * leftalign：左寄せ
  * rightalign：右寄せ
  * centeralign：中央寄せ
  * justify：両端揃え

<WRAP group>
<WRAP half column>
__Wiki ソース__
<code>
<WRAP leftalign>leftalign これはサンプルです。</WRAP>
<WRAP rightalign>rightalign これはサンプルです。</WRAP>
<WRAP centeralign>centeralign これはサンプルです。</WRAP>
<WRAP justify>justify これはサンプルです。</WRAP>
</code>
</WRAP>
<WRAP half column>
__表示結果__
<WRAP leftalign>leftalign これはサンプルです。</WRAP>
<WRAP rightalign>rightalign これはサンプルです。</WRAP>
<WRAP centeralign>centeralign これはサンプルです。</WRAP>
<WRAP justify>justify これはサンプルです。</WRAP>
</WRAP>
</WRAP>

===== boxes and notes クラス =====

__クラス名__
  * box：アイコンなしの枠
  * info：情報アイコンつきの枠
  * important：重要アイコンつきの枠
  * alert：警告アイコンつきの枠
  * tip：💡アイコンつきの枠
  * help：？アイコンつきの枠
  * todo：Todoアイコンつきの枠
  * download：ダウンロードアイコンつきの枠
  * round：枠の四隅を丸くする
  * danger：赤色の注釈
  * warning：オレンジ色の注釈
  * caution：黄色の注釈
  * notice：青色の注釈
  * safety：緑色の注釈

<WRAP group>
<WRAP half column>
__Wiki ソース__
<code>
<WRAP column box>box これはサンプルです。</WRAP>
<WRAP column info round>info これはサンプルです。</WRAP>
<WRAP column important>important これはサンプルです。</WRAP>
<WRAP column alert round>alert これはサンプルです。</WRAP>
<WRAP column tip>tip これはサンプルです。</WRAP>
<WRAP column help round>help これはサンプルです。</WRAP>
<WRAP column todo>todo これはサンプルです。</WRAP>
<WRAP column download round>download これはサンプルです。</WRAP>
<WRAP column danger>danger これはサンプルです。</WRAP>
<WRAP column warning round>warning これはサンプルです。</WRAP>
<WRAP column caution>caution これはサンプルです。</WRAP>
<WRAP column notice round>notice これはサンプルです。</WRAP>
<WRAP column safety>safety これはサンプルです。</WRAP>
</code>
</WRAP>
<WRAP half column>
__表示結果__
<WRAP column box>box これはサンプルです。</WRAP>
<WRAP column info round>info これはサンプルです。</WRAP>
<WRAP column important>important これはサンプルです。</WRAP>
<WRAP column alert round>alert これはサンプルです。</WRAP>
<WRAP column tip>tip これはサンプルです。</WRAP>
<WRAP column help round>help これはサンプルです。</WRAP>
<WRAP column todo>todo これはサンプルです。</WRAP>
<WRAP column download round>download これはサンプルです。</WRAP>
<WRAP column danger>danger これはサンプルです。</WRAP>
<WRAP column warning round>warning これはサンプルです。</WRAP>
<WRAP column caution>caution これはサンプルです。</WRAP>
<WRAP column notice round>notice これはサンプルです。</WRAP>
<WRAP column safety>safety これはサンプルです。</WRAP>
</WRAP>
</WRAP>

===== marks クラス =====

__クラス名__
  * hi：文字列をハイライトする
  * lo：文字列を目立たなくする
  * em：文字列を強調する

<WRAP group>
<WRAP half column>
__Wiki ソース__
<code>
これはサンプルです。<wrap hi>hi これはサンプルです。</wrap> これはサンプルです。\\
これはサンプルです。<wrap lo>lo これはサンプルです。</wrap> これはサンプルです。\\
これはサンプルです。<wrap em> em これはサンプルです。</wrap> これはサンプルです。\\
</code>
</WRAP>
<WRAP half column>
__表示結果__\\

これはサンプルです。<wrap hi>hi これはサンプルです。</wrap> これはサンプルです。\\
これはサンプルです。<wrap lo>lo これはサンプルです。</wrap> これはサンプルです。\\
これはサンプルです。<wrap em> em これはサンプルです。</wrap> これはサンプルです。\\
</WRAP>
</WRAP>
===== その他のクラス =====

__クラス名__
  * clear：挿入した位置で折り返し表示する
  * tabs：リンクのリストをタブ表示する（バグで動作していない？）
  * hide：文章を隠す
  * noprint：文章を画面には表示するが印刷には出力しない
  * onlyprint：文章を画面には表示しないが印刷には出力する
  * pagebreak：印刷時に改ページを挿入する
  * nopagebreak：印刷時に改ページしないように試みる
  * spoiler：文章を同系色背景で隠す
  * button：リンクをボタンで表示する
  * tablewidth：テーブルの幅を指定する
  * indent：インデント表示する
  * outdent：アウトデント表示する
  * prewrap：文章の折り返し幅を指定する

<WRAP group>
<WRAP half column>
__Wiki ソース__
<code>
<WRAP group>
<WRAP column 30%>折り返す。</WRAP><WRAP clear />
<WRAP column 30%>あいうえお</WRAP><WRAP clear />
</WRAP>
<WRAP tabs>
  * [[dokuwiki:install|インストールと初期設定]]
  * [[dokuwiki:bootstrap3_template|Bootstrap3 Template を適用する]]
  * [[dokuwiki:plugins|インストールしたプラグイン]]
</WRAP>
次の文言は隠れます。<wrap hide>隠れた文言です。</wrap>前の文言は隠れます。
<WRAP noprint>この文言は画面に表示されますが、印刷されません。</WRAP>
<WRAP onlyprint>この文言は印刷されますが、画面に表示されません。</WRAP>
印刷時にページ区切りが入ります。<WRAP pagebreak />
印刷時にページ区切りしないように試みます。<WRAP nopagebreak />
ネタばれしないように文言を隠します。<wrap spoiler>ネタばれ厳禁！</wrap>
<WRAP button>[[dokuwiki:install|インストールと初期設定]]</WRAP>
<WRAP tablewidth 80%>
^ 列1 ^ 列2 ^
| テーブル | の |
| 幅は | 80 % |
</WRAP>
インデントなし
<WRAP indent>インデントあり</WRAP>
<WRAP outdent>アウトデントあり</WRAP>
<WRAP prewrap 100px>この文章は一行ですが、指定した幅で折り返されます。</WRAP>
</code>
</WRAP>
<WRAP half column>
__表示結果__
<WRAP group>
<WRAP column 30%>折り返す。</WRAP><WRAP clear />
<WRAP column 30%>あいうえお</WRAP><WRAP clear />
</WRAP>
<WRAP tabs>
  * [[dokuwiki:install|インストールと初期設定]]
  * [[dokuwiki:bootstrap3_template|Bootstrap3 Template を適用する]]
  * [[dokuwiki:plugins|インストールしたプラグイン]]
</WRAP>
次の文言は隠れます。<wrap hide>隠れた文言です。</wrap>前の文言は隠れます。
<WRAP noprint>この文言は画面に表示されますが、印刷されません。</WRAP>
<WRAP onlyprint>この文言は印刷されますが、画面に表示されません。</WRAP>
印刷時にページ区切りが入ります。<WRAP pagebreak />
印刷時にページ区切りしないように試みます。<WRAP nopagebreak />
ネタばれしないように文言を隠します。<wrap spoiler>ネタばれ厳禁！</wrap>\\
<WRAP button>[[dokuwiki:install|インストールと初期設定]]</WRAP>
<WRAP tablewidth 80%>
^ 列1 ^ 列2 ^
| テーブル | の |
| 幅は | 80 % |
</WRAP>
インデントなし
<WRAP indent>インデントあり</WRAP>
<WRAP outdent>アウトデントあり</WRAP>
<WRAP prewrap 100px>この文章は一行ですが、指定した幅で折り返されます。</WRAP>
</WRAP>
</WRAP>

===== 参考 =====

  * [[http://demo.selfthinker.org/plugin:wrap|demo.selfthinker.org]]