CSS3のグラデーション

グラデーションがつくれるWebサイト

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
グラデーションを視覚的に設定して、CSSの記述として取出せるサイトをご紹介します。
講師:
06:55

字幕

このレッスンでは CSS のグラデーションを 視覚的に作りながら CSS の定義を取り出せるという 便利な web をご紹介します Ultimate CSS Gradient Generator というものですが Photoshop などと似たインターフェイス ですので直感的に扱うことができます URL を打ち込むよりも Google で 検索してしまったほうが早いでしょう キーワードは CSS そして gradient ですね もう そろそろ見えてきていますけど ここで一旦 Enter します これですね Ultimate CSS Gradient Generator このサイトを開きます そうすると左上に色見本があり それからグラデーションバーがあって ポイントが1つ1つ選べる 結果がプレビューにでてきます そしてこの CSS という所にあるのが 実際に記述する CSS です これはコピーすることができます コピーして HTML ドキュメントのほうに ペーストしてみましょう Dreamweaver で開いた HTML ドキュメントは― 要素の中に

要素 id = box があり その box のセクターに対して幅と高さが 500 pixel ずつ設定してあります ここに今コピーした設定を CSS の記述をペーストします これだけです ではファイルを保存して ブラウザで確かめてみましょう ブラウザで プレビューです 500pixel 四方の四角の中に先程選択した グラデーションが表示されています もう少しサイトで手を加えてみましょう 左上の見本の中からまた違った グラデーションを選択してみます このへんにしましょうか 薄いピンクから濃いピンク それが二色に分かれた形になってますね 現在は vertical ここです 縦方向なんですが 横方向にすることもできます Horizontal そうすると 横方向のグラデーションに変わりました またこの CSS の設定の中のカラーは rgba が現在選択されていますけど それ以外の例えば HSLa などに 選択変更することもできます ではまたコピーして HTMLドキュメントの方にペーストしてみます では先程 ペーストしたグラデーションの設定 これをすべて上書きペーストします それからお気づきになったかもしれませんが コメントがついていますので それぞれがどういった ブラウザに対応する記述なのか ということも確認することができます では実際のグラデーションを ブラウザでプレビューしてみます 一旦保存しましょう そしてブラウザでプレビューです 今度は横方向のリニアな グラデーションになりました もちろん Radial 放射状のグラデーションにすることもできます 先程のコメントを つけるつけないというのは このチェックボックスで ON/OFF ができます またグラデーション パターンを変えてみましょう では これにしますか そしてグラデーションを放射状 radial にします ちょっとこのボックスの幅が狭いですね これは ある程度広げることができます 幅はこれでいっぱいですけど 高さについて 350 とします こうすると見やすいですね ちょっとこのグラデーション 寂しいでしょうか 一番左のアイコンをクリックすると 一番左ですので位置が 0%となってますね ダブルクリックするとカラーが選択できます このカラーの選択も非常に直感的です おなじみといって良いでしょう 完全な白になっています これを赤にしましょう こちらのほうが簡単でしょうか G と B を 0にします そして OK 今度こちらはダブルクリックをして ブルーにしましょう 0 0 でブルーでOKです そしてこのアイコンはドラッグして 位置を変えることもできます では コピーしてみましょう コピーして HTML ドキュメントに ペーストします 改めて background の設定を すべて選択して 上書きペーストです 保存して確認してみましょう ブラウザでプレビュー 今度は放射状のグラデーションが 設定されました グラデーションを少しいじります このアイコンの位置 75%と 入力してしまいましょう カラーはグリーンにしましょう OK ですね ここのもう1つのアイコンは 位置を 50%とします そしてカラーは rgb でもいいですし 色進数での指定もできます 黄色にしましょうか FFFF00 と OK です こんな感じのグラデーションができました これはセーブすることもできます 名前をつけます デフォルトのままでいきましょうか Custom という名前なんですけど セーブというふうにボタンを押しますと この色見本の一番左上に 今設定したグラデーションが入ります ですから また後でこのグラデーション 使いたいと思ったら ここから取ってくればいい ということです このレッスンでは― 視覚的にグラデーションの設定をして その CSS を持ってくることができるという 便利な web のサービスをご紹介しました このサイトの名前は Ultimate CSS Gradient Generator というものです 使ってみると便利でしょう

CSS3のグラデーション

CSS3のグラデーション機能はW3Cで勧告候補となり、最新のブラウザであれば使えるようになりました。このコースでは線形や放射状のグラデーションの構文や使い方を詳しく解説します。グラデーションを使ったパターンやテクスチャの作例を一歩一歩段階的に作り進めながら、必要に応じて文法的な説明も加え、細かな設定やオプションまで広くカバーしています。

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

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

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

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