CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSのskewX()関数でdivをX軸方向に傾斜させる方法

CSSで要素を変形させるには transform プロパティを使用します。その中でも skewX() 関数を使うと、要素をX軸（水平方向）に沿って傾斜（スキュー）させることができます。

skewX()とは？

skewX(角度) は、指定した角度だけ要素を水平方向に傾ける関数です。角度が正の値なら右側が上へ、負の値なら右側が下へ傾きます。要素自体は回転するのではなく、せん断変形のように歪む点が特徴です。

実装例

以下のコードでは、通常のdivと skewX(20deg) を適用したdivを並べて比較できます。

<html>
   <head>
      <style>
         div {
            width: 300px;
            height: 100px;
            background-color: pink;
            border: 1px solid black;
         }
         div#skewDiv {
            /* IE 9 */
            -ms-transform: skewX(20deg);
            /* Safari */
            -webkit-transform: skewX(20deg);
            /* 標準構文 */
            transform: skewX(20deg);
         }
      </style>
   </head>
   <body>
      <div>
         Qries.com
      </div>
      <div id = "skewDiv">
         Qries.com
      </div>
   </body>
</html>

コードの解説

基本スタイル

すべての div 要素に対して、幅300px・高さ100px・ピンク色の背景・黒い枠線を設定し、変形前後の見た目を分かりやすくしています。

ベンダープレフィックスについて

古いブラウザとの互換性を保つため、以下のプレフィックス付きの記述も含まれています。

  • -ms-transform：Internet Explorer 9 用
  • -webkit-transform：Safari や旧版のChromeなどWebKit系ブラウザ用

現在のモダンブラウザでは標準の transform: skewX(20deg); のみで動作しますが、レガシーブラウザをサポートする場合はこれらの記述を残しておくと安心です。

実行結果

このコードを実行すると、1つ目のdivはそのまま表示され、2つ目のdiv（#skewDiv）は20度だけ水平方向に傾斜して表示されます。skewY() を使えば垂直方向の傾斜も可能なので、用途に応じて使い分けるとよいでしょう。

  1. 【CSS】Flexboxで作る高度なレイアウト！基本プロパティと実装サンプルを解説

    Flexbox（フレックスボックス）とは？ CSS3には「Flexible Box Layout（フレキシブルボックスレイアウト）」と呼ばれるレイアウトモードが用意されており、一般的にはFlexbox（フレックスボックス）として知られています。Flexboxを活用することで、従来のfloatやpositionを使った手法よりもはるかに簡単かつ柔軟に、複雑なWebアプリケーションやWebページのレイアウトを構築できます。 Flexboxは「フレックスコンテナ」（親要素）と「フレックスアイテム」（子要素）という2つの概念で構成されます。親要素にdisplay: flex;を指定するだけで、その直下

  2. CSSだけで実現するスムーススクロールの書き方

    CSSのscroll-behaviorプロパティを使うと、アンカーリンクによるページ内移動時のスクロール動作を、JavaScriptに頼ることなく純粋なCSSだけで制御できます。値にsmoothを指定すれば、クリック一つで目的地までなめらかにアニメーションしながらスクロールします。 scroll-behaviorプロパティの主な値 auto:ブラウザの標準動作。リンクをクリックすると瞬時に目的の位置へジャンプします。 smooth:滑らかなアニメーションを伴ってスクロールします。 このプロパティはChrome、Firefox、Edge、Safariなどの主要ブ