単語を定義したい時に便利なHTMLタグまとめ2
公開:2019.08.06 更新:2019.09.10

こんにちは、昨日投稿をサボった木彫り猫です。

今回は前回の続き、文字装飾系のHTMLタグを紹介します!前回よりは、かなり分かりやすいタグとなっていますのでゆっくり見ていってくださいね。

上下方向につける文字

<sup>(スーパースクリプト)

挟んだ文字を上部に小さく表示する。(数式の累乗など)

supを使った数式例↓

22+22=8

<sub>(サブスクリプト)

挟んだ文字を下部に小さく表示する。化学式のあれとか(無知)

subを使った化学式例↓

O2は酸素分子である。

プログラム記述関係のタグ

<code>

挟むと、プログラムのコードなどがそのまま表示できる。クラス属性で言語を明示することが推奨されている。

codeで囲った文例(スタイルはCSSにて補強)↓


<html>
<title>猫が可愛いサイト>/title<
</html>

<var>(バリアブル)

プログラムのコード中の変数を表す時に使う。

テキストの記述方向の指定

<bdo>(バイディレクショナル・オーバーライド)

<bdi>(バイディレクショナル)

隣接する文字の記述方向が逆の場合にその影響をリセットすることが出来る。(コンピューターは細かな言語判別に弱く、うまく表示が出来ない場合がある。)アラビア語と日本語の同時記述の際など。

改行

<br>ラインブレイク

記述した場所で文章の改行が行われる。終了タグは無い。

<wbr>(ワードブレイク・オポチュニティー)

英文中の文字数が多い単語など、自動改行が難しい場合に記述するとその時点で改行が挟まれる許可を与える。(許可だけのため、brタグのような使い方は出来ない。)

その他

<span>(スパン)

タグ自体に特に意味はないが、クラス属性などを付与することで、単語単位での装飾が簡単になる。

ins(インサート)

追記されたテキストを表す。出力後は下線が装飾される。

insを使った追記文↓

こんな風に追記できるんすね~

del(デリート)

削除された意を表す。出力後は取り消しの線が引かれる。

delを使った削除済み文↓

お前消えるのか…….(既に消えた後)

まとめ

どうだったでしょうか。かなり実用的なタグもあったかと思います。特に<br>たぐなんかはもはや誰でも知っていそうな気がしますね(笑)。

筆者的には、codeタグ、追記削除タグがものすごく参考になりました!…..もうどっちが読者なのか分からないですね。高速で適切なタグを付けられるコーダーになっていきたいですね。

おすすめ商品

一から勉強する際に使った教材

持っていると便利なHTML&CSS辞典

コメント

内容をご確認の上、送信してください。