- 履歴一覧
- 差分 を表示
- 現在との差分 を表示
- ソース を表示
- 自作プラグイン/flex へ行く。
- 1 (2021-07-04 (日) 17:45:25)
- 2 (2021-07-04 (日) 20:19:32)
- 3 (2021-07-04 (日) 20:19:32)
- 4 (2021-07-04 (日) 20:19:32)
- 5 (2021-07-04 (日) 20:19:32)
- 6 (2021-07-04 (日) 20:19:32)
- 7 (2021-07-04 (日) 20:19:32)
- 8 (2021-07-12 (月) 13:36:45)
- 9 (2021-07-12 (月) 13:36:45)
- 10 (2021-07-12 (月) 13:36:45)
- 11 (2021-07-12 (月) 13:36:45)
- 12 (2021-07-12 (月) 13:36:45)
- 13 (2021-07-12 (月) 13:36:45)
- 14 (2022-07-31 (日) 12:36:08)
- 15 (2022-07-31 (日) 12:36:08)
- 16 (2023-02-23 (木) 01:57:35)
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(150){{...
寿限無(じゅげむ) 寿限無(じゅげむ) 五劫(ごこう)のすりきれ 海砂利(かいじゃり)水魚(すいぎょ)の水行末(すいぎょうまつ)
雲来末(うんらいまつ) 風来末(ふうらいまつ) 食(く)う寝(ね)るところに 住(す)むところ やぶらこうじの ぶらこうじ
パイポ パイポ パイポの シューリンガン シューリンガンの グーリンダイ グーリンダイの ポンポコピーのポンポコナの 長久命(ちょうきゅうめい)の長助(ちょうすけ)
要素を折り返さない
ページの幅を超える場合は折り返さずに要素を縮小する。
#flex(nowrap){{...
要素間の余白をなくす
#flex(nogap){{...
要素を枠で囲う
#flex(border){{...
アイコンメニュー用の装飾
オプションにmenuを指定した上で以下のように書くとアイコンメニューが作れる。
- アイコンメニューの特徴
- 文字サイズ14px (小さめ)
- 文字などは中央寄せ
- ホバー時に画像が拡大する
書き方
#flex(menu){{ [[&ref(画像,nolink);>ページ名]] #- [[&ref(画像,nolink);>ページ名]] #- ︙ }}
例
#flex(menu){{ [[&ref(logo.png,nolink);>トップページ]] [[トップページ]] }}
要素の区切りを自動で判別する
タグ (#-) を使わず要素の区切りを自動で判別する。この場合他のオプションは使用できない。
styleプラグインからの置き換え用で基本的に使用は非推奨。
要素の区切り方について
#flex(auto){{{ 空行で1つの段落として区切られる。
そのため空行を挟んだ文章は別々の要素とみなされる。 |表組みも一つ一つが別の要素として捉えられる| #box(info,200){{ ブロック型のプラグインも上に同じ }} }}}
空行で1つの段落として区切られる。
そのため空行を挟んだ文章は別々の要素とみなされる。
表組みも一つ一つが別の要素として捉えられる |
ブロック型のプラグインも上に同じ
追加したい機能
- 特になし
コメント
最新の10件を表示しています。 コメントページを参照