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 等が主流
うさタブ
うさタブ

上手くできたッピか?

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

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

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

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

ユウキ
ユウキ

うーん・・・

やっぱり、どうしてこーなるか良くワカンナイな~

説明を聞いたすぐはわかったつもりなんだけどさ

アイカ
アイカ

そうね・・・わたしも

すぐに復習できる環境じゃないから

宿題とか困っちゃうわ・・・

ユウキ
ユウキ

他に気軽に教えてくれる先生とかいるといいんだけどな~

うさタブ
うさタブ

フムフム!

そんなときは、プログラミング講座がオススメッピね~

アイカ
アイカ

そんなのあるのか?

ていうかドコいけばいいんだよ

うさタブ
うさタブ

それなら、やっぱり一番安心自宅でできる動画教材がよいッピ!

うさタブ
うさタブ
テレビCMでも話題の有名教材
Udemyとかどうッピか?

 

うさタブ
うさタブ
Udemyは、HTMLからJavaScript
人気の機械学習からUnityゲーム講座まで選び放題ッピ!

うさタブ
うさタブ

買い切り講座だから
いつでも勉強し放題、動画制作や難しいマーケティングなんかも勉強できるッピ~!

ユウキ
ユウキ

へえ~、こんなのがあるのか

うさタブ
うさタブ

ちびっこのみんなは、キュレオプログラミング教室がオススメッピ!

実際の教室で自分以外の同い年と一緒に勉強することで、自分も負けないゾ!と思えておサボりを防ぐことができるッピ!
さらに、クラスのみんなと差をつけてすごいプログラムが作れちゃうッピ

教室名 対象 学習言語 教室場所 無料体験・カウンセリング
Udemy 学生~社会人 Unity
HTML/CSS
JavaScript
MySQL
Python等
オンライン講座
コース買い切り
講座によってサンプル○
Unityゲーム講座アリ
 

「QUREOプログラミング教室」

小学2年生〜中学3年生 Scratch 全国各地
2500教室
無料体験◯
【LITALICOワンダー】 小学1年生〜高校生 Scratch
Unity C#
HTML / CSS
JavaScript
東京都,神奈川,埼玉県,千葉
オンライン
無料体験◯
3Dプリントなどの講座によっては別途料金

ユウキ
ユウキ

よーし、ちょっと体験だけでもやってみるか!

アイカ
アイカ

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

スポンサーリンク

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

ユウキ
ユウキ

うーん・・・

やっぱり、どうしてこーなるか良くワカンナイな~

説明を聞いたすぐはわかったつもりなんだけどさ

アイカ
アイカ

そうね・・・わたしも

すぐに復習できる環境じゃないから

宿題とか困っちゃうわ・・・

ユウキ
ユウキ

他に気軽に教えてくれる先生とかいるといいんだけどな~

うさタブ
うさタブ

フムフム!

そんなときは、プログラミング講座がオススメッピね~

アイカ
アイカ

そんなのあるのか?

ていうかドコいけばいいんだよ

うさタブ
うさタブ

それなら、やっぱり一番安心自宅でできる動画教材がよいッピ!

うさタブ
うさタブ
テレビCMでも話題の有名教材
Udemyとかどうッピか?

うさタブ
うさタブ
Udemyは、HTMLからJavaScript
人気の機械学習からUnityゲーム講座まで選び放題ッピ!

うさタブ
うさタブ

買い切り講座だから
いつでも勉強し放題、動画制作や難しいマーケティングなんかも勉強できるッピ~!

ユウキ
ユウキ

へえ~、こんなのがあるのか

うさタブ
うさタブ

ちびっこのみんな、キュレオプログラミング教室を受けて
自分以外の同い年と一緒に勉強することで、自分も負けないゾ!と思えて
おサボりを防ぐことができるッピ!
さらに、クラスのみんなと差をつけてすごいプログラムが作れちゃうッピ

先生やパパママにほめられて、学習効率が最高にグングン↑↑ッピよ~~♪

うさタブ
うさタブ

未来都市キュレオを舞台に、魅力的なキャラクターがたくさん登場する・ゲーム感覚で楽しく学べるプログラミング教室ッピ!

困ったことも先生に直接聞けるのが最高ッピ~!

うさタブ
うさタブ

全国2500教室もあるから、

きっとみんなの近くにも教室があるッピ。

公式サイト近くに教室があるかチェックしてみるとよいッピ!

ユウキ
ユウキ

なんだこれ! スゲーなっ

ゲームみたいにやってるうちに、自然と勉強できてるみたいな感じ?

アイカ
アイカ

そんなものがあるのねっ!

うさタブ
うさタブ

ロボットをプログラミングしてみるなら

LITALICOワンダーがオススメッピ!

JavaScriptも勉強できるッピよ~!

教室名 対象 学習言語 無料体験/教室場所
Udemy 学生~社会人 Unity
HTML/CSS
JavaScript
MySQL
Python等
オンライン講座
講座によってサンプル○
「QUREOプログラミング教室」
小学2年生〜中学3年生 Scratch 教室によって無料体験◯
全国各地の教室
【LITALICOワンダー】 小学1年生〜高校生 Scratch
Unity C#
HTML / CSS
JavaScript
無料体験◯
3Dプリントなどの講座によっては別途料金
東京周辺
オンライン

ユウキ
ユウキ

よーし、ちょっと体験だけでもやってみるか!

アイカ
アイカ

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

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