【HTML】画像の貼り付け - とある科学の備忘録

前回、複数のタグを使って、簡単な文書を作成しました。

しかし、まだ文字しかありません。画像を文章中に張り付けることはできないのでしょうか？

答え：できます。（というかできなかったらこんな記事は書かない）

では、まず画像の張り付け方から紹介します。

画像をHTML文書上に表示する
- 下準備
- プログラム
2. ファイル名が間違っていたときのための処理
画像の大きさ変更
- ピクセルで大きさ指定
- パーセントで大きさ指定

画像をHTML文書上に表示する

画像を張り付けるにも、それ専用のタグがあります。それは、imgタグです。

下準備

例えば、このWindows10の画像を表示してみます。
f:id:pythonjacascript:20180902111629p:plain:h350
そのために、この画像をHTMLファイルとおなじ場所に保存してください。

ファイル名は何でもいいです。

プログラム

このように書きます。

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>サンプルプログラム</title>
</head>
<body>
    <p>この下に画像が表示されます。</p>
    <img src ="sample.png" />
    <p>この上に画像が表示されます。</p>
</body>
</html>

上のプログラムで「sample.png」となっている部分は、写真のファイル名 + 拡張子 に変更してください。
このように、＜img src = "ファイル名" \> と書くことで、画像を張り付けることができます。
実行結果：
f:id:pythonjacascript:20180902112642p:plain:h350

2. ファイル名が間違っていたときのための処理

もし、上のファイル名（sample.png）が間違っていると、写真が正しく読み込まれません。ファイル名が正しくても、拡張子が違うだけでアウトです。
例えば、「sample.png」を「sampl.png」（eが抜けている）にして実行してみてください。
f:id:pythonjacascript:20180902112747p:plain
このように、本来画像が表示されるべき場所に、バツ印が表示されます。ブラウザーの設定で画像を非表示にしているときも、このような現象が起こります。

このような状況で、写真の代わりに写真の説明を表示することができます。
imgタグの部分を次のように変えてください。

    <img src="間違った画像のファイル名" alt="windows10 の写真"/>

このように表示されたでしょうか？
f:id:pythonjacascript:20180902113033p:plain:h350

画像の大きさ変更

画像の大きさを変更するには、「width属性」と「height」属性を使います。
ピクセル指定と、パーセント指定の両方ができます。

ピクセルで大きさ指定

<img src="sample.png" alt="windows10 の写真"　width ="100" height="50"/>

このように書くと、写真の大きさが100px * 50pxになります。
f:id:pythonjacascript:20180902113521p:plain:h350

パーセントで大きさ指定

<img src="sample.png" alt="windows10 の写真"width="30%" height="100%">

横幅を30％に縮小し、縦のながさはそのままになります。
実行結果はこちら↓
f:id:pythonjacascript:20180902114236p:plain:h400