名無しのイカ
2024/03/13 (水) 03:43:33
7368c@0cee3
敵キャラ一覧に画像付きの目次が作られていたので、勝手ながらカラーチップにも画像付き目次を作ってみました
敵キャラ一覧の目次にはflexが使われていたけどスマホ縦持ちでも横並びのまま変わらないので表だけの形に整えてみました
通報 ...
敵キャラ一覧に画像付きの目次を作った者です
flexプラグインの部分について「スマホ縦持ちでも、表が横並びのままになる」のは意図的な仕様です。
flex_containerの3つ目のオプションをnowrap(改行しない)にしているため、そうなっています。
そのようにした理由は、本来できない「複数の表を横並べして、間にスペースを入れる」ことが可能となるからです。
通常、複数の表を横に並べて間にスペースを入れることはできません。
しかし、flex_boxで表を複数用意し、flex_containerで改行しないように指定することで実現できます。
今回は、
・ボスたちを「初回ボス」「10F,20Fボス」「30Fボス」の3つの表にグループ分けしたい。
・しかし、一行でコンパクトにまとめたい。
・グループごとに少し離した方が見やすい。
と思いflexを採用しました。
再度flexバージョンを作ってみました↓が、スマホ縦持ちだと「30Fボス」が改行されてしまうっぽい?
表だけの形のほうが結果的に見やすいのかな…?しゅん…
コピペして閲覧してください
書き込んだ後にまさかとは思いましたが、マジでそれだったとは……
flexにmarginが存在しているのはwikiwiki独自の指定なので、意外な使い方でした
スペーサー目的であればflex内に表組みを置くよりも、目次をflexで統一し適宜cssboxプラグインを用いて調整した方が自由度が高く、ソースを見た際にも細かな配置調整である事が伝わりやすいかと思います