2017年以前の旧ブログ

BLOG2017

2018年以降のブログ

技術部門

CSSでブロックを斜めに！

ダーシノ Other Blog

最近サイトを制作するにあたって、今まで画像で斜めを表現していたのですがCSSでも対応できたのでブログに残します。

実際に見た方がはやいのでDEMOはこちら

 

以下から実際の利用方法を簡単に記載します。

実装内容

HTML記載

<div class="deg1">
　　<div class="deginner1">DEMO1</div>
</div>

斜めにする<div class="deg1">とテキスト記載領域の<div class="deginner1">です。

CSS記載

.deg1{
  background:#9df; /*style add*/
  transform: skew(0,3deg);
  -webkit-transform: skew(0,3deg);
  -moz-transform: skew(0,3deg);
  -o-transform: skew(0,3deg);
  -ms-transform: skew(0,3deg);
}
.deginner1{
  max-width:960px; /*style add*/
  margin:0 auto 100px; /*style add*/
  padding:100px 0; /*style add*/
  text-align:center; /*style add*/
  transform: skew(0,-3deg);
  -webkit-transform: skew(0,-3deg);
  -moz-transform: skew(0,-3deg);
  -o-transform: skew(0,-3deg);
  -ms-transform: skew(0,-3deg);
}

cssのコメント/*style add*/記載のstyle箇所は見た目が分かりづらいのでよく見せるための装飾用です。
実際に傾きに使うstyleは transform： skew(X軸,Y軸)になります。

 

X軸とY軸にそれぞれ入れる値はdeg(degree)になります。
10度 = 10deg
の表記です。

 

ちなみにstyle transform: rotate(角度)でも斜めにする事は可能ですが、斜めに対しての四方角が残ってしまいますので、今回はskewを利用しています。
rotateを利用した場合のDEMOはこちら

 

skewのHTMLで<div>を2つ記載しているのは、<div class="deg1">でY軸に3度歪ませて、その内にある<div class="deginner1">で-3度逆に歪ませる事でテキスト記載箇所<div class="deginner1">内を平行に表示させています。

 

テキスト毎歪ませる場合は<div class="deginner1">のstyleからtransform： skewを削除すれば以下のようの表示になります。

demo_sample1

また、傾きの開始位置、余白の取り方に関してはサイト幅のセンターが基準になりますので、傾きを被らせてクロスをつくる事もできます。
marginを調整し、divを被せてクロスしたDEMOはこちら

まとめ

意外と簡単に対応できるCSSでした。
skewにかんしては、skewX、skewYといった軸単独での宣言もできます。
X軸の歪みは実案件でまだ利用した事ないですが、CSSアニメーションと一緒に利用していけば様々な動きに対応できそうです。

 

 

BACK BLOG