こんにちは、grillon designです。
Web制作100日チャレンジも、今日で3日目。
今日のテーマは、**「imgタグとaタグ」**です。
昨日までは文字だけのシンプルな自己紹介ページを作っていましたが、今日はそこに画像とリンクを追加してみました。
この100日チャレンジは、完全にゼロからの挑戦というわけではありません。
以前から少しHTMLを勉強していたので、今回は「学び直し」「おさらい」という意味も込めて始めています。
でも、一度勉強したことでも、実際にコードを書いてみると、
「……あれ？これどうやるんだっけ？」
となることが意外と多いんですよね。
だからこそ今回の学び直しでは、知識として知っているだけではなく、自分の手でコードを書いて理解することを大切にしています。
3人の子育てをしながら、子どもたちのお昼寝や家事の合間に少しずつ。
今日もスキマ時間でHTMLと向き合っていきます。
3日目は「imgタグ」と「aタグ」を学習
今日学んだのは、大きく分けてこの2つです。
- imgタグ → Webページに画像を表示する
- aタグ → テキストや画像にリンクを設定する
昨日までは文字だけだったページに、この2つを追加していきます。
正直、ここは少し楽しみにしていました。
文字だけだったページに画像が入り、さらにクリックできるリンクまで付いたら、一気に「Webサイトっぽくなるんじゃない？」と思っていたからです。
実際にやってみると、これが想像以上に楽しかったです。
imgタグで画像を表示してみた
まず最初に学んだのが、画像を表示するimgタグです。
基本的な書き方は、
<img src="画像のURLやファイル名" alt="画像の説明">
です。
srcには、表示したい画像の場所を指定します。
srcは**source（ソース）**の略で、「どの画像を表示するのか」を指定する部分です。
そして、もう一つ覚えておきたいのが、alt属性です。
altには、その画像が何を表しているのかを説明するテキストを入れます。
例えば、
<img src="logo.png" alt="grillon designのロゴ">
というように書きます。
alt属性は、画像が表示できない場合に代わりとなるテキストを提供したり、スクリーンリーダーを利用する人に画像の内容を伝えたりするために重要です。
また、検索エンジンが画像の内容を理解するための手がかりにもなります。
「画像が表示されればいい」と思っていたけど、ちゃんと意味があるんだ……！
私も今回改めて学び直して、alt属性まで意識して書くことの大切さを実感しました。
HTMLの画像が表示されない！今回もここでつまずいた
そして、今回もやっぱりやってしまいました。
画像が表示されない問題です。
HTML初心者の方なら、一度は経験したことがあるのではないでしょうか。
コードを書いて、
「よし、表示確認！」
とブラウザを開いたら……
画像が出てこない。
「え？なんで？」
となりました（笑）。
今回の原因は、HTMLファイルと画像ファイルの階層が違っていたことでした。
画像が表示されない原因は「ファイルの場所」だった
例えば、HTMLファイルと画像が同じフォルダに入っている場合は、
index.html
logo.png
という状態なので、
<img src="logo.png" alt="ロゴ">
と書けば画像を読み込めます。
でも、画像が別のフォルダに入っている場合は、
index.html
images/
└ logo.png
という構造になります。
この場合は、
<img src="images/logo.png" alt="ロゴ">
のように、画像が入っているフォルダまで指定する必要があります。
つまり、
「HTMLファイルから見て、画像はどこにある？」
と考えることが大切なんですね。
これが私には、まだ少し難しいところです。
「画像そのものはちゃんとあるのに、なんで表示されないの！？」
と、何度もファイルの場所を確認しました（笑）。
でも、今回実際にエラーを経験したことで、相対パスとファイルの階層の関係が以前より少し理解できた気がします。
こういう「つまずいた経験」って、意外と記憶に残りますよね。
画像1枚でページが一気にWebサイトらしくなった
苦戦しながらも、無事に画像が表示されました。
すると、文字だけだったページの雰囲気が一気に変わりました。
ロゴが1枚入っただけなのに、
「おお、Webサイトっぽい！」
と、ちょっと感動。
昨日までは文字が並んでいるだけだったページが、画像一つでぐっと見やすくなりました。
こういうふうに、自分が書いたコードの変化をブラウザ上ですぐ確認できるのは、Web制作の面白いところだなと思います。
aタグでリンクを作ってみた
次に学んだのが、リンクを作るaタグです。
基本的な書き方はこちら。
<a href="リンク先のURL">リンクの文字</a>
href属性にリンク先を指定します。
hrefはHypertext Referenceの略で、リンク先を指定するために使われる属性です。
例えば、
<a href="https://example.com">ブログはこちら</a>
と書けば、「ブログはこちら」という文字をクリックして、指定したページへ移動できるようになります。
今回は、自分で作っている自己紹介ページから、普段書いているブログのトップページへリンクを設定してみました。
そして、
クリックして、ちゃんと別のページに移動した！
この瞬間も、地味に嬉しかったです。
「たったこれだけ？」と思うかもしれませんが、独学ではこういう小さな「できた！」がかなり大事。
一つできるたびに、
「もう一個やってみよう」
という気持ちになれます。
imgタグとaタグを組み合わせると画像にもリンクできる
今回、もう一つ面白いと思ったのが、画像そのものをクリックできるようにすることです。
aタグの中にimgタグを入れることで、画像にリンクを設定できます。
<a href="https://example.com">
<img src="logo.png" alt="ブログへのリンク">
</a>
これで、画像をクリックすると指定したページへ移動できます。
文字だけではなく、画像もリンクにできる。
こうして一つずつ仕組みを知っていくと、
「普段見ているWebサイトって、こうやって作られているんだ！」
と、少しずつWebの見え方が変わってきます。
imgタグとaタグを使ってみて分かったこと
今回の学習で特に印象に残ったのは、**「タグそのものだけではなく、属性やファイルの場所まで理解することが大切」**ということでした。
今回覚えたポイントを整理すると、
imgタグ
<img src="画像の場所" alt="画像の説明">
img→ 画像を表示するsrc→ 表示する画像の場所を指定alt→ 画像の内容を説明する
aタグ
<a href="リンク先">リンクテキスト</a>
a→ リンクを作るhref→ リンク先を指定
このように、タグだけではなく、
「この属性は何のためにあるの？」
まで理解することが大切なんだなと感じました。
HTMLの画像が表示されないときに確認したいこと
今回のように「画像が表示されない！」となったときは、まず次の部分を確認してみようと思います。
- 画像ファイルが本当に存在しているか
- ファイル名が間違っていないか
- 拡張子が合っているか
- HTMLファイルから見た画像の場所が正しいか
srcのパスが間違っていないか
特に私が今回つまずいたのが、
「HTMLファイルから見て、画像はどこにある？」
という考え方でした。
今後はコードだけを見るのではなく、フォルダ構成も一緒に確認する習慣をつけていきたいと思います。
3日目を終えて感じたこと
3日目にして、自己紹介ページに画像とリンクを追加できました。
昨日まで文字だけだったページが、少しずつWebサイトらしくなっています。
そして今回改めて感じたのは、
「一度勉強したことでも、実際に手を動かすと新しい発見がある」
ということ。
知識としては知っていたはずのimgタグやaタグでも、
「srcって何？」
「altって何のため？」
「なんで画像が表示されないの？」
と、実際にコードを書いてみると疑問がたくさん出てきます。
でも、その疑問を一つずつ調べて解決していくことで、少しずつ理解が深まっていくんですよね。
3人の子育てをしながらなので、一気に何時間も勉強することはなかなかできません。
それでも、
10分でもコードを書く。
一つでも分からないことを解決する。
そんな小さな積み重ねを大切にしていきたいと思います。
まとめ｜imgタグとaタグでWebサイトらしくなってきた！
今回の100日チャレンジ3日目では、imgタグとaタグについて学びました。
今日覚えたことをまとめると、
imgタグ → 画像を表示するsrc属性 → 画像の場所を指定するalt属性 → 画像の内容を説明するaタグ → リンクを作るhref属性 → リンク先を指定する- 画像が表示されないときは、ファイルの階層やパスを確認する
ということ。
昨日は文字だけだった自己紹介ページに、今日は画像とリンクが加わりました。
まだまだ分からないことも多いですが、少しずつ「Webサイトを作っている」という実感が出てきました。
おさらいのつもりで始めた100日チャレンジですが、実際に手を動かしてみると、以前は何となく使っていたタグにも新しい発見があります。
明日はどんなことを学ぶのか。
そして100日後には、自分がどこまでできるようになっているのか。
その過程も含めて、これからも記録していきたいと思います。
明日もコツコツ頑張ります！
コメント