[24] 追加を示す ins要素と 削除を示す del要素を使おう

<ins> は後から追加（挿入）されたことを示す要素です。
<del> は後から削除されたことを示します。

<ins>はブラウザのデフォルトスタイルでアンダーバーがひかれ、<del>は取り消し線がひかれます。

使用する要素	<ins> 〜 </ins> <del> 〜 </del>

<ins> <del>とも、cite属性を使って追加（または削除）の理由などの引用元のURLを指定できます。
またどちらも datetime属性で追加（または削除）の日時を示すことができます。

本日のINDEX

1. <ins>を使ってみよう
2. <del>を使ってみよう
3. cite属性で URL を指定する
4. 日付と時間とタイムゾーンの表記方法

<ins>を使ってみよう

「ins」は Insert の略。挿入する・差し込むって意味ですね。
追加されたことを表したい範囲を <ins> 〜 </ins> で囲んで使います。
ブラウザのデフォルトスタイルでは、アンダーバーがひかれます。

サンプルを見てみましょう。

• 直売店の準備を開始しました。
• 直売店がプレオープンしました。

HTMLはこちらです。

<ul class="sample">
  <li>直売店の準備を開始しました。</li>
  <li><ins title="2019年12月30日追記" cite="https://xxx.com/preopen" datetime="2019-12-30T09:30:00+09:00">直売店がプレオープンしました。</ins></li>
</ul>

上のサンプルでは、cite属性で参照のページを、datetime属性で追加した日時を記述しています。グローバル属性の title属性 も使って、追記の日付を指定しています。

なお、<ins> は他の要素の境界をまたいで使用できません。

下の例はNG。

<!-- これはNGな例です -->
<ins datetime="2018-09-01T00:00:00+09:00">
  <h1>新着情報</h1>
  <p>製品案内のページで<em>ユーザーの声</em>を追加しました。</p>
</ins>

<ins>要素が <h1> のブロックと、そのあとの<p>のブロックを合わせて囲んでいます。
これでは2つの境界をまたいでいるので、良くない使い方なんだそうです。

上のNG例を正しく書き直すとこうなります。

<!-- こっちは正しい例 -->
<ins datetime="2018-09-01T00:00:00+09:00">
 <h1>新着情報</h1>
</ins>
<ins datetime="2018-09-01T00:00:00+09:00">
 <p>製品案内のページで<em>ユーザーの声</em>を追加しました。</p>
</ins>

上の例のように、<ins>要素は ブロックレベル要素もインライン要素もどちらも囲むことができます。
ただ、セクショニングの要素ではないので、複数の要素の境界をまたがず、1つの要素ごとに範囲を作るというルールです。

<del>を使ってみよう

「del」は Delete の略。削除って意味ですね。
削除されたことを表したい範囲を <del> 〜 </del> で囲みます。
ブラウザのデフォルトスタイルで 取り消し線が引かれます。

サンプルを見てみましょう。<ins>も一緒に使ってます。

• 直売店オープンは来月末に決定しました。
• 直売店のオープンは延期いたします。発表までしばらくお待ち下さい。

HTMLはこちらです

<ul class="sample">
<li><del title="2020年1月15日追記" cite="https://xxx.com/news" datetime="2020-01-15T09:30:00+09:00">直売店オープンは来月末に決定しました。</del></li>
<li><ins title="2020年2月1日追記" cite="https://xxx.com/news" datetime="2020-02-01T18:15:00+09:00">直売店のオープンは延期いたします。</ins>発表までしばらくお待ち下さい。</li>
</ul>

複数のブロックの境界をまたいで使わないことや、cite属性と datetime属性の使い方は <ins>と全く同じです。

cite属性で URL を指定する

「cite」とは、「引用する」「引き合いに出す」といった意味。

cite属性を、<ins>要素 や <del>要素で使うなら「値」は 変更（追加や削除）の説明のための URL でなければなりません。

ただ この URL、ユーザーがリンクとして使えるわけじゃないんですよね。
運営側の情報収集（サーバのスクリプトで統計のために収集するとか）用なんだそうです。

cite属性は、<ins> や <del>要素のほかに、<blockquote>要素、<q>要素 という「引用」のための要素でも使います。

日付と時間とタイムゾーンの表記方法

datetime属性で使う「日時の表記方法」にはルールがあります。
これは、人間用ではなくコンピューター用の表記です。コンピュータが正しい日時をゲットすることで、例えばスケジュール帳とか、サーチエンジンとかへ、情報を与えるためのものだって。

ですので、datetime属性の「値」は「手書き」じゃなくて、WordPress ならテンプレートタグ、ブログシステムなら テンプレート用変数 などを利用して仕込むべき。投稿時に自動的に書き出されるようにすると便利ですよね。
まあ、手でタイプしても別にイイんですけど。

「日時の表記」は下記のように決まっています。
年月日だけ（緑の部分）、時間だけ（ピンクの部分）でもOKです。

YYYY-MM-DDThh:mm:ssTZD

YYYY-MM-DDは年月日です。
年はグレゴリオ暦（西暦）の4桁。月も日も数字の2桁で表します。

ちなみに、グレゴリオ暦以前（1582年2月23日以前=ユリウス暦）の日時は、グレゴリオ暦に換算すると間違った表記になる場合があるので、datetime属性で使うのは非推奨だって。
（1582年は本能寺の変の年。使わないよなあ〜。タイプミスに注意ってことでしょうね）

このあと「時間表示」を続けるなら、大文字の「T」で区切ってから書きます。

hh:mm:ss で 時分秒 を表します。
これは24時間表記で 時分秒 は数字の2桁で表します。

最後のTZD は タイムゾーンを表します。
これは協定標準時に対して何時間進んでる（または遅れている）地域かを示すもので「+hh:mm」か「-hh:mm」と書きます。
グローバルな時間を表示したい時に使うので、国内だけの情報なら無くてもOK。

0（協定標準時ジャスト）の地域は Z だけ書けばイイことになってます。
（イギリス・アイルランド・ポルトガル・モロッコなど西アフリカの国々が Z だけでいいみたい）

日本は協定標準時より9時間進んでる（早い）ので +09:00 と書きます。

例えば、2020年8月15日の午後8時ジャストの日本での日時表示はこうなります。

2020-08-15T20:00:00+09:00

協定標準時とは、UTC（Universal Time, Coordinated）のこと。
かつてはグリニッジ標準時（Greenwich Mean Time, GMT）が世界標準時だったけど、今はセシウム原子時計による国際原子時を元にしたUTCが協定標準時なんだそうです。
世界のタイムゾーン（協定標準時からどんだけズレてるか）を示したマップ（PNG画像）を見つけたので貼っておきます。 →Wikipedia : ファイル:Timezones2010.png

次回予告

いかがでしたか？
昔からあった<ins>と<del>。やっぱりHTML5でも使えますね。

次回は、HTML5からの新要素 <time>要素を使ってみましょう。
そのものずばり、日時を表す要素です。これも「datetime属性」を使いますよ。