これは覚えておきたい！ CSSの三角関数で斜めのレイアウトを実装するテクニック
Post on:2023年4月17日
sponsors
ヘッダやコンテンツの区切りを斜めにしたいとき、どのように実装していますか？
CSSの三角関数が主要ブラウザのすべてにサポートされたことで、今まではかなり複雑なCSSやJavaScriptが必要だった斜めのレイアウトがシンプルなCSSで実装できます。
コンテンツ自体を斜めにすることも、水平のままにしておくことも可能です。
斜めのレイアウトを実装するこれまでの方法は、下記をご覧ください。
- 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カスタムプロパティについては詳しくは下記をご覧ください。
斜めのレイアウトを実装したデモ
実際の動作は、下記のデモページでご覧ください。
上部のスライダーを変更すると、transform: skewY(-11deg);の値を変更できます。
See the Pen
Diagonal Layouts in 2023 by Nils Binder (@enbee81)
on CodePen.
sponsors
