皆さんは、CSSから画像を操作する方法を知っていますか？HTML上にimgタグで画像を表示する以外にも、CSSを使って画像を表示する方法や、表示した画像の見え方を変える方法がいくつかあります。
画像は見やすさ・アプリの使いやすさに直結するため、CSSから操作する方法を覚えておくと便利です！そこで今回は、
- CSSから画像を表示する方法とは？
- CSSから画像のサイズ・位置・透過を設定する方法
- CSSで画像を横並びで表示する方法とは？
といったように、基礎的なことから応用的な方法まで、徹底的に解説します！
CSSから画像を表示する方法とは？
まず、CSSから画像を表示する方法について解説します。CSSでは、背景画像を設定するプロパティbackground-imageを使って、簡単に画像を表示することができます。
サンプルコード – HTML：
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>CSS 画像 サンプル</title>
<link rel="stylesheet" href="main.CSS">
</head>
<body>
<h2>CSSから画像の表示</h2>
<div class="disp-img"></div>
</body>
</html>
サンプルコード – CSS：
.disp-img{
background-image:url(../img.jpg); /* 画像のURLを指定 */
background-repeat: no-repeat; /* 画像の繰り返しを指定 */
width:auto; /* 横幅のサイズを指定 */
height:400pX; /* 縦幅のサイズを指定 */
}
実行結果：
- 「background-image:url(../img.jpg)」 ⇒ 背景画像を指定
- 「background-repeat: no-repeat」 ⇒ 画像の繰り返し処理をなしに指定
- 「width・height」 ⇒ 画像のサイズを指定
して、背景画像を表示しています。背景画像を表示するときは、この3つは必ず使うので、セットで覚えるのがおすすめです！backgroud-image、background-repeatを含めた背景画像の設定方法については、以下で詳しく解説しています。
気になる方は見てみてくださいね！
CSSから画像のスタイルを変更する方法
次に、CSSから画像のスタイルを変更する方法について解説します。
サイズ変更
まず、サイズ変更方法について解説します。
さきほどwidth、heightで画像のサイズを変更できるとお伝えしましたが、サイズを直接指定するのではなく画面幅いっぱいに表示したり、画面全体から割合を指定して表示したいといったケースもあるのではないでしょうか。
そんな時におすすめなのが、background-sizeプロパティです。background-sizeプロパティを使えば、次のように画面幅いっぱいに画像を表示することもできます。
サンプルコード – HTML
<!DOCTYPE HTML>
<HTML lang="ja">
<head>
<meta charset="UTF-8">
<title>背景画像サイズサンプル</title>
<link rel="stylesheet" href="main.CSS">
</head>
<body>
<h2>背景画像サイズ指定サンプル</h2>
<div class="full-img">
</div>
</body>
</HTML>
サンプルコード – CSS
.full-img{
background-image:url(../img_sample.jpg); /* 画像のURLを指定 */
background-size:contain; /* 画像のサイズを指定 */
width:100%; /* 横幅のサイズを指定 */
height:400px; /* 縦幅のサイズを指定 */
}
実行結果：
サービス紹介ページや、トップページなどでよく使う方法なので、覚えておくと便利です！background-sizeプロパティの詳しい使い方は以下で解説しているので、気になる方は見てみて下さいね！
トリミング
次に、画像をトリミング表示する方法を解説します。一部ピックアップして表示したい場合などに、便利です！使い方はとても簡単で、さきほどのサンプルに「object-fit: cover;」を入れるだけです。
サンプルコード – HTML：
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>CSS 画像 表示サンプル</title>
<link rel="stylesheet" href="main.CSS">
</head>
<body>
<h2>背景画像表示 - トリミング</h2>
<div class="disp-img-trimming"></div>
</body>
</html>
サンプルコード – CSS：
.disp-img-trimming{
background-image:url(../img.jpg); /* 画像のURLを指定 */
background-repeat: no-repeat; /* 画像の繰り返しを指定 */
width:200px; /* 横幅のサイズを指定 */
height:300pX; /* 縦幅のサイズを指定 */
object-fit: cover; /* 指定サイズでトリミング */
}
実行結果：
このように、簡単に画像の一部を切り取ることができます。また、このサンプルでは解説していませんが、potisionプロパティを駆使すれば位置を指定してトリミングすることも可能です！
CSSでpotisionプロパティを使いこなす方法については、以下がおすすめです！
位置指定
次に、画像の位置指定方法について解説します。背景画像の表示位置を設定する場合は、background-positionプロパティを使います。background-positionプロパティは、背景画像の位置を調整することができるプロパティです。
使い方：
background-position: 横の位置 縦の位置;
サンプルコード – HTML：
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>CSS 画像 表示サンプル</title>
<link rel="stylesheet" href="main.CSS">
</head>
<body>
<h2>背景画像表示 - 中央表示</h2>
<div class="disp-img-center"></div>
</body>
</html>
サンプルコード – CSS：
.disp-img-center{
background-image:url(../img.jpg); /* 画像のURLを指定 */
background-repeat: no-repeat; /* 画像の繰り返しを指定 */
background-position: center center; /* 画像の横・縦の位置を指定*/
width:auto; /* 横幅のサイズを指定 */
height:400pX; /* 縦幅のサイズを指定 */
}
実行結果：
「background-position: center center」で横位置・縦位置ともに中央に設定しているため、画像が中央表示されていますよね。このように、簡単に位置を指定して表示することができます。
ちなみに、htmlのimgタグを使った画像の位置を指定する方法について知りたい方は、以下がおすすめです！
透明度の指定
次に、画像の透過(透明度)を指定する方法について解説します。opacityプロパティを使えば、簡単に画像の透明度を指定することができます。
使い方：
opacity: 数値;
数値に0を入れると完全透明になり、0.5だと半分透明になります。数字が低いほど透明度が上がると覚えておけばOKですね。
サンプルコード – HTML：
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>css 画像 表示サンプル</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<h2>背景画像表示 - 透過サンプル</h2>
<div class="disp-img-opacity"></div>
</body>
</html>
サンプルコード – CSS：
.disp-img-opacity{
background-image:url(../img.jpg); /* 画像のURLを指定 */
background-repeat: no-repeat; /* 画像の繰り返しを指定 */
opacity:0.3; /* 透明度を指定 */
width:auto; /* 横幅のサイズを指定 */
height:400pX; /* 縦幅のサイズを指定 */
}
実行結果：
このように、簡単に画像の透過を設定することができます。opacityプロパティの詳しい使い方については、以下で詳しく解説しています！
CSSで画像を横並びに表示する方法とは？
ここまでCSSで背景画像を表示する方法、表示した画像のスタイルを変える方法などについて解説してきました。ただ、画像は1つのみで使うケースは少なく、複数の画像を同時に表示するケースも多いですよね。
なかでも、画像を横並びで表示するケースはとても多いです。そのため、合わせて横並びにする方法を覚えておくと便利です！
最近のトレンドとしてはflexboxの使い方を覚えておこうと便利なのですが、概念的に少し難しいため、シンプルに横並びするfloatプロパティ、flexboxを使った横並び方法それぞれ解説している記事をご紹介します！
横並びをマスターすれば画像を使う時とても楽になるので、ぜひ見てみてくださいね！
ウェブサイト制作スキルで自由に働けるようになりたい人は
CSS、HTMLはウェブサイトを製作する上で最も基本的な要素なので、最低限身につけておきたい言語ではあります。ただ、よりクオリティの高いWEBサイトを作成したり、高単価の案件などを獲得していきたいと考えた場合、他のプログラミング言語も一緒に身に付ける事をオススメします。
例えばJavaScriptを習得できればWEBサイトに多彩な動きをつけられますし、Photoshopを覚えると様々な画像編集ができます。そしてHTMLやCSSと掛け合わせる事で圧倒的に仕事獲得にも繋げやすくなります。
セットで学ぶと良い言語は他にもたくさんあります。より詳しく知りたい方は、まず「プログラミング言語無料診断」を使ってみてください。あなたにぴったりのプログラミング言語を無料で診断することができます。
また、フリーランスとして仕事を獲得していく事も視野に入れている人は、プログラミングスクールを利用する事も検討するといいでしょう。
弊社侍エンジニアでは、あなただけのフルオーダーメイド学習カリキュラムを作成し、現役エンジニアがマンツーマンでレッスン致します。更に、フリーランスとして仕事を獲得するサポートもさせて頂いています。
その結果、弊社を受講している間にクラウドソーシングからお仕事を受注して授業中で納品まで行い、エンジニアデビューをした方もいらっしゃいます。
少しでも興味を持った方は、まずはお気軽に弊社の無料カウンセリングを利用してみてください。
入会する、しないに関わらず、業界随一のコンサルタントがあなたの目標をヒアリングし、ぴったりの学習プランを提供させて頂きます。下記ボタンから直接予約が可能となっています。オンライン利用もできますので、是非お試しください！
まとめ
今回は、CSSで画像を表示する方法、表示した画像の設定を変える方法を解説しました。Web画面を作るときは、画像を使うケースが圧倒的に多いです。使い方も簡単なので、ぜひ使ってみてくださいね！
