CSS

CSSのbackgroundとborderの基本的な使い方【図解】

どうも、つよぽんです!

今回はCSSでbackgroundとborderを使って背景色・背景画像をセットする方法、ボーダー(枠線)をつける方法を解説します。

今回の記事は次のような方に向けて書きました。

想定読者
  • CSSで背景に色をセットする方法がわからない方
  • CSSで背景画像をセットする方法、繰り返して使う方法がわからない方
  • CSSでボーダーを付けるやり方がわからない方
  • CSSのボーダーで用意されている種類を知りたい方

今回の記事は以下の学習コンテンツ記事内のスライドを詳しく解説した記事となります。以下の記事と合わせて読むことでより理解度を深めていただけるかと思います。

あわせて読みたい
CSSのbackgroundとborderを理解するCSSのbackgroundプロパティとborderプロパティの解説をします。backgroundプロパティを使うことで背景色や背景画像をセットすることが出来ます。borderを使うことで要素に枠線をつけることが可能です。ボーダーには様々なスタイルが用意されているのでどんな種類があるか理解しましょう。...

今回の内容は以下のとおりです。

今回の内容
  • CSSのbackgroundの使い方
  • CSSのborderの使い方

 

CSSのbackgroundの使い方

CSSで背景に色や画像をセットする方法は後ほど説明しますが、それぞれ大きく分けて2通りあります。

特に背景色に関してはWebページの体裁を整えるだけでなく、各要素がどのような形をとっているのか確認するのに便利です。(ブロックレベル要素インライン要素の確認など)

ブロックレベル要素、インライン要素については以下の記事で詳しく解説しているので、そちらを参照していただけたらと思います。

あわせて読みたい
HTMLのブロックレベルとインラインを理解するHTMLでWebページを作る上で理解しておくべき概念「ブロックレベル要素」「インライン要素」。「ブロックレベル」「インライン」について説明した後に、実際にサンプルコードを交えて体感的にもブロックレベルとインラインを理解していきます。...

背景色をセットする方法(background, background-color)

CSSで背景に色をセットする方法は次の2通りあります。

背景色をセットする2つの方法
  1. backgroundプロパティを使う
  2. background-colorプロパティを使う

下の画像の赤枠内では、上記で挙げた「background」「background-color」プロパティを使っています。

background又はbackground-colorで背景色をセットするbackground又はbackground-colorで背景色をセットする

コードが読みづらい場合は以下のリンクから直接コードと出力結果を確認することが出来ます。

