More than 3 years have passed since last update.

SmartNews向け記事コンテンツで使えるタグ・使えないタグ

Last updated at 2020-05-07Posted at 2020-05-06

SmartNewsに記事を配信する場合に必要な、SmartNews向けRSSフィードの記事本文内で使用可能なタグについてまとめてみました。

背景

SmartNewsに記事を配信するにはRSSを拡張した、「SmartFormat」と呼ばれる形式で記事データを提供する必要があります。
(参考：記事配信開始までの流れ – SmartNews 媒体運営者サポートサイト)

そして「SmartFormat」の本文内(content:encoded内)では、CSSによるスタイルの設定(外部ファイル、インライン問わず)をすることはできない、ということになっています。¹

ブラウザーのリーダーモードと同じ趣旨なわけですから、個々のサイトごとの独自のデザインを無効にしようというのは当然といえば当然……
ですが、クライアントから色々要望されたりはするわけです。

そこで普段は「やるなよ？絶対やるなよ？？？」と念押しされている<b>タグなどを修飾用途で使うことが選択肢として挙がってきます……

本文内(content:encoded内)で使用可能なダグ一覧は以下に列挙されており、全部で95個あります。

SmartFormat仕様書（ダークモード対応）について – SmartNews 媒体運営者サポートサイト#使用できるHTMLタグ

CSS代わりに使えるタグを探すため、またそもそもあまり見慣れないタグも結構入ってるのでもうちょっと詳しく表にしてみました。

SmartNews向けコンテンツで使えるタグ

※各列の凡例は注釈にあります。

|No.|² |分類³ |タグ名⁴ |説明(MDN web docsへのリンク) |⁵ |参考：(主に系の)Qiita上での見た目 |
|---|---|---|---|---|---|---|---|
|1| | |<a> |アンカー要素 | | |
|2| | |<abbr> |略語要素 | | |
|3| | |~~<acronym>~~ |(頭字語要素) | | |
|4| | |<address> |連絡先要素 | | |
|5| | |<article> |記事コンテンツ要素 | | |
|6| | |<aside> |余談要素 | | |
|7| | |<b> |注目付け要素 | |太字 |
|8| | |<base> |文書の基底 URL 要素 | | |
|9| | |~~<basefont>~~ |(基本フォント要素) | | |
|10| | |<bdi> |書字方向分離要素 | | |
|11| | |<bdo> |双方向文字列上書き要素 | | |
|12| | |~~<bgsound>~~ |背景音の要素 | | |
|13| | |~~<big>~~ |大きめの文字列要素 | | |
|14| | |~~<blink>~~ |点滅文字列要素 | | |
|15| | |<blockquote> |ブロック引用要素 | |

ブロック引用

|
|16| | |<body> |文書の本文要素 | | |
|17|

|<br> |改行要素 | | |
|18| |T |<caption> |表キャプション要素 | | |
|19|

|<code> |行内コード要素 | |SOME_CONST |
|22| |T |<col> |(表内の列を定義) | | |
|23| |T |<colgroup> |(表内の列のグループを定義) | | |
|24| | |~~<command>~~ |HTML コマンド要素 | | |
|25| |

| |<dd> |詳細説明要素 | |(<dl>参照) |
|28|

| |<del> |削除文字列要素 | |~~削除された内容~~ |
|29|

|<details> |詳細折りたたみ要素 | |

概要(サマリ要素)

折りたたまれた詳細です。

|
|30| |

|<dfn> |定義要素 | | |
|31| | |~~<dir>~~ |ディレクトリ要素 | | |
|32| | |<div> |コンテンツ分割要素 | | |
|33|

| |<dl> |説明リスト要素 | |

用語(dt要素): 説明です。(dd要素)

|
|34|

| |<dt> |説明用語要素 | |(<dl>参照) |
|35|

|<em> |強調要素 | |強調された文字 |
|36| |

|<h1>–<h6> |HTML の見出し要素 | | |
|43| |

| |<hr> |主題分割 (水平線) 要素 | | |
|46| | |<html> |HTML 文書 / ルート要素 | | |
|47|

|<i> |(区別されるテキスト(斜体)要素) | |区別されるテキスト(斜体) |
|48| |

|<img> |画像埋め込み要素 | | |
|49| | |<ins> |(追加文字列要素) | | |
|50|

|<kbd> |キーボード入力要素 | |cmd、ctrl ⁶ |
|51| |

| |<li> |(リストの項目要素) | | |
|54|

|<menu> |(メニュー要素) |

| |
|59|

| |
|62|

| |<ol> |順序付きリスト要素 | |

1つ目の<li>
2つ目の<li>

|
|63|

| |
|65| | |<pre> |整形済みテキスト要素 | | |
|66|

|<q> |行内引用要素 | |行内引用です。 |
|67| |

|<rb> |ルビベース要素 | | |
|68| |

|<rp> |ルビのフォールバック用括弧要素 | | |
|69| |

