VIDEO LESSON

CSSのtransformの使い方：指定値・実例・効かない原因とブラウザー互換性の解説動画

再生時間 7:44動画を別のタブで開く ↗

動画の字幕・文字起こしを読む

再生中の字幕を濃い黒で表示し、一番上に追従します。字幕の行を選ぶと、その位置から再生できます。

0:00こんにちは。
0:01シーエスエス、リファレンス解説です。
0:04今回のテーマは、トランスフォームです。
0:07前回は、変形の基準点を決めるトランスフォーム・オリジンを見ました。
0:13今回は、その変形そのものを指定するトランスフォーム本体を取り上げます。
0:19トランスフォームは、要素を移動させたり、回したり、大きくしたり、傾けたりするための指定です。
0:27大きな特徴は、見た目だけが変わって、レイアウト上の占有領域は元のまま、という点です。
0:34このあと、主な関数の書き方、組み合わせる順番の注意、実例での比較、そして効かないときの調べ方まで、
0:40順番に確認していきます。
0:45書き方を確認します。
0:47トランスフォームには、行いたい変形を「関数」という形で書きます。
0:52関数は、変形の種類と量をセットにした書き方で、半角スペースで区切れば複数を並べられます。
0:59たとえば、トランスレイト・ワイにマイナス、ゼロ点五レム、ローテートにマイナス三度と書くと、
1:06「少し上へ移動して、三度傾ける」という二つの変形が一度に適用されます。
1:12プロパティ名の後ろにコロン、値の最後にセミコロンを書く、という宣言の基本はこれまでと同じです。
1:20変形は、前回学んだトランスフォーム・オリジンの基準点を軸に行われます。
1:26主な関数を、移動と回転から見ていきます。
1:29移動はトランスレイトです。
1:31トランスレイト・エックスは横方向、トランスレイト・ワイは縦方向への移動で、
1:36ピクセルやレムなどの長さで量を指定します。
1:41トランスレイトに二つの値を書けば、横と縦をまとめて指定できます。
1:46マイナスの値を書くと、左や上といった反対方向へ動きます。
1:51パーセントで指定した場合は、要素自身の大きさに対する割合になります。
1:57回転はローテートで、単位はデグ、つまり度です。
2:01プラスの値で時計回り、マイナスで反時計回りに回ります。
2:05ホバーでカードを少し浮かせたり、バッジを少し傾けたりする演出で、よく使われる組み合わせです。
2:13次に、拡大と傾けです。
2:15拡大縮小はスケールで、単位のない数値で倍率を指定します。
2:20一なら元の大きさ、一・二なら一・二倍への拡大、ゼロ・八なら少しの縮小です。
2:27スケール・エックス、スケール・ワイを使えば、横と縦を別々に変えることもできます。
2:34傾けはスキューで、角度を指定して要素を平行四辺形のようにゆがませます。
2:41見出しの装飾で斜めの帯を作るときなどに使われます。
2:46これらの関数は自由に組み合わせられますが、何種類も重ねると意図しない形になりやすいので、
2:52最初は一つか二つから試すのがおすすめです。
2:58初期値と継承を確認します。
2:59トランスフォームの初期値はノーンで、「変形しない」という意味です。
3:04あとで見る実例でも、ノーンに書き換えると要素は通常の表示に戻ります。
3:09そして、このプロパティは親から子へ継承しません。
3:13親に変形を設定しても、子が自動的に同じ変形を受けることはありません。
3:18ただし見た目の上では、親が動けば、その中身も一緒に動いて見えます。
3:22あくまで「指定が伝わるわけではない」という区別を押さえてください。
3:27変形をやめたいときは、宣言自体を消すか、ノーンに戻すのが確実です。
3:32ここからは、ブラウザーで比べられる実例で確認します。
3:36エイチティーエムエルでは、ステージという親要素の中に、デモという箱を一つ置きます。
3:42文章が入った箱です。
3:43スタイルシートでは、まず土台を整えます。
3:46ステージに最大幅と余白を持たせ、デモには内側の余白、緑色の枠線、薄い背景色を付けます。
3:53これは違いを見やすくするための準備で、今回の主役ではありません。
3:57主役は、このあとデモに追加するトランスフォームです。
4:01同じ箱で、変形ありと変形なしを見比べていきましょう。
4:05ファイルを保存して、ブラウザーで一度表示を確認してから次へ進んでください。
4:11実例の本題です。
4:12デモに、トランスレイト・ワイでマイナス、ゼロ点五レム、ローテートでマイナス三度、
4:16という指定を書きます。
4:20ブラウザーで見ると、箱が少し上へ浮き上がり、反時計回りに三度傾いた状態になります。
4:26ここで注目してほしいのは、箱の「元の場所」です。
4:30まわりの要素の配置は一切動きません。
4:33トランスフォームは占有領域を元のまま保つので、見た目だけがはみ出した形になります。
4:39カードにホバーしたとき少し浮かせる、といった演出に向いているのはこのためです。
4:45逆に、変形で隣と重なってしまう場合があることも覚えておきましょう。
4:51次に、値をノーンに置き換えて比較します。
4:54箱は傾きも浮き上がりもなくなり、通常の表示に戻ります。
4:58変形前と変形後を並べることで、トランスフォームが「見た目だけを変える指定」であることがはっきりします。
5:07もう一つ試してほしいのが、関数の並び順です。
5:10移動してから回す書き方と、回してから移動する書き方では、結果が少し変わります。
5:17回転したあとの移動は、傾いた軸に沿って行われるためです。
5:21思った位置に来ないときは、量だけでなく順番も見直してみてください。
5:27効かないときの確認方法です。
5:29いちばん多い原因は、対象がインライン要素であることです。
5:34スパンやエー要素のようなインライン要素には、トランスフォームが適用されません。
5:40ディスプレイをブロック、またはインライン・ブロックに変えると効くようになります。
5:47次に開発者ツールで順番に調べます。
5:50スタイルズで宣言に打ち消し線が付いていないか、別の宣言に上書きされていないかを見て、
5:55コンピューテッドで最終的な値を確認します。
6:00また、占有領域は元のままなので、変形した要素が隣と重なったり、重なりの順序が変わったりすることがあります。
6:09見た目が崩れたときは、この性質も疑ってみてください。
6:13ブラウザー互換性を確認します。
6:16トランスフォームは、クローム三十六以降、エッジ十二以降、ファイアーフォックス十六以降、
6:21サファリ九以降と、主要なブラウザーで古くから使えます。
6:26この記事が参照しているエムディーエヌの互換性データでも、接頭辞なしの標準の指定が広くそろっています。
6:33日常の制作で互換性を心配する必要は、ほとんどありません。
6:38ただし、プロパティが使えることと、すべての値や構文が使えることは別です。
6:43三次元方向の変形など新しい書き方を使う場合は、対象のブラウザーで改めて確認してください。
6:49値の種類によって対応の始まった時期が違うこともあります。
6:53最後に練習とまとめです。
6:56まず、トランスレイト・ワイとローテートの指定と、ノーンの違いを、自分の言葉で説明してみてください。
7:04次に、角度や移動量を一つずつ変えて、結果がどう変わるかを比べてみましょう。
7:10一度に複数を変えるより、一つずつのほうが原因と結果を追いやすくなります。
7:16応用として、以前学んだトランジションと組み合わせると、変形が滑らかにアニメーションします。
7:24今日のポイントは、トランスフォームは見た目だけを変えること、関数の順番で結果が変わること、
7:30インライン要素には効かないこと、の三つです。
7:36次回は、スクロールの動きを整えるスクロール・ビヘイビアを取り上げます。
7:42おつかれさまでした。

日本語字幕をダウンロード（WebVTT）

この動画で学べること

transformの役割と主な指定値を解説。箱を少し上へ移動して傾けた状態と通常状態を比較します。初期値・継承・ブラウザー互換性、効かないときの確認方法も整理します。

解説記事・サンプルコードを読む：CSSのtransformの使い方：指定値・実例・効かない原因とブラウザー互換性 →