どちらも使い方は同じで、プロパティの値に「英単語」「16進数表記」「関数記法」を使って色をセットするだけです。(上の画像の例では「#ff0000」のように16進数表記でセットしています。)

英単語」「16進数表記」「関数記法」を使った色の指定方法については以下の記事で詳しく解説しているので、そちらも参照していただけたらと思います。

あわせて読みたい
CSSで色コードを指定する3種類の方法【16進数・関数・英単語】CSSで色コードを指定する方法は複数種類あります。この記事ではその中でも使われることが多い3種類の色コードの指定方法を解説していきます。その3つは「英単語」「16進数表記」「関数記法」です。この記事で使い方を学習しましょう。...

背景画像をセットする方法(background, background-image)

CSSを使って背景に画像をセットするやり方は次の2通りあります。

背景色をセットする2つの方法
  1. backgroundプロパティを使う
  2. background-imageプロパティを使う

下の画像の赤枠内では、上記で挙げた「background」「background-image」プロパティを使っています。

background又はbackground-imageで背景画像をセットするbackground又はbackground-imageで背景画像をセットする

コードが読みづらい場合は以下のリンクから直接コードと出力結果を確認することが出来ます。

background」「background-image」プロパティの値に「url(‘画像URL’)」の形式でセットすることで背景に画像をセットすることが出来ます。(上の画像の赤枠内を参照)

background」「background-image」で異なる点は、画像をy軸(縦軸)x軸(横軸)に繰り返して使いたときになります。

上の画像でいうと、最初の画像(男性アイコン)はy軸(縦軸)に繰り返されていて、2つ目の画像(女性アイコン)はx軸(横軸)に繰り返されて使われているのがわかるかと思います。

コードを確認すると、「background」プロパティを使っている方は、「url(‘画像URL’)」のすぐ後ろに「repeat-y」という文字が書かれているのが確認できます。

この「repeat-y」をセットすることによって、y軸(縦軸)に画像が繰り返されるようになります。

反対に、「background-image」プロパティを使っている方は、「url(‘画像URL’)」のすぐ後ろに繰り返して使うことを表す「repeat-y」のような記述がありません。

そのかわりに、「background-image」プロパティとは別で、「background-repeat」プロパティというものを使っており、そのプロパティの値として「repeat-x」という文字がセットされています。

この「repeat-x」の文字によって、x軸(横軸)に画像が繰り返されるようになります。

CSSのborderの使い方

背景色で話したことの繰り返しになりますが、CSSでボーダーをセットすることも、Webページの体裁を整えるだけでなくデバッグにも役に立ちます。

ここでは、そんなデバッグにも役立つボーダーの使い方について解説します。

ボーダー(枠線)をセットする方法(border, border-width, border-color, border-style)

CSSでボーダーをセットする方法は大きく分けて2種類あります。

背景色をセットする2つの方法
  1. borderプロパティ1つでボーダーの「太さ」「スタイル」「色」をセットする方法
  2. border-width, border-color, border-style、合計3つのプロパティを使う方法

下の画像の赤枠内は上記のうちのやり方で実装、緑枠内のやり方でボーダーをセットした画像になります。

border, 又はborder-width, border-color, border-styleの組み合わせでボーダーをセットするborder, 又はborder-width, border-color, border-styleの組み合わせでボーダーをセットする

コードが読みづらい場合は以下のリンクから直接コードと出力結果を確認することが出来ます。

①も②もやっていることは全く同じで、上の画像の緑枠内のコードを見ると「border」プロパティ値に3つの値がセットされているのがわかります。

この3つの値は先頭から、

  1. border-width
  2. border-style
  3. border-color

を表しています。

borderプロパティを使ったほうが、文字数が少なく済み便利なので、基本的にはborderプロパティを使えば良いかなと思います。

用意されているボーダーの種類

ボーダーで用意されている種類は色々あり、下の画像はセットできるボーダーのスタイルの1例を表したものになります。

用意されているボーダーの種類1例用意されているボーダーの種類1例

コードが読みづらい場合は以下のリンクから直接コードと出力結果を確認することが出来ます。

上の画像ではボーダーの上下左右4辺のスタイルを全て同じものを使っていますが、4辺それぞれに異なるスタイルのボーダーをセットすることも出来ます。

詳細は以下のMDNのborder-styleのドキュメントを参考にすると良いでしょう。

MDN : border-style

まとめ

今回の話をまとめると次のとおりです。

今回のまとめ
  • CSSのbackgroundとborderはデバッグに便利
  • CSSのbackground, background-colorプロパティを使うと色がセットできる
  • CSSのbackground, background-imageプロパティを使うと画像がセットできる
  • CSSのborder-width, border-style, border-colorの3つのプロパティは、borderプロパティを使うことで一括でセットできる
  • CSSのボーダーは上下左右の4辺それぞれに異なるスタイルをセットすることが出来る

今回の内容は以下の記事内のスライドの補足資料として作成しました。スライドの全部を確認したい方は以下の記事も参照して頂けたらと思います。

あわせて読みたい
CSSのbackgroundとborderを理解するCSSのbackgroundプロパティとborderプロパティの解説をします。backgroundプロパティを使うことで背景色や背景画像をセットすることが出来ます。borderを使うことで要素に枠線をつけることが可能です。ボーダーには様々なスタイルが用意されているのでどんな種類があるか理解しましょう。...
【3つの特典付き】Webエンジニアに必要な基礎スキルを体系的に効率良く身につけたいですか?

LINE登録で無料特典を受け取る

次のような方向けに、学習をサポートするコンテンツを無料プレゼントしています。

  • Webエンジニアになりたいけど何から学習を始めれば良いかわからない
  • 今まで独学で頑張ってきたけど、独学に限界を感じてきた
  • プログラミングは出来るけど、大きめのコードが書けない

「プレゼント詳細が知りたい」「プレゼントを受け取りたい」といった方は、以下のボタンをクリックして詳細ページをご確認ください。

無料特典を受け取る

 

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です