コース: CSS 基本講座

今すぐコースを受講しましょう

今すぐ登録して、23,200件以上登録されている、業界エキスパート指導のコースを受講しましょう。

色の基本的設定

色の基本的設定 - CSSのチュートリアル

コース: CSS 基本講座

色の基本的設定

このレッスンでは 色の基本的な設定についてご説明をします。 現在のパーソナルコンピューターでは カラーは「24ビット」「約1,670万色」 で表示することができます。 そのカラーの指定というのは CSSではいろいろあるんですが、 その中で最も基本となるのは こちらの2つです。 「カラー名」「キーワード」で指定する という方法ですね。 もうひとつは「16進数カラー」 で指定をすると。 その場合には「ハッシュ」「#」で始まる 「16進数6桁」で定めます。 まずはカラー名、使ってみましょうか。 カラー名を、では h1 と h3 に 同じカラーを指定したいと思います。 ということですので セレクタ、複数ですね。 複数セレクタの形でセレクタリスト。 h3 ということにしまして color は blue と 最近のエディタでしたら このようにカラーのキーワード、 リストが表示されると思いますので 比較的ミスなく入力することができます。 これで blue ということで確認しましょう。 ファイルを保存します。 h1とh3がブルーになりました。 他にどんなキーワードが あるかということなんですが、 今「MDN」の <color> というページを開いています。 これは「CSS」の中の スタイルシートですね。 「カスケーディングスタイルシート」の中の <color>というページなんですが、 「<color>データ型」についての説明 ということになっています。 ここをちょっとスクロールしてみまして、 そうすると「色キーワード」。 これがカラー名とかカラーネームとか カラーキーワード、色キーワード、 いろいろ言い方がありますけれども、 検索をしてみればいろいろ見つかると 思いますけれども、 まず代表的なものが この辺に上がっていますが、 さらにスクロールをすると、 このように非常に長い カラー名が表示されます。 ここから見てもいいでしょうし、 サイトによっては ブルーとかレッドとかグリーンとか 傾向ごとに分けて 表示しているというものもありますので、 もし興味があったらそういったサイトを 検索してみるといいと思います。 もうひとつは16進数カラーですね。 ではこちらは h1 の方に ボーダーを加えましょう。 border で 2px そして solid で…

目次