CSSを適用してデザインやレイアウトを組むことができるBOXプラグイン
''※CSSの知識が必要です。'' [[What is CSS?>https://developer.mozilla.org/en-US/docs/Learn/CSS/First_steps/What_is_CSS]]
#flex_container(center){{{{
#flex_box{{{
#cssbox("width:200px; border: 1px solid #9932cc;text-align: center; border-radius: 8px;"){{
&fa(fa-solid fa-box fa-2xl fa-fw,#9932cc);BOXプラグイン
}}
}}}
#flex_box{{{
#cssbox("width:200px; border: 1px solid #9932cc;text-align: center;border-radius: 8px;background-color: #800080;"){{
&fa(fa-solid fa-box fa-2xl fa-fw,#dda0dd);&color(#dda0dd){BOXプラグイン};
}}
}}}
#flex_box{{{
#cssbox("width:200px;border: thick double #9932cc;text-align: center;border-radius: 8px;"){{
&fa(fa-solid fa-box fa-2xl fa-fw,#9932cc);BOXプラグイン
}}
}}}
#flex_box{{{
#cssbox("width:200px;border:2px dashed #9932cc;text-align: center;border-radius: 8px;"){{
&fa(fa-solid fa-box fa-2xl fa-fw,#9932cc);&color(#9932cc){BOXプラグイン};
}}
}}}
}}}}

#fold(ソース){{{{{{
#code{{{{{
#flex_container(center){{{{
#flex_box{{{
#cssbox("width:200px; border: 1px solid #9932cc;text-align: center; border-radius: 8px;"){{
&fa(fa-solid fa-box fa-2xl fa-fw,#9932cc);BOXプラグイン
}}
}}}
#flex_box{{{
#cssbox("width:200px; border: 1px solid #9932cc;text-align: center;border-radius: 8px;background-color: #800080;"){{
&fa(fa-solid fa-box fa-2xl fa-fw,#dda0dd);&color(#dda0dd){BOXプラグイン};
}}
}}}
#flex_box{{{
#cssbox("width:200px;border: thick double #9932cc;text-align: center;border-radius: 8px;"){{
&fa(fa-solid fa-box fa-2xl fa-fw,#9932cc);BOXプラグイン
}}
}}}
#flex_box{{{
#cssbox("width:200px;border:2px dashed #9932cc;text-align: center;border-radius: 8px;"){{
&fa(fa-solid fa-box fa-2xl fa-fw,#9932cc);&color(#9932cc){BOXプラグイン};
}}
}}}
}}}}
}}}}}
}}}}}}
*基本書式 [#i84be4cc]

#code{{{
#cssbox("any: css; style: here;"){{
段落など
}}
}}}

**仕様 [#b95d891b]
- CSS の文法がそもそもおかしい場合は無効
- 利用可能なスタイルでない場合は消える
- ''url(...)'' は利用できない
- 内部は段落になる

*内部のテキストの段落を適用させない書式 [#ma8c1c9f]
#code{{
#cssbox("any: css; style: here;",テキスト)
}}
段落を作りたくないときは、第2引数にテキストを書きます。

