はじめに説明
今回、MORPH Ver3.02から細かく適応となりました、flexbox用のCSSのstyleの説明マニュアルとなります。
bootstrap同様、予め決められたclass属性を元に決められたclassを指定すれば、希望通りのレイアウトになる、というのをコンセプトに追加致しました。
前提
本ページはwrapper及びinnerのブロック要素100％指定のコンテンツエリアでレイアウトを作成する際に利用するサンプルとなります。（固定ページテンプレートから指定して下さい。）
今回新たに以下のCSSを追加してあります。
CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
.innerContent{/*コンテンツエリアが100%の時のでも通常通りのコンテンツ幅を利用したい場合に括るclass属性*/ width: 100%; max-width: 960px; margin: 0 auto; } #full-wrapper .post{ padding: 0;/*postの余白がデフォルトで利用している為、デザインの汎用性を持たせるため打ち消します*/ } @media print, screen and (max-width: 1023px) {/**/ #full-wrapper #content.wide { width: 100%;/*デフォルトだと多少の余白が出てしまいデザイン要素に影響を与える為、100%とする*/ } .innerContent{ width: 96%;/*逆にこの要素を利用をするのは今までどおりの幅の仕様が利用しやすいため*/ margin: 0 auto; } |
今まで通りのコンテンツ幅を指定したい場合は.innerContentというclass属性を括る事で可変型のレイアウトが可能になります。
以上を踏まえて説明していきます。
【基本設定】container
CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
.post .container{ display: flex; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; } .post .container .column4_25, .post .container-rwd .column4_25{ width: auto; margin: 0; flex-basis: 25%; } |
html
|
1 |
上記のように、colum○_○○の中に”container”という属性を括ると、余白なく設置する事が可能で、この状態の場合はレスポンシブなどは一切されません。そのため、ボタンなどの配置として利用するなどが、使いやすいかと思われます。
もし、上記のような場合でレスポンシブをさせたい時は、
CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
.post .container-rwd{ display: flex; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; } .post .container-rwd .column4_25{ width: auto; margin: 0; flex-basis: 25%; } .container-rwd.wrap{ flex-wrap: wrap; } |
html
|
1 |
このような形で”container-rwd”とその後に”wrap”と書いていただけるだけで640px以降は一列に切り替わることができます。
4ブロック限定で、タブレットサイズの場合に2×2に落としたいときは、
CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
.post .container-rwd{ display: flex; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; } .post .container-rwd .column4_25{ width: auto; margin: 0; flex-basis: 25%; } .container-rwd.wrap{ flex-wrap: wrap; } @media print, screen and (max-width: 959px) { .container-rwd .column4_25.tab_column2_50{ flex-basis: 50%; } } |
html
|
1 |
落としたいblockの箇所に追加でtab_column2_50と記載すれば959pxで2行になります。
flexboxの中に余白を入れたい場合
ボックス内に余白を入れたい事があった際の対処方法です。
CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
.post .container-rwd{ display: flex; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; } .post .container-rwd .column5_20{ width: auto; margin: 0; flex-basis: 20%; } .post .container-rwd .column5_20 img{ max-width: 100%; padding: 0; margin: 0; } .container-rwd.wrap{ flex-wrap: wrap; } .pa_2{ padding:2%; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; } |
html
|
1 |
pa_○、”pa”ddingの1%の余白、という指定をボックス毎に指定する事ができます。余白はpa_1(1%)～pa_5(5%)まで用意しています。
上記は2%の余白をあけている状態です。
ただ、サンプルを見ると、「ボックスの横をセンタリングしたい」「高さを中央揃えしたい」という希望も出てくるかと思います。
flexboxで横の位置を調整・高さを調整
CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 |
.post .container-rwd{ display: flex; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; } .container-rwd.wrap{ flex-wrap: wrap; } .container-rwd.center{ text-align: center; } .container-rwd.middle{ align-items: center; } .post .container-rwd .column5_20{ width: auto; margin: 0; flex-basis: 20%; } .post .container-rwd .column5_20 img{ max-width: 100%; padding: 0; margin: 0; } .pa_2{ padding:2%; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; } @media print, screen and (max-width: 959px) { .container-rwd .column4_25.tab_column2_50{ flex-basis: 50%; } } @media print, screen and (max-width: 640px) { .container-rwd .column5_20{ flex-basis: 100%; } .container-rwd .column5_20 img{ margin: 0 auto; } } |
html
|
1 |
このように、containerと同列に、
- 幅を左「left」右「right」中央「center」の3パターンのどれかを入れる。
- 高さを上「top」下「bottom」中央揃え「middle」の3パターンのどれかを入れる。
と、上記のような形に反映されます。
なお、サンプルは高さの面でセンターになったものの、色のエリアも同じように広がってくれない、というケースがありますが、その場合は個別指定の中で作業可能なものを指定（例：親要素に色を入れてごまかす、paddingの比率をかえるなどなど）等で調整が必要になります。（その他設定があれば募集中）
SPの時の表示順を変更したい時
ワイドでも今までどおりのコンテンツサイズでも同様ですが、今までデザインレイアウトをdisplay:inline-blockでCSSを指定していた場合、ソースコードの順番に折ってSP時の表示が以下、サンプルのように、
画像 → 説明ブロック → 説明ブロック → 画像
という表示になっていたかと思いますが、今回は
画像 → 説明ブロック → 画像 → 説明ブロック
という表示順に変更をしたい場合にCSSの記述だけで変更する事ができます。※CSSでも本指定をしない限りは今までのままです。
SPの時の表示順を変更されているコード
CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
.post .container-rwd{ display: flex; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; } .container-rwd.wrap{ flex-wrap: wrap; } .container-rwd.middle{ align-items: center; } .container-rwd .column2_50 img{ max-width: 100%; padding: 0; margin: 0; } @media print, screen and (max-width: 640px) { .sp_order1{order:1;} .sp_order2{order:2;} .sp_order3{order:3;} .sp_order4{order:4;} } |
html
|
1 |
それぞれのブロック要素に対して、”sp_order○”と、○の位置を順番どおりのNoを指定してあげると、640px以下の時にその順番どおりに並んで表示される事ができます。
※この指定はflexboxだけの指定になります。
SPの時だけ、余白をつけたい場合
CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
.post .container-rwd{ display: flex; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; } .container-rwd.wrap{ flex-wrap: wrap; } .container-rwd.middle{ align-items: center; } .container-rwd .column2_50 img{ max-width: 100%; padding: 0; margin: 0; } .pa_2{ padding:2%; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; } @media print, screen and (max-width: 640px) { .sp_order1{order:1;} .sp_order2{order:2;} .sp_order3{order:3;} .sp_order4{order:4;} .sp_pa_2{ padding:2%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; } } |
html
|
1 |
640px以下の時だけ、余白が設定できます。（ボタンと画像の幅が同じなのが分かるかと思います）
これもpa_2との違いがsp_pa_2という事で「SPの時のpaddingの2%」という意味で作られています。
寄りのエリアを作る
flexboxで左50%寄りでコンテンツボックスがある(フレックスエリア余白5%)
私たちは、ユーザーの「安心な生活」を実現するパートナーとして、ユーザーと家屋を繋ぐ影響でありたいと考慮しています。
貴方の「心配無用な人生」のお手伝いをできる事が、私たちのなによりの幸せです。
READ MORE
CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 |
.post .container-rwd{ display: flex; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; } .container-rwd.wrap{ flex-wrap: wrap; } .container-rwd.middle{ align-items: center; } .container-rwd.center{ text-align: center; } .pa_5{ padding:5%; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; } .left_box_50{ width: 50%; margin-right: 50%; } .bgfix { background-attachment: fixed !important; } /*独自追記*/ .wideCBlock5 { background: url(/customer/struct/wp-content/uploads/block5.jpg); background-repeat: no-repeat; background-position: center center; background-size: cover; position: relative; } /*独自追記ここまで*/ @media print, screen and (max-width: 1023px) { .left_box_50{ width: 100%; margin: 0 auto; } } .wh_box_100{ background: rgba(255,255,255,1.00); } |
html
ここに要素が入れられます。
|
1 |
ポイントはcontainer-rwdの中に括られている、”left_box_50″。中に”左にボックスで50%幅”の指定となります。”wh_box_100″は”whiteのボックスで100%白”。なおこれ以外にも
left_box_60でwh_box_50
私たちは、ユーザーの「安心な生活」を実現するパートナーとして、ユーザーと家屋を繋ぐ影響でありたいと考慮しています。
貴方の「心配無用な人生」のお手伝いをできる事が、私たちのなによりの幸せです。
READ MORE
left_box_30でwh_box_80
私たちは、ユーザーの「安心な生活」を実現するパートナーとして、ユーザーと家屋を繋ぐ影響でありたいと考慮しています。
貴方の「心配無用な人生」のお手伝いをできる事が、私たちのなによりの幸せです。
READ MORE
right_box_60でbl_box_80
私たちは、ユーザーの「安心な生活」を実現するパートナーとして、ユーザーと家屋を繋ぐ影響でありたいと考慮しています。
貴方の「心配無用な人生」のお手伝いをできる事が、私たちのなによりの幸せです。
READ MORE
right_box_50でbl_box_100
私たちは、ユーザーの「安心な生活」を実現するパートナーとして、ユーザーと家屋を繋ぐ影響でありたいと考慮しています。
貴方の「心配無用な人生」のお手伝いをできる事が、私たちのなによりの幸せです。
READ MORE
right_box_30でbl_box_30
私たちは、ユーザーの「安心な生活」を実現するパートナーとして、ユーザーと家屋を繋ぐ影響でありたいと考慮しています。
貴方の「心配無用な人生」のお手伝いをできる事が、私たちのなによりの幸せです。
READ MORE
などと取り揃えています。
ボタン
アニメーションエフェクトが付与されたボタンを13パターン用意しています。
色の指定は自身で行っていただくことになりますが、動きがある事で面白みがでてきます。