HTML入門講座|画像をつけてみよう

HTML
HTML講座
うさタブ
うさタブ

今日はホームページに【画像】をつけてみるッピよ~

ユウキ
ユウキ

お! ついに画像がつけられるのか!

どうやるのか気になってたんだよな~

うさタブ
うさタブ

画像を貼れると、ウェブページがとってもはなやかになるッピネ!

楽しみにするでッピヨ~!!

この記事で学べること
  • 画像を貼るタグ
  • 画像の縦や横の大きさを変化させる
  • 画像のファイル形式の違い

スポンサーリンク
スポンサーリンク

ホームページに画像をつけてみよう

必要なもの

メモ帳
  • メモ帳
  • パソコン
  • ネットを見るブラウザ

元になるコード

<html>
<head></head>
<body>

</body>
</html>
うさタブ
うさタブ

上のコードを元に勉強していくッピ!

【メモ帳】にコピーして用意するッピネ!

画像をつけてみよう

うさタブ
うさタブ

画像を貼るタグを学習する前に、

貼りたい画像を用意する必要があるッピネ・・・

今回は下の画像を使ってみるッピ!

うさタブ
うさタブ

右クリックして、【名前をつけて保存】するッピよ~!

名前は『janken.png』にするッピ!

うさタブ
うさタブ

ホームページのファイルと同じ場所に置くことを忘れないようにするッピよ!

ユウキ
ユウキ

オッケー!

うさタブ
うさタブ

準備ができたら

<body></body>の間に

<img src="janken.png" />

と入力するッピネ!

サンプルコード
<html>
<head></head>

<body>

<img src="janken.png" />

</body>
</html>
ユウキ
ユウキ

おお! 画像がでてきた!

うさタブ
うさタブ

ふふふ、これがプログラミングの魔法ッピ!

これは、

<img画像を表示します src 表示する画像は=”janken.png” />です

という意味ッピヨ!

ユウキ
ユウキ

ふーん、プログラミングって色んなことができるんだな~

画像のサイズを変更しよう

うさタブ
うさタブ

次はこの画像のタテ・ヨコのサイズを変更しみるッピヨ~!

うさタブ
うさタブ

<body></body>の間に

<img src="janken.png" width="50px" height="100px" />

<img src="janken.png" width="20%" height="10%" />

と入力するッピよ~

全体のコードの確認

<html>
<head></head>

<body>
<img src="janken.png" />

<img src="janken.png" width="50px" height="100px" />

<img src="janken.png" width="20%" height="10%" />
</body>
</html>
ユウキ
ユウキ

すっげえええ! 画像が変化してる!!

画像のタテの大きさを変更する height

うさタブ
うさタブ

今回つかった

<img src="janken.png" width="50px" height="100px" />

この【height】がタテを表しているッピ!

うさタブ
うさタブ

タグの意味はこんな感じッピネ!

<img画像を表示します src ファイル名は=”janken.png” height= 画像の高さは“100px” />

画像のヨコの大きさを変更する width

うさタブ
うさタブ

今回つかった

<img src="janken.png" width="50px" height="100px" />

この【width】がヨコを表しているッピ!

うさタブ
うさタブ

タグの意味はこんな感じッピネ!

<img画像を表示します src ファイル名は=”janken.png” widthヨコの大きさは=“50px” />

ユウキ
ユウキ

なるほどなー

ユウキ
ユウキ

というかこの【px】ってなに?

うさタブ
うさタブ

px・・・これは【ピクセル】といって、

コンピュータ上の『長さをあらわす単位ッピネ~!

ユウキ
ユウキ

じゃあ、この【.png】ってなんなの?

うさタブ
うさタブ

それは【拡張子かくちょうし】といって、

画像ファイル形式でッピヨ~!

ちょうどいいッピ! これを期に画像のファイルを勉強するッピネ!

画像のファイル形式について学ぼう

うさタブ
うさタブ

元々windowsでは、

tiftiff ファイルという拡張子かくちょうしのものが使われているッピが、

そのファイルはあまりにもデータが重すぎる(データの容量がたくさんある)ッピネ・・・

うさタブ
うさタブ

今では気軽に高速データ通信ができるッピが、

一昔前は画像が重いと画像が表示されなかったり、

あまりにも表示に時間がかかりすぎて、ウェブページから去ってしまうといったことが起こっていたッピ

うさタブ
うさタブ

それを防ぐために、

画像を圧縮して、ファイル形式を変えたもののひとつが【PNG】ファイルッピよ~!

