SEO+テンプレートはシンプルな構成です。
上から順番に
- Header
- Nav
- Article
- (Section:レビュー)
- (Aside:関連商品)
- Aside:閲覧履歴
- Footer
と並んでいるだけです。(カッコ内は商品詳細ページのみ)
各要素の中はflexで配置しているので、ウィンドウサイズに合わせて 自動で伸縮、または段組みします。
商品詳細ページのみサイドバー(Aside)が表示されるようになっています(*PC表示のみ)が、 不要なら削除しても良いかと思います。
レイアウトはカラーミーGrid + flexbox
ページレイアウトや、商品一覧のようなリスト表示は全てカラーミー独自のGridシステムを流用し、flexで再定義しているので、クラス名「col-」を書き換えることでレイアウトを変更することができます。
カラーミーGridシステムの詳細や変更法については「カラーミーキットのグリッドレイアウト」をご参照ください。 少しだけ違いますがBootstrap v2のレイアウトとほとんど同じです。
ブレイクポイントについて
SEO+テンプレートは、ブラウザのウィンドウサイズによって表示を変えるレスポンシブデザインです。
【SEO+の基本ブレイクポイント】
PC ・・981px以上
タブレット ・・601px以上 980px以下
スマホ ・・600px以下
先述のGridシステムについては、カラーミー共通のCSSに従うことになるため以下のような分け方となります。
xs | (x-small :480px以下:スマホ端末) |
---|---|
sm | (small :768px以下:スマホ~タブレット) |
md | (medium :980px以下:タブレット~デスクトップ) |
lg | (large :全てのデバイスサイズに適用) |
初期状態のSEO+テンプレートでは、col-md- は使用していないので、 -xs- -sm- -lg- のみでレイアウト決めしています。
0件のコメント