ホームページ制作

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に強い完全オリジナルな文章を作成いたします。公式noteにてポートフォリオを掲載していますので、こちらも併せてご覧ください。ご相談・ご依頼はお問い合わせページからお願いいたします!

「いいね!」と思ったら、クリックお願いいたします<m(__)m>
にほんブログ村 小遣いブログ Webライター・ブログライターへ にほんブログ村 IT技術ブログ SEO・SEMへ にほんブログ村 小遣いブログ ブログアフィリエイトへ
ABOUT ME
らぐち
コレカラブログ管理人のらぐちです。コレカラウェブという屋号でフリーランスとして、Webライティング・SEOコンサルティング・メディア運営・障害者支援のお仕事を一貫して承ってきました。このブログではコレカラウェブのお仕事で得たノウハウやテクニックを詳しく紹介しています。

COMMENT

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

CAPTCHA