【超絶入門】html/css記述法 パート3
ということで続きからやっていきます。
今回はimgタグを使い画面に写真を表示させます。
なおこの回は第二章の4番目になります
第二章 実際に書こう！
この章は次のパートでお送りします
1.divタグを書こう！😀
2.h1タグを書こう！😁
3.pタグを書こう！😂
4.imgタグを書こう！🤣 ＜ーー ここから！
5.buttonタグを書こう！😍
前回までの内容が気になる人はここから↓↓
【超絶入門】html/css記述法 パート１（初歩の初歩のvscodeの立ち上げ、ファイルの作成法から）
【超絶入門】html/css記述法 パート２（実際にコードを書くところから）
😍😘🥰🥰🤩😍😘🥰🥰🤩それでは本題に戻りましょう！！！😍😘🥰🥰🤩😍😘🥰🥰🤩
4.imgタグを書こう！🤣
まず今回作る部分はこちら！
はいこの大きな写真を作っていきます😍
写真を表示させるためにはimgというタグを使います。
そして記述する場所ですがこれまでのおさらいになりますが
完成物のレイアウト構造をもう一度考えてみましょう！
以下の写真がこの完成物のレイアウト構造になります
大枠の部分がdivタグ
その中に見出しのh1タグ
文章のpタグ
写真のimgタグ
ボタンのbuttonがあります
ということで今回の写真はh1タグ（見出し）や、文章（pタグ）と同じ階層にありますね
ですから以下の写真のように記述してください↓↓
<img src="" alt=""> ←これを使いしたよ😁
class="contena"など書かれていますがこれは後で説明しますのでとりあえずほっといて下さい
imgタグの説明に入る前にコードと完成品のレイアウトを見比べてみてください↓↓同じでしょ？
htmlとは基本的に完成物と同じレイアウト構造で書いていきます。
ということでimgタグが書けたと思いますがこのままでは写真は表示されません。当たり前です。写真を選択していませんからimgタグではどの写真を使用するかを書く必要があります。
書く場所はsrc="この中です😍"
それでは実際にやっていきましょう！
まず写真を入れるためのフォルダを作ります。
・画面左上当たりの下記のアイコンを選択してください
1.押すとフォルダの名前を付けられますのでimagesとしてエンターキーで確定
2.フォルダに写真を入れていきます。何でもよいの写真をそのフォルダに入れてください。
※フォルダに写真を入れる方法が分からない人用(分かる人はスキップしてください）ーーー
上記のアイコンを選択してエクスプローラーを開いてください。
そして好きな写真を選択してコピーしてください（以下参照）
コピーしたい写真を選択して右クリック
iamgesフォルダの中に入ります
右クリック、貼り付けを選択
ーーーーーーーーーーーーフォルダに写真を入れる方法ここまでーーーーーーーーーーーーーーーー
３.imgタグのsrcの中でimages/ と打ち込んでください。すると候補が出てきますので一番上の候補を選択してください。これで写真を表示させる準備ができました。
コードは次のようになりました
今書いたものが何なのか説明すると「パス」というものです。パスとは使いたい写真がどこにあるのかを示す道しるべのようなものです。この場合今記載しているhtmlから見て写真はimagesフォルダの中にあります。そのためimages/写真の名前という記載になります。この/は階層の区切りを意味しています。
この段階ではまだ画像が表示されないと思いますので焦らなくて大丈夫です。
最終的にcssで全体を調整するときに画像は表示させます。
ということで今回はこれで終わりましょう！
次回はボタンを作っていきます！😍😍😎😍😍😍😎😎
ハバナイスデー！
Discussion