「HTML入門:【<img>タグ】～画像を表示させてみよう～」では、html文書内で画像を表示する方法を説明しました。本コラムでは画像のサイズや位置などのスタイルをCSSで調整する方法について解説します。
1. 画像のサイズを調整する
ウェブサイトに表示する画像のサイズ変更をしたい場合、元々の画像サイズを変更するという方法もありますが、CSSでサイズを指定することができます。
1.1 class属性でスタイルを指定する
「css_img.html」で具体的な記述例を見てゆきましょう。使用する画像の大きさは「600px × 400px」です。この画像の表示を「300px × 200px」にしてみましょう。
●css_img.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>CSS入門-画像スタイルの調整</title>
<style>
.image_size_m{
width: 300px;
height: 200px;
}
</style>
</head>
<body>
<h1>画像の表示</h1>
<h2>△△△寿司 (600×400)</h2>
<div>
<img src="img/sushi-600-400.gif" alt="CSS入門：img画像のスタイルを整える方法【フリーランスエンジニア案件情報 | プロエンジニア】">
</div>
<h2>△△△寿司 (300×200)</h2>
<div>
<img src="img/sushi-600-400.gif" alt="CSS入門：img画像のスタイルを整える方法【フリーランスエンジニア案件情報 | プロエンジニア】" class="image_size_m">
</div>
</body>
</html>※サンプルの「css_img.html」をPC上に保存してどのように表示されるか見てみましょう。ファイルの保存形式はmetaタグにあわせて"utf-8"で保存します。CSSは外部ファイルとして保存することが推奨されています。例では分かりやすさを優先し、HTML文書内に埋め込んであります。
「.image_size_mクラスセレクター」で画像の横幅(width)と高さ(height)を指定しています。こうすることで、もともとの画像のサイズを変更することなく、ブラウザーに半分の大きさで表示されるようになります。
●ブラウザーの表示
1.2 画像の比率をそのままでサイズを変更する
画像を特定のサイズに指定したい場合は、「widthプロパティ」と「heightプロパティ」で調整できますが、サイズを変更する際には、画像の縦横の比率も考慮してサイズ指定をしないと、リサイズ時に画像がくずれることがありますので注意が必要です。画像サイズをの実数値で指定するのではなく割合で指定すると、縦横の比率を保ったまま、大きくしたり小さくしたりすることができるので便利です。
●css_img.html
<style>
.image_50 {
width: 50%;
}
.image_size_m{
width: 300px;
height: 200px;
}
</style>
</head>
<body>
<h1>画像の表示</h1>
<h2>△△△寿司 (50%)</h2>
<div>
<img src="img/sushi-600-400.gif" alt="CSS入門：img画像のスタイルを整える方法【フリーランスエンジニア案件情報 | プロエンジニア】" class="image_50">
</div>
<h2>△△△寿司 (300×200)</h2>
<div>
<img src="img/sushi-600-400.gif" alt="CSS入門：img画像のスタイルを整える方法【フリーランスエンジニア案件情報 | プロエンジニア】" class="image_size_m">
</div>
</body>「.image_50クラスセレクター」で画像の横幅(width)を50%に指定していますが、こうすることでウィンドウのサイズに対して50%の比率で横幅を調整すると同時に、高さも同じ割合で調整されます。
●ブラウザーの表示
ブラウザーのウィンドウのサイズを変更すると、画像のサイズも合わせて調整されます。
2. 画像の位置を調整する
画像の位置は特に指定しないと左上に表示されますが、右よせやウィンドウの中央に表示することができます。
画像の位置は「divタグ」や「pタグ」などのブロック要素内に画像を配置して調整します。
●css_img.html
<style>
.image_size_m{
width: 300px;
height: 200px;
}
.image_l {
text-align: left;
}
.image_r {
text-align: right;
}
.image_c {
text-align: center;
}
</style>
</head>
<body>
<h1>画像の表示</h1>
<h2>△△△寿司 (300×200)</h2>
<div class="image_l">
<img src="img/sushi-600-400.gif" alt="CSS入門：img画像のスタイルを整える方法【フリーランスエンジニア案件情報 | プロエンジニア】" class="image_size_m">
</div>
<h2>△△△寿司 (300×200)</h2>
<div class="image_c">
<img src="img/sushi-600-400.gif" alt="CSS入門：img画像のスタイルを整える方法【フリーランスエンジニア案件情報 | プロエンジニア】" class="image_size_m">
</div>
<h2>△△△寿司 (300×200)</h2>
<div class="image_r">
<img src="img/sushi-600-400.gif" alt="CSS入門：img画像のスタイルを整える方法【フリーランスエンジニア案件情報 | プロエンジニア】" class="image_size_m">
</div>
</body>テキストの位置も調整できるプロパティですが、ブロック要素内の画像も「text-align」プロパティで調整できます。「.image_lセレクター」の値に"left"を指定し「左寄せ」、「.image_rセレクター」の値に"right"を指定し「右寄せ」、「.image_c セレクター」の値に"center"を指定し「中央」に画像を表示しています。
画像配置の一例ですが、まずは実際にCSSを作成し、画像がどのように表示されるかを見て下さい。
当サイトプロエンジニアのコンサルタントが厳選したおすすめのフリーランス案件特集はこちら
特集ページから案件への応募も可能です！
実際にフリーランスエンジニアとして活躍されている方のインタビューはこちら
