アコーディオンテスト

パネル1
ここはパネル1です。
パネル2

ここはパネル2です。

コールツーアクション

これはコールツーアクションです。

SiteOrigin Features

特徴
ここは特徴です。

クリック

強み

ここは強みです。ボタンと組み合わせると良い

詳細はこちら

SiteOrigin Icon

SiteOrigin Image

SiteOrigin Image Grid

SiteOrigin Simple Masonry

SiteOrigin Tabs

タブ1
タブ2
タブ3

タブ1です。

タブ2です。

タブ3です。

タブリンク

ALL
タブ2
タブ3
タブ1です。タブ2です。タブ3です。

タブ2です。

タブ3です。

SiteOrigin Testimonials

caret-down caret-up caret-left caret-right
SiteOrigin Testimonialsの説明文です。SiteOrigin Testimonialsの説明文です。SiteOrigin Testimonialsの説明文です。SiteOrigin Testimonialsの説明文です。

神奈川Y氏です。

SiteOrigin Video Player

VK_3PR エリア

VK_3PR エリアです。

3PR エリア1 タイトル

top-carousel004

概要となるテキスト1

詳しくはこちら

3PR エリア2 タイトル

top-carousel003

概要となるテキスト2

3PR エリア3 タイトル

top-carousel000

概要となるテキスト3

VK_PR Blocks

VK_PR Blocksです。

お客様の声

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストv

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

斜めの背景

section全体を斜めにしているけど、擬似要素を使っているので、section内のテキストは傾斜しない。

ここの部分のテキスト量が十分にない場合は、.contetnts__innerのheightを100%ではなく、500pxとか直接高さを指定したほうがいいかも。
または、.contetnts:beforeの高さや角度を調整する。

widthを100%のままで傾斜を与えると余白ができるので、120%にして親をoverflow:hiddenしている。またネガティブマージンを与えて左えずらして中央へ。その他、もろもろの調整を行っている。

擬似要素にはz-indexに-1を与える必要がある。

エントリーへ

傾斜を逆にしたやつ

transform:rotateの値を-3degにすれば、当然ながら傾斜を逆にすることができる。

角度を変更しただけでは、形がおかしくなってしまうんだけど、これについてはtransform:originが影響している。

上記の例(斜めの背景)ではtransform:originは、left centerとなっており、変形の原点が左の真ん中になっている。これをright centerとしてあげることで、正常な形になる。

その他は全て上記の例(斜めの背景)と同じ。

エントリーへ

2つの傾斜を交差させていい感じにしたやつ

擬似要素:afterを追加し、z-indexの値を調整することで上と下で交差させることができる。

具体的には、:after擬似要素のtransform:rotateの値を-3degにしてtransform:originの値をleft centerにしている。つまり、上記の2つの例をそれぞれ上下で合体させた感じ。

あとはbackgroundの色を変えただけで、その他の部分はそれぞれ上記の例と全く同じ。

エントリーへ