皆さんこんばんにちは、ユウです。
今回はHTMLタグの紹介の5回目となります。
前回の記事のリンクは以下に張っているので、興味がある方はそちらも見て下さい。
今回紹介するのは、
- <small>
- <s>
- <i>
- <b>
- <span>
- <br>
の6つのタグになります。
特に span タグなどはとても使用する機会が多いのでしっかりと覚えておくようにしましょう。
先に探しているタグが見つかっている人は目次の方から飛んで下さい。
お時間がある方は最後まで読んでいただけると嬉しいです。
今回の記事を読むメリット
・文字の装飾がわかる
<small> 注釈などを示す
small タグは 免責・警告・法的規制・著作権・ライセンス要件などの注釈を表わします。
前回の記事で説明したように strong タグは、テキストの重要性を表わしてくれるタグでしたが、 small タグはそのような役割はありません。
ですので、文字の意味を弱めるといった事には適していません。
small タグを使う際にはあくまで、注釈など短いテキストに使用することを意識して下さい。
注釈が本文となるような利用規約などを書く際には、 small タグは使うべきではありません。
そのような場合は、 div タグや p タグで書いていった方が良いかと思います。
＜使用例＞
See the Pen
QWLzwNR by 悠(人) (@yutohanabusa)
on CodePen.
<s> 正確ではない内容を示す
strikethroughの頭文字で、すでに正確ではなくなった、関係ではなくなった内容を表わす要素です。
Webページ内では打ち消し線を引いてくれます。
ですが、このタグは非推奨になっており、あまり使用しない方がいい残念なタグになります。
ですので、打ち消し線を引きたい際はCSSで装飾する方が良いです。
CSSの記述で打ち消し線を消したい要素に text-decoration: line-through とするだけで打ち消し線が表せます。
＜使用例＞
See the Pen
yLBGyVy by 悠(人) (@yutohanabusa)
on CodePen.
See the Pen
OJLrPba by 悠(人) (@yutohanabusa)
on CodePen.
<i> 他と区別したいテキストを表わす
italic の頭文字をとったタグで、声や頭の中で思った事を表わしたいときに使用するタグです。
これを適用すると、文字がイタリックの表示され斜体になります。
これは、便利なタグなのですが、最終的に使うタグというふうに認識してください。
強調を意味したいなら em タグを使うなど、他のタグを使えないかどうか検討してから無い場合に使用するようにして下さい。
＜使用例＞
See the Pen
OJLrPWa by 悠(人) (@yutohanabusa)
on CodePen.
<b> 他と区別したいテキストを表わす
bold の頭文字から来たタグで、キーワードや製品名に使用するタグです。
文字を太字にする際に使用します。
Wordなんかを使っている人は、文字を太文字にする際にBのアイコンを押したりするのではないでしょうか。
このタグも i タグと同様に、あくまで最終的に太文字にしたいときに使用します。
見出しを作りたいなら h1 ~ h6 タグ、強調したいなら em タグ、重要性を示したいなら strong タグを使用するようにして下さい。
他に適用するタグがなく、太文字にしたい場合に使用していくようにして下さい。
＜使用例＞
See the Pen
PoYXwmx by 悠(人) (@yutohanabusa)
on CodePen.
<span> ひとつの範囲として定義する
span タグ自身では何も意味は持ちません。
style, class, lang, dir などの属性と一緒に使用することで効果を発揮します。
lang 属性については、もし日本語で書いている文の途中で、英語など違う言語が存在するときに使用します。
ブラウザの読み上げ機能を活用したいときには、必ず入れておきましょう。
属性に入れる値は英語なら ”en” といったように入れていきます。
言語に関しては以下の記事の http-equiv のところで触れているので興味がある方は見てみて下さい。
dir 属性に関しては direction の略でテキストの表記方向を設定することが出来ます。
属性の値の書き方は、左から右の場合は “ltr”(left to right)、右から左の場合は “rtl” (right to left) と表記します。
＜使用例＞
See the Pen
YzKdPrL by 悠(人) (@yutohanabusa)
on CodePen.
<br> 改行する
br は break の略で段落を示す際に使用されます。
コンテンツの一部をなすような場合のみ使用されます。
文の長さをそろえたり、レイアウトを調整するためだけに使用するのはおすすめしません。
もし、レイアウトを整えたいのであれば、 div タグや p タグで囲みCSSを適用していく法が良いです。
＜使用例＞
See the Pen
MWgZYrK by 悠(人) (@yutohanabusa)
on CodePen.
まとめ
・<small>は免責・警告・法的規制・著作権・ライセンス要件などの注釈
・<s>は打ち消し線
・<i>は声や頭の中で思った事を表わしたいときに使用するタグ
・<b>は文字を太字にする
・<span>はひとつの定義として使用する
・<br>は改行する
最後に
今回は<small>, <s>, <i>, <b>, <span>, <br> の6つのタグを紹介してきました。
最初に言ったように span タグは良く使うので今回のタグではせめて span タグだけでも覚えておくようにしましょう。
今回は以上となります。
最後まで読んでいただきありがとうございます。
