CSSを適用してデザインやレイアウトを組むことができるBOXプラグイン
※CSSの知識が必要です。 What is CSS?
BOXプラグイン
BOXプラグイン
BOXプラグイン
BOXプラグイン
#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プラグイン};
}}
}}}
}}}}
基本書式
#cssbox("any: css; style: here;"){{
段落など
}}
仕様
- CSS の文法がそもそもおかしい場合は無効
- 利用可能なスタイルでない場合は消える
- url(...) は利用できない
- 内部は段落になる
内部のテキストの段落を適用させない書式
#cssbox("any: css; style: here;",テキスト)
段落を作りたくないときは、第2引数にテキストを書きます。
利用可能なCSSプロパティ
間隔
- margin
- margin-*
- padding
- padding-*
参考リンク
MDN Web Docs margin
MDN Web Docs padding
枠
- border
- border-*
- background
- background-*
参考リンク
MDN Web Docs border
MDN Web Docs background
サイズ
- width
- min-width
- max-width
- height
- min-height
- max-height
参考リンク
MDN Web Docs width
MDN Web Docs min-width
MDN Web Docs max-width
MDN Web Docs height
MDN Web Docs min-height
MDN Web Docs max-height
配置
- text-align
- vertical-align
サンプル
内部は段落になります。段落を作りたくないときは、第2引数にテキストを書きます。
#cssbox("padding: 10px;border: solid;border-color: #9932cc;width: 320px;height: 100px;vertical-align: middle;"){{
''内部は段落になります。''段落を作りたくないときは、第2引数にテキストを書きます。
}}
CSS
padding: 10px;
border: solid;
border-color: #9932cc;
width: 200px;
height: 100px;
vertical-align: middle;
同じスタイル表示でもCSSの書き方はいろいろあります。
これらは一例になります。
中央寄せ
内部は段落になります。段落を作りたくないときは、第2引数にテキストを書きます。
#cssbox("margin:0 auto; padding: 10px;border: solid;border-color: #9932cc;width: 320px;height: 100px;vertical-align: middle;"){{
''内部は段落になります。''段落を作りたくないときは、第2引数にテキストを書きます。
}}
CSS
margin:0 auto;
右寄せ
内部は段落になります。段落を作りたくないときは、第2引数にテキストを書きます。
#cssbox("margin-left: auto; margin-right: 0; padding: 10px;border: solid;border-color: #9932cc;width: 320px;height: 100px;vertical-align: middle;"){{
''内部は段落になります。''段落を作りたくないときは、第2引数にテキストを書きます。
}}
CSS
margin-left: auto; margin-right: 0;
左寄せ
内部は段落になります。段落を作りたくないときは、第2引数にテキストを書きます。
#cssbox("margin-right: auto; padding: 10px;border: solid;border-color: #9932cc;width: 320px;height: 100px;vertical-align: middle;"){{
''内部は段落になります。''段落を作りたくないときは、第2引数にテキストを書きます。
}}
CSS
margin-right: auto;
いろいろ組み合わせ
ホワイト・ドラゴン
【飛行】
冷気のブレス - ホワイト・ドラゴンが戦場に出たとき、…
#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)
}}
}}}
}}}}
}}}}}