この記事では、Studioを使用して作られたWebサイトが出力する、HTML要素・属性の対応可否を記載します。

対応表は、以下の記載方針もと作成しています。

対象

Studioの操作を理解している。
適切にマークアップを構築する。
アクセシブルなサイトを制作する。

記載方針

HTML Living Standardに基づいて表を作成しています。
非推奨要素・非推奨属性は、表中に掲載していません。
Studioのデザインエディタ上で選択することができるHTML要素については、HTMLタグをご覧ください。
アクセシビリティを考慮した構築方法については、Studioアクセシビリティチェックシートも合わせてご確認ください。

最終更新：2024年10月22日

表の読み方

要素名

HTML要素の名称です。

Studio対応表

列「Studio対応」の記載内容です。

○：自分で使用する、UIを介して使用する、自動付与されることで、Studioが生成するHTML要素上に現れる。

×：Studioが生成するHTML要素上には現れない。

（三角については、各項目の備考に詳細情報を個別記載）

使用箇所表

以下6つの項目は、Studioを経由してHTML要素を使用する際の方法を示したものです。

Boxに付与できる。
Text Boxに付与できる。
リッチテキストボックスに付与できる。
CMS記事タイプの本文を紐付けて、リッチテキストボックスで使用できる。
特定のパーツに使用されている。
特定の条件で自動的に設定される。

各使用方法ごとに、それぞれのHTML要素の使用方法を記載しています。

✅：各列の使用方法に対応しています。

-：この使用方法には対応していません。

対応する属性/対応しない属性

各HTML要素と紐づく属性のうち、Studioが対応するものもしくは対応しないものを、判別することができます。

備考

各HTML要素に関する、詳細事項を記載しています。

補足情報

グローバル属性は、当ページ内の独立した表に記載しています。
カスタムコード / Embed を使用すると、ほぼ全てのHTML要素・属性を使用することができます。

Studio HTML要素・属性対応表

メインルート

要素名	Studio対応	Boxに付与できる	Text Boxに付与できる	リッチテキストボックスに付与できる	CMS記事タイプの本文を紐付けて、リッチテキストボックスで使用できる	特定のパーツに使用されている	特定の条件で自動的に設定される	対応する属性	対応しない属性	備考
<html>	○	-	-	-	-	-	✅	lang	-	すべての要素は<html>内に配置される

文書メタデータ

要素名	Studio対応	Boxに付与できる	Text Boxに付与できる	リッチテキストボックスに付与できる	CMS記事タイプの本文を紐付けて、リッチテキストボックスで使用できる	特定のパーツに使用されている	特定の条件で自動的に設定される	対応する属性	対応しない属性	備考
<base>	×	-	-	-	-	-	-	-	-	-
<head>	○	-	-	-	-	-	✅	-	-	-
<link>	○	-	-	-	-	-	✅	href, crossorigin, rel, media, integrity, hreflang, type, referrerpolicy, sizes, imagesrcset, imagesizes, as, blocking, color, disabled, fetchpriority, title	-	<head> 内に自動付与。Custom Code で任意の設定も可能。
<meta>	○	-	-	-	-	-	✅	name, http-equiv, content, charset, media	-	<head> 内に自動付与。 description, などは UI を介して利用可能。 Custom Code で任意の設定も可能。
<style>	○	-	-	-	-	-	✅	media, blocking, title	-	<head> 内に自動付与。Custom Code で任意の設定も可能。
<title>	○	-	-	-	-	-	✅	-	-	UIを介して入力した情報が自動で記入される

区分化ルート

要素名	Studio対応	Boxに付与できる	Text Boxに付与できる	リッチテキストボックスに付与できる	CMS記事タイプの本文を紐付けて、リッチテキストボックスで使用できる	特定のパーツに使用されている	特定の条件で自動的に設定される	対応する属性	対応しない属性	備考
<body>	○	-	-	-	-	-	✅	-	onafterprint, onbeforeprint, onbeforeunload, onhashchange, onlanguagechange, onmessage, onmessageerror, onoffline, ononline, onpagehide, onpageshow, onpopstate, onrejectionhandled, onstorage, onunhandledrejection, onunload	-

