contents
- <img>タグを使えばいい！
- <img>タグにクラスを追加したいときはどうすればいい？
- そのままリンクも貼ってしまおう！
１．<img>タグを使えばいい！
画像の挿入をしたい時は、<img>タグを使う！！
<img>タグの書き方
<img scr = “画像のリンク”>
- <img>タグ内でサイズの指定をする書き方
<img scr = “画像のリンク” width = “100” height = “150” >
サイズの単位は、
- 何も表記していない場合はpx表記になる
- %表記にしたい場合は、100%と記入する
２．<img>タグにクラスを追加したい時はどうすればいい？
imgタグを指定して、CSSで画像の大きさや位置を調整したいのに、クラス名をどうやって追加したらいいのか迷った時の解決方法は、主に２つあります！
- imgタグそのものに追加する方法
- <img src =”画像リンク” class=”クラス名” >
- divタグを使う方法
- <div class = “クラス名“><img src = “画像リンク“></div>
imgタグも他のタグと同じように、後ろに半角スペースを開けてそのままクラスを指定していいようですね！
ついでに、imgタグに追加したら検索エンジンに引っかかりやすくなるものを紹介します。
それは、alt属性です！
alt属性とは、画像の代わりとなるテキスト情報のことです。
- alt属性を使うメリット
- 万が一、画像が表示されなかった時のための代替テキストとなる
- 検索エンジンに引っかかりやすくするための検索ワードとなる
- alt属性のは、クラス名を追加したように書いていきます！
- <img src =”画像リンク” alt =”画像の説明“>（後ろにそのまま追加するだけだから覚えやすい！）
３．ついでにリンクも貼ってしまおう！
ここまでで画像を挿入する方法がわかりました！
この流れで、リンクを貼る方法も勉強しちゃいましょう〜！
まずリンクを貼るにためには、aタグを使用します。
書き方は、<a href = “貼りたいサイトのリンク”>アンカーテキスト</a>
アンカーテキストとは、ソースリンクが貼られているテキストのことです。
実際にサイトに表示されているのがアンカーテキストで、それをクリックすると貼られているリンクに飛べるということですね！
次回は
HTMLにCSSを適応させたいときはどうすればいいのかを説明していきます！