Emmetでコード入力を速めよう

線形グラデーションを入力する

全334コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
背景のイメージに線形グラデーションを定めます。
講師:
03:36

字幕

このレッスンでは HTML ドキュメントの 背景のイメージに 線形のグラデーションを 定めてみます。 現在開いている HTML ドキュメント ボディは空っぽです。 けれど CSS のファイルとして style.css がリンクしてあります。 そして style.css は すでに開いているのですが、 こちらボディのセレクターに対して まだコメントだけで何も書いていません。 ここにグラデーションの指定をします。 その場合は バックグラウンドイメージですね。 まず bg で Tab を打つと background になります。 これを一旦取り消しまして バックグラウンドイメージの場合には bgi ですね。そして Tab を打ちます。 すると URL を入れろとありますが 今回はここに linear gradient 線形のグラデーションを 設定したいと思います。 もう一度これは取り消して、値として linear gradient 「 lg 」です。 そして括弧の中には引数を 普通に書きます。 red から blue のグラデーション、 そして Tab を打ちますと すごいですね。 linear gradient は ベンダープレフィックスが 必要な場合があります。 それも全て入れてくれるわけです。 ではこれで確認してみましょう。 一回ファイルを保存します。 HTML ドキュメントは Chrome で開いているのですが これをリロードします。 なんだかテレビがおかしくなった みたいになっています。 これは線形のグラデーションが繰り返し 行われているからです。 このドキュメントのボディ全体に対して グラデーションを掛けたい、 という場合にはもう一つ 指定を加える必要があります。 style.css のファイルに戻りまして この前にバックグラウンド アタッチメントです。 バックグラウンドアタッチメントを fixed にします。 ですから f も加えて baf で Tab を打ちます。 そうするとバックグラウンドアタッチメントが fixed になりますので、 これで保存して確認しましょう。 ファイルを保存します。 Chrome をリロードしましょう。 そうすると赤から青への線形の デフォルトでは 上から下へのグラデーション ということになります。 最後にもう一つとっておきのご紹介です。 実は linear gradient lg というのは バックグラウンドイメージのプロパティに 対する設定がデフォルトになっています。 ですから bgi を入れなくて結構です。 消しすぎました。取り消します。 バックグラウンドアタッチメントは 消してはいけません。 bgi を入れずに lg(red,blue) これで展開すると バックグラウンドイメージまで入ってしまう ということです。 このレッスンでは線形のグラデーション、 上から下、赤から青という グラデーションの背景を設定しました。 その場合はバックグラウンドアタッチメントと バックグラウンドイメージに linear gradient の設定が 必要なんですが Emmet としては baf と lg(red,blue) これだけ入れれば済むということです。

Emmetでコード入力を速めよう

EmmetはHTMLやCSSのコーディングを強力に支援するプラグインです。Dreamweaverをはじめ、さまざまエディタにも対応しています。このコースではHTMLとCSSの基礎を学んだ方向けに、Emmetを使うさいの基本的な入力方法について解説します。このコースでEmmetを学習して、コーディングの効率を大幅にアップしましょう!

1時間02分 (19 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 1,990
発売日:2016年04月25日

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。