リクエスト広場

flexboxの境界線と背景色指定

7 コメント
views
5 フォロー

flexboxの境界線と背景色を指定できるようにしてください。

理由
領域を明確にしたいから。現在の微妙なスペース区切りよりはっきりした境界が欲しい。
またBox領域に色付けをして、そこに書かれている内容の意味付けを表現したい。

  • 区切りについて
    flexboxで表を並べるときは必然的に区切りが明確なのですが、文章を並べたときにも境界を明確にしたいです。
    現状でこれをやろうとするとインラインで書いた文字列をテーブル書式で囲うか
    別ページに文章を書いて、それをincludeで呼び出してテーブルの中に組み込むかです。
    前者の方法は改行を&brで書いたり、リスト文が使えないなどの制約があります。
    後者は別ページをわざわざ準備する必要があるのと、テーブル内でブロック要素を呼び出すのは非推奨とあります。
    具体的には以下のようにオプションで境界線onを指定できるようになるといいです。可能なら線色も指定できるといいです。

    #flexbox(border){{文章}}
    
  • 領域色について
    レイアウトや領域を分ける目的の一つは、書かれてる内容の意味や役割が違うときです。
    例えば単純な表であればグレーが無効とか、黄色は注目とか、キャラクターのシンボルカラーであったりとか、セルの色で内容を見る前にその場所の意味が把握できます。そして読む人によってどこに目をやればいいのかの指針になります。
    flexbox前はレイアウト組にかなり制約があったので、こういったことをテーブルのBGCOLOR+文章や、テーブル内inculdeで別ページの文章を組み込んだりと工夫をしてました。
    現在はflexboxにより横配置や可変レイアウトが可能となり、こちらの活用を進めてますが、こういったレイアウト配置の色による意味付けを同様におこないたいです。
    具体的には以下のようにオプションで領域色を指定できると良いです。
    ここでいう領域色は文字の背景色ではなく、その領域全体の背景色です。テーブルのBGCOLOR(色):と同様。

    #flexbox(bgcolor(色)){{文章}}
    二重カッコがNGならbgcolor=色。
    
01v
作成: 2021/09/05 (日) 18:59:41
最終更新: 2021/09/06 (月) 17:41:40
通報 ...
1
弥七 2021/09/06 (月) 20:21:39

いいと思います。
既に第一引数には幅が入りますので、
以下のような拡張でしょうか。

#flexbox(第一引数,第二引数,第三引数){{文章}}
  • 第一引数 幅 300px 33%
  • 第二引数 枠 #808000 Olive
  • 第三引数 背景 #808000 Olive FrontPage/bg.gif

欲を言うと、枠を角丸にしたりもしたい。

2
WIKIWIKI運営 2023/05/25 (木) 20:40:24

#csssboxプラグインを実装しました。

こちらで対応できそうでしょうか?
https://wikiwiki.jp/sample/cssbox

お試しいただけたら幸いです。

3
01v 2023/05/27 (土) 17:47:21 修正 >> 2

非常に高機能なものをありがとうございます。
境界と背景のみならず領域内の中寄などにも対応しており自由度が高いです。
中寄指定でもテーブルは左寄せになってしまいますが、cssboxの中でさらにflexboxを入れ子にすることにより対応できそうです。

4
WIKIWIKI運営 2023/06/01 (木) 11:26:03 >> 3

お試しありがとうございます!

5
名前なし 2023/06/06 (火) 00:17:21 07856@bfcb5 >> 2

「段落を作りたくないときは、第2引数にテキストを書きます。」とありますが、「,」(カンマ)を含むテキストを書こうとするとパラメータの区切りと判定されてしまってカンマ以降が表示されません。
対策としてカンマを数値文字参照で記述すればいいんですがちょっと面倒です。
第2引数を最後の括弧の直前までとするか、cssboxの説明に注意点として書いていただけたらと思います。

6
WIKIWIKI運営 2023/06/06 (火) 17:09:49 >> 5

ブロック型ならダブルクオートで囲んで任意の文字列をひとつの値と解釈させることができます。


関連トピック
pukiwiki の構文解析が持っていた不具合仕様を修正しました。

wikiwiki official
構文解析の不具合仕様について
pukiwiki の構文解析が持っていた不具合仕様を修正しました。 何が構文仕様の不具合だったか pukiwiki は、インラインプラグインのパラメータに、); および ){ を含
zawazawa

7
名前なし 2023/06/06 (火) 19:15:33 07856@bfcb5 >> 5

元々ブロック型プラグインではダブルクオートで囲めばよかったんですね。
csssboxプラグインの説明ページでもダブルクオートで囲んだ例に変えていただいた方がわかりやすいと思います。
ご回答ありがとうございました。

要望は具体的な提案や理由を書いて下さい。
×