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

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

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;
   	}
   

   ※HTML欄の<h1>〜</h1>の間は任意のタイトルに書き換えてください。
   ※CSS欄の#unit-●●●の●●●の部分はお使いの「HTMLユニットV17」のIDに書き換えてください。
2. 記述が終わったら入力内容を保存します。

1. HTML、CSSの記述が反映されました。
   適宜、プレビューページ等で表示をご確認ください。

※設定を保存しても何も反映されない場合は、ブラウザを再読み込みしてください。再読み込み後もグラデーションが動かない場合は、記述が間違っている可能性があります。記述内容に問題が無いかご確認ください。