」を使いたいことは多いと思います。Generator」を紹介します。このツールを利用すると複雑なグラデーションを記述したCSSも簡単に自動生成してくれます。CSSなので重い画像のように表示速度が遅くなる恐れもありません。生成されたCSSコードをコピペするだけで他にサイトに簡単に適用できます。Generatorもくじ以下は本記事のもくじです。まとめそれでは、説明に移っていきます。CSSによるグラデーションの作り方グラデーションは、linear-gradient()という関数を使うことでCSSでも表現することができます。Webブラウザの互換性の問題から、複数種類のWebブラウザ(Safari,Chrome,InternetExplorerなど)に対応させるために何行も複雑な記述を書かなければなりません。*/copyとても複雑で量も多い記述なので、毎回このような複雑なCSSを手動で記述するのはとても大変です。Generator」というツールを利用すると、特にCSSの知識がなくても、複雑なグラデーションも記述したCSSも簡単に自動生成してくれます。Generator」によるグラデーションの作り方を説明していきます。Generatorでグラデーションを作成する方法を説明します。はじめに下記のサイトにアクセスしてください。Generator上記のサイトでプレビューを見ながらグラデーションを作成していくと右下にCSSコードが自動で生成されるので、これをコピぺするだけの操作になります。それでは基本的な使い方を説明していきます。色を設定するまずは両端の色を設定してみましょう。両端のポイント(黄枠のアイコン)をクリックします。該当ポイントのColorが表示されるのでクリックして色を設定します。(ここをクリック)背景や文字の色でxxx-color:#○○○○○○;という記述を見かけることが多いと思います。こちらのAdobeのサイトで無料で使えますのでご活用ください。カラーホイール両端以外にも色のポイントを作りたい場合は、何もないところをクリックして新たに色のポイントを作ることができます。色のポイントを削除したい場合は、該当のポイントをクリックしてdeleteボタンで削除できます。向きを設定する次にグラデーションの向きを設定します。Previewの下にあるOrientationでグラデーションの向きを設定することができます。グラデーションの向きを設定する(水平、垂直、斜め・・・)以下のような向きを設定できます。サイズを設定する必要に応じてグラデーションのサイズを変更することもできます。Previewの下にあるSizeでグラデーションのサイズを変更します。今回はデフォルト(vertical(垂直向き)、370×50)にしておきます。問題なければPreveiwにあるグラデーションがCSSとして自動生成されていますので、出来上がったCSSをコピーします。出来上がったCSSをコピーするこれでグラデーションを表現したCSSを手に入れることができました。最後に生成したCSSを他のサイトに適用してみましょう。他のサイトにグラデーションを設定するここでは、アメブロにグラデーションを適用する例を説明します。アメブロ>デザイン編集>CSS編集でグラデーションを作りたい箇所に先ほどのCSSを貼り付けます。生成したグラデーションCSSを貼り付ける表示を確認すると先ほど生成したグラデーションが適用されていることがわかります。下部ナビゲーションがグラデーションになったこのようにして、グラデーションを簡単に作成してアメブロや他のサイトに適用することができます。Generator」を紹介しました。ツール無しにグラデーションを作成しようとすると複雑で量の多い記述を自分で作成しなければなりませんが、このツールを利用するとCSSの知識がなくても複雑なグラデーションを記述したCSSも簡単に自動生成してくれます。生成されたCSSコードをコピペするだけで他にサイトに簡単に適用できます。CSSなので重い画像のように表示速度が遅くなる恐れもありません。ホームページやブログなどの背景やボタンでグラデーションを使いたい場合は、画像ではなく本ツールをご利用してみることをお勧めします。今回は以上になります。最後までご覧いただきありがとうございました。必須サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。上に表示された文字を入力してください。まつもとの徒然なるブログシェアTOPへ。