HTML/CSS入門編2:CSSの色指定を理解しよう

<!-- CSSの色指定 -->
<!DOCTYPE html>
<html lang="ja">

<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">

	<title>Project Nyaan</title>
	<!-- Bootstrap -->
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
	<style>
	body {
			padding: 30px;
		}
	</style>
</head>

<body>
	<h1>吾輩は猫である。</h1>
	<p class="lead">名前はまだない。</p>
	<a class="btn btn-primary" href="#">OK</a>

	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</body>

</html>

<!-- CSSの色指定 -->
<!DOCTYPE html>
<html lang="ja">

<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">

	<title>Project Nyaan</title>
	<!-- Bootstrap -->
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
	<style>
	body {
			padding: 30px;
		}
	</style>
</head>

<body>
	<h1>吾輩は猫である。</h1>
	<p class="lead">名前はまだない。</p>
	<a class="btn btn-primary" href="#">OK</a>

	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</body>

</html>

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>hello world</title>

    <!-- Bootstrap -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

    <style>
        body {
            padding: 30px;
        }
    </style>
</head>
<body>
    <h1>hello paiza</h1>
</body>
</html>

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>hello world</title>

    <!-- Bootstrap -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

    <style>
        body {
            padding: 30px;
        }
    </style>
</head>
<body>
    <h1>hello paiza</h1>
</body>
</html>

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>hello world</title>

    <!-- Bootstrap -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

    <style>
        body {
            padding: 30px;
            background-color: #D3D3D3;
        }
        /* この下に追記 */
    </style>
</head>

<body>
    <h1>hello paiza</h1>
    <p>hello html</p>
</body>

</html>

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>hello world</title>

    <!-- Bootstrap -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

    <style>
        body {
            padding: 30px;
            background-color: #D3D3D3;
        }
        /* この下に追記 */
    </style>
</head>

<body>
    <h1>hello paiza</h1>
    <p>hello html</p>
</body>

</html>

演習1
演習2

問題ログインすると模範解答や入力を見ることができます

演習課題「背景色を指定」

右側のコードエリアのhtmlは、「hello paiza」という見出しを表示します。
headタグ上のstyleタグにスタイルを追加して、bodyの背景色(background-color)を灰色(#D3D3D3)にしてください。

コードの実行をして、エラーが出なければ、演習課題クリアです！

期待する出力値

問題ログインすると模範解答や入力を見ることができます

演習課題「文字色の変更」

右側のコードエリアのhtmlは、「hello paiza」という見出しを表示します。
headタグ上のstyleタグにスタイルを追加して、見出し(h1タグ)の色を赤色(red)にしてください。

コードの実行をして、エラーが出なければ、演習課題クリアです！

期待する出力値

Tips

動画へ戻る

次のチャプターへ前のチャプターへ

＃02:CSSの色指定を理解しよう

ここでは、Webページの色を変えてみます。そのために、CSSの色指定について学習します。

色の指定方法

・色名で指定する

color: white;

・数値で指定する

赤色(00-ff)、緑色(00-ff)、青色(00-ff)の割合を指定します。
数値は、16進数で指定します。

color: #ff0000;

色を指定するプロパティ

・背景色

background-color: white;

・文字色

color: white;

カラーピッカー

調整した色の数値表現(カラーコード)を調べるには、次のカラーピッカーが利用できます。

- カラーピッカー
https://paiza-webapp.s3.amazonaws.com/files/learning/color-slider.html

参考になるWebサイト

カラーネーム140色－WEBカラーリファレンス
http://www.htmq.com/color/colorname.shtml

WEBセーフカラー216色－WEBカラーリファレンス
http://www.htmq.com/color/websafe216.shtml

プログラミング学習 > HTML/CSS入門編 > HTML/CSS入門編2: CSSの基礎を学ぼう > CSSの色指定を理解しよう

ログインすると採点できます

コードの実行

有料会員になるとエンジニアに質問ができます

出力タイプ：