第3回 (2022/11/02)

リンク

他のページに移動する仕組みをハイパーリンク(リンク)という。

a

アンカー(Anchor)の略で、リンクの出発点と到達点を指定する。

<a href=""></a>

<< 使用例 >>

<a name="abc">ファイルの途中にabcという名前を付けます</a><br>
<a href="#abc">abcと名前を付けた場所へリンクします</a><br>
<a href="index.htm#a">別ファイルの名前を付けた場所へリンクします</a>

【参考資料】

developer.mozilla.org

TELリンク

電話番号のリンクを指定すると、携帯端末から直接電話をかけることができる。

<a href="tel:080-xxx-xxxx"></a>

メールリンク

メールのリンクを指定すると、クリックした時にメールソフトが立ち上がるようになる。

<a href="mailto:info@example.com"></a>

別タブでリンク

リンク先を別タブで開くように指定する。

<a href="リンク先" target="_blank" ></a>

画像

文書に画像を埋め込む。

<img src="" alt="">

*src = 必須。埋め込みたい画像へのパスを入れます。

*alt = 画像のテキストによる説明。あくまで検索エンジンに適切な画像内容を伝えることであり、コンテンツを検索エンジンやユーザーわかりやすくする役割を担うもの。

<< 代替テキストの用途 >>

  • ブラウザ:画像や動画が表示されない場合、代替テキストが表示される
  • テキストブラウザ:代替テキストが表示される
  • スクリーンリーダー:代替テキストが読み上げられる
  • 点字ディスプレイ:代替テキストが点字に変換されて表示される
  • クローラー:代替テキストで画像や動画の内容を理解する

【参考資料】

developer.mozilla.org

digitalidentity.co.jp

相対パス

現在いるファイルを起点とした、目的ファイルまでの経路のこと。

<img src="../img/photo.jpg">

絶対パス

ファイルを最初から最後まで完全に記述する形式のこと。

<img src="http://example.com/photo.jpg">

【参考資料】

webliker.info