文章を装飾するタグは色々ある
CSSを使わなくてもある程度の装飾ならHTMLで済ませることが出来ます。そういうタグがたくさんあるのでちゃちゃっと紹介しようシリーズの第２弾！！ちなみに第一弾はこちらの記事でまとめています。
打消し線を付ける<s>・<strike>タグ
いちもんじもたま～に使うのですが、打消し線。
いちもんじは言っちゃいけないようなことを言ったときに敢えてそんな表現をしたりします。仕事したくねえな みたいな感じで笑
ちなみに<s>と<strike>の違いですが<strike>の方がよく使用されている、汎用的なようです。
<s>・<strike>タグの使い方
<s>タグと<strike>タグの使い方はとっても簡単。打ち消したい文字を<開始タグ>と</終了タグ>の間に書くだけでOKです。
<s>打ち消したい</s>ことをタグの間に書きましょう。
<strike>こんな感じで。</strike><s>・<strike>タグと<del>タグの違い・<s>・<strike>タグの注意点
この後に紹介しますが、<del>タグは削除されたコンテンツを指します。巡回している検索ロボットに対してもこれは削除されましたよと伝える意味があります。一方この<s>・<strike>タグは見た目だけの打消し線なので、今この<s>・<strike>タグを使うのは非推奨とされているようです。もしも打消し線を付けたいだけだったら、CSSで装飾しましょう。
CSSを使って打消し線を引く
表面上だけ打消し線を引きたいのであれば、<s>タグを使ったり<del>タグを使って打消し線を引くことは非推奨とされています。それならどうすればいいのよ！？って方は、CSSのプロパティtext-decorationを使って打消し線を書きましょう。するとこのように↓<s>タグでも使ったかのような表現になります。
ちなみにコードはこんな感じ。↓
<span style="text-decoration:line-through;">打ち消したいこと</span>をタグの間に書きましょう。アンダーバーを引く<u>タグ
<u>タグとは、指定した場所にアンダーバーを引くタグになっています。アンダーバーってなんだっけ？って人はこれを見てください。
「これがアンダーバーだよ！」これがアンダーバーです。文章の下に線が引かれました。
<u>タグの使い方
<u>タグの使い方もとても簡単で、アンダーバーを引きたい部分を<u>と</u>で囲ってあげましょう。
「<u>これがアンダーバーだよ！</u>」<u>タグの注意点
こちらも先ほどの打消し線の時のように、特に意味を持たせたいわけでもなくただ装飾したいだけだったら、できるだけCSSで設定してあげましょう。
「<span style="text-decoration:underline;">これがアンダーバーだよ！</span>」これを表示するとこうなります↓
こうすることによって<u>タグと同じ効果が得られました！
検索エンジンに時間を伝える<time>タグ
<time>タグは、検索エンジン側に時間を伝えるためのタグになります。「え？検索エンジンに伝えるって？それってなんのメリットがあんの？」とお思いでしょう。基本的にユーザーは常に新しい情報を求めています。古い情報って役に立たないこともありますからね。そんな時に、ロボットさんがWeb巡回中「おっ、この記事は新しいな～」と気が付いてくれるというわけです。（つまりSEO対策的にも良いね！ってことです）それからユーザーに向けても時間が伝えられるメリットもあります。
IEに関しては<time>タグの対応をしていないため、その点注意です。
指定した時間がスニぺットに表示される
<time>タグで指定した時間はスニぺットにも表示されます。スニぺットというのはここのことです。
ここを見ると記事が新しいかどうか、見ている人にもわかると思います。
例えばニュース関係の記事であったりすると、この日付で起こった事件です！とか分かると便利ですし情報は常にフレッシュでないといけません。「これはいつの話なの？」というのが明確な方が良いです。そういう時に役立つというわけです。
<time>タグの使い方
<time>タグの使い方ですが、こんな感じにします。
<time datetime=”ロボットに認識させる日にち”>表示させたい日にち</time>
例↓
記事の更新日時は<time datetime="2023-10-27 10:34">2023/10/27</time>です。このように書くことによって、こんな感じで表示されます↓
別に何も表示させなくていいよって人は中を空欄にしてロボット側に伝えるだけなのもありだと思います。
<time datetime="2023-10-27 10:34"></time>他にも期間を示す方法だとか週を示す方法があるのですが、表現がなかなかに難しくなってきます。
<time>4h 18m 3s</time>↑は期間を示す。この例で行けば4時間18分3秒。フルマラソンを走り終えるのにかかった時間とか示したいときに使うでしょうか。
<time>2011-W47</time>2011年の47週…ってことですね。わかり辛すぎませんかこれ！？
削除されたコンテンツを示す<del>タグ
<del>タグのdelとはdeleteのことです。私はデルタグと呼んでます。
削除されたコンテンツっていったい何！？って感じですが、例えば間違った箇所の修正で、間違った部分を消したくないけれども間違っていることを示したいときに使ったりしますね。あとは変更の履歴を残しておきたいときとかに使います。↓
昭和元年、いちもんじ誕生
この<del>タグは、巡回ロボットくんに「削除されましたよ～」ってことを伝える意味もあるので、ただ表面上だけで打消し線を付ける<s>タグとはちょっと意味が違ってきます。読み上げ機能もこの<del>で囲まれた部分は機能しないので注意が必要です。
<del>タグの使い方
とても簡単です。削除したことを伝えたい箇所を<del>と</del>の間に書きましょう。
<del>大正元年、一文字誕生</del><br>
昭和元年、いちもんじ誕生日付まで合わせて伝えたいとき
削除したのがいつなのか、それを合わせて検索エンジン側に伝えたいときはdatetime属性を使いましょう。
<del datetime="2023-10-27">大正元年、一文字誕生</del><br>
昭和元年、いちもんじ誕生見え方はこう。↓
昭和元年、いちもんじ誕生
見え方的に違いはありませんが、検索エンジン側にはいつ削除したものなのかを伝えることが出来ています。
追記されたことを示す<ins>タグ
先ほどは削除されたことを示すタグでしたが、今回は<ins>タグ（インサート）（挿入）です。これは新たに書き足しましたよ！って部分を囲むタグです。追記された部分をロボットに伝えて追記したことを伝えましょう。実際に使ってみた感じはこれです↓
2023.10.26 HTML・CSSのタグについて解説記事を更新しました
2023.10.27 HTML・CSSのタグについて解説記事を更新しました<ins>タグの使い方
とても簡単です。追加したい部分を<ins>と</ins>の間に挟みましょう。上の例で行くとコードはこうです。↓
<p>2023.10.26 HTML・CSSのタグについて解説記事を更新しました</p>
<ins>2023.10.27 HTML・CSSのタグについて解説記事を更新しました</ins>日付まで合わせて伝えたいとき
追加した部分がいつ追加したものなのか、これを検索エンジン側にも伝えたいよ！というときはdatetime属性を使いましょう。使い方はこうです。
<p>2023.10.26 HTML・CSSのタグについて解説記事を更新しました</p>
<ins datetime="2023-10-27">2023.10.27 HTML・CSSのタグについて解説記事を更新しました</ins>見え方はこんな感じ。
2023.10.26 HTML・CSSのタグについて解説記事を更新しました
2023.10.27 HTML・CSSのタグについて解説記事を更新しました先ほどとなんの変化もありませんが、いつ追記した部分なのかは検索エンジン側にきちんと伝わっています。
改行する<br>タグ
<br>タグを入れると改行されます。
これは普段から使ういつものタグです。改行です。これを入れたら必ず強制的に改行されます。
PCの幅やスマホの幅に合わせて<br>タグを入れていたら、案外と別端末で見たときに「あらっ？変なところで改行されているわね」ってなりかねないタグです。
<br>タグの使い方
簡単です。改行したい位置に<br>タグを置くだけです。こんな感じ。
HTMLのまとめ記事おわらねええええ<br>
次CSSのまとめが待ってんだぞおおおおお<br>これを実際に表示させてみると、こうです。
次CSSのまとめが待ってんだぞおおおおお
ちゃんと改行されていますね。
改行可能箇所にする<wbr>タグ
はい、今度は改行可能箇所にする<wbr>タグの説明です。
さっきの説明は強制的に改行させる<br>タグくんでした。でも今回は改行可能です。どういうこと？って感じでしょうか？
でも先ほどお伝えした通り、例えばPCで記事をつらつらと作成していて「あっここで画面の端っこに来たから改行いれよ～っと！」と思って入れた<br>タグが、スマホで記事を改めて見たときに変な位置で改行されちゃったりして「あれれ～？」ってなることもあると思うんです。そんなことが起こらないようにするための改行タグ<wbr>です。
ここで改行が出来ますよ～っていうことです。しないならしなくていいし、することもできまっせ。っていう判断をブラウザにお任せするので「あれれ～？」がなくなるわけです。
<wbr>タグを使うタイミング
<wbr>タグを使うタイミングとしては、URLや英文を書いているときが多いようです。
urlは途切れさせることができないので、丁度いいタイミングでこの<wbr>を入れ込むことによっていい感じに改行してくれます。
<p>http://111111monji.com/111111monji.com/<wbr>111111monji.com/<wbr>111111monji.com<wbr>111111monji.com/<wbr>com/</p>丁度いい長さのURLが見当たらず、こんな狂気を帯びたURLになってしまいました…これを実際に見てみるとこうなります。↓
http://111111monji.com/111111monji.com/
大量に差し込んだ<wbr>でしたが、改行の必要が無い部分では改行されず、ぼちぼち良いタイミングだぞって時に上手い感じに改行してくれてますね。ありがたや～。