cssのtransformをうまく使って斜め線のレイアウトをしてみる

  • 2017.05.17
  • css
cssのtransformをうまく使って斜め線のレイアウトをしてみる

こんばんわ。最近胃の回復が追いつかなくなってきた30代のtaisonです。
そろそろ食生活を考えねばならぬ歳になってきたようです。
このままでは右肩下がりになってしまうのでそれだけは避けねば、、、

さて、今日は形だけでも右肩上がりに!cssアニメーションでおなじみのtransform :rotateを使って、背景を斜め線に区切るレイアウトに挑戦してみようと思います。

See the Pen ZKMEGL by taison (@takatsugusuzuki) on CodePen.

意外と簡単に出来るcss斜め線レイアウト

よくアニメーションでセクションの背景の区切りを波のような曲線にして、ウネウネ動かすレイアウトがあります。
あれはSVGパスを基点に動かすアニメーションなので、初心者にはなんだか難しそうに感じちゃいますよね。

今回は単純に形だけ斜めにできたらいいや。ってやつなので、cssアニメーションとdiv要素を使って簡単に実現したいと思います。

divの外枠をcssで回転させて斜め線を演出する

まず基本のレイアウト構成を決めます。


<div class="wrap">
	<div class="kaiten">
            <div class="kaitencontent">
		<h3>見出し</h3>
		<p>一体これで何を語ろうというのか・・・</p>
	    </div>
	</div>
</div>

このdiv.kaitenとdiv.kaitencontentにcssで回転をかけ、斜め線を作ります。
次に一番外枠のwrap要素で、wrapをはみ出す部分が隠れるようcssを設定します。


.wrap{
	display: block;
	width: 100%;
	overflow: hidden;
	padding-top: 150px;
}

斜め線を作るときにdiv要素を回転させるのですが、上のコードはcssで回転させた時はみ出した部分をかき消す能力を持ってます。

はみ出す部分書き消す
padding-topは斜めコンテンツの位置調整の為に指定。

で、次に中にある枠要素を回転させます。


.kaiten{
   margin: 0 -50px;
  -webkit-transform-origin: left center;
  -moz-transform-origin: left center;
  -o-transform-origin: left center;
  -ms-transform-origin: left center;
  transform-origin: left center;
  background: #000;
  color: #fff;
  -webkit-transform: rotate(-5deg);
  -moz-transform: rotate(-5deg);
  -o-transform: rotate(-5deg);
  -ms-transform: rotate(-5deg);
  transform: rotate(-5deg);
  box-shadow: 0px 2px 3px rgba(0,0,0,0.4) inset;
}
.kaitencontent{
  -webkit-transform: rotate(5deg);
-moz-transform: rotate(5deg);
-o-transform: rotate(5deg);
-ms-transform: rotate(5deg);
transform: rotate(5deg);
padding: 150px 100px 250px 100px;
  margin: 0 auto;
  text-align: center;
}
.kaitencontent h3{
  font-size: 60px;
  position: relative;
  margin-bottom: 20px;
}
.kaitencontent p{
  font-size: 18px;
}

まずkaitenrotateの-5度(-5deg)で回転させ、さらに内部のkaitencontentに逆回転(5deg)を与えて文字を元の傾きに戻します。

ちなみにtransform-originは変化の起点を決める要素です。positionと同じような感じですね。
ブラウザ対応状況はこちらから→

paddingは肉付けで、div要素の枠に厚みを持たせるため指定。

これで斜め区切りの要素がcssだけで完成しちゃいました。
仕組みが分かればだいぶ簡単じゃないですか?

transform: rotate 応用編

さて、基本が出来たところで少し応用してみます。
今度は斜め線を2本引いて、kaiten部分が末広がりになるレイアウトを作ってみましょう。

完成すると記事冒頭にあったcodepenのレイアウトが実現できます。
末広がりってなんだか幸せになれそうでいい。

やり方は単純。さっき作った斜め線ブロックの下に同じdiv要素をもう一つ用意して、


<div class="wrap">
	<div class="kaiten">
            <div class="kaitencontent">
		<h3>見出し</h3>
		<p>一体これで何を語ろうというのか・・・</p>
	    </div>
	</div>
	<div class="kaiten">
            <div class="kaitencontent">
		<h3></h3>
		<p></p>
	    </div>
	</div>
</div>

二つ目のdiv要素に逆向きのrotateをあてるだけ。


.kaiten:nth-child(2){
   margin: 0 -50px;
  margin-top: -240px;
  -webkit-transform-origin: left center;
  -moz-transform-origin: left center;
  -o-transform-origin: left center;
  -ms-transform-origin: left center;
  transform-origin: left center;
  background: #fff;
  color: #000;
  -webkit-transform: rotate(5deg);
  -moz-transform: rotate(5deg);
  -o-transform: rotate(5deg);
  -ms-transform: rotate(5deg);
  transform: rotate(5deg);
  box-shadow: 0px 2px 3px rgba(0,0,0,0.4) inset;
}
.kaitencontent:nth-child(2){
  -webkit-transform: rotate(-5deg);
-moz-transform: rotate(-5deg);
-o-transform: rotate(-5deg);
-ms-transform: rotate(-5deg);
transform: rotate(-5deg);
padding: 150px 100px 250px 100px;
  margin: 0 auto;
  text-align: center;
}

色は反転させて(別の色ならなんでもいいです)、上の要素と見分けがつくようcssで指定します。

あとは、各要素のpaddingmarginの数値を調整して完成です!
どうですか?末広がりましたか?簡単ですね。

animationは色んな使い道がある

こんな感じでcssだけでもだいぶ手軽にレイアウトの調整ができるようになりました。
html4時代には画像で対応してようなデザインもなんのその。

いやはや時代の進化とは恐ろしいものです。

animationを使ったレイアウトや要素はrotateだけにとどまらず星の数ほどあります。
今後も面白そうなデザインが浮かんだら色々と検証してみたいと思いますので、お楽しみに!

やっぱり自分で書かないと覚えないしね 汗

それではまた!

こちらの記事も読まれています

WordPressでcssを追加・修正したけど反映しない!cssが効かない時に確認するコト... こんばんわtaisonです。 最近ウチのウサギが1歳の誕生日を迎えまして、 嫁がお祝いということでリンゴとにんじんで作ったケーキを目の前に置いたんですが、、、 全く食べず 笑 食べてる写真を収めたくて奮闘してたんですけど、目の前に置いても口元に置いてもウンともスンとも言わず、、、...
css font-kerningを使ってwebで欧文の文字詰めをする... こんばんわ。taisonです。 皆さん、見出しやキャッチコピーで大きな文字を扱うことってありますよね。 シンプルなデザインにどかーん!と欧文文字が入ってたりすると、それだけでブランドイメージを伝えるのも難しくありません。 (まあ欧文使ったwebサイト作ることって、実際は少ないですけど) ...
mix-blend-mode exclusionを使っておしゃれなデザインを実現してみる... こんばんは!taisonです。 ここのところ構成考える仕事が多く、あまりcssに手をつけていませんでした 汗 気を取り直して更新していきたいと思います! さて、今回はおしゃれなサイト制作にはうってつけな、あるcssをご紹介したいと思います。 photoshopやillustratorでお...
web制作にsass(scss)を使う場合の注意点 こんばんは、taisonです。 先日の記事で、sass(scss)(以下sassといいます。) という言語について触れました。 今一度sass(scss)を正しく勉強する!脱初心者への道 第1弾! 今回は、 sassってそもそもどういう時に使うの?どんな使い方がいいの? エラーが...

cssカテゴリの最新記事