ログイン
問題5

heightとwidthで画像サイズを指定しよう

heightとwidthとは、そのままの意味で横幅(width)と高さ(height)を指定するために用意されたHTMLの属性です。heightとwidthはCSSで扱うイメージを持っていると思いますが、HTMLでも、表やフレーム、画像などを調整するための属性として用意されています。

アイコン画像

本のアイコンheight属性、width属性とは

height属性は、主に画像などの高さを設定するのために用意されたHTMLのタグです。いくつかの要素に使用することができる属性ですが、非推奨とされている要素が多いため、imgタグを中心に使用すればOKです。
wdth属性は要素の幅を設定するために使用される属性です。

指定するには、どちらも属性値にpxや%などの単位を使って指定します。

HTMLの問題に挑戦しよう!

以下の問題に挑戦し、実際に手を動かして学習していきましょう。
無事に問題が解けて理解できれば、HTMLマスターへの第一歩となるでしょう。

問題5:heightとwidthで画像サイズを指定しよう

heightとwidthを使用して表示する画像のサイズを指定しましょう。

縦幅を600、横幅を1000で指定してください。

エディターのアイコンあらかじめエディタに書くコード

                <img src="https://ninjacode.work/assets/img/kv.png" alt="忍者CODEの画像">
¥HTML¥
              

ブラウザのアイコン期待する画面

解答の見本画像

タグアイコン解答ソースコード

              <img src="https://ninjacode.work/assets/img/kv.png" alt="忍者CODEの画像" height="600" width="1000">
¥HTML¥
            

コメントのアイコン解説

widthは画像の横幅を指定し、heightは画像の高さを指定します。
単位は省略されますが、実際には、「px」と同様の表示サイズで指定されます。

今回はwidthの値を1000、heightの値を600で設定すればOKです。
ログインして解答を見る

コメントのアイコン補足

画像のサイズを指定する場合は縦横比率を考えて指定するようにしましょう。
縦横比率を無視して画像サイズを指定すると画像は粗く表示されたり歪んでしまうことがあります。
数値の設定には注意しましょう。

画像サイズの指定に悩んだ場合は、どちらか片方だけを指定しましょう。
widthとheightどちらか片方のみ指定した場合は自動的に縦横比率を
考慮したなりゆきのサイズになります。コチラは活用できそうですね!
HTMLを学ぶなら現役エンジニア監修「甲賀コース」
キャンペーン

閉じる