CSS3-flexbox用style説明マニュアル

はじめに説明

今回、MORPH Ver3.02から細かく適応となりました、flexbox用のCSSのstyleの説明マニュアルとなります。
bootstrap同様、予め決められたclass属性を元に決められたclassを指定すれば、希望通りのレイアウトになる、というのをコンセプトに追加致しました。

前提

本ページはwrapper及びinnerのブロック要素100%指定のコンテンツエリアでレイアウトを作成する際に利用するサンプルとなります。(固定ページテンプレートから指定して下さい。)
今回新たに以下のCSSを追加してあります。

CSS

今まで通りのコンテンツ幅を指定したい場合は.innerContentというclass属性を括る事で可変型のレイアウトが可能になります。
以上を踏まえて説明していきます。

【基本設定】container

CSS

html

上記のように、colum○_○○の中に”container”という属性を括ると、余白なく設置する事が可能で、この状態の場合はレスポンシブなどは一切されません。そのため、ボタンなどの配置として利用するなどが、使いやすいかと思われます。

もし、上記のような場合でレスポンシブをさせたい時は、

CSS

html

このような形で”container-rwd”とその後に”wrap”と書いていただけるだけで640px以降は一列に切り替わることができます。

4ブロック限定で、タブレットサイズの場合に2×2に落としたいときは、

CSS

html

落としたいblockの箇所に追加でtab_column2_50と記載すれば959pxで2行になります。

flexboxの中に余白を入れたい場合

ボックス内に余白を入れたい事があった際の対処方法です。

PRODUCTS商品一覧

SAMPの商品をご覧いただき
注文することができます

商品一覧ページへ

ABOUT SAMPSAMPの特徴

国内縫製・加工、小ロットOK!
お客様のニーズにお応えします
真面目にします。

SAMPの特徴ページへ

GALLERYスタイルギャラリー

SAMPのスタイルギャラリー
スタイリングの参考に

スタイルギャラリーページへ

DESIGNデザイン一覧

当社のオリジナル一覧です。
こちらからであれば作成料不要!

SAMPデザイン一覧ページへ

CSS

html

pa_○、”pa”ddingの1%の余白、という指定をボックス毎に指定する事ができます。余白はpa_1(1%)~pa_5(5%)まで用意しています。
上記は2%の余白をあけている状態です。

ただ、サンプルを見ると、「ボックスの横をセンタリングしたい」「高さを中央揃えしたい」という希望も出てくるかと思います。

flexboxで横の位置を調整・高さを調整

PRODUCTS商品一覧

SAMPの商品をご覧いただき
注文することができます

ABOUT SAMPSAMPの特徴

国内縫製・加工、小ロットOK!
お客様のニーズにお応えします
真面目にします。

GALLERYスタイルギャラリー

SAMPのスタイルギャラリー
スタイリングの参考に

DESIGNデザイン一覧

当社のオリジナル一覧です。
こちらからであれば作成料不要!

CSS

html

このように、containerと同列に、

  • 幅を左「left」右「right」中央「center」の3パターンのどれかを入れる。
  • 高さを上「top」下「bottom」中央揃え「middle」の3パターンのどれかを入れる。

と、上記のような形に反映されます。

なお、サンプルは高さの面でセンターになったものの、色のエリアも同じように広がってくれない、というケースがありますが、その場合は個別指定の中で作業可能なものを指定(例:親要素に色を入れてごまかす、paddingの比率をかえるなどなど)等で調整が必要になります。(その他設定があれば募集中)

SPの時の表示順を変更したい時

ワイドでも今までどおりのコンテンツサイズでも同様ですが、今までデザインレイアウトをdisplay:inline-blockでCSSを指定していた場合、ソースコードの順番に折ってSP時の表示が以下、サンプルのように、

PRODUCTS

SAMPの商品をご覧いただき注文することができます。

ABOUT US

SAMPとは何か?のご紹介です。

画像 → 説明ブロック → 説明ブロック → 画像

という表示になっていたかと思いますが、今回は

画像 → 説明ブロック → 画像 → 説明ブロック

という表示順に変更をしたい場合にCSSの記述だけで変更する事ができます。※CSSでも本指定をしない限りは今までのままです。

SPの時の表示順を変更されているコード

PRODUCTS

SAMPの商品をご覧いただき注文することができます。

ABOUT US

SAMPとは何か?のご紹介です。

CSS

html

それぞれのブロック要素に対して、”sp_order○”と、○の位置を順番どおりのNoを指定してあげると、640px以下の時にその順番どおりに並んで表示される事ができます。
※この指定はflexboxだけの指定になります。

SPの時だけ、余白をつけたい場合

PRODUCTS

SAMPの商品をご覧いただき注文することができます。

ABOUT US

SAMPとは何か?のご紹介です。

CSS

html

640px以下の時だけ、余白が設定できます。(ボタンと画像の幅が同じなのが分かるかと思います)
これもpa_2との違いがsp_pa_2という事で「SPの時のpaddingの2%」という意味で作られています。

寄りのエリアを作る

flexboxで左50%寄りでコンテンツボックスがある(フレックスエリア余白5%)

私たちは、ユーザーの「安心な生活」を実現するパートナーとして、ユーザーと家屋を繋ぐ影響でありたいと考慮しています。
貴方の「心配無用な人生」のお手伝いをできる事が、私たちのなによりの幸せです。

READ MORE

CSS

html

ポイントは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パターン用意しています。

色の指定は自身で行っていただくことになりますが、動きがある事で面白みがでてきます。

ボタン1

READ MORE

ボタン2

READ MORE

ボタン3

READ MORE

ボタン4

READ MORE

ボタン5

READ MORE

ボタン6

READ MORE

ボタン7

READ MORE

ボタン8

READ MORE

ボタン9

READ MORE

ボタン10

READ MORE

ボタン11

READ MORE

ボタン12

READ MORE

ボタン13

READ MORE