htmlのimgタグを使わずに画像を表示させる方法とhtml,slim,css,scssでの記述方法

今日はどうしてimgタグで表示させられる画像をcssで表示させる必要があるのかということから、cssで表示させる方法までをお話しします。

どうしてcssで表示させるの？

htmlでimgタグを使って画像を表示させるにはaltタグで代替テキストを書くことが必須であったりと文字数を食ってしまいます。文字数が多くなると、htmlのデータが大きくなってしまって、それが積み重なると読み込むのに時間がかかってブラウザにページが表示されるのが遅くなってしまいます。
なので、文書としてなくても困らない画像は、cssで表示させるのが良さそうです。全てをcssで表示させない理由としては、代替テキストなどからwebページの内容を理解する人もいるからです。
それでは、本題であるcssでの表示方法をご紹介していきます。

htmlに画像を表示させたい場所をdivを使って記述する

今回の例は、webサイトのメインの画像を表示させる場合です。
ヘッダーの中のひとつの要素として表示させたいので、headerタグの小要素としてdivを入れ子にします。このdivのクラス名はわかりやすい名前でOKです。
このdivを記述した場所に画像が表示されます。

<header>
	<div class="main_img"></div>
</header>

header
	.main_img

表示させたい領域のwidth(横幅)とheight(縦幅)をCSSで記述する

.main_img {
	width: 100%;
	height: 480px;
}

.main_img {
	width: 100%;
	height: 480px;
}

指定した領域にbackgroundで画像を表示させる

urlの記述方法は相対パスがオススメです。もしも今ある大元のファイルが何か他のファイルの中に入れられたとしても、imagesファイルの中にある画像と他のhtmlなどのファイルとの構成は変わらないからです。

.main_img {
	width: 100%;
	height: 480px;
	background: url('../images/main_image.png');
}

.main_img {
	width: 100%;
	height: 480px;
	background: url('../images/main_image.png');
}

画像が表示されました！あれれー、指定された領域に収まる分しかうつっていないですね(>o<)
コードを書き足して、はみだした分の画像もきれいに画面幅に収まるように表示させてみます。

background-sizeを指定して表示される画像の領域を調整する

「background-size: cover;」を使って、画像のアスペクト比(縦横比)はそのままで、指定した背景領域をちゃんと覆う最小サイズになるように設定します。

.main_img {
	width: 100%;
	height: 480px;
	background: url('../images/main_image.png');
	background-size: cover;
}

.main_img {
	width: 100%;
	height: 480px;
	background: url('../images/main_image.png');
	background-size: cover;

}

横幅がぴったりになりました！ただ、表示領域からはみ出した部分が表示されていないせいで、ハリネズミのティミーの顔が見切れてしまっています。
表示領域のheightを変えたらハリネズミの顔が出てきますが、今回はheight480pxから変えたくないので、画像を少し上にずらして丁度いい位置にしてみたいと思います。

CSSのbackgroundで表示した画像をbackground-sizeを使ってずらす

「background-size: 20% 40%;」を設定して表示される画像を左から20%、上から40%ずらしたところから始まるように指定します。

.main_img {
	width: 100%;
	height: 480px;
	background: url('../images/main_image.png');
	background-size: cover;
	background-position: 20% 40%;
}

.main_img {
	width: 100%;
	height: 480px;
	background: url('../images/main_image.png');
	background-size: cover;
	background-position: 20% 40%;
}

やっと綺麗にずれましたー！！できあがりです！
%で指定する場合には横方向、縦方向の２つの数値を指定します。それ以外の指定方法だと、横方向はleft,center,right、縦方向はtop,middle,bottomとあって、それぞれ0%,50%,100%の位置から表示が開始されるようです(>ω<)

ウインドウサイズを変えて、調整してみる

▼ウインドウサイズを広げた時

▼ウインドウサイズを縮めた時

ウインドウサイズを変えると、表示領域はそのままに画像のアスペクト比が保持されたまま拡大・縮小されます。今回はどのウインドウサイズでも違和感がないのでこのままにしておきますが、もしも大きくした時に見せたい部分が隠れてしまったりしたときはbackground-positionの縦方向の値を調整してみてください。

※ウインドウサイズ分だけをスクリーンショットしたのでわかりにくいかもしれませんが、右上矢印の大きさでウインドウサイズを判断できます(>o<)矢印が大きければ大きい程ウインドウサイズは小さいです。

cssで表示させた方が良い画像

今回、「文書としてなくても困らない画像」はCSSで表示させるというお話をはじめにしました！具体的にどんなものがそれにあたるのかも一応紹介しておきます。

• アイコン画像
• 背景画像
• 飾り枠などデザインを目的とした画像