【HTML】height属性とwidth属性で画像やiframeなどの表示領域を指定する方法

このページについて

このページではHTMLで使う事ができるheightとwidthの機能と使い方を解説しています。

heightは縦、widthは横のサイズをピクセル単位で指定できます。

そもそもピクセルって何って話ですが、これはコンピュータで色を扱うときの最小単位になります。簡単にいえばものすごく小さい点です。1920*1080の場合、横に1920個の点があり、縦に1080個の点があるという認識でOKです。

このピクセルを指定するheightとwidthですが、使用できるタグはcanvasタグ/iframeタグ/imgタグ/inputタグ/videoタグの5種類になります。

heightとwidthはそれぞれのタグで使用方法が若干異なりますが、大方の用途は同じです。

canvasタグで使う場合は、そのキャンバス全体の大きさを指定する時に使います。これはJavaScriptとの連携でお絵描きをするような時に使う目的もあれば、シンプルにグラフ的なものを表示したい時にも使えたりします。

<canvas id="can" width="200" height="1000"></canvas>

これで横200の縦1000のキャンバスができます。

iframeタグで使う場合はキャンバスと似通っていますがそのフレームの大きさを指定できます。

<iframe src="ソースURL" width="200" height="100"></iframe>

外部リソースの内容に合わせて縦横は設定しましょう。

imgタグとvideoタグで使う場合は、それぞれの表示する画像や動画のサイズを指定します。タップしたら拡大表示とか、そういう仕組みと併用すると良いかもしれません。

<img src="画像URL" width="300" height="300" alt="説明用テキスト">
<video width="320" height="240" controls>
中略
</video>

inputタグで使う場合は、type属性がimageの場合に限り使えます。このtype=”image”が何者かというと、送信ボタンを画像で表示するというだけのことです。

わかりやすいように誰も使わないであろう目に悪そうな送信ボタンがあったとします。これの大きさをwidthとheightで指定できるというわけです。

<form>
<inpiut type="image" src="画像URL" alt="送信ボタン" width="100" height="100">
</form>

一応送信ボタンとして設定しましたが、他の入力要素とかが無いのもあって不気味ですね。

widthとheightは画像や表示領域の大きさをピクセル単位で設定できます。それぞれの表示内容に合わせて設定するのがベストですが、サイトの作り方次第ではCSSやらで対処できてしまうことも多かったりします。そのあたりは色々と適した方法を考えてみましょう。