HTML入門トレーニング

色を制御する

全333コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
CSSを使って、色を制御する方法について学びます。
講師:
08:25

字幕

このレッスンでは CSS を使って 色を制御する方法について学びます 現在 コードエディターでサンプルファイルの HTML を開いているところです HTML の中にはいくつかのスタイルが すでに style 要素を使って 定義されています この中でまず一番最初にあるのは HTML 要素に対するスタイルです HTML は全体を html タグで囲っていました そのため CSS でも このように HTML 要素を指定することで HTML 全体に対して スタイルを定義することができます ここでは この HTML 全体に対して 背景色を設定してみましょう 背景色を設定するには background-color プロパティを使います 「background」 と 「color」 の間には ハイフン 「-」 が必要です そして値ですが ここでは 「#777」 と入力します カラーの値で 「#777」 これは一体何でしょうか これは 16 進数を使った 色の表記方法です 画面の上の色は 本質的に RGB Red Green Blue の 三色で定義されています そしてそれらは 0 から 255 の値 つまり 0 を含めた 256 段階で 表現され それぞれの 256 段階を掛けて 256 x 256 x 256 つまり とてつもない数の色を 指定することができます ここで指定しているのは その 16 進数の 簡略的な表記方法です 一つ目の 7 が RGB の R つまり 赤 二つ目の 7 が RGB の G グリーン 三つ目の 7 が RGB の B ブルーを表しています そして この 777 という表記は 実際には 「77 77 77」 という 2 つずつの数字をくっつけた数字 つまり 77 が R 77 が G 77 がブルーという表記を 簡略的に省略して 入力しているのが この 777 という表記です そのため 例えばこれは 「367」 という風に入力することもできます この表記の場合は 33 66 77 という本来の数字の簡略表記が 367 という表記になります 一旦 777 で保存して ブラウザーで表示してみましょう ブラウザーで見るとこのように ページの背景色がグレーに変わりました 一旦 コードに戻ります この HTML 要素の スタイルの指定の下には body 要素に対する指定があります この中では width 幅のプロパティを 70% に指定しています ここでも同じように 背景色を指定してみましょう 先ほどは background-color プロパティを使いましたが ここでは background プロパティを使います background プロパティは margin や font プロパティと 同じように ショートハンドプロパティと呼ばれる プロパティです 背景関連のプロパティを この一つのプロパティで 一括して指定することができます ここでは背景色だけを指定します そして 色の指定のしかたですが 上の方法とは違って 今度は 「white」 という文字列を 入力します CSS の色の値の指定では このように 16 進数を使った指定の他に 直接 色の名前を文字で入力して 指定する方法もあります ただし この方法については 指定できる色の数が非常に限られていますので あまり使えません 一旦 保存して ブラウザーを表示してみましょう リロードすると HTML 全体には グレーの 777 という値が そして内側の幅 70% の body 要素のエリアには 背景色が白に適用されています 色は背景色以外にも指定することができます コードエディターに戻って この body 要素に対して 今度は border 枠線を指定してみましょう ここでは 「border-bottom」 つまり下方向にだけ border 枠線を 表示してみます このborder-bottom についても ショートハンドプロパティで 様々なプロパティを一括で指定できます ここで指定するのは border の太さ これは 10 ピクセル そして border の種類 点線ですとか 実線ですとか そのような border の種類を 指定することができます ここでは実線を示す 「solid」 そして最後に色です ここでは先ほどと同じように 色の名前をこのように 直接 「gold」 と指定しました セーブしてブラウザーに切り替え リロードすると body 要素の下側に このように金色でラインが引かれていることが わかります 最後に見出しについても 背景色を設定してみます コードエディターに戻って その下にある h1 要素のスタイルに 背景色を追加してみましょう 先ほどと同じように background プロパティを使って 背景色を指定します 色の指定方法には これまでやってきた 16 進数の指定 色の名前の指定の他に RGB 関数を使った指定も使えます RGB 関数を使うには rgb と文字を入力した後 括弧の中に r の色の値 g の色の値 b の色の値を それぞれ 256 段階で指定します ここでは 44 45 140 と入力し 最後に 「;」 を入力します それぞれの色の値は カンマ 「,」 で区切ります そしてここで使える色の値の範囲は 0 から 255 までの 256 段階です 16 進数に比べると 比較的直感的に 色の値を設定できるかと思います さて これでコードを保存して ブラウザーで確認してみます そうすると見出しの背景色が 濃い青に変わっていることがわかります ここで背景色を指定したエリアは h1 見出しでした 見出しはブロックレベルとして 表示されますので このテキストのある部分だけではなく この行全体が 背景色として変更されます このままでは 見出しが少し読みづらいため 文字色も変更してみましょう コードエディターに戻って background プロパティの下に color プロパティを入力します ここでは 16 進数で ddd という値を入力します これは薄い灰色を示しています 16 進数ですので 0 から f までの値を指定することができます 保存して ブラウザーに切り替え リロードすると 文字色が変わっていることがわかります このように CSS では 文字色 背景色 あるいは枠線の色など 様々な箇所に色を適用することができます また色の値の指定のしかたは 16 進数や色の名前 RGB 関数を使った方法など 様々な方法があります このレッスンでは CSS を使って 色を制御する方法について学びました

HTML入門トレーニング

HTMLはWebページを作るうえでもっとも重要な言語です。これがきちんと定義されなければ、Webページは正しく表示されません。このコースではHTMLの成り立ちから基本的な構文の書き方、さまざまなタグの意味やその使い方まで幅広い内容を学ぶことができます。またHTMLと並んで重要な言語であるCSSやJavaScriptについても、それぞれその概要を説明します。

5時間43分 (48 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 3,990
発売日:2015年05月01日

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。