変化するグラデーションをつける方法:HTMLユニット編

HTMLユニットを使用して変化するグラデーションを作ります。

bingo!CMS1.7搭載の「HTMLユニット」にHTMLとCSSを記述し、見出し1の背景に変化するグラデーションをつけました。
グラデーションの色数を増やしたり、色が入る角度を変えるなど、デザインに合わせて調整することもできます。

※上の表示サンプルは、幅100%のコンテナに「HTMLユニット」を配置し、HTMLとCSSを記述しています。

HTMLユニットの編集画面に入りましょう

  1. bingo!CMS管理画面にログインし、任意のページのページ編集画面を開きます。
     
  2. 画面上部のデザインユニットの一覧の中から、「HTMLユニット」をドラッグ&ドロップでコンテナに配置します。
     
  3. 「HTMLユニット」のユニット編集画面に入ります。


※サンプル画面のコンテナはページ幅1000px、中央寄せに設定されています。コンテナのレイアウトは任意で設定してください。

HTML、CSSを記述しましょう

 
  1. HTML欄、CSS欄にそれぞれ以下のように記述しました。ご希望のデザインに合わせて適宜変更してください。
     
    
    	【HTML】
    	<h1>HTMLユニットを使用して変化するグラデーションを作ります。</h1>
    	【CSS】
    	#unit-●●●{
    	    width: auto;
    	    height: 30vh;
    	    color: #fff;
    	    background: linear-gradient(-45deg, #F7FF00, #DB36A4);
    	    background-size: 400% 400%;
    	    animation: Gradient 5s ease infinite;
    	}
    
    	@keyframes Gradient {
    	    0% {background-position: 0% 50%}
    	    50% {background-position: 100% 50%}
    	    100% {background-position: 0% 50%}
    	}
    
    	h1 {
    	    font-family: 'sans-serif';
    	    font-weight: 300;
    	    text-align: center;
    	    position: absolute;
    	    top: 45%;
    	    right: 0;
    	    left: 0;
    	}
    	 
  2. 記述が終わったら入力内容を保存します。

    ※HTML欄の<h1>〜</h1>の間は任意のタイトルに書き換えてください。
    ※CSS欄の#unit-●●●の●●●の部分はお使いの「HTMLユニット」のIDに書き換えてください。

正しく記述できたか確認しましょう

  1. HTML、CSSの記述が反映されました。

※保存後、何も反映されない場合やグラデーションが動かない場合は記述が間違っている可能性があります。
記述内容をご確認ください。

ページトップ