ユウキ
ユウキ

へー

うさタブ
うさタブ

今はデータの重い画像でも素早く表示できるッピが、

それでも軽い画像のほうが表示に時間がかからなくて、ユーザー好まれるのは間違いないッピ!

ユウキ
ユウキ

待たされるより、早いほうが良いもんな~

うさタブ
うさタブ

そうッピネ!

ユウキくんも最強のWEBマスターとなるために、ぜひ画像形式を学ぶッピ!

PNG ファイル

 今、ウェブメディアで主流となりつつあるファイル形式です。かつてはgifファイルが利用されていましたが、今ではPNGがよく使われています。

 tiffファイルよりもファイルサイズがかなり圧縮され、背景を透明にした画像アニメーションを使うことができます。

 写真のような複雑を圧縮するのは苦手です。

JPG / JPEG ファイル

 左のサンプルのような、色味が多く、複雑な画像を圧縮し、ファイルサイズを軽くするファイル形式です。

 かなりファイルサイズを縮小できますが、何度も上書きするとファイルサイズが劣化してしまうのが特徴です。

SVG ファイル

 近頃使われるようになった画像ファイル形式です。

 PNGやJPGが、拡大すると粗が出る『ビットマップ』・『ラスター』データなのに対し、

 SVGは拡大しても崩れない・・・『ベクター』データなのが特徴です。

 以前は対応していたブラウザが少なかったため、利用されていませんでしたが、近頃はブラウザでSVGファイルが表示できるようになり、徐々に使用されるようになってきました。

画像を編集するファイル

 画像を編集するファイルは、レイヤー情報という画像の階層をもっているのが特徴です。画像編集ソフトを持っていれば、特にこれらのファイルは気にしなくて良いでしょう。

 メジャーなのは、Adobe社の提供する

  • ラスター画像を編集する【Photoshop】の『PSD』ファイル
  • ベクター画像を利用する【Illustrator】の『AI』ファイル
  • 印刷業界でよく利用される『EPS』ファイル等です
うさタブ
うさタブ

他にも色々あるッピが、

まとめるとホームページで使われるファイルは

『jpg と png』主にこの2つを覚えておけば問題ないッピネ~

ユウキ
ユウキ

へ~ 色々あるんだな~

学習のまとめ
  • <img src=”ファイル名” /> で画像を変えることができる
  • width で画像のヨコ幅を変更することができる
  • heightで画像のタテ幅を変更することができる
  • ウェブページで使われる画像は、圧縮されユーザーが表示されやすいように工夫されている
  • 画像データは、現在(2020年) jpg / png / svg 等が主流
うさタブ
うさタブ

上手くできたッピか?

これからも色んなホームページの基礎解説をしていくッピ!

次回も楽しみにしているッピよ~~!

スポンサーリンク

どうしてもわからない、そんなときは?

ユウキ
ユウキ

うさタブ!

オレ、もっと本格的にゲームが作りたいんだ

アイカ
アイカ

私もだわ!

もっとたくさん実用的なコードを

学ぶことってできないかしら?

うさタブ
うさタブ

おお、2人ともやる気ッピね!

ゲームの作り方を学ぶなら、コレとかどうッピか?


うさタブ
うさタブ
Udemy」テレビでも有名な動画教材
人気の機械学習からUnityゲーム講座まで選び放題ッピ!

うさタブ
うさタブ

2DアクションRPG脱出ゲーム

3Dゲーム制作講座まで

買い切り講座だからいつでも勉強し放題ッピよ~!

ユウキ
ユウキ

お!いいじゃん!

アイカ
アイカ

あと、どこか素敵な素材を売っているところはないかしら? 公式の素材販売だと、クレカ支払いしかなくて・・・

ユウキ
ユウキ

小学生じゃクレカで支払えないぜ~

うさタブ
うさタブ

ゲームの素材を買いたいなら、

DLsiteBoothとかどうッピか?

うさタブ
うさタブ

素敵なドット絵や音楽素材がいっぱい売ってるッピ!

うさタブ
うさタブ

しかもUnityアセットストアと違って

クレカ支払いじゃなく、コンビニ支払いができるのもポイントッピ!

ユウキ
ユウキ

すげーカッコいい素材がいっぱいある!

アイカ
アイカ

わたしもさっそくチェックしてみようかな♪

スポンサーリンク
HTMLプログラミング
学んで遊んでジャンケンポン!
タイトルとURLをコピーしました