コース: CSS 基本講座
今すぐ登録して、23,200件以上登録されている、業界エキスパート指導のコースを受講しましょう。
値を定める関数
このレッスンでは、値を定める関数を いくつかご紹介します。 カラーでは「rgb」とか 「hsl」という関数があって、 カラーを設定できるんですが、 それ以外にもプロパティ値に 使える関数があります。 今回ご紹介するのはこの3つで、 「translate」 これは要素を水平および垂直方向に 移動します。 次に「rotate」。 これは要素を時計回りに回転します。 それから3番目「calc」。 これは値を四則演算します。 構文はMDNのリファレンスを ちょっと見てみたいと思いますが、 「translate」ですね。 この構文はと言うと、 値をひとつ取ると 「x」方向への移動になります。 2つ取った場合には、 「x」と「y」と。 水平と垂直ですね。 の移動ということができるわけです。 それから今度は「rotate」。 回転ですけれども、 これは値をひとつ取って、 「a」、angleの「a」でしょうね。 回転します。 その時に単位が必要ですので ご注意ください。 単位はこのあとご紹介します。 3番目「calc」。 これは四則演算で、 （）の中に演算規則 入れるんですけれども、 ちょっと上見てきましょうね。 こんな��うに「%」とか「px」とか、 単位をつけた計算ができます。 そして四則演算の記号は「+」「-」 「*」は掛け算「/」が割り算と いうことで、これは通常どおりですね。 まずは移動の translate 使ってみたいと思うんですが、 h1要素を移動しましょう。 そして移動するときですね、 値は translate を使うんですけれども、 プロパティはと言うと 移動とか回転、その他変形のプロパティは transform になります。 ですからこの h1 に加えて transform ということで関数ですね。 translate。 まずはひとつだけ値を指定します。 ここで 100px としましょうか。 100px 右側に移動する ということになりますね。 確認しましょう。 ファイルを保存します。 h1要素が右側に100px移動しましたので、 右側がちょっと はみ出てしまってますね。 この幅を縮めましょう。 この h1 のセレクタにさらに加えて 幅は width ですね。 ここで計算の calc を使いましょう。 calc として、…
エクササイズファイルを使って実践してみましょう。
インストラクターがコースで使用しているファイルはダウンロードできます。見て、聞いて、練習することで、理解度を深めることができます。
コースをダウンロードして学習しましょう。
ラーニングコースをダウンロードしてオフラインで視聴しましょう。ダウンロードしたコースはLinkedInラーニングのモバイルアプリ (iOSまたはAndroid) で視聴できます。