#accordion(利用可能なCSSプロパティ,*,close){{
**間隔 [#l224f046]
- margin
- margin-*
- padding
- padding-*

参考リンク
[[MDN Web Docs margin>https://developer.mozilla.org/en-US/docs/Web/CSS/margin]]
[[MDN Web Docs padding>https://developer.mozilla.org/en-US/docs/Web/CSS/padding]]

**枠 [#l7e62afe]
- border
- border-*
- background
- background-*

参考リンク
[[MDN Web Docs border>https://developer.mozilla.org/en-US/docs/Web/CSS/border]]
[[MDN Web Docs background>https://developer.mozilla.org/en-US/docs/Web/CSS/background]]

**サイズ [#b4431206]
- width
- min-width
- max-width
- height
- min-height
- max-height

参考リンク
[[MDN Web Docs width>https://developer.mozilla.org/en-US/docs/Web/CSS/width]]
[[MDN Web Docs min-width>https://developer.mozilla.org/en-US/docs/Web/CSS/min-width]]
[[MDN Web Docs max-width>https://developer.mozilla.org/en-US/docs/Web/CSS/max-width]]
[[MDN Web Docs height>https://developer.mozilla.org/en-US/docs/Web/CSS/height]]
[[MDN Web Docs min-height>https://developer.mozilla.org/en-US/docs/Web/CSS/min-height]]
[[MDN Web Docs max-height>https://developer.mozilla.org/en-US/docs/Web/CSS/max-height]]

**配置 [#zcb230fa]
- text-align
- vertical-align

参考リンク
[[MDN Web Docs text-align>https://developer.mozilla.org/en-US/docs/Web/CSS/text-align]]
[[MDN Web Docs vertical-align>https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align]]

}}
*サンプル [#id7ff3cf]

#cssbox("padding: 10px;border: solid;border-color: #9932cc;width: 320px;height: 100px;vertical-align: middle;"){{
''内部は段落になります。''段落を作りたくないときは、第２引数にテキストを書きます。
}}
#fold(ソース){{{{
#code{{{
#cssbox("padding: 10px;border: solid;border-color: #9932cc;width: 320px;height: 100px;vertical-align: middle;"){{
''内部は段落になります。''段落を作りたくないときは、第２引数にテキストを書きます。
}}
}}}
}}}}

''CSS''
#code(css){{
padding: 10px;
border: solid;
border-color: #9932cc;
width: 200px;
height: 100px;
vertical-align: middle;
}}

同じスタイル表示でもCSSの書き方はいろいろあります。
これらは一例になります。


**中央寄せ [#n2612066]
#cssbox("margin:0 auto; padding: 10px;border: solid;border-color: #9932cc;width: 320px;height: 100px;vertical-align: middle;"){{
''内部は段落になります。''段落を作りたくないときは、第２引数にテキストを書きます。
}}
#fold(ソース){{{{
#code{{{
#cssbox("margin:0 auto; padding: 10px;border: solid;border-color: #9932cc;width: 320px;height: 100px;vertical-align: middle;"){{
''内部は段落になります。''段落を作りたくないときは、第２引数にテキストを書きます。
}}
}}}
}}}}

''CSS''
#code(css){{
margin:0 auto;
}}

**右寄せ [#if802dda]
#cssbox("margin-left: auto; margin-right: 0; padding: 10px;border: solid;border-color: #9932cc;width: 320px;height: 100px;vertical-align: middle;"){{
''内部は段落になります。''段落を作りたくないときは、第２引数にテキストを書きます。
}}

#fold(ソース){{{{
#code{{{
#cssbox("margin-left: auto; margin-right: 0; padding: 10px;border: solid;border-color: #9932cc;width: 320px;height: 100px;vertical-align: middle;"){{
''内部は段落になります。''段落を作りたくないときは、第２引数にテキストを書きます。
}}
}}}
}}}}

''CSS''
#code(css){{
margin-left: auto; margin-right: 0;
}}

**左寄せ [#vf5c1b39]
#cssbox("margin-right: auto; padding: 10px;border: solid;border-color: #9932cc;width: 320px;height: 100px;vertical-align: middle;"){{
''内部は段落になります。''段落を作りたくないときは、第２引数にテキストを書きます。
}}

#fold(ソース){{{{
#code{{{
#cssbox("margin-right: auto; padding: 10px;border: solid;border-color: #9932cc;width: 320px;height: 100px;vertical-align: middle;"){{
''内部は段落になります。''段落を作りたくないときは、第２引数にテキストを書きます。
}}
}}}
}}}}

''CSS''
#code(css){{
margin-right: auto;
}}


