Semantic UI Doc ( Elements - Container ) を読む
Semantic UI の Container を読んだ。コンテナーにテーマはない。
コンテナーは幅と配置に関する指定を持ち、ウィンドウサイズによって表示を変化させる(つまりレスポンシブ対応している)。
ブレークポイントはモバイル、タブレット、小型モニター、大型モニターの 4 種類が定義されており、ブレークポイントが変わると以下の指定が変わる。
- 幅(Width)
- 要素間の溝(Gutter Size)
- 変数(Variable)
このうち、モバイル以外の幅は「ブレークポイント - ( サイト左右の余白 * 2 ) - スクロールバーのサイズ」という式によって値が算出されている。
また、コンテナーのタイプは 3 つある。
.ui.container
... 標準コンテナー。幅と配置の指定.ui.text.container
... テキストコンテナー。標準コンテナーの Modifier で、フォント指定の追加、最大幅の上書きがされる.ui.fluid.container
... フルサイズコンテナー。標準コンテナーの Modifier で、幅の指定が固定幅からwidth: 100%
に上書きされる
コンテナーはグリッドやメニューと組み合わせることでまた別の効果を発揮しそうなんだけど、いまは読んでも理解しきれなそうなのであとの楽しみにとっておく。