今回は【HTML】ins要素の使い方、追加になった内容に線を引こう!
の解説になります!
こんな方に読んでほしい
- HTMLを学び始めた方へ
-
HTML
について学びたい方へ - 今回はins要素(追加になった内容)について解説しております。
左の図が、ins
要素を指定なしの場合は、通常通りのテキスト表示になります。
右の図が、ins
要素を指定することにより、追加になった内容に下線を引いてくれます。
Chrome | Safari | Firefox | IE | Edge |
---|
| | | | |
ins要素について
ins要素
とは、追加になった内容に下線を引いてくれます。
「ins」とは、「insert(追加、挿入の意味を表す)」の略になります。
前回解説した、del要素
と合わせて使用する事が多いです。
del要素で削除した内容に対して、ins要素で追加内容を表すことができます。
書き方は以下のようになります。
del要素について
例1:今月のイベント情報
4月1日 1部:12:00〜 終了2部:16:00〜- 4月2日 12:00〜
- 4月3日 12:00〜
例2:〇〇〇〇サイトは、2021年4月1日をもって閉鎖します。
〇〇〇〇サイトの方は、2ヵ月期間延長になりました。
<b>例1:</b>今月のイベント情報
<ol>
<li><del>4月1日 1部:12:00〜 終了</del><ins>2部:16:00〜</ins></li>
<li>4月2日 12:00〜</li>
<li>4月3日 12:00〜</li>
</ol>
<hr />
<b>例2:</b><del>〇〇〇〇サイトは、2021年4月1日をもって閉鎖します。</del><br>
<ins>〇〇〇〇サイトの方は、2ヵ月期間延長になりました。</ins>
del要素の使い方
「del」とは、「delete(削除の意味を表す)」の略になります。
cite属性(削除した内容についてのURL)について
cite属性とは、変更(追加)した内容についてのURL(説明に関するページ)を指定します。
ブラウザ画面では見れません。
開発者(記述者)が、後で見たときに分かりやすいようにする為です。
cite属性について
〇〇〇〇サイトは、2021年4月1日をもって閉鎖します。
〇〇〇〇サイトの方は、2ヵ月期間延長になりました。
<del>〇〇〇〇サイトは、2021年4月1日をもって閉鎖します。</del>
<ins cite="http://sample.com/about">〇〇〇〇サイトの方は、2ヵ月期間延長になりました。</ins>
datetime属性(削除した日時)について
datetime属性とは、変更(追加)した日時を指定します。
今回は、「年月日」の指定のみでしたが、更に詳しく指定できます。
STEP 01 | 「年月日」 例:2021-04-01 |
---|
STEP 02 | 「時分秒」 例:12:00:00 |
---|
STEP 03 | 「年月日T時分秒」 例:2021-04-01T12:00:00 年月日と時分秒Tで繋げます。 |
---|
STEP 04 | 「+9:00を付ける」 例:2021-04-01T12:00:00+9:00 UTC(協定世界時)とJST(日本標準時)の時差が9時間にたる為、「+9:00」を付けます。 |
---|
ブラウザ画面では見れません。
開発者(記述者)が、後で見たときに分かりやすいようにする為です。
datetime属性
〇〇〇〇サイトは、2021年4月1日をもって閉鎖します。
〇〇〇〇サイトの方は、2ヵ月期間延長になりました。
<del datetime="2021-04-01">〇〇〇〇サイトは、2021年4月1日をもって閉鎖します。</del>
<ins datetime="2021-04-10">〇〇〇〇サイトの方は、2ヵ月期間延長になりました。</ins>
ポイント!
似たような要素にs
要素があります。
s要素は、無効になった内容や、正確ではなくなった内容に取り消し線を引いてくれます。
必ず、使い分けて使用しましょう。下記に関連記事を載せておきます。
s要素の使い方
無効になった内容や、正確ではなくなった内容に
取り消し線を引いてくれます。
まとめ
今回はこれで以上です。
- POINT
-
ins
要素は、 追加になった内容に下線を引いてくれます。 -
cite
属性は、 変更(追加)した内容についてのURL(説明に関するページ)を指定します。 -
datetime
属性は、 変更(追加)した日時を指定します。 -
s
要素は、 無効になった内容や、正確ではなくなった内容に取り消し線を引いてくれます。 -
s
要素は、 「削除する」という意味ではありません。内容を削除することを表す内容でしたら、del要素を使いましょう。
Chrome | Safari | Firefox | IE | Edge |
---|
| | | | |
スポンサーリンク
SHU
1991年生まれ九州の宮崎県育ち高校卒業後、愛知県で自動車関係のお仕事に5年間勤め、WEB業界に転職致しました。
趣味:サッカー観戦、ゲーム、映画、漫画基本インドアです!笑
つくる、しあわせをテーマとして主にWEBに関する様々な情報を発信しています。
最新記事
関連記事