この記事では、STUDIOを使用して作られたWebサイトが出力する、HTML要素・属性の対応可否を記載します。
対応表は、以下の記載方針もと作成しています。
対象
STUDIOの操作を理解している。
適切にマークアップを構築する。
アクセシブルなサイトを制作する。
記載方針
HTML Living Standardに基づいて表を作成しています。
非推奨要素・非推奨属性は、表中に掲載していません。
STUDIOのデザインエディタ上で選択することができるHTML要素については、STUDIO U HTMLタグをご覧ください。
最終更新:2023年6月6日
表の読み方
要素名
HTML要素の名称です。
STUDIO対応表
列「STUDIO対応」の記載内容です。
○:自分で使用する、UIを介して使用する、自動付与されることで、STUDIOが生成するHTML要素上に現れる。
×:STUDIOが生成するHTML要素上には現れない。
(三角については、各項目の備考に詳細情報を個別記載)
使用箇所表
以下6つの項目は、STUDIOを経由してHTML要素を使用する際の方法を示したものです。
Boxに付与できる。
Text Boxに付与できる。
リッチテキストボックスに付与できる。
CMS記事タイプの本文を紐付けて、リッチテキストボックスで使用できる。
特定のパーツに使用されている。
特定の条件で自動的に設定される。
各使用方法ごとに、それぞれのHTML要素の使用方法を記載しています。
✅:各列の使用方法に対応しています。
-:この使用方法には対応していません。
対応する属性/対応しない属性
各HTML要素と紐づく属性のうち、STUDIOが対応するものもしくは対応しないものを、判別することができます。
備考
各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> | ○ | △ | ✅ | ✅ | ✅ | × | - | - | - | 子要素を持つボックスに設定する際には、特定の条件を満たす必要がある |
<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要素の分類方法を参照の上、記載しています。