CSSで背景画像・背景色を設定するには？backgroundプロパティの使い方

色の設定方法について

背景色に使う色の種類を指定するにはいくつかの方法があります。カラーネーム、カラーコード、RGBのいずれかを指定します。中でもカラーネームはもっとも簡単な指定であり、ブラックやホワイトなどの定番色の指定に便利です。たとえば、以下のようになります。

background-color: black;

また、カラーコードはご存知の方も多いと思いますが、16進数のカラーコードを用います。ブラックなら#000000となり、ホワイトなら#FFFFFFとなります。カラーコードの表を見てみるのも楽しいです。また、RGBで指定する場合は、R、G、Bのそれぞれの数値を指定します。描画ツールなどでご存知の方もいることでしょう。

ホームページの印象を左右する！「カラーコード」の見方や確認方法を解説

ホームページ上では様々な色がカラーが使用されており、カラーによってホームページの印象はおおきく変化します。ホームページで色を指定するときに使われているのがカラーコードです。今回はカラーコードの概要や意味、便利なツールについてご紹介します。

背景設定はCSSの基本

背景画像と背景色の設定は、ホームページ制作について勉強すると序盤に登場する基本的なステップです。ソースコードの具体的な記述方法だけではなく、CSSの書き方をシンプルに学ぶための良い機会にもなるはずです。

また、こういった基本的な内容をしっかり把握した上で、画像や色を巧みにチョイスし、レイアウトが上手にできれば、決して難しい作業を行わなくてもセンスの良いデザインができることでしょう。まずはいろいろなパターンを試してみて、基本からじっくりCSSに向き合ってみてはいかがでしょうか。ひたすら練習あるのみですので、積極的にトライしてみましょう。

もっとCSSを学びたい

CSSでプログラミング？圧倒的にデザインが便利になる「CSSカスタムプロパティ」入門

今回は、圧倒的にデザインが便利になる「CSSカスタムプロパティ」についての基本的な使い方を解説します。 プリプロセッサーを使う時のようにコンパイルを行う必要もなく、新しく文法を覚える必要もありません。

CSSの余白調整、余白指定法

CSSの勉強をスタートすると序盤に登場するのがmarginやpaddingといった余白の指定方法です。CSSの中では初歩的な部分とはいえ、勉強をはじめてまもない頃では混乱しやすい部分の一つとも言えるのではないでしょうか。しかし、余白を自由にコントロールできることで得られるメリットはとても大きいので、苦手を乗り越え、ぜひマスターしておきたいところです。そこで、今回はCSSの余白調整にスポットをあててご説明します。