Menu
Coddy logo textTech

カラー

Coddyの「CSSプロジェクト - おしゃれなボタン」コースのレッスン 4/8。

背景色とテキストの色は、ボタンをスタイリングする際に最も重要な要素の1つです!

読みやすさのために色のコントラストに注意することが重要です。背景色が暗い場合は、テキストの色を明るくする必要があります。

暗い色の例:

  • 茶色

明るい色の例:

  • 黄色
  • ピンク
challenge icon

チャレンジ

簡単

タスク:

  • ボタンのテキストの色を white に設定してください
  • ボタンの背景色を暗い色に設定し、十分なコントラストがあることを確認してください!

ヒント:

(色を調整して)線形グラデーションの背景色を設定できます。

background: linear-gradient(rgb(6, 6, 209), rgb(46, 46, 219));

または、角度(例:45度)を指定することもできます。

background: linear-gradient(45deg, rgb(6, 6, 209), rgb(46, 46, 219));

自分で試してみよう

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="styles.css">
</head>
    <body>
        <!-- Write HTML code here -->
    </body>
</html>

CSSプロジェクト - おしゃれなボタンのすべてのレッスン