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

上手くできたッピか?

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

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

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

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

ユウキ
ユウキ

うーん・・・

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

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

アイカ
アイカ

そうね・・・わたしも

先生やうさタブさんにすぐに聞ける環境じゃないから

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

ユウキ
ユウキ

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

うさタブ
うさタブ

フムフム!

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

アイカ
アイカ

そんなのあるのか?

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

うさタブ
うさタブ

それなら、やっぱり一番安心自宅近所の教室がよいッピ!

うさタブ
うさタブ
テレビや雑誌に紹介された超有名教室
QUREOプログラミング教室とかどうッピか?

うさタブ
うさタブ

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

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

うさタブ
うさタブ

全国2500教室もあるから、

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

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

ユウキ
ユウキ

なんだこれ! スゲーなっ

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

アイカ
アイカ

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

うさタブ
うさタブ
キュレオプログラミング教室は、
アメーバブログやアベマTV・バンドリをプロディースしている
サイバーエージェント」のグループ会社で、確かな実績があるッピ!

うさタブ
うさタブ

オンラインで授業を受けるなら

Tech Kids Online Coachingがオススメッピ!

こっちもサイバーエージェントのグループ会社が運営してるッピ!

教室名 対象 学習言語 教室場所 無料体験・カウンセリング
 

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

小学2年生〜中学3年生 Scratch
HTML/CSS
JavaScript
全国各地
教室
無料体験◯
 

Tech Kids Online Coaching

小学1年生〜中学3年生 Scratch
C++
Unity
渋谷
またはオンライン
無料体験◯
 

Udemy

社会人 HTML/CSS
JavaScript
Python
講座購入
ブラウザ
アプリ
サンプル等◯
うさタブ
うさタブ

パパやママ、お兄ちゃんお姉ちゃん
就活や転職で役立つプログラミング知識を身につけたいなら
Udemy】で講座のコースを買ってみるのもオススメッピ!

動画付きの魅力的な教材が格安で、好きな時間に学べるッピ~

うさタブ
うさタブ

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

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

ユウキ
ユウキ

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

アイカ
アイカ

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

スポンサーリンク

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

ユウキ
ユウキ

うーん・・・

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

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

アイカ
アイカ

そうね・・・わたしも

先生やうさタブさんにすぐに聞ける環境じゃないから

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

ユウキ
ユウキ

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

うさタブ
うさタブ

フムフム!

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

アイカ
アイカ

プログラミング教室??

アイカ
アイカ

そんなのあるのか?

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

うさタブ
うさタブ

プログラミング教室は、やっぱり安心の近所の教室ッピ!

うさタブ
うさタブ

テレビや雑誌に紹介された超有名教室

プログラミング教室数国内No.1!「QUREOプログラミング教室」
とかどうッピか?

うさタブ
うさタブ

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

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

うさタブ
うさタブ

全国2500教室もあるから、

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

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

ユウキ
ユウキ

なんだこれ! スゲーなっ

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

アイカ
アイカ

そんなものがあるのね

うさタブ
うさタブ
「QUREOプログラミング教室」は、
アメーバブログやアベマTV・バンドリをプロディースしている
サイバーエージェント」のグループ会社で、実績があるッピ!

うさタブ
うさタブ

オンラインで授業を受けるなら

Tech Kids Online Coachingがオススメッピ!

こっちもサイバーエージェントのグループ会社が運営してるッピ!

教室名 対象 学習言語 無料体験・カウンセリング
 

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

小学2年生〜中学3年生
教室で授業を受けたい方
Scratch
C++
JavaScript
無料体験◯
 

Tech Kids Online Coaching

小学生~中学生
オンライン授業を受けたい方
Unity
C++
Scratch
無料体験◯
Udemy
社会人
講座コースで勉強したい人向け
HTML/CSS
JavaScript
Python
サンプル等◯

うさタブ
うさタブ

パパやママ、お兄ちゃんお姉ちゃん
就活や転職で役立つプログラミング知識を身につけたいなら
Udemy】で講座のコースを買ってみるのもオススメッピ!

動画付きの魅力的な教材が格安で、好きな時間に学べるッピ~

うさタブ
うさタブ

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

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

ユウキ
ユウキ

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

アイカ
アイカ

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

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