
CSSでグラデーションを付ける方法。(linear-gradient)の使い方
グラデーション(gradient)とは、色や濃淡を連続した階調で表現することです。最近ではインスタグラムのロゴを始め、様々なところでグラデーションが多様されています。
確かに、色を単色で利用するよりも、グラデーションを使ったほうがより生き生きとした雰囲気を表現することができます。しかし、グラデーションをWeb技術で表現するときに、どのようにすればいいかご存知ですか?
そこで今回は、もう一度学び直したいCSSグラデーションの基礎についてまとめていきました。
グラデーション自体は以前から表現可能だったわけですが、ここで改めてその表現方法や応用例などをご紹介していきます。
CSSでグラデーションを作成する方法
Webブラウザでグラデーションを表現できるようになったのはだいぶ前からですが、2016年を境にグラデーションに関する関心があらためて高まってきています。
グラデーションをCSSで作成することができなかった「不便な」時代には、グラデーションのスライス画像を作成して、「background」でグラデーション画像を指定することで「擬似的に」グラデーションを表現していましたが、現在ではCSSで簡単にグラデーションを表現できるようになっています。
「linear-gradient」と「radial-gradient」
最も簡単な形は、「background」に「linear-gradient」もしくは「radial-gradient」を指定することです。中でも、直線的にグラデーションを指定する「linear-gradient」が最も基本的な形としてよく使われます。
.wrap {
background: linear-gradient(#000046, #1cb5e0 );
}
デフォルトでは、以下のように上から下に引くようになっています。
グラデーションの方向を決める
続いて、最初に方向を表す属性を色の前に付け加えることで、グラデーションの方向を決めることができます。
.wrap {
background: linear-gradient(to right , #000046, #1cb5e0 );
}
上の図では、「to right」を指定することで右方向にまっすぐグラデーションを指定していきます。同様に、このパラメーターを「to top right」にすれば、右上に向かってグラデーションをかけることになります。これは、実際に「45deg」(45度)を指定するのと同じ状態になります。
3色以上のグラデーションを作る
グラデーションの使用は、2色にとどまりません。実際に、3色、4色……と付け加えていくことが可能です。
.wrap {
background: linear-gradient(to right, orange, deeppink, blueviolet, cyan);
}
特定の幅のグラデーションを広く取る
また、グラデーションのある特定の色の幅を広く取ることもできます。その場合には、以下のようにパーセンテージを指定します。
.wrap {
background: linear-gradient(to right , #000046 80%, #1cb5e0 );
}
- タグ
- タグとは、原義では「モノを分類するために付ける小さな札」のことです。英語の「tag」を意味するものであり、荷札、付箋といった意味を持っています。特にインターネットに関する用語としてのタグは、本文以外の情報を付与するときに用いられます。
- CS
- CSとはCustomer Satisfactionの略称で「顧客満足度」を意味します。顧客との関係維持、サービスの発展に関するマーケティング戦略に関わる用語です。
- CS
- CSとはCustomer Satisfactionの略称で「顧客満足度」を意味します。顧客との関係維持、サービスの発展に関するマーケティング戦略に関わる用語です。
- CS
- CSとはCustomer Satisfactionの略称で「顧客満足度」を意味します。顧客との関係維持、サービスの発展に関するマーケティング戦略に関わる用語です。
おすすめ記事
おすすめエントリー
カテゴリから記事をさがす
Web マーケティング
- SEO(検索エンジン最適化)
- SNSマーケティング
- アプリマーケティング
- Web広告
- グロースハック
- ABテスト・EFO・CRO
- LP制作・LPO
- CMS・Webサイト制作
- 記事制作・ライティング
- コンテンツマーケティング
- メール配信・メールマーケティング
- マーケティングオートメーション(MA)
- リードジェネレーション(見込み顧客獲得)
- カスタマーサポート・カスタマーサクセス
- アクセス解析・広告効果測定
- データ分析
- リサーチ・市場調査
- 口コミ分析・ソーシャルリスニング
- O2O(Online to Offline)
- EC・通販・ネットショップ
- 多言語・翻訳
- 動画・映像制作
- AR・VR制作
- 統計データ
- マーケティングお役立ちレポート
- 連載
- チャットボット
- Web会議
- 動画マーケティング