CSS入門:img画像のスタイルを整える方法

    • このページをはてなブックマークに追加

    公開日:2016年08月16日 最終更新日:2021年08月16日

    HTML入門:【タグ】~画像を表示させてみよう~」では、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="uft-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="寿司の写真1">
    		</div>
    	<h2>△△△寿司 (300×200)</h2>
    		<div>
    			<img src="img/sushi-600-400.gif" alt="寿司の写真1" class="image_size_m">
    		</div>
    </body>
    </html>

    ※サンプルの「css_img.html」をPC上に保存してどのように表示されるか見てみましょう。ファイルの保存形式はmetaタグにあわせて"uft-8"で保存します。CSSは外部ファイルとして保存することが推奨されています。例では分かりやすさを優先し、HTML文書内に埋め込んであります。

    「.image_size_mクラスセレクター」で画像の横幅(width)と高さ(height)を指定しています。こうすることで、もともとの画像のサイズを変更することなく、ブラウザーに半分の大きさで表示されるようになります。

    ●ブラウザーの表示

    css_img1

    ▲ページトップへ戻る

    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="寿司の写真1" class="image_50">
    		</div>
    	<h2>△△△寿司 (300×200)</h2>
    		<div>
    			<img src="img/sushi-600-400.gif" alt="寿司の写真1" class="image_size_m">
    		</div>
    </body>

    「.image_50クラスセレクター」で画像の横幅(width)を50%に指定していますが、こうすることでウィンドウのサイズに対して50%の比率で横幅を調整すると同時に、高さも同じ割合で調整されます。

    ●ブラウザーの表示

    css_img2

    ブラウザーのウィンドウのサイズを変更すると、画像のサイズも合わせて調整されます。

    css_img3

    ▲ページトップへ戻る

    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="寿司の写真1" class="image_size_m">
    		</div>
    	<h2>△△△寿司 (300×200)</h2>
    		<div class="image_c">
    			<img src="img/sushi-600-400.gif" alt="寿司の写真1" class="image_size_m">
    		</div>
    	<h2>△△△寿司 (300×200)</h2>
    		<div class="image_r">
    			<img src="img/sushi-600-400.gif" alt="寿司の写真1" class="image_size_m">
    		</div>
    </body>

    テキストの位置も調整できるプロパティですが、ブロック要素内の画像も「text-align」プロパティで調整できます。「.image_lセレクター」の値に"left"を指定し「左寄せ」、「.image_rセレクター」の値に"right"を指定し「右寄せ」、「.image_c セレクター」の値に"center"を指定し「中央」に画像を表示しています。

    css_img4

    画像配置の一例ですが、まずは実際にCSSを作成し、画像がどのように表示されるかを見て下さい。

    ▲ページトップへ戻る

    • このページをはてなブックマークに追加

    おすすめ記事

  • ピックアップ

    フリーランス

    【Vue.js/HTML/CSS/JavaScript】フロントエンドエンジニア★HR企業での人材管理プラットフォーム開発

    月額単価 :50万円〜60万円

    HRテックや医療テックなど様々な分野で活躍をしている企業内で新たに2つのシステム開発を行っており、一...

    フリーランス

    【Vue.js(Nuxt.js)/TypeScript/HTML/CSS】フロントエンドエンジニア★不動産業向けDX支援プラットフォーム開発他

    月額単価 :90万円〜

    同社は、不動産業界向けDX支援プラットフォームをはじめ、複数の自社プラットフォームを展開している企...

    フリーランス

    【JavaScript(TypeScript)/React/Vue/Angular】フロントエンドエンジニア★クラウド郵便受取サービスの開発

    会社に届く郵便や宅配物の官営をスマートにするSaaSを展開している企業内で、フロントエンド開発をご担...

    正社員

    【Go言語】リードエンジニア|生体認証システムの開発

    年収 :400万円〜

    Liquidでは顔認証による本人確認プラットフォーム「LIQUID eKYC」をリリースし、現在はeKYCの企業への導...

    株式会社Liquid