VIDEO LESSON

HTMLのsタグとは？属性・使い方・ブラウザー互換性と活用例の解説動画

再生時間 7:35動画を別のタブで開く ↗

動画の字幕・文字起こしを読む

再生中の字幕を濃い黒で表示し、一番上に追従します。字幕の行を選ぶと、その位置から再生できます。

0:00こんにちは。
0:00エイチティーエムエル、リファレンス解説です。
0:03HTMLタグ編の三十三本目は、エスタグです。
0:06エスは、かつては正しかったけれど、今はもう正確ではなくなった情報を示すためのタグです。
0:12たとえば、以前の受付時間や、終了したキャンペーンの案内がこれにあたります。
0:17ただ消してしまうのではなく、あえて残した上で、今は違うんですよ、と伝えるのが役割です。
0:22今回は、よく間違えるデルタグとの違いを中心に、初心者向けに順番に解説します。
0:27見た目は小さいタグですが、案内の信頼を守る大切な役割があります。
0:31では、どんな場面で使うのか、具体例から見ていきましょう。
0:36身近なのは、店舗やイベントの案内の変更です。
0:40受付時間が延びた、料金が改定された、キャンペーンが終わった。
0:45こうしたとき、古い情報をエスで囲んで残し、そのすぐ隣に新しい正しい情報を書きます。
0:52読み手は、何がどう変わったのかが一目で分かります。
0:56以前の案内を見て来た人にも、変更に気づいてもらえるわけです。
1:01逆に、古い情報を残す意味がない場合は、無理にエスを使わず、普通に書き換えてしまって構いません。
1:09日程や条件が変わりやすい案内ほど、この書き方が役に立ちます。
1:14基本の書き方を確認します。
1:16使い方はシンプルで、もはや正しくなくなった部分を開始タグと終了タグで囲むだけです。
1:22スライドは記事の活用事例です。
1:25受付は十八時までです、という古い案内をエスで囲み、その後に、現在は十九時まで受け付けます、
1:29と新しい情報を続けています。
1:33囲まれた部分だけが古い情報、前後の文章とは意味が違う、と読み手とブラウザーに伝わるわけです。
1:40エス自体は文章の流れの中で使うインライン要素なので、段落のピーの中に置くのが基本です。
1:46囲む範囲は必要最小限にし、どこが古い情報なのかを明確にしましょう。
1:51ここが今回いちばん大切な、デルタグとの使い分けです。
1:56見た目はどちらも取り消し線で、とても似ていますが、意味は違います。
2:01デルは、文書を編集する過程で削除した部分を示します。
2:06下書きを直した、という編集の履歴です。
2:09一方エスは、編集の話ではなく、書かれている内容そのものが、今はもう当てはまらなくなった場合に使います。
2:17料金が変わった、時間が変わった、という事実の変化です。
2:22なぜ取り消すのか、編集だからデル、内容が古くなったからエス、と理由で選ぶと間違えません。
2:29この区別は、読み手だけでなく、検索エンジンや支援技術にも正しく伝わります。
2:36もう一つの活用例として、料金表示の訂正を見てみましょう。
2:39スライドの例では、入場料の旧料金、八百円をエスで囲んで残し、新料金の九百円をストロングで示して、
2:44四月一日改定、と変更日も添えています。
2:49こう書くと、値上げがあったことと、今の正しい金額の両方が伝わります。
2:54チケット売り場や、セール終了後の商品ページでも同じ考え方が使えます。
2:59大切なのは、取り消し線だけで終わらせないことです。
3:02読み手が知りたいのは、今いくらなのか、という現在の情報なので、そちらを必ずはっきり書きましょう。
3:09色だけで区別せず、言葉でも変更だと分かるように書くのがポイントです。
3:14そもそも、なぜ古い情報をわざわざ残すのでしょうか。
3:18理由は、変更があったこと自体が大切な情報だからです。
3:21たとえば、以前の案内をメモして来たお客さんは、新しい情報だけが書かれていても、
3:26自分のメモと違うことに気づけないかもしれません。
3:31古い情報を取り消し線で残せば、ああ、変わったんだな、とすぐに理解できます。
3:36スクリーンショットや印刷した案内を持っている人への配慮にもなります。
3:41ただし、すべての変更で残す必要はありません。
3:44誤字の修正のような小さな直しは、普通に書き換える方が読みやすくなります。
3:50つまりエスは、読み手の混乱を防ぐための、さりげない案内役なのです。
3:55属性について整理します。
3:57エスには、このタグ専用の属性はありません。
4:00必要に応じて、すべての要素で使えるグローバル属性を使います。
4:05代表的なのは三つです。
4:07アイディーは文書の中で一つだけの目印で、ページ内リンクやジャバスクリプトからの参照に使います。
4:15クラスはシーエスエスやスクリプトでまとめて選ぶための名前です。
4:20ラングは、その部分の言語を示すもので、日本語ならジェイエーを指定します。
4:26ほかに、独自の値を保持するデータ属性もあります。
4:30注意点として、クラスを付けても要素の意味自体は変わりません。
4:36意味はタグで決まります。
4:38意味のない属性を並べる必要はなく、必要な場面だけで使うのが基本です。
4:43見た目についても触れておきます。
4:45多くのブラウザーでは、エスの内容は取り消し線付きで表示されます。
4:50これが標準の見た目です。
4:51ただ、これはあくまで初期設定なので、スライドのようにシーエスエスで文字の色を薄くしたり、
4:55線の太さを変えたりできます。
4:59ここで大切な注意点があります。
5:01単に線を引きたいだけなら、エスを使うのではなく、シーエスエスのテキストデコレーションで線を引きましょう。
5:08エスは、あくまで内容がもはや正しくないときに選ぶタグです。
5:12意味と見た目を分けて考えることが、正しい使い方につながります。
5:17線の色を変える場合も、コントラストが弱くなりすぎないよう注意しましょう。
5:21ブラウザー互換性を確認します。
5:24記事が参照するエムディーエヌの記録では、エス要素は、クロームがバージョン一以降、
5:28エッジが十二以降、ファイアフォックスが一以降、サファリがバージョン四以前からと、
5:33とても古くからすべての主要ブラウザーで対応しています。
5:38安心して使えるタグの一つです。
5:41ただし、これは要素本体の対応です。
5:43新しいシーエスエスの装飾などを組み合わせる場合は、そちら側の対応状況は別に確認してください。
5:49また、スマホのブラウザーでも表示が崩れないか、大切なページでは実機で一度確認しておくと安心です。
5:56対応表は作成時点の記録なので、新しい装飾を使うときは最新情報も確認します。
6:01実装前後のチェックポイントをまとめます。
6:04一つ目、エスで囲んだら、必ず隣に現在の正しい情報を書いてください。
6:10取り消し線だけでは、読み手は今どうなのかが分かりません。
6:15二つ目、エスは装飾用のタグではありません。
6:18終わったことや古くなったことでない内容に、見た目目的で使うのは避けましょう。
6:25タグ名ではなく、内容の意味から判断するのが原則です。
6:29三つ目は表示の確認です。
6:31三百二十ピクセル程度の狭い画面や、文字を拡大したときにも、古い情報と新しい情報の両方が欠けずに読めるか確かめます。
6:41公開後も情報が古くなっていないか、定期的に見直す習慣をつけましょう。
6:46最後に練習とまとめです。
6:48エスは、もはや正確ではなくなった情報を示すタグでした。
6:53大切なポイントは三つです。
6:55一つ目、内容が古くなったときはエス、文書の編集で削除したときはデルと、取り消す理由で使い分けること。
7:04二つ目、専用の属性はなく、見た目の調整はシーエスエスで行うこと。
7:09三つ目、古い情報を残すときは、現在の正しい情報を必ずセットで書くことです。
7:16練習として、受付時間の変更案内を、エスと新しい時間を組み合わせて書いてみてください。
7:23お疲れさまでした。
7:24次回もエイチティーエムエルタグの解説を続けましょう。
7:29身近な案内文で一度試すと、このタグの使いどころが自然と身につきます。

日本語字幕をダウンロード（WebVTT）

この動画で学べること

sタグの役割と属性を、コード例・活用事例・注意点とともに解説。Chrome・Edge・Firefox・Safariの互換性も確認できます。もはや正確でない情報。文書の編集による削除には del を使います。

解説記事・サンプルコードを読む：HTMLのsタグとは？属性・使い方・ブラウザー互換性と活用例 →