【CSS】 Webページで画像を斜めに傾けて表示させる方法

Webデザインで、時には画像を傾けて表示させたい場合があります。たとえば、クリエイティブなレイアウトや興味深い効果を演出するために画像を回転させたい場合などが挙げられます。ここでは、CSSのtransformプロパティを使用して画像を傾ける方法を解説します。

手順
よくある質問（FAQ）
まとめ

手順

まず、HTMLのimg要素を使用してページに表示したい画像を挿入します。
次に、CSSを使って画像に回転効果を適用します。これには、transformプロパティを使用します。
transformプロパティのrotate()関数を使用して、画像を回転させる角度を指定します。たとえば、rotate(45deg)は画像を45度回転させます。

以下は、実際のコード例です。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>傾いた画像</title>
<style>
    .tilted-image {
        transform: rotate(45deg); /* 画像を45度回転させる */
    }
</style>
</head>
<body>
    <img class="tilted-image" src="example.jpg" alt="傾いた画像">
</body>
</html>