imgの画像サイズ指定情報タグ

ITリテラシー学習
ITリテラシー学習

Webサイトに画像を掲載する際、以下のhtmlをブラウザで表示した際に指定条件を満たすようサイズを変更する方法を説明します。

■指定条件
上記の画像サイズは実際は縦750px横750pxです。縦500px横500pxとして表示されるようにhtmlを
書き換えてください。(元の画像サイズに変更を加えず、htmlのコードで指定してください)

***に入る文字で横幅を制御します。 ***に入る文字を半角英字で入力してください
<img src=”https://menter.jp/c/images/menter500500.jpg” ***=”500px” height=”500px”>

模範解答

1  <!DOCTYPE html>
2
3  <html lang="en" dir="ltr">
4  <head>
5  <meta charset="utf-8">
6  <title>タイトルはこちら</title>
7  </head>
8  <body>
9  あいうえお
10  <br><img src="https://menter.jp/c/images/menter500500.jpg" width="500px" height="500px">
11
12  </body>
13   </html>
14

上記のように、htmlで画像を表示する際に、画像サイズは width=”” height=”” で指定することができます。

それでは、実際の手順に沿ってやっていきましょう!

imgの画像サイズ指定情報タグ

  • step1. htmlソースをコピー
  • step2. テキストエディタを開く
  • step3. htmlソースを貼り付ける
  • step4. htmlファイルとして保存(拡張子は .html)
  • step5. 該当ファイルをブラウザにドラッグ&ドロップすることで、その内容を閲覧することができる
  • step6. 指定条件の通り画像を表示するためにはwidth(横サイズ)とheight(縦サイズ)情報を入力します
  • step7. ファイルを保存する
  • step8. ブラウザで再度確認

画像の指定方法

指定できるサイズ記載方法は主に3種類です。

1. px(ピクセル) 指定

<br><img src="https://menter.jp/c/images/menter500500.jpg" width="500px" height="500px">

この場合は横500px、縦500pxで表示されます。

2. %(パーセント) 指定

<br><img src="https://menter.jp/c/images/menter500500.jpg" width="100%" height="50%">

この場合、横はこの画像が位置するdivエリア(下記で解説)における幅の50%、縦は100%で表示されます。

3. 指定なし

<br><img src="https://menter.jp/c/images/menter500500.jpg" >

画像のオリジナルサイズが適用されます。

divエリアとは

「div」とは、単体では特に意味を持たないタグですが、<div>で囲った部分をグループ化することができるタグです。 グループ化することで、背景色をまとめて指定したり、指定した範囲にデザインを適用したりすることができます。

例えば上記は%で各エリアの横幅を振り分けています。ブラウザの画面幅が1000pxになった場合、以下の通り変動します。
・div Aの横幅サイズ = 1000px
・div Bの横幅サイズ = 200px
・div Cの横幅サイズ = 800px
・div Dの横幅サイズ = 800px

ブラウザの画面幅を1200pxと大きくした場合は、以下の通り変動します。
・div Aの横幅サイズ = 1200px
・div Bの横幅サイズ = 240px
・div Cの横幅サイズ = 960px
・div Dの横幅サイズ = 960px

menter_logo

[転職希望者限定]
『MENTER PERSONAL』
3ヶ月間 0円キャンペーン!!

「MENTER PERSONAL (メンターパーソナル)」は、ITスキルを身につけることでこれまで未経験であった職種への転職、副業、独立、スキルアップを支援するサービスです。
転職希望者に限り3ヶ月間サービスを0円でご利用頂けるキャンペーンを実施中!

*教材/リモート面談/転職支援サービスを提供
*キャンペーン適用条件1:WHITE㈱の転職支援サービス利用
*キャンペーン適用条件2:期間内に指定カリキュラムの受講
*適用条件に満たない場合はサービス提供中断させて頂く場合がございます(料金請求することはありませんのでご安心ください)

店舗販売員、飲食業などオフィスワーク未経験から転職も。
サービス詳細や転職成功者のストーリーを‍見る
*お問い合わせ時に「ブログを見た」と備考欄に入力ください。

menter_logo

[法人向け]
文系DX人材育成なら『MENTER』

「うちの会社はITリテラシーが低い...」
「DXを行うには人材育成から始めなくては...」
「自動化やAI理解できる社員が増えたらな...」

デジタルに強い人材育成を行うオンライン学習サービス『MENTER』が、そんなお悩みを解決します!

・マンガで楽しくインターネットについて学習
・ショートカットキーからAIの設計まで
・大手企業の導入事例/成功事例あり
・DX人材育成について相談/事例集請求/無料トライアル/ITリテラシー無料診断可能

MENTER紹介ページを‍見る
お問い合わせは ‍こちら

ITスキルアップ相談室

コメント

タイトルとURLをコピーしました