Excel（エクセル）でデータの個数・数字の数を数える方法/Count・CountA関数の使い方

Excel（エクセル）でテキストボックスの余白を調節する方法

Unityでテストプレイ中にデータを編集しないためのコツ/Playmode tintの使い方

Microsoft Power Automate Desktop（PAD）アクション、使い方一覧

Power Automate Desktopでウィンドウの位置を移動させる方法

ExcelVBA(マクロ)：Internet Explorerでタグからテキストを取得する方法/getElementsByTagNameメソッドの使い方

仮想通貨用語：スマートコントラクトとは

Unityの画面構成、レイアウト、表示ウィンドウ、画面サイズ

Power Automate Desktop：フローをクリア、アクションを全削除する方法

Power Automate Desktopでフォルダーをコピーする方法

Excel（エクセル）で背景画像を設定する方法/ページレイアウト（背景）の使い方・解除方法

Excel（エクセル）でWordで作れるような立体的な文字を入力する方法/ワードアートの使い方

JavaScriptでアルファベットの文字列を大文字・小文字に変換する方法/toLowerCase、toUpperCaseメソッドの使い方

Excel（エクセル）で2つの値が一致する時Trueを返す方法/Delta関数の使い方

仮想通貨用語：FUDとは

pythonでフォルダ名を組み合わせて環境に合ったパスを生成する方法/os.path.join関数の使い方

Unity C#で回転をカーブをかけて遅くする方法/減衰係数の使い方

Power Automate Desktopの「Excelワークシートの列名を取得する」の使い方

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系の記事まとめです。

コメント