[24] 追加を示す<ins>と、削除されたことを示す<del>を使おう

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

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

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

<ins><del>とも、cite属性を使って追加(または削除)の理由やコメントなどのかかれたサイトを参照することができます。
またどちらも datetime属性で追加(または削除)の日時を示すことができます。
今回は、datetime属性で使う日付と時間の表記方法もまとめときます。

それじゃまず<ins>を使ってみましょう

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

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

「Internet Explorer 9」の正式版が3月14日にリリースされました。
「Internet Explorer 10」のプレビュー版2が6月29日に公開されました。

HTMLソースはこちらです

<p>
「Internet Explorer 9」の正式版が3月14日にリリースされました。<br>
<ins title="2011年6月30日追記" 
     cite="http://ie.microsoft.com/testdrive/info/downloads/" 
     datetime="2011-06-30T20:30:00+09:00">
「Internet Explorer 10」のプレビュー版2が6月29日に公開されました。</ins>
</p>

上のサンプルでは、cite属性で参照のダウンロードページ、datetime属性で追加記事を書いた日時を記述しています。datetime属性については下のほうでまとめます

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

<ins datetime="2011-09-01T00:00:00+09:00">
<h1>新着情報 </h1>
製品案内のページで<em>ユーザーの声</em>を追加しました。
</ins>

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

上のNG例を正しく書き直すとこうなります。
<ins datetime="2011-09-01T00:00:00+09:00">
<h1>新着情報 </h1>
</ins>
 <ins datetime="2011-09-01T00:00:00+09:00">
製品案内のページで<em>ユーザーの声</em>を追加しました。
</ins>

<ins>要素は上の例のように、ブロック要素もインライン要素もどちらも囲むことができます。言い換えれば、<ins>要素は内側にブロック要素を含む場合はブロック要素となり、内側にインライン要素を含む場合はインライン要素になれるってことだそうです。

<del>を使ってみましょう

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

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

Egbridge Universal2のご購入はこちらから
エルゴソフトは2008年1月28日をもってパッケージソフト事業終了をいたします。
2009年1月末日までオンラインサポートを行います。
エルゴソフトのすべてのサポート事業は終了致しました。

HTMLソースはこちらです

<p>
<del cite="http://www.ergo.co.jp/downloads/" datetime="2008-01-29T08:30:00+09:00">
Egbridge Universal2のご購入はこちらから</del><br>
エルゴソフトは2008年1月28日をもってパッケージソフト事業終了をいたします。<br>
<del datetime="2009-02-01T08:30:00+09:00">2009年1月末日までオンラインサポートを行います。</del><br>
<ins datetime="2009-02-01T08:31:00+09:00">エルゴソフトのすべてのサポート事業は終了致しました。</ins>
</p>

cite属性と datetime属性の使い方は<ins>と全く同じです。

datetime属性で使う「日付と時間」の表記方法

datetime属性で使う「日時の表記方法」にはルールがあります。
これは、人間用というよりコンピューター用の日時表記です。コンピュータが正しい日時をゲットすることで、日付や時間に関連する各種ウェブサービス(例えばスケジュール帳とか)へ、正しい情報を与えられるようになる…ってことらしいです。

基本構造はこうなっています。
YYYY-MM-DDThh:mm:ssTZD

YYYY-MM-DDは年月日です。年はグレゴリオ暦(西暦)の4桁で、月も日も数字の2桁で表します。グレゴリオ暦以前(1582年2月23日以前=ユリウス暦)の日時はグレゴリオ暦に換算すると間違った表記になる場合があり、datetime属性で使うのは非推奨だって。(1582年は本能寺の変の年。)

時間表示が必要ない場合はココまででもOK。

このあと大文字の「T」を書いて区切り、ここから「時間表示」を書きます。
hh:mm:ssで時分秒を表します。24時間表記です。
最後のTZDはタイムゾーンを表します。これは協定標準時に対して何時間進んでる(または遅れている)ところかを示すもので「+hh:mm」か「-hh:mm」と書きます。
0(協定標準時ジャスト)の場合は「Z」とつけておきます。
日本は協定標準時より9時間進んでる(早い)ので「+09:00」と書きます。

例えば、2011年9月15日の午後8時ジャストの日本での日時の表示はこうなります。
2011-09-15T20:00:00+09:00

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

次回予告

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

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

関連記事
この記事をはてなブックマークに追加

やる気を保つためにランキングに参加しています。
応援してくださると すっごいやる気を出します! (笑)

初心者にも使いやすい(と思う)レンタルサーバー

最近よく「レンタルサーバーはどこがいい?」とご質問が来ます。
自分でも使っていてオススメなのはミニバード。管理画面がわかりやすくていい感じす。
仕事で使ってるロリポップもわかりやすい管理画面で、初めてでもすんなり使えると思います。
両方とも、なんといっても料金が安いです。初めてだとなるべく安いほうがイイですからね。

それよりちょっと料金は高いけど、高スペックでコスパが良く、信頼性も高いサーバといえば、やはりさくらのレンタルサーバと、XSERVER(エックスサーバー)だと思う。この2つは老舗でユーザーも多いので、質問する場がたくさんあり、初心者の方でもイケるだろうと思います。

レンタルサーバーは、たくさんあり過ぎて迷いますよね。近いうちに、初心者にも良さげなサーバーについて記事にまとめます。*記事をアップしたらココにもリンクを貼ります。

スポンサーリンク

コメントの投稿

スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
07 | 2017/08 | 09
- - 1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30 31 - -
Archive
RSS Link
Profile

yuki★hata

Author : yuki★hata
せめて月1回の更新をめざします~。

メールフォームはこちら

スポンサーリンク
スポンサーリンク
Copyright © ほんっとにはじめてのHTML5とCSS3 All Rights Reserved.