コンテンツ区分

要素名	Studio対応	Boxに付与できる	Text Boxに付与できる	リッチテキストボックスに付与できる	CMS記事タイプの本文を紐付けて、リッチテキストボックスで使用できる	特定のパーツに使用されている	特定の条件で自動的に設定される	対応する属性	対応しない属性	備考
<address>	×	-	-	-	-	-	-	-	-	-
<article>	○	✅	-	-	-	-	-	-	-	-
<aside>	×	-	-	-	-	-	-	-	-	-
<footer>	○	✅	-	-	-	✅	-	-	-	-
<header>	○	✅	-	-	-	✅	-	-	-	-
<h1>, <h2>, <h3>, <h4>, <h5>, <h6>	○	△	✅	✅	✅	×	-	-	-	子要素を持つボックスに設定する際には、特定の条件を満たす必要がある Studio U：HTML の見出しタグ <h1> - <h6>
<main>	○	✅	-	-	-	-	-	-	-	-
<nav>	○	✅	-	-	-	-	-	-	-	-
<section>	○	✅	-	-	-	✅	-	-	-	-

テキストコンテンツ

要素名	Studio対応	Boxに付与できる	Text Boxに付与できる	リッチテキストボックスに付与できる	CMS記事タイプの本文を紐付けて、リッチテキストボックスで使用できる	特定のパーツに使用されている	特定の条件で自動的に設定される	対応する属性	対応しない属性	備考
<blockquote>	○	-	-	✅	✅	-	-	-	cite	Markdown記法により使用できる
<div>	○	✅	-	-	-	✅	✅	-	-	追加メニューのほとんどのパーツに使用されている
<dl>	×	×	-	-	-	-	-	-	-	-
<dt>	×	-	-	-	-	-	-	-	-	-
<dd>	×	-	-	-	-	-	-	-	-	-
<figcaption>	×	-	-	-	-	-	-	-	-	-
<figure>	○	-	-	-	✅	-	-	-	-	CMS本文中に画像がある場合に自動で適用される
<hr>	○	-	-	✅	✅	-	-	-	-	CMS記事タイプのリッチテキストエディタでは、＋ボタンで選択するか、Markdown記法により使用できる
<li>	○	✅	✅	✅	✅	-	-	-	value	CMS記事タイプのリッチテキストエディタでは、＋ボタンで選択するか、Markdown記法により使用できる
<ol>	○	-	-	✅	✅	-	-	-	reversed, start, type	CMS記事タイプのリッチテキストエディタでは、＋ボタンで選択するか、Markdown記法により使用できる
<p>	○	-	✅	✅	✅	-	-	-	-
<pre>	○	-	-	✅	✅	-	-	-	-	CMS記事タイプのリッチテキストエディタでは、＋ボタンで選択するか、Markdown記法により使用できる
<ul>	○	✅	-	✅	✅	-	-	-	-	CMS記事タイプのリッチテキストエディタでは、＋ボタンで選択するか、Markdown記法により使用できる

インラインテキスト意味付け

