cssbox

Last-modified: 2023-05-25 (木) 20:31:26

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

参考リンク
MDN Web Docs text-align
MDN Web Docs vertical-align

サンプル

内部は段落になります。段落を作りたくないときは、第２引数にテキストを書きます。

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

CSS

padding: 10px;
border: solid;
border-color: #9932cc;
width: 200px;
height: 100px;
vertical-align: middle;

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

中央寄せ

内部は段落になります。段落を作りたくないときは、第２引数にテキストを書きます。

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

CSS

margin:0 auto;

右寄せ

内部は段落になります。段落を作りたくないときは、第２引数にテキストを書きます。

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

CSS

margin-left: auto; margin-right: 0;

左寄せ

内部は段落になります。段落を作りたくないときは、第２引数にテキストを書きます。

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

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)
}}
}}}
}}}}
}}}}}