これは覚えておきたい！ CSSの三角関数で斜めのレイアウトを実装するテクニック

ヘッダやコンテンツの区切りを斜めにしたいとき、どのように実装していますか？

CSSの三角関数が主要ブラウザのすべてにサポートされたことで、今まではかなり複雑なCSSやJavaScriptが必要だった斜めのレイアウトがシンプルなCSSで実装できます。

コンテンツ自体を斜めにすることも、水平のままにしておくことも可能です。

Diagonal Layouts in 2023

斜めのレイアウトを実装するこれまでの方法は、下記をご覧ください。

• ヘッダやコンテンツを区切るラインを斜めに実装するCSSやSVGのテクニック総まとめ

• 1. rotateではなく、skewを使用する
• 2. 疑似要素を使用する
• 3. CSSの三角関数で適切なpaddingを設定する
• 4. CSSカスタムプロパティでpaddingを管理する
• 斜めのレイアウトを実装したデモ

1. rotateではなく、skewを使用する

widthが100%のボックスを回転（rotate）させると、ボックスの幅が満たされなくなるため、ボックス全体を100%よりも広くする必要があります。ここで問題になるのが、要素の高さが分からないことです。そして、幅を100%よりどれだけ広くすればよいかも分からないことです。

そこで、transform: rotate(-11deg);の代わりに、transform: skewY(-11deg);を使用すると、変換（skew）されたボックスの幅は満たされます。

左: rotateだと広げる必要がある、右: skewだと満たされる

2. 疑似要素を使用する

斜めのセクションが必要で、かつ水平の横書きが必要な場合は、セクション内のコンテンツを再回転させる必要があります。その代わりに、:before疑似要素で絶対位置に配置すると、ボックスだけを変換（skew）させることができます。

左はセクション全体を回転させているため、コンテンツを再回転させる必要があります。左は疑似要素を使用しているので、コンテンツは影響を受けません。

左: セクション内を再回転させる必要がある、右: 疑似要素を使用

3. CSSの三角関数で適切なpaddingを設定する

要素を変換（skew）させると、一部の要素が前と次の要素に流れ込みます。コンテンツを配置できる安全なエリアを見つけるには、paddingを追加する必要があります。その量は、x = tan(α) * a / 2で計算できます。

右上隅と左下隅を避ける

このテクニックを掲載した2020年当時は、この角度を計算するためにJavaScriptを使用する必要がありました。しかし、CSSのアップデートにより、CSSのtan()関数で角度のタンジェントを直接計算できるようになりました。

tan()を含む、CSSの三角関数については詳しくは下記をご覧ください。

• CSSの三角関数（sin(), cos(), tan()）の基礎知識と基本的な使い方を解説
• 2023年はCSSで三角関数「sin(), cos(), tan()」が主要ブラウザのすべてで使用できるようになるぞ！

4. CSSカスタムプロパティでpaddingを管理する

算出したpaddingの値はCSSのカスタムプロパティで、再利用できます。たとえば、要素が斜めの背景線に沿うように移動させることができます。

CSSカスタムプロパティについては詳しくは下記をご覧ください。

• CSSの変数（カスタムプロパティ）の基礎知識、便利な使い方を詳しく解説
• CSS変数（カスタムプロパティ）の優れた使い方、コンポーネントのバリエーションを実装するのに役立つ

斜めのレイアウトを実装したデモ

実際の動作は、下記のデモページでご覧ください。
上部のスライダーを変更すると、transform: skewY(-11deg);の値を変更できます。

See the Pen
Diagonal Layouts in 2023 by Nils Binder (@enbee81)
on CodePen.