- HOME
- > BLOG CATEGORY
- 【CSS】斜めの背景について、transformを使ってみよう!

- お知らせ
- NEW 2023.11.23 【Photoshop】水彩風のテクスチャー作成ついて解説
- お知らせ
- 2023.11.16 【Photoshop】写真の一部を消す加工ついて解説
- お知らせ
- 2023.11.09 【Photoshop】鉛筆風フォントの作成について解説
こんな方に読んでほしい
CSS
について学びたい方へ上記のイメージ図のように、背景を斜めに引くデザインをよく見かけることはありませんか。
背景画像として、background
プロパティで指定しても問題はありませんが、
今回は、transform
を使って斜めの背景を実装します。
transform
とは、「回転」、「拡大・縮小」、「傾斜」、「移動」などといったことが可能です。
今回は、「傾斜」、「中心点(位置)」を使って斜めの背景を実装させます。
書き方は以下のようになります。
<section>
<div class="transform-bg"></div>
<div class="contents">
<h2>SHU BLOG</h2>
<div><img src="画像パス" alt="" /></div>
</div>
</section>
.transform-bg {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
width: 100%;
height: 80%; /*--デモのため、高さは調整--*/
z-index: 0;
background: #fecf3f;
transform: skewY(-15deg); /*--傾斜を指定--*/
transform-origin: top left; /*--中心点を指定--*/
}
.contents {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
width: 60%; /*--デモのため、横幅は調整--*/
margin: 0 auto;
position: absolute;
z-index: 1;
text-align: center;
}
img {
max-width: 100%;
height: auto;
}
今回は、上記のデモで分かりやすいように、横幅、高さを調して整載せています。
skewY
の傾斜角度は(-15deg)になっており、括弧内の数値を変更すれば、傾斜の向きも変わります。
傾斜角度が(25deg)の場合は以下になります。
transform-origin: top left
とは、常に左上から傾斜の指定を行います。
中心点が「top right」の場合は以下になります。
注意ポイント!
今回は、デモで見やすいようにCSSを調整しております。
実際はブラウザ(横幅100%の状態)でしっかり確認してください。
transform | 【CSS】transformの使い方、要素を2Dに変形する! |
---|---|
transform-origin | 【CSS】transform-originの使い方、中心点(位置)を指定する! |
今回はこれで以上です。
transform
要素は、「回転」、「拡大・縮小」、「傾斜」、「移動」などといったことが可能です。skewY
とは、傾斜角度になります。transform-origin
とは、中心点になり、「top left」の場合は、左上になります。2023.06.22
2023.06.01
2022.06.03
2021.08.10
![]() |
【Amazon.co.jp 限定】1冊ですべて身につくHTML & CSSとWebデザイン入門講座 (DL特典: CSS Flexbox チートシート) 新品価格 |
2023.11.23
2023.11.16
2023.11.09
2023.10.26
2023.10.12
2023.09.28
2023.06.15
2022.06.30
2020.03.22
2020.03.06
© 2023 shu-naka-blog