2019/06/13)CSSで背景の色を変えたり、背景に画像を設定する方法を解説します。背景色を変えるにはbackground-colorプロパティを使います。カラーコードまたはカラーネーム;値にはカラーコードやカラーネームが入ります。文字色はサイトの読みやすさや、第一印象に大きく関わる重要なプロパティです。読みにくい文字色は無意識に避けられてしまい、コンテンツが読まれる確率が下がるので、しっかりと読みやすい文字色を指定しましょう。[...]初期値にはtransparentが指定されています。transparentを指定された背景は透明になるため、親要素の背景が透けるようになります。全ての親要素に背景色がない場合、白になります。実際の例を見てみましょう。}ワンダフルなアンダスタンドdivに背景色を設定しているため、背景が赤くなるのが確認できます。文字の部分の背景色を変えたければ、pにスタイルを設定しましょう。}ワンダフルなアンダスタンド文字の背景色が青になりましたね。文字に背景色を設定する場合は、読みづらくならないように、文字色にも気をつけましょう。背景に画像を表示するにはbackground-imageプロパティを使います。url("画像のパス");画像のパスには、画像ファイルの場所を指定します。絶対パスでも相対パスでも構いません。相対パスの場合は、CSSファイルからの相対パスを指定する必要がありますindex.htmlからの相対パスではないので注意しましょう。実際の例を見てみましょう。id="demo50-2">この文章はダミーです。確認するために入れています。この文章はダミーです。確認するために入れています。この文章はダミーです。}この文章はダミーです。確認するために入れています。この文章はダミーです。確認するために入れています。この文章はダミーです。背景に画像が表示されましたね。背景画像が小さい場合は繰り返されます。左上を基準として表示されます。どちらもCSSで後から変更できます。背景画像のオプション背景画像はいろんなオプションを設定することができます。ここでは代表的な4つを覚えましょう。background-clipなどのプロパティもありますが、あまり使うことがないので、ここでは説明を省きます。背景画像の繰り返しの方法を設定するには、background-repeatプロパティを使用します。繰り返しの指定;指定する値には以下のようなものがあります。repeatの値repeat全方向にリピートして表示します。repeat-xX方向、つまり横方向にだけリピートします。repeat-yY方向、つまり縦方向にだけリピートします。no-repeatリピートはしません。デフォルトではrepeatになっているので、縦横にリピートされます。リピートさせたくない場合はno-repeatに設定しましょう。}repeatの場合repeat-xの場合repeat-yの場合no-repeatの場合それぞれのパターンを設定した要素を用意しました。このように、background-repeatを使うことでリピートの方法を指定できます。背景画像のサイズを調整するには、background-sizeプロパティを使用します。サイズ;サイズには、キーワードで指定するパターンと、数値で指定するパターンがあります。ここにタイトルauto初期値です。初期値はautoになります。背景画像は元のサイズで表示されます。背景画像の縦横比は保持しつつ、横幅と高さの両方が収まるサイズになるので、領域内に背景画像が少なくても1つは表示されるようになります。リピートが設定されていればリピートされます。}背景画像を全部見せたい場合に使う良いでしょう。背景画像の縦横比は保持しつつ、要素を全体を覆い尽くすように表示します。}背景を画像で埋め尽くしたいときに使うと良いでしょう。指定した大きさで表示されます。1つ目の値は背景画像の横幅、2つ目の値は背景画像の高さになります。}2つ指定すると画像の縦横比が変わる可能性があるので注意が必要です。1つだけ指定した場合はその値が横幅になり、高さは縦横比を保持して自動的にリサイズされます。}数値と一緒にautoを指定することも出来ます。autoを指定すると、縦横比を維持してリサイズされるので、横幅だけ、もしくは高さだけを指定したいという場合に便利です。}基本的には数値(px・em)で指定した場合と同じです。違うのは、要素にたいしての割合になる点です。1つ目の値は要素の横幅に対しての割合、2つ目の値は要素の高さに対しての割合となります。背景画像の位置を調整するにはbackground-positionプロパティを使います。縦の位置;1つ目の値で横の位置を、2つ目の値で縦の位置を指定します。キーワードで位置を指定するか、数値で直接指定します。1つだけ指定した場合はもう一方はcenterとみなされます。実際の例を見てみましょう。bottomの場合centerの場合rightの場合1つめはleftとbottomを指定しているので、左・下から背景が適用されています。2つめはcenterを1つだけ指定しています。省略されたほうはcenterになるので、縦横ともに中央から表示されています。3つめはrightを1つだけ設定しています。省略されたほうはcenterになるので、背景が右・中から表示されています。}1つめは10pxを指定しています。省略されたほうはcenterになるので、横は左上から10px、縦は中央に表示されています。2つめは50pxと100pxを指定しているので、左上から横50px、縦100pxの位置に表示されています。数値とキーワードをミックスして指定することも出来ます。}上記の例の場合、横は左上から50pxの位置、上下は底辺に表示されています。50%」では真ん中表示となるような割合で計算されて表示されます。背景画像のスクロール設定background-attachmentプロパティを使うことで、背景をスクロールさせるか、固定させるか指定することが出来ます。下記のような値を取ります。背景画像のスクロールscroll初期値です。背景画像は固定されずスクロールさせます。fixed背景画像が固定されます。実例を見てみましょう。}fixedにされた方は、背景が固定されているため、画面をスクロールしていくと表示される場所が変わっていきますね。応用編!backgroundのショートハンド背景を設定するためのプロパティがいくつも出てきましたが、backgroundプロパティを使うことで1行でまとめて書くことが出来ます。このように一つにまとめて書くことをショートハンドとよんでいます。背景のショートハンドは以下のように書きます。-originの指定;このようにいままで解説してきたプロパティをすべて1行で指定することが出来ます。特徴としては以下のようなものがあるので使う際は注意しましょう。どの順序で指定してもよい必要ない指定は省略可能(※ただし省略した場合は初期値を設定したことになる)backgroundsizeプロパティはbackgroundpositionプロパティの後に「/」で区切って指定する実際にやってみましょう。}このような記述をショートハンドを使えば下記のように省略できます。}ショートハンドをうまく使えば、長くなりがちなCSSの記述をスッキリと書くことができます。マスターすれば時間の節約にもなるので、是非チャレンジしてみてください。まとめ背景色を変えるにはbackground-colorプロパティを使う背景に画像を表示するにはbackground-imageプロパティを使う背景画像の繰り返しの方法を設定するには、background-repeatプロパティを使う背景画像のサイズを調整するには、background-sizeプロパティを使う背景画像の位置を調整するにはbackground-positionプロパティを使うbackground-attachmentプロパティを使うことで、背景をスクロールさせるか、固定させるか指定することが出来るbackgroundプロパティを使うことで1行でまとめて書くことが出来るすずりデザイナー/フロントエンド/アフィリエイタープログラマーを経てWEBデザイナーになりました。現在は主にBtoCのサイトをデザイン・制作しつつ、情報発信についての知識を発信しています。autoの違いを解説html&CSS入門すずりデザイナー/フロントエンド/アフィリエイタープログラマーを経てWEBデザイナーになりました。現在は主にBtoCのサイトをデザイン・制作しつつ、情報発信についての知識を発信しています。