こんにちは。そろそろ炊飯器を新調したいと考えているサイトウです。
ホームページを見ていて、ボタンにカーソルをあてたら、ボタンが動いたことありませんか？ボタンの位置がずれたり、回転したりすることもあるかもしれませんね。
実はこれ、CSSで実装可能なのです！驚きましたか？
Webサイトで「動き」というとJavaScriptを思い浮かべる方も多いと思います。一方、CSSというと色や形、配置を指定するものというイメージが強いですよね。
大丈夫です。ポイントを押さえれば誰でも使いこなすことができるようになります。
今回は、【transform】の
・応用的な使い方
について説明します。プログラミング初学者の方やtransformの使い方を知りたい方、サイトの装飾を華やかにしたい方は是非読んでみてくださいね。
目次
【transform】とは
【transform】の読み方
トランスフォームと読みます。「trans」が変換、「form」が形という意味で、2つの言葉が合わさって「形を変換する＝変形する・変化する」という意味になりました。「要素を変形させる」と覚えると忘れにくいですよ。
【transform】の説明
要素に動きをつけることができるプロパティです。transformプロパティの値にtransform関数を指定することで、変形・移動・縮尺・傾斜などを適用することができます。
【transform】で利用できる値
【transform】では以下の値を使うことができます。
| 値 | 説明 |
|---|---|
| translate | 要素を移動させます。 |
| rotate | 要素を回転させます。 |
| scale | 要素を拡大縮小させます。 |
| skew | 要素に傾斜をつけます。 |
対応ブラウザ
対応ブラウザは以下の通りです。
| PC用ブラウザ | 対応状況 |
|---|---|
| Chrome | 完全対応 |
| Edge | 完全対応 |
| Firefox | 3.5～ 対応 |
| Internet Explorer | 9～ 対応 |
| Opera | 11.5～対応 |
| Safari | 完全対応 |
| スマートフォン用ブラウザ | 対応状況 |
| Android webview | 完全対応 |
| Android版Chrome | 完全対応 |
| Android版Firefox | 完全対応 |
| Android 版 Opera | 完全対応 |
| iOS版Safari | 完全対応 |
| Samsung Internet | 完全対応 |
【transform】の基本的な使い方
【transform】の使い方
下記のように「transformプロパティ：transform関数（数値で指定）；」と書きます。
|
1 2 3 |
h1 { transform:translate(10px, 10px); } |
では、それぞれの値を見ていきましょう。
上記の例を再度見てください。最初の数値がX軸、次の数値がY軸の数値で、どちらもpxや%などの数値で指定します。
X軸は横方向の動きを表し、正の値の場合は右方向に、負の値の場合は左方向に動きます。Y軸は縦方向の動きを表し、正の値の場合は下方向に、負の値の場合は上方向に動きます。どちらか一方を指定することも可能です。
See the Pen
GRjQjgv by F Saito (@kero23)
on CodePen.
わかりやすいように:hoverをつけて、カーソルが要素に重なった時に動くようにしています。transformプロパティは、状態を指定する「疑似クラス」というキーワードを一緒に使うことも多いです。
|
1 2 3 4 |
p { transform:translateX(10px); transform:translateY(10px); } |
上記のように別々に指定すると最後に書かれた指示しか実行されません。X軸、Y軸の両方を指定したい時には一括で指定しましょう
数値にdegをつけて指定します。正の値は右方向に、負の値は左方向に回転します。
See the Pen
MWjQjGW by F Saito (@kero23)
on CodePen.
scaleでは、値に「px」などの単位を設定する必要はありません。「1.5」と書けば、要素の1.5倍、「0.5」と書けば、要素の0.5倍となります。負の値を指定すると縮小します。
See the Pen
yLavaRL by F Saito (@kero23)
on CodePen.
数値にdegをつけて指定します。下記の例はX軸・Y軸ともに正の値ですが、負の値にすると反対方向に傾斜します。
See the Pen
MWjQjzY by F Saito (@kero23)
on CodePen.
transformプロパティは、学習を進めると複雑な3Dの表示が可能になりますので、ぜひマスターしましょう！
transformは比較的新しいプロパティのため、古いパソコンやブラウザによっては対応していない場合があります。しかし、プロパティの頭にベンダープレフィックスをつけると、対応不可のブラウザでもきちんと表示されるようになります。下記のようなものを見たことはありませんか？
|
1 2 3 4 5 6 7 |
h1{ -webkit-transform: rotate(10deg); -moz-transform: rotate(10deg); -ms-transform: rotate(10deg); -o-transform: rotate(10deg); transform: rotate(10deg); } |
下記のように、ブラウザによってベンダープレフィックスが異なっています。
- -webkit-・・・GoogleChrome / Safari
- -moz-・・・Firefox
- -ms-・・・Internet Explorer
- -o-・・・Opera
新しいプロパティを使用するときは、ベンダープレフィックスを忘れずに書くようにしましょう。
【transform】と類似する要素との違い
transformと似たプロパティに「transition」があります。transitionは色や大きさなどが変わる時間を設定するときに使われるプロパティです。
transformとtransitionは一緒に使うケースも多く「要素に動きをつける」という意味では、知っておいたほうが良いプロパティです。先ほどのtranslateの例にtransitionを追加してみます。
See the Pen
MWjQjKR by F Saito (@kero23)
on CodePen.
動きが滑らかになりますね。時間や変化の度合いの詳細を指定したい時は、ぜひ一緒に使ってみましょう。
【transform】の応用的な使い方
transform関数をスペースで区切って複数指定すると、複数のtransform効果を適用することができます。例えば、translateとscale組み合わせてみます。
See the Pen
eYdVBmd by F Saito (@kero23)
on CodePen.
手前に飛び出してくるような印象になりました。さらにskewを組み合わせてみましょう。
See the Pen
zYKRovZ by F Saito (@kero23)
on CodePen.
組み合わせ次第で様々な表現ができそうですね！はじめのうちはどのくらいの数値でどの程度動くのか見当がつかないと思います。実際に自身でコードを書き、少しずつ数値を変えて試してみましょう。
考えるより手を動かしてみるのがおすすめです。「迷ったら書いてみる」を忘れずに学習を進めてくださいね。
まとめ
いかがでしたか？今回は要素に動きをつける「transformプロパティ」について紹介しました。
新しいことを学ぶたびに、ますますプログラミング学習が面白くなってきませんか？CSSを楽しく学んで、サイト作りの可能性を広げていきましょう。この記事が少しでもお役に立てればうれしいです。
参考文献：2019年 株式会社かんき出版｜文系でもプログラミング副業で月10万円稼ぐ！【著】日比野 新
