HTML&CSS入門「imgタグで画像を表示してみよう」

スポンサーリンク
Pocket
LINEで送る

Webページを見ているとアイコンやバナーなどは画像は必ずといっていいほど表示されています。

では、今回は画像をhtmlで表示させてみましょう。

<!DOCTYPE html>
<html>
  <head>
    <meta charset=”utf-8″></meta>
    <title>html lessen</title>
  </head>
  <body>
    <h1>HTMLレッスン</h1>
    <img src=”http://notsleeeping.com/wp-content/uploads/2016/08/110126-HTML5_ Logo.png”/>
    <p>htmlレッスンサイトです</p>
    <h2>HTMLとは</h2>
    <p>htmlはマークアップ言語です</p>
  </body>
</html>

画像を表示させるには<img>タグを使用します。

<img src=”画像があるURL” />これで画像が表示されます。

上記のhtmlファイルをブラウザで表示するとこうなります。

スポンサーリンク

Screenshot from 2016-08-13 02-34-00

うまく表示されましたね。

でも、ちょっと大きいので画像のサイズを調整し、ついでに枠線もつけたい思います。

<img border=”1″ width=”300px”  src=”http://notsleeeping.com/wp-content/uploads/2016/08/110126-HTML5_ Logo.png” />

このように変えると枠線が1pxで画像の横幅が300pxに変更されます。

Screenshot from 2016-08-13 02-47-18

これで画像の表示は完璧です。src部分を変えると画像が変わるので自分でいろいろ試してみましょう。