WEBデザイン CSS html UI

新米エンジニア小木の議事録 vol.9(斜めのコンテンツの作り方について)

新米エンジニアの小木です。だんだん暖かくなってきて過ごしやすい天気になってきましたね。梅雨なんて来なければいいのにと思う今日この頃です。

今回はcssのskewプロパティでウェブページのコンテンツを斜めにする方法を紹介していきたいと思います。

コンテンツを斜めにするってどういうこと?

コンテンツを斜めにするってどういうこと?っておもうかもしてませんので写真を交えて紹介していきます。まずシンプルなhtmlとcssを作成します。以下がそのソースとキャプチャです。

01

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>test</title>
	<style>
		h1 {
			text-align: center;
		}

		.tilt {
			background: lightgreen;
			padding: 20px;
			text-align: center;
		}

		.text {
			background: lightcoral;
			padding: 20px;
		}
	</style>
</head>

<body>
	<h1>コンテンツを斜めにする方法</h1>

	<div class="tilt">
		<div class="tiltInner">
			<p><img src="sample.jpg" width="600" height="400" alt=""></p>
		</div>
	</div>
	<div class="text">
		<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Earum, eaque. Eos dolorem repudiandae esse delectus debitis ad aspernatur libero quasi impedit, accusamus cumque fugiat amet quas quod quam reprehenderit cupiditate! Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ut saepe corporis mollitia excepturi cupiditate quo autem nemo magnam beatae officiis, culpa architecto porro quis blanditiis rem, asperiores laudantium vitae unde?</p>
	</div>
</body>

</html>

なんの変哲もないシンプルなページになっています。今回はこの緑の背景の部分を斜めにすることで”普通”ではない、一味違うページを作成できます。という回です。さっそく斜めにしていきましょう。

02

		.tilt {
			background: lightgreen;
			padding: 20px;
			text-align: center;
			/*斜めにするソース*/
			transform: skewY(-10deg);
			/*斜めにするソース*/
		}

コンテンツが斜めになったかと思います。がこれではすべてが斜めになってしまい中の猫ちゃんも斜めで見づらくなっています。今は-10度コンテンツを斜めにしたので中のコンテンツのみ10度戻すように斜めにすることで中身のコンテンツは平行で見やすくなります。

03

		.tiltInner {
			/*斜めにするソース*/
			transform: skewY(10deg);
			/*斜めにするソース*/
		}

いかがでしょう?あとは斜めにしたせいで見栄えが少し悪くなっていますのでそこを調整します。調整したものが以下のキャプチャです。

04

		.tilt {
			background: lightgreen;
			margin: 100px 0 150px;
			padding: 60px;
			text-align: center;
			/*斜めにするソース*/
			transform: skewY(-10deg);
			/*斜めにするソース*/
		}

実装例

いかがでしょうか?かっこいいデザインのイメージがわいてきましたよね??そこで斜めのデザインを取り入れて実装しているウェブサイトを紹介させていただきます。上記のチュートリアルを応用することで以下のようなかっこいいデザインになります。

http://gifu-aofull.jp/

まとめ

どうでしたでしょうか。cssでコンテンツを斜めにすることは意外と簡単ですが意外と知らなかったという人もいるんじゃないでしょうか。皆様ぜひ試してみてください!