このUNITでは主に
「aタグ」「imgタグ」「ul・ol・liタグ」
の3種類を学びます。
どれも Webサイトを見やすく表示させるための装飾で、頻繁に使うタグなのでマスター必須タグと言えるでしょう。
それでは各タグごとにご紹介
aタグ
Webサイトを制作していく上で重要な事。
アクセスを集めるための仕組みを構築する必要があります。
その仕組みとして効果が高く、頻繁に設定する機会がある「ハイパーリンク」
ハイパーリンクは参照先の識別情報や所在情報などを特定の記法で記述したもので、コンピュータシステムによって参照先を容易に呼び出したり照会したりできるようになっている
引用元：IT用語辞典 e-words
はいむずかしい〜
要約すると、他のページにワンクリックで飛べるようにする「リンク」と呼ばれるものです。
HTMLを使ってコーディングを行うときにリンクを設定するために用いるのが「aタグ」です。
この「リンク」を設置しないとページ内からはどこにも移動できず、サイトを回遊することができないので閲覧している側からすれば非常に不便です。
ユーザビリティが下がる事からSEOの観点からもマイナス評価を受けてしまい、結果アクセスが集まりにくいサイトになってしまいます。
aタグの基本
それでは実際にaタグを使ってみましょう。
<html>
<p>この下に書いたURLがリンク先になります</p>
<a href="https://locany.net">
<p>当サイトのトップページへリンク</p>
</a>
</html>上記のコードを書いた時に、下記のような状態になります。
リンク先のURLは当サイトのTOPページを書いています。
この下に書いたURLがリンク先になります
当サイトのトップページへリンク
「aタグ」で囲った部分が青色に変わり、下線が引かれました。
クリックすると指定したURLへリンクします。
href属性
で移動先の
リンクを指定
する事でリンクを機能させています。
さらにaタグでは
「target属性」
がよく使われます。
「target属性」は、リンク先をどう表示させるか指定できます。
<html>
<a href="https://locany.net" target="_blank">
<p>当サイトのトップページに戻ります</p>
</a>
</html>当サイトのトップページに戻ります
上記のように記載した場合、下記のような状態となり、リンクをクリックするとリンク先が別のウインドウで開きます。
「target="_blank"」の効果はこのようにリンク先を新しいタブで開きます。
imgタグ
続いてのタグは「imgタグ」
こちらもHTMLを使ってコーディングする時、非常に頻繁に利用するタグなので使いこなせるようにしておいて下さい。
画像をページに導入する事でさまざまな効果を得られます。
文字ばかりのページよりも画像を適宜使い、読みやすくイメージが湧きやすい画期的なページを作ってください。
imgタグとは？
HTML上で画像を表示させるためのタグです。
GIF、JPG、PNG形式の画像を表示させます。
あまりにも多用するタグなので、PCなどのユーザー辞書に登録しておいていつでもすぐに呼び出せるようにしておくと効率的です。
使い方もそれほど難しくないのでぜひマスターしましょう。
imgタグを使ってみる
それでは実際に画像を表示させてみましょう。
<body>
<div>
<img src="https://locany.net/wp-content/uploads/2021/10/5666D961-F643-4FFC-881D-FD776126B219.jpg" alt="画像です">
</div>
</body>上記のように画像のアップロード先URLを指定すると、下記のように画像が表示されます。
そしてimgタグの後ろにある「alt属性」
オルト属性と呼ばれるもので、
- 通信が不安定な時、画像が正しく表示されない場合に画像の意味を正しく伝える
- 視覚に障害がある方がスクリーンリーダーを使用した時に画像の意味がわかるようにする
- 検索エンジンのクローラーに画像の情報を伝える
基本的には上記3点の意味があります。
画像設置の際はSEO観点からもalt属性も設定しましょう。
ul・ol・liタグ
今回のUNITの最後は
ul・ol・liを学びましょう。
箇条書きを作成する事ができて、うまく活用する事でページ内の情報をよりわかりやすく見やすい表現で伝える事が可能となるタグ
整理されたわかりやすい文章を書く上では必須タグ
それでは学んでいきましょう。
ul・ol・liタグの使い方
基本セットについては
ulとliのセット
olとliのセット
の組み合わせで使います。
<ul>
<li>1番目の項目</li>
<li>2番目の項目</li>
<li>3番目の項目</li>
</ul>上記のようにHTMLを記載すると
下記のような箇条書きになります。
- 1番目の項目
- 2番目の項目
- 3番目の項目
各項目の先頭の文字が「黒の点」の箇条書きになります。
要点をまとめたり目次を作るときに使う人もいます。
<ol>
<li>1番目の項目</li>
<li>2番目の項目</li>
<li>3番目の項目</li>
</ol>続いて上記のようにHTMLを記載すると
下記のような番号が振られた箇条書きになります。
- 1番目の項目
- 2番目の項目
- 3番目の項目
手順の説明などを書く時に便利ですね。
各項目の左側に行の数だけ数字が割り振られます。
まとめ
今回のUNITはページを見やすくするためのタグでした。
どのタグもWebサイトを作る上で重要な物ばかりで利用回数も非常に多いのでぜひ覚えてマスターしてみてください。
基礎中の基礎ではありますが、ここまで覚えれば一応最低限のページを作成する事が出来るようになっています。
利用方法はさまざまなので応用に応用を重ね、素晴らしいサイトを作りましょう。