HTML/CSS

【HTML/CSS入門】たったこれだけ?画像を表示する方法や各プロパティの紹介

こんにちは、リバティエンジニアのFUNA(フナ)です。

現役でフリーランスのエンジニアとしてアプリケーション開発やWeb制作、SEOやブログ運営をしています。

 

この記事はこんな方におすすめ

  • HTMLで画像を表示させたい
  • HTMLimgタグのプロパティが知りたい

 

今回は、HTMLを使ってWebページに「画像」を表示させる方法について解説していきます。

 

 

はじめに

HTMLの記述からおさらいしたい方は、下の記事を参考にしてみてください♪

>> 【はじめてのHTML】 ブラウザに表示させて確認する方法

ではさっそく「画像の表示」の仕方を見ていきましょう!

 

【HTML】さっそく画像を表示させてみよう!

文書だけでなく画像が入ってくるとWebページのみやすさやわかりやすさは段違いで変わってきます。

みなさんが何気なくいつもネットサーフィンして調べ物などしている時も、画像があったほうが見やすいですよね!

 

FUNA
私は逆に見づらいページだと「戻る」ボタンで戻ってしまうかも...(笑)
そんな人もいるので見やすいものを作りましょう!

 

すこし話が逸れてしまいましたが、さっそく画像を表示させてみましょう!

画像を表示するときには、imgタグ」を使います。

 

HTMLで画像を表示する<img>タグ

このタグがないと基本的に画像は表示できないので、必須だと覚えてください。

この<img>タグを基にして様々なプロパティと呼ばれる属性を指定していきます。

 

【HTMLのimgタグで使えるプロパティ】 "src"属性

この属性を設定することで画像や文書などの、表示したいファイルの場所を指定することができます。

 

つまり、この属性も必須項目ですね!

表示するものの場所がわからなければなにもできないので。

 

【HTMLのimgタグで使えるプロパティ】"alt"属性

この属性は基本的には、目の不自由な方たちのためにあります。

文章の読み上げ機能が使われたときにどのような情報なのかを読み上げて説明してくれます。

 

ほかにも、Googleなどの検索エンジンもこの属性でなんの画像なのかを判断するため大事な要素となってきます。

 

【HTMLのimgタグで使えるプロパティ】"title"属性

画像やリンク先のタイトル(題名)を記述するための属性です。

 

基本的にはこの項目さえ押さえておけば、画像表示はばっちりです!

次は実際に使ってみた例をソースコードと一緒に見ていきましょう。

 

【HTML】画像表示のサンプルコード

表示したい画像ファイルを用意します。今回は例題ということで仮に、「サンプルの画像」というタイトルの「sample.jpg」という画像ファイルを用意したとします。

 

<img src="sample.jpg" alt="サンプルの画像" title="サンプル画像">

 

このように指定してあげることで、画像を表示させることができます。

 

FUNA
もし万が一表示されなかったらクレームを言いに来てください!(笑)

丁寧にご説明させていただきます。

お問い合わせフォーム

 

画像のリンク切れには注意!

先ほど説明した「sample.jpg」のファイルを別のフォルダに移動したらWebページから画像が消えてしまいます。


画像ファイル名だけで指定した場合はその画像を表示しているWebページである「HTMLのソースファイルと同じフォルダに入れておかなければならない」ためです。

 

なので、もしHTMLと同じフォルダに画像ファイルをどうしても置けない場合は、画像ファイルの”パス”というものを指定してやる必要があります。

 

画像ファイルの”パス”とは

まだプログラミングを始めたばかりの人にとっては、聞きなれない言葉かもしれません。

簡単に言うと、「ファイルのある住所」なんですが、これだけ聞いてもあまりピンとこないですよね。

 

例えば、パソコンのデスクトップに画像ファイル[sample.jpg]があったとします。

その場所のパスは、「desktop/sample.jpg」となります。

 

わからない場合にはエクスプローラ(windowsの場合、Macの方はFinder)で調べることができるので、詳しくは下記の記事を参考に。

>> プログラミングの基礎学習- 絶対パスや相対パス -

 

【HTMLのimgタグ】まとめ

今回は、HTMLにおける画像の表示の仕方を、初心者の方でもわかるように基本からしっかり説明しました。


もしいろいろわからないことがあれば、まずはソースコードをコピペでもいいので書いてみてください!

そうすることで、仕組みが分かりやすくなります。

 

>> 【HTMLクイックリファレンス】タグ一覧

 

関連記事

【コピペOK!】ブロックの中のブロック要素を上下左右中央に揃える方法【HTML/CSS】

FUNAこんにちは、リバティエンジニアのFUNA(フナ)です。現役でフリーランスのエンジニアとしてアプリケーション開発やWeb制作、SEOやブログ運営をしています。 この記事はこんな方におすすめ ブロ ...

【CSS】たった1行のコピペで簡単!object fitで画像をトリミングする方法

CSSで画像をトリミングしたい時にたったの1行で実装できる方法を解説します。「object-fit」についてどのような時に使うのか、その使い方や応用の仕方を覚えてみてください。

【コピペOK】CSSでcounterを利用して自動ナンバリングする方法

今回はCSSの「counter」をコピペでも簡単に実装できる方法・ソースコードをご紹介します。このcounterを利用することで、CSSだけで自動でナンバリングを実装することができます。意外と知られていないのですが、「1 2 3 4」の基本のものや「第1章 第2章 第3章 第4章」と書き出しをつけたりすることができて、幅広く応用できます。

【コピペOK】CSSだけで背景を斜めに区切る方法【レスポンシブ対応】

今回は、HTML/CSSで背景を斜めに区切ってデザインする方法を、コピペでも簡単に実装する方法を解説します。ランディングページやコーポレートサイトなどの作成時に背景を斜めに区切ってレイアウトされているサイトを良く見かけますが、実装の仕方は簡単なので、ぜひ覚えておきましょう。

【コピペでOK】HTMLで直接ファイルをダウンロードできるように設定する方法

今回は、HTMLでファイルのダウンロードを設定する方法について解説します。方法としては、aタグにdownload属性を入れるだけで、ファイルをダウンロードするリンクを作成することができます。ここでは、具体的な書き方と動作を確認していこうと思います。


最近の投稿

Copyright© FUNA BLOG , 2021 All Rights Reserved.