目次
| 項番 | ページ内リンク | 説明 |
|---|---|---|
| 1 | 1.はじめに | |
| 2 | 2.imgタグについて | |
| 3 | 3.iframeタグについて | |
| 4 | 4.さいごに |
更新履歴
2024/07/19 @junerさんから qiitaの見易さ・記事コード修正案を頂きました。☺
記事コードが余りわからなかったので、非常に助かりました！☺
※勝手に載せてるので、怒られたら消します。
2024/07/19 初稿
1-はじめに
html における画像を挿入する方法
・imgタグ
・iframeタグ
の解説記事
※「絶対パス」もしくは「相対パス」の記事は後日書きます。
「絶対パス」
『https://www.~~~~~~.com/img/sample.jpg』
インターネットにある 『https://www.~~~~~~.com/』の『img』の『sample.jpg』を参照するよ☺
「相対パス」
『img/sample.jpg"』
同じファイル内の『img』の『sample.jpg』を参照するよ☺
2-imgタグについて
imgタグ
src=画像のurl先
<img src="[ファイル名]">
<img src="[ファイル名]">
alt=画像の名前
<img src="[ファイル名]" alt="ここの写真の名前・ロゴ画像・etc">
<img src="[ファイル名]" alt="ここの写真の名前・ロゴ画像・etc">
title=マウスカーソルがあった時に名前が出るよ
<img src="[ファイル名]" alt="ここの写真の名前・ロゴ画像・etc" title="マウスカーソルがあった時に名前が出るよ">
<img src="[ファイル名]" alt="ここの写真の名前・ロゴ画像・etc" title="マウスカーソルがあった時に名前が出るよ">
3-iframeタグについて
iframeタグは別のHTMLを読み込む際に使われるタグで、主な用途としては、別のWebサイトやSNSに公開されている画像や動画を転載する場合に使用します。
(例：youtube/google map とか)
<!-- https://www.=====.comの動画をiframeで表示するよ☺ -->
<iframe src="https://www.=====.com"></iframe>
<!-- https://www.=====.comの動画をiframeで表示するよ☺ -->
<iframe src="https://www.=====.com"></iframe>
width="幅" %・px とかで指定するよ☺
height="高さ" %・px とかで指定するよ☺
<!-- https://www.=====.comの動画をiframeでwidth="100%" height="500px"表示するよ☺ -->
<iframe src="https://www.=====.com" width="100%" height="500px" frameborder="0"></iframe>
<!-- https://www.=====.comの動画をiframeでwidth="100%" height="500px"表示するよ☺ -->
<iframe src="https://www.=====.com"
width="100%" height="500px" frameborder="0">
</iframe>
<iframe src="https://redstar-hp.netlify.app/images/logo.jpg" width="300px" height="100%" frameborder="0"></iframe>
width="300px" 300ピクセル
height="100%" 100%
で表示するよ☺
<iframe src="https://redstar-hp.netlify.app/images/logo.jpg"
width="300px" height="100%" frameborder="0">
</iframe>
4-さいごに
恐らくいっぱい記事があると思いますが書きました。
自分で書いている『htmlのサンプルコード』のurlリンクとして使いたいと思い、執筆しています。
まだ編集中ですが、良かったら見てみて下さい。☺