自作プラグイン/flex の履歴(No.4)

flexboxレイアウト化プラグイン

flex.inc.php
製作者	kanateko
バージョン	1.1
動作確認	PukiWiki 1.5.3 ～
最終更新	2021-07-03

指定した範囲をタグで区切って横並びに表示するプラグイン。要素がページ幅を超える場合は自動的に折り返して表示する。名前の通りCSS3から導入されたFlexible Box Layout Moduleを利用する。

もともとstyleプラグインを使って"flex"クラスを付与することでこのようなレイアウトを実現していたが、その機能を1つのプラグインとして独立させたものになる。

このプラグインでできること

指定した範囲を区切って横並びに表示する
要素の並べ方を色々と指定可能
その他見た目を変えるオプションあり

ダウンロード

このプラグインは現在公開されていません。

日付	バージョン	備考
2021-07-03	1.0	初版作成

使用方法

#flex([オプション]){{
要素1
#-
要素2
#-
︙
}}

要素は "#-" で区切る。

オプション

要素の整列方法

"justify-content" に該当する。デフォルトはcenter。

flex-start: 要素を左に寄せる
center: 要素を中央に寄せる
flex-end: 要素を右に寄せる
space-around: 要素同士の間を均等に取り、両端には余白を持たせない
space-between: 要素同士の間を均等に取り、両端にはその半分の余白を持たせる
space-evenly: 要素同士の幅を均等に取り、両端にも同じだけの余白を持たせる
stretch: 要素同士の幅を均等に取り、要素に幅が指定されていない場合は余白いっぱいまで引き伸ばす

その他

<数字>: 要素の幅を固定する (px)
nowrap: 要素を折り返さない。"flex-wrap: nowrap"に該当
nogap: 要素間の余白を無くす。整列方法がspace-...系だとページ幅によっては自動的に余白が生まれる
border: 要素を枠で囲う
menu: アイコンメニュー用の装飾を施す
auto: 要素の区切りをタグではなく、マルチライン部分の記述に依存させる。styleプラグインとの置き換え用

使用例

わかりやすいようにすべてborderを付けている。

全て開く

整列方法の違い

#flex(flex-start,border){{
&ref(logo.png,nolink);
#-
&ref(logo.png,nolink);
#-
&ref(logo.png,nolink);
}}

#flex(center){{...
or
#flex{{...

#flex(flex-end){{...

#flex(space-around)

#flex(space-between){{...

#flex(space-evenly){{...

#flex(stretch){{...

要素の幅を固定する

オプションで数字を指定すると、すべての要素が指定した幅になる。

#flex(150){{...

寿限無(じゅげむ)　寿限無(じゅげむ)　五劫(ごこう)のすりきれ　海砂利(かいじゃり)水魚(すいぎょ)の水行末(すいぎょうまつ)

雲来末(うんらいまつ) 風来末(ふうらいまつ)　食(く)う寝(ね)るところに　住(す)むところ　やぶらこうじの　ぶらこうじ

パイポ　パイポ　パイポの　シューリンガン　シューリンガンの　グーリンダイ　グーリンダイの　ポンポコピーのポンポコナの　長久命(ちょうきゅうめい)の長助(ちょうすけ)

要素を折り返さない

ページの幅を超える場合は折り返さずに要素を縮小する。

#flex(nowrap){{...

要素間の余白をなくす

#flex(nogap){{...

要素を枠で囲う

#flex(border){{...

枠なし

枠あり

アイコンメニュー用の装飾

他のページでの使用例 (Risk of Rain 2 Wiki)

オプションにmenuを指定した上で以下のように書くとアイコンメニューが作れる。要素の幅指定との併用を強く推奨。

アイコンメニューの特徴

文字サイズ14px (小さめ)
文字などは中央寄せ
画像はアスペクト比1:1で切り抜き
ホバー時に画像が拡大する
- (要素内の一番最初のリンク付き画像にのみ適用される)

書き方

#flex(menu){{
[[&ref(画像,nolink);>ページ名]]
#-
[[&ref(画像,nolink);>ページ名]]
#-
︙
}}

例

#flex(menu,150){{
[[&ref(flexbox.jpg,nolink);>../flex]]
[[flex.inc.php>../flex]]
#-
[[&ref(../box/box.jpg,nolink);>../box]]
[[box.inc.php>../box]]
#-
[[&ref(../slider/slider.jpg,nolink);>../slider]]
[[slider.inc.php>../slider]]
}}

要素の区切りを自動で判別する

タグ (#-) を使わず要素の区切りを自動で判別する。この場合他のオプションは使用できない。
styleプラグインからの置き換え用で基本的に使用は非推奨。

要素の区切り方について

...

#flex(auto){{{
空行で1つの段落として区切られる。

そのため空行を挟んだ文章は別々の要素とみなされる。
|表組みも一つ一つが別の要素として捉えられる|
#box(hint,200){{
ブロック型のプラグインも上に同じ
}}
}}}

空行で1つの段落として区切られる。

そのため空行を挟んだ文章は別々の要素とみなされる。

表組みも一つ一つが別の要素として捉えられる

ブロック型のプラグインも上に同じ

追加したい機能

特になし

最新の10件を表示しています。コメントページを参照

はじめまして。色々なプラグインを公開していただいてありがとうございます。
こちらのプラグインは今後公開予定はございますでしょうか？ -- 2022-07-30 (土) 15:38:17
- コメントありがとうございます。
  基本的にクラスやスタイルを追加するだけのプラグインやデザインが主体のプラグインは公開しない方針なのですが、本プラグインは機能面 (表示を分割する) で需要もありそうなので (それと公開用の手直しが簡単だったので) 公開することにしました。GitHubのプラグイン置き場からダウンロード可能です。 -- kanateko 2022-07-31 (日) 12:39:19
  - ありがとうございます！問題なく動作いたしました👍 -- 2022-07-31 (日) 17:28:11
Githubから手順通りに導入してみましたが、PukiWiki 1.5.4では動作しませんでした。 -- 2023-02-23 (木) 01:23:21
- ご報告ありがとうございます。詳細がわからないため憶測になりますが、おそらくpukiwiki.iniからマルチラインプラグインを有効化すれば動作するのではないでしょうか。このあたりの手順をセットアップの項に記載し忘れていたため、追記しておきました。 -- kanateko 2023-02-23 (木) 01:57:15
  - ありがとうございます。動作しました。 -- 2023-02-23 (木) 13:09:14
不具合を見つけましたので報告いたします。
```
#flex(left,border,300){{
&attachref();
#-
&attachref();
}}
&attachref();
```
例えば、このようにflexの中にattachrefを入れていて、flexの外にもattachrefを入れている場合、flexの外のattachrefに画像を添付した場合、flexの中のattachrefの位置に添付した画像が表示されてしまうようです。 -- 2024-03-22 (金) 16:41:40
- ご報告ありがとうございます。他のプラグイン (ac) でも同様の報告がありましたが、この問題に関してはマルチラインプラグインの仕様上、解決することが難しいように思われます。解決するとなれば、attachref側の処理方法を見直す必要があるかもしれません。 -- kanateko 2024-03-23 (土) 18:01:05

新規コメント追加

コメントを送信