|<rt> |ルビ文字列要素 | | |
|70| |

|<s> |(取り消し線要素) | |~~取り消し線付きの文字~~ |
|72|

| |~~<spacer>~~ |(余白要素) |

| |
|76| |

|<sub> |下付き文字要素 | |H₂O |
|80|

|<sup> |上付き文字要素 | |x² |
|82| |T |<table> |表要素 | | |
|83| |T |<tbody> |テーブル本体要素 | | |
|84| |T |<td> |表データセル要素 | | |
|85| |T |<tfoot> |表フッター要素 | | |
|86| |T |<th> |(表ヘッダーセル要素) | | |
|87| |T |<thead> |表ヘッダー要素 | | |
|88| |

|<time> |(日時要素) | | |
|89| |T |<tr> |表の行要素 | | |
|90|

|T |~~<tt>~~ |テレタイプテキスト要素 | | |
|91|

|<u> |非言語的注釈 (下線) 要素 | |下線付き文字 |
|92|

| |<ul> |順序なしリスト要素 | |

1つ目の<li>
2つ目の<li>

|
|93|

|<var> |変数要素 | |変数：x |
|94| |

|<wbr> |(改行可能要素) | | |
|95| | |~~<xmp>~~ |(非解釈HTML要素) | | |

特定のブラウザでしか実装されていない非標準の<bgsound>(IE)や<menu>(Firefox)がある
- <bgsound>とか本当に音が鳴るのか？？？(「使える(エラーにならない)」だけで無視される？)
- 悪名高い？⁷ <blink>も……
HTML5で廃止されたタグ(~~打ち消し線のタグ~~)がある
HTML5で追加されたタグ(太字のタグ)がある
文書メタデータ()(主に<head>内で使う)の<base>がある
フォーム用のタグ()もある……

うーんイマイチ何を考えているのかわかりませんね ¯\_(ツ)_/¯

主要なタグでSmartNews向けコンテンツで使えないタグ

イマイチ方向性が謎なのと、そもそも結構使えるタグが多いので使えないタグをチェックする方が実務上は役に立つ気がするのでこちらも表にまとめました。
※「主要なタグ」の基準は独断です

No.	タグ名⁴	説明(MDN web docsへのリンク)
1	`<area>`	(部分画像リンク項目要素)
2	`<audio>`	埋め込み音声要素
3	`<button>`	ボタン要素
4	`<canvas>`	グラフィックキャンバス要素
5	`<embed>`	埋め込み外部コンテンツ要素
6	`<head>`	文書メタデータ (ヘッダー) 要素
7	`<iframe>`	インラインフレーム要素
8	`<input>`	入力欄 (フォーム入力) 要素
9	`<link>`	外部リソースへのリンク要素
10	`<map>`	(部分画像リンク要素)
11	`<meta>`	文書レベルメタデータ要素
12	`<noscript>`	(スクリプト代替要素)
13	`<object>`	(外部リソース要素)
14	`<optgroup>`	(選択肢グループ要素)
15	`<option>`	(選択肢要素)
16	`<output>`	出力要素
17	`<param>`	オブジェクト引数要素
18	`<picture>`	画像要素
19	`<progress>`	進捗表示要素
20	`<rtc>`	ルビ文字列コンテナー要素
21	`<script>`	スクリプト要素
22	`<select>`	(選択要素)
23	`<source>`	(メディアリソース要素)
24	`<style>`	スタイル情報要素
25	`<textarea>`	(複数行テキスト入力要素)
26	`<title>`	文書題名要素
27	`<track>`	埋め込みテキストトラック要素
28	`<video>`	動画埋め込み要素

iOS版では確かにCSSがほぼ無効になっているようですが、Android版では今の所一部中途半端に当たっているようです……
また、公式のバリデーションツール(SmartFormat Validator)がありますが、こちらでは普通にCSSが当たっているように見えますので、見た目という点では当てにならないようです(エミュレータではなくあくまでバリデータということか) ↩
列の凡例
- ：CSS代わりに使えるかも
↩
分類列の凡例
- ：インライン文字列意味付け
- ：コンテンツセクショニング
- ：文書メタデータ
- ：画像とマルチメディア
- T：テーブル
- ：フォーム
- ：インタラクティブ要素
※分類はこちらを元にしました→HTML 要素リファレンス - HTML: HyperText Markup Language | MDN ↩ ↩²
タグ名列の凡例
- ~~~~<hoge>~~~~：廃止済み
- **<hoge>**：HTML5以降のタグ ※ブラウザ独自から標準に格上げされたタグなど、判断が微妙なところがあります……(こういうのどこで見るのがいいんですかね？)
↩ ↩²
(注意点)列の凡例
- ：非推奨
- ：実験的
- ：非標準
↩
プレビューではちゃんとそれっぽい表示になってるのに実際の記事では普通の文字になってますね ↩
「blinkタグ」の開発者が明かすテキスト点滅タグが生まれた知られざる理由とは？ - GIGAZINE ↩

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up