ホームページ制作

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

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

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

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

まず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でいろいろな事をするときに使えますよ!

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

お仕事のご相談・ご依頼をお待ちしております

コレカラウェブでは、Webライティング・SEO・メディア運営・障害者支援のお仕事を承っております。専門知識が豊富な村上英輝が直接担当いたします。ご相談・お見積もりは無料です。まずはお気軽にお問い合わせくださいませ。

===

Twitterアカウント:@corekaraweb
⇒管理人・村上英輝が発信するフリーランスの日常を発信しています。WebライターやSEOライターのお役立ち情報もたまにあるかも! フリーランスの方やライターの方はフォローバックしておりますので、お気軽にフォローしてください!

facebookページ:コレカラウェブ
⇒「コレカラブログ」を含めたコレカラウェブのブログ運営の裏側を公開しています。ブログに公開する前の先行情報や運営方針などを記録しています。PVや収益に関する生々しい話も!よろしければ「いいね!」お願いいたします。

「いいね!」と思ったら、クリックお願いいたします<m(__)m>
にほんブログ村 小遣いブログ Webライター・ブログライターへ にほんブログ村 IT技術ブログ SEO・SEMへ にほんブログ村 小遣いブログ ブログアフィリエイトへ
ABOUT ME
村上英輝
2018年4月に開業したコレカラウェブ代表の村上英輝です。フリーランスとしてWebライティング・SEO・メディア運営・障害者支援のお仕事を一貫して承ってきました。現在はフルリモートのWeb制作会社でSEO担当者もやっています。このブログではコレカラウェブのお仕事で得たノウハウやテクニックを詳しく紹介しています。所有資格:認定SEOコンサルタント・SEO検定1級・Webライティング実務士・ウェブ解析士・情報セキュリティスペシャリスト・FP2級・AFPなど。

COMMENT

メールアドレスが公開されることはありません。

CAPTCHA