transform:skew 要素に傾斜をつける・斜めにする方法

CSS

【CSS transform skewの使い方】要素に傾斜をつける方法

2022年8月29日

今回は要素に傾斜をつけることができるCSS関数、skew関数の使い方を紹介します。

transform: skew()を使用して水平方向に傾斜を付けている例
 

 

 

transformで利用するskew関数とは

skewはtransformプロパティの値として使用する関数の一つで、要素に傾斜を付けることができます。

■(参考)skew()を使用してx軸方向に傾斜を付けている例

transform: skew()を使用して水平方向に傾斜を付けている例

なお、skew()はCSSプロパティではなく関数なので、transformプロパティの値として使用します。

また引数を2つ取ることができ、1つ目の値にはx軸方向、2つ目の値にはy軸方向の傾斜角度を指定します。

transform: skew()の指定方法

傾斜角度を指定するので、値には傾斜角度の度数(英: degree)を表す「deg」を使用します。

 

transformプロパティで指定できる関数一覧

なお今回の記事では、skew関数の使い方のみを解説しますが、transformプロパティではskew()以外にも使用できる関数が複数存在。

そこで、以下ではtransformプロパティで指定できる関数をまとめました。興味がある方は、他の関数の使い方も調べてみて下さい。

■(参考)transformプロパティで指定できる関数まとめ

skew() 要素を歪ませることができる関数
translate() 要素を移動させることができる関数
rotate() 要素を回転させることができる関数
scale() 要素を伸縮させることができる関数

 

 

skew関数を使って要素に傾斜をつける方法

それではskew関数を使って要素に傾斜をつける方法を紹介します。

skew関数は前述したように引数を2つとり、1つ目の値にはx軸方向、2つ目の値にはy軸方向の傾斜角度を指定します。

上の例ではx軸方向にのみ傾斜角度を指定しているため、縦のサイズは固定され、x軸方向にのみ傾斜が付いていることが分かります。

x軸方向にのみ傾斜角度を指定すると、縦のサイズは固定され、x軸方向にのみ傾斜を付けることが可能。

また、横のサイズは固定させてy軸方向にのみ傾斜を付けたい場合は、第一引数を「0」とし、第二引数に任意の角度を指定してあげればOK。

y軸方向にのみ傾斜角度を指定すると、横のサイズは固定され、y軸方向にのみ傾斜を付けることが可能。

なおどちらかx軸、y軸のどちらか一方のみに傾斜を付けたい場合は、skewX()やskewY()関数なども使用することができます。

skew() x、y軸方向に傾斜を付けることができる

引数を2つもつ。(例) skew(20deg, 20deg)

skewX() 縦のサイズは固定し、x軸方向に傾斜を付けることができる

引数を1つもつ。(例) skewX(20deg)

skewY() 横のサイズは固定し、y軸方向に傾斜を付けることができる

引数を1つもつ。(例) skewY(20deg)

上の例ではどちらも正の数の角度を指定していますが、負の数の角度を指定することで逆方向に傾斜をつけることが可能です。

 

 

まとめ・要素に傾斜を付けることができるtranslate:skew()

まとめです。今回は要素に傾斜を付けることができるskew関数の使い方を紹介しました。

transform: skew()を使用して水平方向に傾斜を付けている例

skew関数はtransformプロパティで使用できる他の関数に比べると使用頻度が少ないですが、ひしがたなどの少し変わった図形も使い方によっては実装できるようになるので、ぜひ覚えておきましょう。

今回は以上になります。最後までご覧いただき、ありがとうございました。
 


 

「業者に任せたけど、更新ができない」「本で独学は時間がかかりすぎる・・」そんなお悩みの方も多いのではないでしょうか。

個別指導形式のスクールでは、自分の知りたいことをピンポイントで学習・達成でき、自分で更新もできるというメリットもあります。
教室の無料事前相談もしておりますので、まずはお気軽にご登録ください。

詳細はこちら

YouTubeチャンネル開設しました!

WEBST8 YouTube Channel 開設
最大月間50万PVの当ブログをベースに、Youtube動画配信にてWordPress、ホームページ作成、ブログのことについてお役立ち情報を随時配信していきます。

ご興味ある方はぜひチャンネル登録をしていただけますと幸いです。


 

おすすめ記事3選

【WordPressの始め方総まとめ】ワードプレスブログの作り方9STEP

【おすすめレンタルサーバー比較総まとめ】WordPress対応5社

国内シェア上位のエックスサーバー、ロリポップ、さくらのレンタルサーバ、およびConoHa WING、mixhostを中心にWordPressおすすめレンタルサーバーを比較・紹介していきます。これからWordPressでホームページやブログを開設するためにレンタルサーバー選びを検討している方はこちらをご覧ください。

【WordPressの始め方総まとめ】ワードプレスブログの作り方9STEP

WordPressの始め方総まとめ

WordPress(ワードプレス)でブログを始めようと思った時に、サーバー・ドメインの手続きなどわからないことだらけで困っているというお悩みをお持ちの方も多いのではないでしょうか。本記事では、WordPressでブログやアフィリエイトを始めたい初心者を対象にWordPressの始め方をご紹介していきます。

【総まとめ】WordPress(ワードプレス)ホームページ作り方

【総まとめ】WordPress(ワードプレス)ホームページ作り方

WordPressでホームページを自作しようと思った際に、「ドメイン?サーバー?たくさん調べることがあって何から手をつけたら良いのかわからない」というかたも多いのではないでしょうか。この記事ではWordPress初心者の方を対象にWordPressでホームページを作る方法をご紹介していきます。

-CSS