要素名	Studio対応	Boxに付与できる	Text Boxに付与できる	リッチテキストボックスに付与できる	CMS記事タイプの本文を紐付けて、リッチテキストボックスで使用できる	特定のパーツに使用されている	特定の条件で自動的に設定される	対応する属性	対応しない属性	備考
<a>	○	✅	✅	✅	✅	-	✅	href, target	download, ping rel, hreflang, type, referrerpolicy	自動適用リンクを設定した要素がa要素に変換される
<abbr>	×	-	-	-	-	-	-	-	-	-
<bdi>	×	-	-	-	-	-	-	-	-	-
<bdo>	×	-	-	-	-	-	-	-	-	-
<br>	○	✅	-	✅	✅	-	-	-	-	Shift+Enterキーで改行した際に使用される（Design Editor、リッチテキストともに共通）
<cite>	×	-	-	-	-	-	-	-	-	-
<code>	○	-	-	✅	✅	-	-	-	-	リッチテキスト、コード付与時に自動適用
<data>	×	-	-	-	-	-	-	-	-	-
<dfn>	×	-	-	-	-	-	-	-	-	-
<em>	○	-	-	✅	✅	-	-	-	-	テキスト選択時のメニューか、Markdown記法により使用できる
<i>	○	-	-	-	-	△	✅	-	-	アイコンを置くときにi要素が使用される。 i要素の本来の使い方として使用することはできない https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-i-element
<kbd>	×	-	-	-	-	-	-	-	-	-
<mark>	×	-	-	-	-	-	-	-	-	-
<q>	×	-	-	-	-	-	-	-	-	-
<rp>	×	-	-	-	-	-	-	-	-	-
<rt>	×	-	-	-	-	-	-	-	-	-
<ruby>	×	-	-	-	-	-	-	-	-	-
<s>	○	-	-	✅	✅	-	-	-	-	CMS記事タイプのリッチテキストエディタでは、テキスト選択時のメニューか、Markdown記法により使用できる
<samp>	×	-	-	-	-	-	-	-	-	-
<small>	×	-	-	-	-	-	-	-	-	-
<span>	○	-	✅	-	-	-	-	-	-
<strong>	○	-	-	✅	✅	-	-	-	-	CMS記事タイプのリッチテキストエディタでは、テキスト選択時のメニューか、Markdown記法により使用できる
<sub>	×	-	-	-	-	-	-	-	-	-
<sup>	×	-	-	-	-	-	-	-	-	-
<time>	×	-	-	-	-	-	-	-	-	-
<u>	○	-	-	✅	✅	-	-	-	-	CMS記事タイプのリッチテキストエディタでは、テキスト選択時のメニューか、Markdown記法により使用できる
<var>	×	-	-	-	-	-	-	-	-	-
<wbr>	×	-	-	-	-	-	-	-	-	-

画像とマルチメディア

要素名	Studio対応	Boxに付与できる	Text Boxに付与できる	リッチテキストボックスに付与できる	CMS記事タイプの本文を紐付けて、リッチテキストボックスで使用できる	特定のパーツに使用されている	特定の条件で自動的に設定される	対応する属性	対応しない属性	備考
<area>	×	-	-	-	-	-	-	-	-	-
<audio>	×	-	-	-	-	-	-	-	-	-
<img>	○	✅	-	-	✅	-	-	alt, src, loading(lazy 自動適用)	srcset, sizes, crossorigin, usemap, ismap, width, height, referrerpolicy, decoding, loading(eager), fetchpriority	画像ボックスでimgモードを選択すると、<img>要素に変換される。 altについては「imgのalt設定方法」を参照
<map>	×	-	-	-	-	-	-	-	-	-
<track>	×	-	-	-	-	-	-	-	-	-
<video>	x	-	-	-	-	-	-	-	-	-

埋め込みコンテンツ

要素名	Studio対応	Boxに付与できる	Text Boxに付与できる	リッチテキストボックスに付与できる	CMS記事タイプの本文を紐付けて、リッチテキストボックスで使用できる	特定のパーツに使用されている	特定の条件で自動的に設定される	対応する属性	対応しない属性	備考
<embed>	×	-	-	-	-	-	-	-	-	-
<iframe>	○	-	-	-	-	-	✅	src, name, sandbox, allow, allowfullscreen, width, height, referrerpolicy, loading	srcdoc
<object>	×	-	-	-	-	-	-	-	-	-
<picture>	×	-	-	-	-	-	-	-	-	-
<portal>	×	-	-	-	-	-	-	-	-	-
<source>	×	-	-	-	-	-	-	-	-	-

