今回は文字・図の装飾に関するタグです。
今回は、HTMLのタグについて紹介していきたいと思います。
今回で4回目の紹介となりますので、以前の記事を見てみたいと思う方はぜひ下のリンクから足を運んでみて下さい。
~,
,
- ,
- ,
- ,
- ,
- についてです。今回の内容も特に大切なタグが含まれているので、このタグ何だったかなと思う方は、ぜひ足を運んでみて下さい。...
- ,
- ,
今回も基本となるタグを説明していこうと思います。
今回説明するタグは
- <figure>
- <figcaption>
- <div>
- <a>
- <em>
- <strong>
についてです。
知りたいタグについて先に見つけている方は、目次の方からジャンプしていって下さい。
もし、お時間がある方でしたら最後まで見ていただけると嬉しいです。
今回の記事を読むメリット
・文字・図の強調がわかる
<figure> 図表であることを示す
figure タグは 図表であることを示すことが出来るタグです。
ここで指す図表とは、イラスト・図・写真・ソースコード等です。
図表に説明文や注釈を入れたい場合はこの次に紹介する figcaption というタグを使っていきます。
figure タグを使用する場合は、Webページの文章に影響を与えてはいけません。
例えば、この図の通りにといった風に図を文章内で説明するときは、使うのは避けた方が良いです。
figure タグはあくまで視覚的補助などに使うのにおすすめです。
＜使用例＞
See the Pen
bGbQoYg by 悠(人) (@yutohanabusa)
on CodePen.
<figcaption> 図表の説明などを示す
figure caption の略で 図の説明や注釈を入れる際に使用していきます。
使い方は、figure タグの中に配置することで figure タグで指定された図表に説明などを入れていくことが出来ます。
＜使用例＞
See the Pen
WNeYZJE by 悠(人) (@yutohanabusa)
on CodePen.
<div> ひとかたまりの箱として定義する
division の略で HTMLを分割する役割を持っています。
div タグ自体にそれ以外の意味は特にありません。
ページの見た目等を調整する際に、CSSを適用するために要素を囲む要素として使用されます。
div は便利ですが他に適切なタグがない場合に使用するあくまで最終的に使うタグとしてWeb上では強く推奨されています。
article タグ（ブログの記事などに使用
section タグ（章の区切りに使用）
nav タグ（ナビゲーションバーなどに使用）
など、適切なタグがある場合はそちらを使用するようにして下さい。
そうすることでWebページのメンテナンスなどが比較的に簡単で楽になっていきます。
See the Pen
xxKQXae by 悠(人) (@yutohanabusa)
on CodePen.
コードを見てもらうと分かるかと思いますが、文字を中央寄せに出来るのは div タグで囲っているおかげで出来ています（text-align: center;の記述）。
この文字の中央寄せは div タグ等で囲っていないときにしか出来ません。
<a> ハイパーリンクを指定する
anchor の頭文字をとったもので ハイパーリンクを指定してくれます。
ウェブ内の画像やテキストを a タグで囲み必要な属性値を指定することによりその場所につなげてくれる役割があります。
anchor は日本語で船の碇やつなぎ止めるという意味があるので覚えやすいかと思います。
a タグを使用する際 href (hypertext reference)属性を使用します。
この属性値にURLを貼り付けたりする事で、そのURLをテキストや写真などとつなげることが可能になります。
＜使用例＞
See the Pen
xxKQXov by 悠(人) (@yutohanabusa)
on CodePen.
<em> アクセントをつける
emphasis の略で アクセントをつける役割を持っています。
em タグに入れることで、文章の特定の箇所にアクセントの度合いを指定できます。
これを使用すると斜体のようになるのですが、あくまでアクセントを付け加えるだけのタグになります。
ですので、斜体にしたい場合はイタリック体に表現できる i タグ（<i>）を使用した方が適切です。
＜使用例＞
See the Pen
WNeYXNM by 悠(人) (@yutohanabusa)
on CodePen.
今回は日本語だと違いが見られなかったので、一部英語にしています。
おそらくフォントの種類によるものだと思います。
<strong> 強い重要性を示す
強い重要性を文字に施したい場合には em タグよりもこちらが適切になります。
b タグという文字の太さを変えるタグがあるのですが、意味を強めたい（強調）場合には、こちらのタグを使用するようにして下さい。
＜使用例＞
See the Pen
ExYObaB by 悠(人) (@yutohanabusa)
on CodePen.
文字・図の装飾まとめ
・<figure>は図表であることを示すことが出来る
・<figcaption>は図の説明や注釈を入れる
・<div>はHTMLを分割する
・<a>はハイパーリンクを指定する
・<em>は強調する
・<strong>はさらに強調する
最後に
今回は6つのタグについて紹介いたしました。
今回のタグはどれも文字や装飾に深く関わってくるタグになるので、大まかで良いので機能は覚えておくようにして下さい。
今回はこれで以上になります。
最後まで読んでいただきありがとうございます。