**いろいろ組み合わせ [#b99fa877]
//ホワイト・ドラゴン
#cssbox("width:260px;height:390px;border: 10px ridge #474042; border-radius: 4px;background-color: #404745;"){{{{{
#cssbox("width:230px;margin: 5px auto 0px 5px;vertical-align: middle;background-color: #8a7c81;border: solid 5px #474042;padding: 0px 0px 0px 10px;"){{{{
#flex_container(space-between){{{
#flex_box{{
&color(white){''ホワイト・ドラゴン''};
}}
#flex_box{{
&fa_stack(fa-2xs ,#474042){&fa(fa-solid fa-circle fa-stack-2x);&fa(fa-solid fa-4 fa-stack-1x fa-inverse);};&fa_stack(fa-2xs ,#474042){&fa(fa-solid fa-circle fa-stack-2x);&fa(fa-solid fa-asterisk fa-stack-1x fa-inverse);};&fa_stack(fa-2xs ,#474042){&fa(fa-solid fa-circle fa-stack-2x);&fa(fa-solid fa-asterisk fa-stack-1x fa-inverse);};
}}
}}}
}}}}

#cssbox("width:220px;height:120px;margin: 5px auto 5px 10px;vertical-align: middle;background-color: #778899;border: solid 1px #474042;text-align: center;"){{
&fa(fa-brands fa-d-and-d fa-6x fa-fade,--fa-animation-duration: 5s; color:#e6e6fa);
}}

#cssbox("width:220px;margin: 5px auto 5px 10px;vertical-align: middle;background-color: #8a7c81;border: solid 1px #474042;padding: 0px 5px 0px 0px;text-align: right;"){{
&fa_stack(fa-2xs ,#474042){&fa(fa-solid fa-circle fa-stack-2x);&fa(fa-solid fa-dragon fa-stack-1x fa-inverse);};
}}

#cssbox("width:220px;height:120px;margin: 5px auto 0px 10px;background-color: #b0c4de;border: solid 1px #474042;padding: 0px 5px 0px 5px;"){{{{
【飛行】
冷気のブレス - ホワイト・ドラゴンが戦場に出たとき、…
#flex_container(flex-end){{{
#flex_box{{
#randommes(:dice,,page)
}}
#flex_box{{
#randommes(:dice,,page)
}}
}}}
}}}}
}}}}}

#fold(ソース){{{{{{{
#code{{{{{{
#cssbox("width:260px;height:390px;border: 10px ridge #474042; border-radius: 4px;background-color: #404745;"){{{{{
#cssbox("width:230px;margin: 5px auto 0px 5px;vertical-align: middle;background-color: #8a7c81;border: solid 5px #474042;padding: 0px 0px 0px 10px;"){{{{
#flex_container(space-between){{{
#flex_box{{
&color(white){''ホワイト・ドラゴン''};
}}
#flex_box{{
&fa_stack(fa-2xs ,#474042){&fa(fa-solid fa-circle fa-stack-2x);&fa(fa-solid fa-4 fa-stack-1x fa-inverse);};&fa_stack(fa-2xs ,#474042){&fa(fa-solid fa-circle fa-stack-2x);&fa(fa-solid fa-asterisk fa-stack-1x fa-inverse);};&fa_stack(fa-2xs ,#474042){&fa(fa-solid fa-circle fa-stack-2x);&fa(fa-solid fa-asterisk fa-stack-1x fa-inverse);};
}}
}}}
}}}}

#cssbox("width:220px;height:120px;margin: 5px auto 5px 10px;vertical-align: middle;background-color: #778899;border: solid 1px #474042;text-align: center;"){{
&fa(fa-brands fa-d-and-d fa-6x fa-fade,--fa-animation-duration: 5s; color:#e6e6fa);
}}

#cssbox("width:220px;margin: 5px auto 5px 10px;vertical-align: middle;background-color: #8a7c81;border: solid 1px #474042;padding: 0px 5px 0px 0px;text-align: right;"){{
&fa_stack(fa-2xs ,#474042){&fa(fa-solid fa-circle fa-stack-2x);&fa(fa-solid fa-dragon fa-stack-1x fa-inverse);};
}}

#cssbox("width:220px;height:120px;margin: 5px auto 0px 10px;background-color: #b0c4de;border: solid 1px #474042;padding: 0px 5px 0px 5px;"){{{{
【飛行】
冷気のブレス - ホワイト・ドラゴンが戦場に出たとき、…
#flex_container(flex-end){{{
#flex_box{{
#randommes(:dice,,page)
}}
#flex_box{{
#randommes(:dice,,page)
}}
}}}
}}}}
}}}}}
}}}}}}
}}}}}}}