ホームページに画像を貼り付けてみる - 猫と遊ぶ　見習いプログラマーの備忘録

ホームページに画像を表示してみよ～✊

ということで、表示画像にプロフィール写真のにゃんこを採用。
この子には名前があって（勝手に命名しました笑）、
「しょうぐんくん」と言います。(笑)
とても可愛くて、お腹なでられるのが大好きな野良ちゃん。

こんな感じで表示させてみたよ。

f:id:msm20-chocolateee:20180727160351p:plain

元気カラーのイエローで背景を変更。（目がチカチカしなすったらごめん遊ばせ）
画像の角を少し丸くした。
そしてよく見ないとわからないかもしれないが、
文字フォントを、みんな大好き(？)游ゴシックに変更。

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>画像てすと</title>
  <style type="text/css">
    body {
     <!--background: gold; でもOK-->
      background-color: gold;
    }
    <!--画像の角とり-->
    img {
      border-radius: 10px;
    }
    <!--フォントの設定。今回は、游ゴシックを使用-->
    @font-face {
      font-family: "YuGothic M";
      src: local("Yu Gothic Medium"),
      local("Yu Gothic");
      font-weight: 500;
    }
    <!--ｐタグに游ゴシックを採用-->
    p {
      font-size: 1.2em;
      font-family: "游ゴシック体", YuGothic, "YuGothic M", sans-serif;
    }
  </style>
</head>

<body>
  <p>
    <img src="cat_image.jpg" alt="ねこ">
  </p>
  <p>画像を表示させてみたにゃん</p>
  <p>ちょっと画像の角、取ってみたにゃん</p>
</body>

</html>

HTMLにそのまま画像を貼り付けるのではなく、今まで学習したCSSも使って表示させることにした。
画像の埋め込み方はこう。

<p>
    <img src="cat_image.jpg" alt="ねこ">
</p>

bodyタグの中に書くこと。
そして、imgタグはpタグで囲むこと。

詳しく解説すると、
imgは、画像を表示させるタグで、
srcは、ソース。つまり、画像のファイル名を書く。画像の置き場は、HTMLファイルがある階層と同じで！
altは、画像がブラウザに表示されなかった場合に、何の画像なのかを示す（また簡単な説明文）。
となる。

【ちなみに…】
上記ソースコードは、こちらのはてな記法にのっとって書いているが、
実際にVSCodeでコードを書くとこんな感じになる↓

f:id:msm20-chocolateee:20180727174052p:plain

保存時自動整形！
Oh, It's ビューティフォー！ I love it !!