ウェブ制作のクラウドビジネスをはじめよう！

bingo!CMSニュースレター

配信：2021年3月10日

パートナー向けニュースレターのアーカイブです

 
bingo!CMSロゴ画像（ニュースレタートップ用）
こんにちは！bingo!CMS 広報担当の鈴木です。
 
今年のWebデザインのトレンドに、「グラデーション」が挙げられているのはご存じですか？
きれいなグラデーションは、ずっと眺めていたいくらいうっとりしちゃいますよね。
 
本日は、無料CSSグラデーション作成ツール × bingo!CMSのTipsで、「なめらかに動く美しいグラデーション」を実装する方法をご紹介します！
 
 

無料のCSSグラデーション作成ツールのご紹介
「GRADIENT GENERATOR TOOL」​のトップページ
GRADIENT GENERATOR TOOL​

2色のカラーストップを、一直線ではなくカーブを描くような曲線状につなげ、濁りのないきれいなグラデーションを作成してくれる賢いツールです。
 
作成したグラデーションは、CSSをコピーできる他、SVGファイルとしてエクスポートも可能です。
 
早速使ってみましょう！
 
「GRADIENT GENERATOR TOOL」の操作画面

今回の検証では「#00496c」と「#87b2ad」の2色を使用しました。
「#00496c」はbingo!CMSのロゴの色、「#87b2ad」はbingo!CMS公式サイトのテキストリンクの色です！
 
2色を指定するだけで、自動でCSSが書き出されます。
 
background: linear-gradient(90deg, #00496c, #125876, #24677f, #377688, #4a8591, #5d949a, #72a3a3, #87b2ad);

色のつなぎ目が美しくなるように、指定した2色の間に自動で色を補完してくれていますね。
 
このCSSは後で使用するので、コピーしてメモに貼り付けるなどしておきましょう。
 
 

動くグラデーションのTipsのご紹介

bingo!CMSマニュアルサイトにて、Tipsを紹介しています。
題して「変化するグラデーションをつける方法：コンテナ編」！
 
bingo!CMSマニュアルサイトのTipsページ
変化するグラデーションをつける方法：コンテナ編

こちらのTipsでは、bingo!CMSのページ編集画面にある「CSS/JS」にグラデーションを動かすCSSを記述し、任意のコンテナにclassをつけて反映させる方法をご紹介しています。
 
「CSS/JS」に記述するCSSのサンプルは以下の通りです。
 

<style type="text/css">

    .gradation .bcontainer-inner{

        background: linear-gradient(-45deg, #F7FF00, #DB36A4 );

        background-size: 400% 400%;

        animation: Gradient 15s ease infinite;

    }

 

    @keyframes Gradient {

        0% {background-position: 0% 50%}

        50% {background-position: 100% 50%}

        100% {background-position: 0% 50%}

    }

</style> 

上記の「background: linear-gradient(-45deg, #F7FF00, #DB36A4 );」の部分を、先程コピーしておいたCSSに置き換えてください。
別途、「deg」の値で色の入り方の傾き、「15s」は変化時間の調整が可能です。
 
また、サンプルではclassを「.gradation」としています。
コンテナにclassを付与する際は、"."を除き「gradation」のみ記述してください。
 
bingo!CMSのコンテナに実装したイメージ1

実際に置き換えると、コンテナに設定したwidthに合わせてCSSが反映されます。
本当はGIF等で色の変化をお見せしたかったのですが、ジャギジャギになってしまい断念しました…。
ぜひご自身で試してみてください！
 
ウィンドウの幅いっぱいにグラデーションを反映させたい場合は、CSSを以下のように変更します。
 
<style type="text/css">
.gradation{
        background: linear-gradient(90deg, #00496c, #125876, #24677f, #377688, #4a8591, #5d949a, #72a3a3, #87b2ad);
        background-size: 400% 400% !important;
        animation: Gradient 15s ease infinite;
}
@keyframes Gradient {
        0% {background-position: 0% 50%}
        50% {background-position: 100% 50%}
        100% {background-position: 0% 50%}
}
</style>
bingo!CMSのコンテナに実装したイメージ2

どちらのパターンもほぼコピペなので、とっても簡単です。
テーマカラーをアピールしたいときなどに使ってみてはいかがでしょうか。
 
ちなみに、姉妹ページに「変化するグラデーションをつける方法：HTMLユニット編」もあります。
よかったらそちらもご参考ください。
 
以上、お役に立てば幸いです。
 
 
それでは！
 

アーカイブに関するご注意

この記事はbingo!CMS広報担当独自の見解を元に執筆しています。
また、記事公開時点での情報に基づいているため内容が最新でない場合があります。

ページトップ