[最新]2021新春ボックスサンプル

目次(クリックでジャンプ)

プリント作ったりして色々と変動中…各サイトのCSSを揃えるのが面倒になってきた！

Z-box新設。D-boxの内部box化するか独立させるか？

D-box,N-boxのブロック(width:fit-content;margin:0 auto;)化と内部仕様(text-indentの有無など)を統一する

N-box内pのインデントの方式変更(text-indent:-1em;からp:first-line{text-indent:-1em;}で調整)

R-boxの投入

レイアウトboxの扱いをどうするか(L-qst3の二段組のCSSを流用するか)

現在の考え方

大きく3つの層を設けている

ページ幅一杯の背景を設定する場合などに使う
(例)D-box,N-boxの「box-ctr」など

ボックスの外に装飾をつける場合にそれらをまとめる
(例)S-boxなどの「S-box-wrap」など

明確な枠を持つ情報表示領域

「○-box#」というネーミングで設定している

D-box,N-box,L-box,S-boxなど

ボックスの中には上下の注釈やインボックス・画像が入る

D-box(標準ボックス)やN-box(ネームボックス)の中に入れるのを想定している、枠を持たない特有のルールを持った情報領域。

「○-ibx#」というネーミングにしようと思っている

Grd-ibx(グリッドインボックス),Sdr-ibx(すだれ算インボックス)

扱いとしては画像と同様に、上下の注釈に挟んでボックスの中に入れたりする。

もっとも標準的なボックス。

中に画像やインボックスを入れ、上下にキャプションをつけるのが一般的な使い方。

寄せを簡単にするためにflexが設定されていて、通常状態ではflex-direction:colum;(縦方向)に設定されている。

内部の要素を横向きにしたい場合は「D-box flx」(改称予定)を重畳指定する。

内側を工夫してカスタマイズしたもの

強調ボックス。小まとめのような用途に使う。

まとめボックス又は目次ボックス

特殊なまとめや目次に使用