ことの経緯
実務で背景に画像を入れ、斜めにして黒の透過を重ねるデザインをしたのですが、コーディングの上手いやり方がわからず…。
色々自分でも調べたり先輩に聞いたり、スクールの先生にも聞いたりながら、ようやく納得いく方法が見つかったので、まとめます。
なお、1週間前にもまとめたのですが、もう一度同じやり方でやってみたらあまり上手くいかなかったので、【改】として記事を上げ直しました。
デザインのイメージ
コーディングで表現したかったデザインはこんな感じです。サイトは自分のポートフォリオを代用して説明します。
コンクリートの背景の部分のデザインに注目してみてください。以下3点がやりたかったことです。
ちなみに、コンクリートの上のセクションは画像が透過なし、下は画像なしなので、ここでは一番ややこしいコンクリートの部分を中心に見ていきます。
コーディング方法
上の画像だとわかりづらいのでさらに簡単な画像で示します。問題のコンクリートの部分は、真ん中のグレーの箇所です。
HTML
グレー箇所のHTMLはこんな感じだとして。
CSS
グレー箇所のCSSはこうなります。手順のポイントは水色マーカーの部分。傾きのポイントは黄色マーカーの部分です。
.oya-section01 {
/* ①背景に画像を入れる */
background-image: url(“../img/bg_img.jpg”); background-size: 100%;
background-size: cover;
/* ②背景を斜めにする */
transform: rotate(-3deg);
/*③背景引き延ばしと余白消し（数値は適当）*/
width: 130vw;
margin: -1vw -15vw;
}
.ko-section01 {
/* 子要素の傾きを直す*/
transform: rotate(3deg);
}
/*背景画像に疑似要素で黒の透過を重ねる*/
.oya-section01 {
position: relative;
&::before {
content: “”;
display: block;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
position: absolute;
left: 0;
top: 0;
}
}
一応、ブルーとグリーンの部分のCSSも例に出しています。グリーンは画像の傾けのみ、ブルーは背景色の傾けのみなので、そこまで難しくないです。
完成見本
背景に画像を入れた状態で斜めにし、かつ黒の透過を重ねることができました！
スマホで見るとこんな感じです。
余談：今回難しかった点
ここからは何がそんなにややこしかったのか、まとめてみたいと思います。完成形だけわかればいいねんって方はブラウザバックで全く大丈夫です！
背景に画像を入れて斜めにする方法がわからない
色々参考サイトを調べたのですが、背景色を斜めにする方法は見つかっても、画像を入れた状態で斜めにする方法がよくわかりませんでした。
背景に色を入れるだけなら、長方形の上下に三角をくっつければいいのですが、画像を入れた状態で斜めにする方法を知りたかったんですね。
シャギーの消し方がわからない
で、最初はtransformでskewにしてみたのですが、傾きはするものの、背景と背景の合間にシャギーが入ってしまい…。特に色を透過して重ねるとギザギザが目立つようです。
よーく見ると黄色矢印の部分がギザギザしています。
スマホで見るとギザギザがわかりやすいです。綺麗に一直線になっていません。
シャギーを直すためにz-indexで下の背景を重ねて応急処置したりしていたのですが、スクールの先生に聞いたところ、以下の回答をいただきました。
ジャギってたのは、skewを使ってるからな気がしました。
rotateで回転させたほうがPCへの負担が少ないと思いますよ。
rotateに変えてみて、その分の背景引き延ばしと余白消しをやると、シャギーも消えました！なるほどー！
まとめ
色んなやり方があると思うのですが、今回はこんな感じで解決できました。
①rotateで画像を斜めにして、
②widthを画面幅（100vw）以上、余白をmarginで消す
一緒に考えてくださった会社の先輩、解決策を教えてくださった先生に感謝です！
なお、斜め背景を画像で対応しているサイトもあったので、案件によっては画像でもいいのかもしれませんが、まあ勉強になったということで。。。
コメント