IT

transform: skewを利用した斜めに傾いたグローバルナビゲーションの作り方

ひさしぶりにCSSの小ネタを紹介します。

CSS3のtransformを利用して、斜めに傾いているグローバルナビゲーションを作ります。

とりあえず↓のcodepenのデモをご覧ください。

See the Pen transform: skewを利用した斜めに傾いたグローバルナビゲーションの作り方 by jugedred (@jugedred) on CodePen.

作り方はすごく簡単です。

まずHTMLを↓のように書きます。

<ul class="clearfix">
	<li>
		<a class="inner" href="#">
			<span>HOME</span> 
		</a>
	</li>
	<li>
		<a class="inner" href="#">
			<span>ABOUT</span> 
		</a>
	</li>
	<li>
		<a class="inner" href="#">
			<span>NEWS</span> 
		</a>
	</li>
	<li>
		<a class="inner" href="#">
			<span>SHOP</span> 
		</a>
	</li>
	<li>
		<a class="inner" href="#">
			<span>CONTACT</span> 
		</a>
	</li>
</ul>

HTMLではリストタグを横並びに並べるコードを書くだけです。
そしてCSSはこちら

.clearfix:after {
	clear:both;
	display: block;
	content: "";
}
li	{ 
	float:left;
	list-style-type: none;
}
li .inner {
	-webkit-transform: skewX(150deg);
	-moz-transform: skewX(150deg);
	transform: skewX(150deg);
	display: block;
	border-right:1px solid #333;
	text-decoration: none;
	background-color:#84dbdb;
	padding:10px 16px;
}
li .inner:hover {
	background-color:cadetblue;
}
li .inner span {
	display: block;
	-webkit-transform: skewX(-150deg);
	-moz-transform: skewX(-150deg);
	transform: skewX(-150deg);
	color:black;
}

ポイントは親要素である li .innerをtransform:skewX(150deg);をつかって150deg傾けたあと、小要素であるspanタグを逆方向に150deg傾けます。つまり skewX(-150deg);を記述します。小要素を逆方向に傾けないと、先に記述した親要素に引きづられて文字まで傾いてしまうからです。ブロック要素にしたアンカータグを傾けたあとで、中に記述してある文字を逆に傾けて、傾きを打ち消すイメージですね。この考え方はCSS3でいろいろな事をするときに使えますよ!

以上です。ちょっと斜めに傾けておしゃれなグローバルナビゲーションを作るときに使ってくださいね。

ABOUT ME
アバター
ドレッド
目標必達のために鬼努力を惜しまない個人事業主。記事執筆・ホームページ制作・メディア運営・コンサルティングのお仕事をしています。立命館大学中退。放送大学教養学部の全科履修生。中小企業診断士とFP1級を目指してハードに勉強中。

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA