未経験からエンジニアになりたい人必見!
おすすめプログラミングスクール3選!

【CSS】transform:skew()で要素を斜めにする方法

本記事では、CSSで要素に傾斜を付けることができるtransform:skew()の使い方について画像付きで分かりやすく解説しています。

transform:skew()を習得することで、斜めに背景色・画像を表示することができるようになります。

HTML/CSSの学習におすすめ参考書
1冊ですべて身につくHTML&CSSとWebデザイン入門講座

参考書が苦手な人はUdemyの動画がおすすめ
ちゃんと学ぶ、HTML+CSS&JavaScript入門講座

作成者たにぐち まこと
学習時間9時間
受講者数42,075人
レビュー (8,925件)

サンプルコード

以降の解説で実際にskew()を使って要素を斜めにする方法を解説していきます。自分のパソコンでコードを入力しながら確認したい方は以下のサンプルコードを使用してください。

HTML
<!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>Document</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div id="container">
      <div id="rect"></div>
    </div>
  </body>
</html>
CSS
#container {
  margin-top: 300px;
  text-align: center;
}

#rect {
  display: inline-block;
  width: 300px;
  height: 300px;
  background: linear-gradient(
    90deg,
    rgba(2, 0, 36, 1) 0%,
    rgba(9, 121, 25, 0.671327906162465) 0%,
    rgba(0, 212, 255, 1) 100%
  );
}
サンプルコードの表示結果
サンプルコードの表示結果

300pxの正方形が表示されるのが確認できます。#rectにskew()を適用させると正方形が変形します。

transform:skew()の使い方

transform:skew()の使い方は、()内に要素を傾斜させたい角度を記述します。第一引数に横(X軸)の角度を指定し、第二引数に縦(Y軸)の角度を指定します。第二引数を省略した場合、縦(Y軸)の値が0になります。

▼X軸、Y軸共に正の数を設定した場合

CSS
#rect {
  transform: skew(10deg, 10deg);
}
skew(10deg,10deg)の表示結果
skew(10deg,10deg)の表示結果

▼X軸、Y軸共に負の数を設定した場合

CSS
#rect {
  transform: skew(-10deg, -10deg);
}
skew(-10deg,-10deg)の表示結果
skew(-10deg,-10deg)の表示結果

▼X軸を正の数、Y軸を負の数を設定した場合

CSS
#rect {
  transform: skew(10deg, -10deg);
}
skew(10deg,-10deg)の表示結果
skew(10deg,-10deg)の表示結果

▼X軸を負の数、Y軸を正の数を設定した場合

CSS
#rect {
  transform: skew(-10deg, 10deg);
}
skew(-10deg,10deg)の表示結果
skew(-10deg,10deg)の表示結果

▼第二引数を省略した場合

CSS
#rect {
  transform: skew(10deg);
}
skew(10deg)の表示結果
skew(10deg)の表示結果

skewX()の使い方

transform:skewX()は、横(X軸)だけを傾斜させたい時に使います。使い方は、()内に傾斜させたい横(X軸)の角度を指定します。

▼正の数に設定した場合

CSS
#rect {
  transform: skewX(45deg);
}
skewX(45deg)の表示結果
skewX(45deg)の表示結果

▼負の数に設定した場合

CSS
#rect {
  transform: skewX(-45deg);
}
skewX(-45deg)の表示結果
skewX(-45deg)の表示結果

skewY()の使い方

transform:skewY()は、縦(Y軸)だけを傾斜させたい時に使います。使い方は、()内に傾斜させたい縦(Y軸)の角度を指定します。

▼正の数に設定した場合

CSS
#rect {
  transform: skewY(45deg);
}
skewY(45deg)の表示結果
skewY(45deg)の表示結果

▼負の数に設定した場合

CSS
#rect {
  transform: skewY(-45deg);
}
skewY(-45deg)の表示結果
skewY(-45deg)の表示結果

参考資料