SVG と MathML

要素名	Studio対応	Boxに付与できる	Text Boxに付与できる	リッチテキストボックスに付与できる	CMS記事タイプの本文を紐付けて、リッチテキストボックスで使用できる	特定のパーツに使用されている	特定の条件で自動的に設定される	対応する属性	対応しない属性	備考
<svg>	△	-	-	-	-	-	✅	-	-	△：画像など外部要素のアップロードで使用可能タグとしては使えないが、画像としてアップロードすることで利用可能。
<math>	×	-	-	-	-	-	-	-	-	-

スクリプト

要素名	Studio対応	Boxに付与できる	Text Boxに付与できる	リッチテキストボックスに付与できる	CMS記事タイプの本文を紐付けて、リッチテキストボックスで使用できる	特定のパーツに使用されている	特定の条件で自動的に設定される	対応する属性	対応しない属性	備考
<canvas>	×	-	-	-	-	-	-	-	-	-
<noscript>	×	-	-	-	-	-	-	-	-	ユーザーが設定することはできない。 iframe 埋め込みや、Custom Code では可能。ただ、Studioは<script>が使えない環境下では何も表示できないため、実質使えないとみて×と判断
<script>	○	-	-	-	-	-	✅	src, type, nomodule, async, defer, crossorigin, integrity, referrerpolicy, blocking, fetchpriority	-	-

編集範囲の特定

要素名	Studio対応	Boxに付与できる	Text Boxに付与できる	リッチテキストボックスに付与できる	CMS記事タイプの本文を紐付けて、リッチテキストボックスで使用できる	特定のパーツに使用されている	特定の条件で自動的に設定される	対応する属性	対応しない属性	備考
<del>	×	-	-	-	-	-	-	-	-	-
<ins>	×	-	-	-	-	-	-	-	-	-

表コンテンツ

要素名	Studio対応	Boxに付与できる	Text Boxに付与できる	リッチテキストボックスに付与できる	CMS記事タイプの本文を紐付けて、リッチテキストボックスで使用できる	特定のパーツに使用されている	特定の条件で自動的に設定される	対応する属性	対応しない属性	備考
<caption>	×	-	-	-	-	-	-	-	-	-
<col>	×	-	-	-	-	-	-	-	-	-
<colgroup>	×	-	-	-	-	-	-	-	-	-
<table>	○	-	-	-	✅	-	-	-	-	自動適用記事タイプモデルにおいて、本文で「＋」ボタン→Tableを選ぶことで設置できる
<tbody>	○	-	-	-	✅	-	-	-	-	自動適用上記のTable内に含まれている
<td>	○	-	-	-	✅	-	-	colspan (任意値指定不可), rowspan (任意値指定不可)	colspan, rowspan, headers	自動適用上記のTable内に含まれている
<tfoot>	×	-	-	-	-	-	-	-	-	-
<th>	○	-	-	-	✅	-	-	colspan (任意値指定不可), rowspan (任意値指定不可)	colspan, rowspan, headers, scope, abbr	上記のTableにおいて行見出し・列見出しを設定することで使用できる
<thead>	×	-	-	-	-	-	-	-	-	-
<tr>	○	-	-	-	✅	-	-	-	-	自動適用上記のTable内に含まれている

フォーム

