ExcelVBA（マクロ）で範囲に同じ文字を追加する、計算をする方法/For each in Next文の使い方

cssライブラリでwebサイトにアイコンを埋め込む方法/font-awesomeの使い方

CSSで画像の縁を丸める、画像を丸く表示する方法/boder-radiusの使い方（画像編）

Illustrator（イラレ）で、線幅を太くすると角が飛び出る問題の解決方法/ラウンド結合の使い方

Unityで土台を作り、上から落ちてくるオブジェクトを受け止める方法

投資用語：セリクラとは

Excelエクセルで印刷したページにページ番号を入れる方法/ヘッダーとフッターの使い方と画面の元に戻し方

photoshopで画像の色を違う色に変更する方法/色の置き換えの使い方

Power Automate Desktopでテキストのトリミングを行う、前後の空白を削除する方法

Excel（エクセル）で条件により複数の表を参照するVlookup関数の作り方/Indirect関数との組み合わせ方

Excel（エクセル）で数値の大きさを簡易的に視覚化する方法/データバーの使い方、色の変え方、解除方法

CLIP STUDIO PAINT（クリスタ）で漫画原稿を作る際の製本（仕上がり）サイズの選択と変更方法

ExcelVBA(マクロ)でユーザー定義型の定数を宣言する方法/Constステートメントの使い方

ExcelVBA（マクロ）で複数条件に条件分岐する方法/Select Case文の使い方

Excel（エクセル）で年,月,日から日付を求める方法/Date関数の使い方

ExcelVBA（マクロ）実行時エラーとなり、文字が黄色く塗り潰された時の解除方法/リセットボタンの使い方

Excel（エクセル）で記号を入力する方法/記号と特殊文字他の使い方

CLIP STUDIO PAINT（クリスタ）の使い方、ツール、テクニックまとめ

CSSで要素を斜体にする、傾斜させる方法/transform:skewプロパティの使い方

IT

2019.05.19

文字の斜体をイメージしてもらえるとわかりやすいかと思いますが、あのようにx軸、y軸で要素を斜めに歪めるためのプロパティがtransform:skewです。

transform:skewプロパティの使い方

値は2つ指定し、それぞれx軸、y軸を角度(deg)で指定します。値をひとつしか指定しない場合はx軸のみ値が適用されます。
skewXおよびskewYで単体の指定も可能ですが、(x,y)と(y,x)と(xy)ではちがう結果になるという挙動がtransform:skewにはあり、今後仕様が変更される可能性があります。そのため新規の仕様は推奨されません。
ただ使い方によってはなかなか面白い結果になりますし、要素をアニメーションで表示したい場合などは多少仕様が変わってもあまり関係なさそうではあります。当分は大丈夫でしょうけどブラウザが対応しなくなる可能性はあります。

要素を傾斜させる
transform:skew(横軸,縦軸)

skew(20deg,0)

skewX(20deg)

skew(0,20deg)

skewY(20deg)

skew(20deg,20deg)

skewX(20deg)skewY(20deg)

skewY(20deg)skewX(20deg)

CSSの便利な使い方・プロパティ逆引きリファレンス

HTMLと合わせてぜひマスターしたい、CSS関連の記事のまとめとなります。プロパティの名称と使用用途を合わせて併記しています。ちょっととっても数少ないですが、段々増える予定です。

JavaScriptの使い方・メソッド・プロパティまとめ

HTML/CSSとセットでフロントエンドエンジニア三種の神器のひとつ、JavaScript系の記事まとめです。

コメント