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

線形グラデーションを細かく設定する

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

ぜひご覧ください。

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

字幕

このレッスンでは背景イメージに定めた 線形のグラデーションを 細かく調整してみます。 今開いている HTML ドキュメント ですが、 ボディには何もありません。 けれど CSS のファイルが リンクで設定してあります。 style.css とありますが、 それは現在ここに開いています。 またボディのスレッダーに対して 実際に設定されているのは ごく基本的な線形グラデーションです。 バックグラウンドアタッチメントを fixed にして linear gradient の関数は ベンダープレフィックスが必要ですから 同じ設定が様々な ベンダープレフィックスで バックグラウンドイメージの 設定をしています。 そして linear gradient の関数は レッドからブルーの ごく基本的な設定でデフォルトでは 上から下へのグラデーションになります。 確認してみましょう。 Chrome で HTML ドキュメントを 開いてみました。 線形の上が赤、下が青の グラデーションになっています。 この設定を細かく 変えてみたいと思います。 まずは線形グラデーションの方向です。 エメットを使いますので、設定は簡単に できますから バックグラウンドイメージの設定を 消してしまいます。 そして linear gradient の関数を エメットで指定すると デフォルトでバックグラウンドイメージが プロパティとして選ばれますので lg で構いません。 方向は左から右にしたいと思います。 その場合には、 to right として あとは先程と同じです。 red,blue) ということで 展開します。 Tab キーです。 ベンダープレフィックスが全部入りました。 保存しましょう。 ファイルを保存して Chrome はリロードします。 そうすると方向が左から右へ、 to right ですね 赤から青のグラデーションは 変わりませんが グラデーションの 方向は変えられました。 グラデーションのカラーを加えましょう。 取り消してしまいます。 エメットで楽ですね。 red の後に yellow 、三色の グラデーションです。 Tab キーで展開し、保存して 確認します。 Chrome をリロードすると 赤、黄、青となりました。 もうちょっと方向を 変えてみたいと思います。 CSS ファイルの入力、 また取り消します。 左から右ですが、ここには top bottom left right 四つの指定を組み合わせることができます。 right bottm とすると 左上から右下へと斜めの グラデーションになります。 展開してファイルを保存します。 Chrome をリロードです。 左上から右下へ、赤・黄・青の グラデーションになりました。 今回はカラーの配分を変えてみます。 展開を取り消して 「yellow 60%」 とします。 そして展開です。 保存します。 先程のグラデーションは yellow が ちょうど真ん中に なっているわけですが、これは 60% の位置に移動したので リロードすると、位置が少し 右下にずれます。 今度は赤の配分を変えてみます。 CSS ファイルのエメットの展開を 取り消して 赤の位置を同じように 「red 30%」とします。 そして展開して 保存します。 赤のカラーの開始位置が デフォルトでは 0% なんですが それを 30% にしたので 赤の領域がリロードすると 攻めてくるということになります。 このレッスンでは、背景イメージに定めた 線形のグラデーションを 細かく調整してみました。 その時のエメットの入力 これを全部タイプするのは 結構大変なのですが 入力は簡単です。 「lg(」 の後に 方向ですね、 to に合わせて、 方向が四つの中から 組み合わせて選べます。そしてカラー 必要があれば、パーセンテージ、 カンマ、カラー、パーセンテージ というのをいくつでも 組み合わせることができます。 これで線形のグラデーションが細かく 調整できたということです。

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

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

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

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

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

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