基本のカラム
基本のカラム
サイト全体は画面幅いっぱいに幅設定されていますが、パソコン時に最大幅980pxのセンター配置にするためのカラムです。
カラムのクラスに「conts__cell」、カラム詳細のクラスに「conts__inner 」とセットで指定します。
この「conts__cell」には下の余白も設定されていますので、大見出しごとに分けて使ってください。
見出しのデザイン
見出しパターン
デザイン用にspanタグが入っていますので、崩さないように気を付けてください。
h1~h6はどれを指定してもデザインには影響ありません。
デザインはclassで決まります。ですので、SEO的にhタグの調整が可能です。
■カテゴリー見出し
class="title-style04"
Educational Ideal
教育理念
■ページタイトル
class="title-style05"
教育理念
ロゴ
■大見出し
class="title-style06"
名 称
■中見出し
class="title-style07"
中見出し
■小見出し
class="title-style08"
小見出し
■小見出しその2
class="title-style09"
小見出し
カラムのデザイン
カラムのデザイン
カラムのclassには「column-box」を入れます。
半角スペースをあけて以下のクラスを指定するとスマホで1列になります。
タブレットから一列に
bp768
スマホから一列に
bp480
小さいスマホのみ一列
bp320
指定しないとスマホでも横並びのままです。
カラムの詳細設定にもclassが入っています。
2カラムの場合は
column-box__2col
3カラムの場合は
column-box__3col
と、数字を増やしてください。
半角スペースを空けて link-box を指定するとボーダーが入ります。
3カラムのサンプル
3カラムのサンプル
3カラムのサンプル
カテゴリートップのナビ用カラム
カテゴリートップのナビ用カラム設定です。
2個の場合は、ビズアシストのボックスは2カラムを選びますが、詳細設定のクラスは3つと同じものになります。
カラムのclassには「column-box justifycenter bp768」を入れます。
各クラスの間は半角スペースをあけてください。
justifycenter を付け加えることで2つの場合もセンター均等配置になります。ただし、クラスの詳細設定は「column-box__3col」と3カラム用のクラスを入れてください。
カラムの詳細設定にもclassが入っています。
2カラムの場合も
3カラムの場合も
column-box__3col
を入れてください。
半角スペースを空けて link-box を指定するとボーダーが入り、 link-box bg-white を指定すると背景がすけなくなりますので、これも忘れずに指定してください。
3カラムのサンプル
3カラムのサンプル
3カラムのサンプル
■カテゴリー内ナビ用
4個横並びと、3個横並びではクラス設定が異なります。
4個並びの場合 column-box-ib-4c になります。
5個の場合
ボタンのデザイン
表のデザイン
■表のデザイン
thタグを使うと背景グレーになります。
9:00~10:30 | モンテッソーリ おやつ |
---|---|
10:30~10:40 | 英語(絵本・知育) |
10:40~11:30 | 体育プログラム 集団遊び・戸外遊び 屋外散策 |
11:30~12:20 | お給食 |
■表のデザイン2
1行ごとに背景グレーになります。
9:00~10:30 | モンテッソーリ おやつ |
---|---|
10:30~10:40 | 英語(絵本・知育) |
10:40~11:30 | 体育プログラム 集団遊び・戸外遊び 屋外散策 |
11:30~12:20 | お給食 |
ボーダーのデザイン
ボーダーのデザイン
余白のクラス
余白下に30pxの場合 marginBottom30 数字の部分は10、20、30、40、50、60が指定できます。
marginTop10 としますと上のマージンも設定できますが、上のマージンには条件によっては反映されない場合がありますので、余白は基本下のみを使うようにしていただいたほうが調整しやすいです。