要素名	Studio対応	Boxに付与できる	Text Boxに付与できる	リッチテキストボックスに付与できる	CMS記事タイプの本文を紐付けて、リッチテキストボックスで使用できる	特定のパーツに使用されている	特定の条件で自動的に設定される	対応する属性	対応しない属性	備考
<button>	○	-	-	-	-	✅	✅	type(submit), type(button)	disabled, form, formaction, formenctype, formmethod, formnovalidate, formtarget, name, popovertarget, popovertargetaction, type(reset), value	type(submit) フォームのボタン自動適用 type(button) モーダルのボタン、カルーセルのボタンなど自動適用
<datalist>	×	-	-	-	-	-	-	-	-	-
<fieldset>	×	-	-	-	-	-	-	-	-	-
<form>	○	-	-	-	-	✅	✅	action: CMS 文字検索で自動付与, method: CMS 文字検索で自動付与, name	accept-charset, action, autocomplete, enctype, method, novalidate, target, rel	自動適用フォームボックスの配置により自動で設定される
<input>	△	-	-	-	-	✅	✅	accept：type file で自動付与, autocomplete：全て offで付与される, name：「項目名」に記入したものがnameとして付与される, type: text, email, tel, checkbox, radio, file のみ, value: type checkbox, radio で付与可能, required, placeholder	accept, alt, autocomplete, checked, dirname, disabled, form, formaction, formenctype, formmethod, formnovalidate, formtarget, height, list, max, maxlength, min, minlength, multiple, pattern, popovertarget, popovertargetaction, readonly, size, src, step, type, value, width	△：選べる属性（type）として制限がある自動適用
<label>	○	✅	-	-	-	✅	-	-	for	-
<legend>	×	-	-	-	-	-	-	-	-	-
<meter>	×	-	-	-	-	-	-	-	-	-
<optgroup>	×	-	-	-	-	-	-	-	-	-
<option>	○	-	-	-	-	-	✅	value	disabled, label, selected	select とセットで自動適用
<output>	×	-	-	-	-	-	-	-	-	-
<progress>	×	-	-	-	-	-	-	-	-	-
<select>	○	-	-	-	-	✅	✅	name, required	autocomplete, disabled, form, multiple, size	自動適用フォームパーツを設置することで使用できる
<textarea>	○	-	-	-	-	✅	✅	name, placeholder, required	autocomplete, cols, dirname, disabled, form, maxlength, minlength, readonly, rows, wrap	自動適用フォームパーツを設置することで使用できる

インタラクティブ要素

要素名	Studio対応	Boxに付与できる	Text Boxに付与できる	リッチテキストボックスに付与できる	CMS記事タイプの本文を紐付けて、リッチテキストボックスで使用できる	特定のパーツに使用されている	特定の条件で自動的に設定される	対応する属性	対応しない属性	備考
<details>	×	-	-	-	-	-	-	-	-	-
<dialog>	×	-	-	-	-	-	-	-	-	-
<summary>	×	-	-	-	-	-	-	-	-	-

ウェブコンポーネント

要素名	Studio対応	Boxに付与できる	Text Boxに付与できる	リッチテキストボックスに付与できる	CMS記事タイプの本文を紐付けて、リッチテキストボックスで使用できる	特定のパーツに使用されている	特定の条件で自動的に設定される	対応する属性	対応しない属性	備考
<slot>	×	-	-	-	-	-	-	-	-	-
<template>	×	-	-	-	-	-	-	-	-	-

グローバル属性対応表

表の読み方

○：対応しています。

△：一部のケースにおいて対応しています。

×：非対応です。

対応表

属性名	Studio対応	対応しない属性	備考
accesskey	×
autocapitalize	×
class	△		自動付与。ユーザーが設定することはできない。
contenteditable	×	inputmode
contextmenu	×
data-*	△		自動付与。ユーザーが設定することはできない。
dir	×
draggable	×
hidden	×
id	○		自由に設定できる。
itemprop	×
lang	△		html要素にだけ設定できる。
role	×
slot	×
spellcheck	×
style	△		自動付与。ユーザーが設定することはできない。
tabindex	△		自動付与。ユーザーが設定することはできない。
title	×
translate	×

備考

こちらのドキュメントに記載しているHTML要素表・属性対応表は、MDN Web Docs HTML 要素リファレンスから、HTML要素の分類方法を参照の上、記載しています。

HTMLタグ

CMS記事作成から公開までの流れ

WCAG 2.1 Level A, AA対応表

Studioアクセシビリティチェックシート

Studio用語集