色の設定

各ボックス毎に2種類の色を設定します。

  • 背景色
  • 強調色

全てのデザインがこの2つの色に連動し、色で様々な表現が可能です。

次の動画(34秒)を見ながら、実際にWebreakを操作し、

  1. 各ボックスへ色を設定する方法
  2. 背景色を設定する方法
  3. 強調色を設定する方法

の3つの動作を確認してください。

1. 各ボックスへ色を設定する方法

各ボックスの左にあるカラーボタンをクリックすると、指定したボックスの色を変更するための画面が表示されます。

color-btn

2. 背景色を設定する方法

カラー設定画面で、上部のタブが背景色になっている事を確認し、指定したい色をクリックして選択します。

3. 強調色を設定する方法

カラー設定画面で、上部のタブが強調色になっている事を確認し、指定したい色をクリックして選択します。

その他、補足説明

content3001で実際に色の使い方をチェック!

初期設定の場合

  • 背景色: recommend-white
  • 強調色: recommend-blue

color-ex-01

背景全体がになり、文字を囲う部分がになりました。

強調色を使用しない場合

  • 背景色: blue-600
  • 強調色: 強調色は使わない

color-ex-02

背景全体がになり、文字を囲う部分が濃い青になりました。このように、強調色を指定しない場合、自動的に良い感じの色が設定されます。

Webreak

ホームページ作成の「Webreak(ウェブレイク)」は制作費が無料で初心者でも自分でホームページを作ることができるWebサービスです。htmlやcssなどの専門知識不要で、ソフトをダウンロードする必要もありません。広島を拠点に開発をしています。

results matching ""

    No results matching ""