background-imageの使い方、imgタグの使い方【画像の使い分け】

一般的な背景画像はCSSで画像パスを指定することで表示できます｡

div{
  // 画像パス
  background-image: url(../img/apple.jpg);
}

ただ､ホームページの読み込みに一番負荷をかけるのは画像ファイルなので､CSSできることはCSSを使って表現させるほうがいいです｡
グラデーションや影のようなデザインも以前は画像しか表現できませんでしたが､現在ではCSSで十分表現できます｡

具体的な使用例

• 背景画像
• アイコン画像
• 装飾画像

background-imageで画像表示するときの特徴

基本的にはどんなタグにも指定できますが､サイズが指定されているか､テキストなどで実際のサイズがある必要があります｡(サイズ指定のない空要素では表示されません)

background-image以外の､backgroundのCSSを指定することにより､繰り返し表示などをすることができます｡

画像繰り返し表示の指定

div{
  //繰り返し(デフォルト)
  background-repeat: repeat;

  //繰り返しさせない
  background-repeat: no-repeat;
}

画像位置の指定

div{
  // 横中央　縦中央
  background-position: center center;

  // 横右　縦上
  background-position: right top;

  // 横左　縦下
  background-position: left bottom;
}

画像のサイズを指定する

div{
  // 背景画像サイズを指定
  background-size: 100px 100px;

  // 表示エリア全体が埋まる最小画像サイズに指定
  background-size: cover;

  // 画像の比率を維持して表示エリアに入る最大画像サイズを指定
  background-size: contain;
}

背景(background)についてはこちらの記事で解説しています｡

装飾､アイコンは単純に背景として使うよりも疑似要素:before､:afterに指定したほうがいいです｡

imgタグで画像を指定する場合は､CSSを使わなくても表示させることができますす｡
figureタグにいれられるものは「img」という考え方でもいいです｡

imgのalt属性に何を入れるか考えたときに､「文章の流れ上､意味わからないな」と感じるものは､imgに適していないと思います｡

例えば､alt属性に「装飾」としか書けない場合は､imgタグに適していないといえます｡

<img src="img/pattern.jpg" width="320" height="240" alt="装飾">

具体的な使用例

• 投稿のサムネイル画像
• 商品紹介の画像
• 人物紹介の画像

imgで画像表示するときの特徴

imgタグのsrc属性に画像ファイルのパスを記述することで画像が表示されます｡

CSSのobject-fitを使うと､表示エリアに合わせたトリミングや拡大をすることができます｡

<img src="img/apple.jpg" width="320" height="240" alt="りんご">

りんご

ビジネスマン

ロゴとかは少し考え方が違うかもしれませんが､単なる装飾ではないという認識でimgにします｡

object-fitについては､以下の記事で紹介しています｡