ページの作成
親となるページを選択してください。
親ページに紐づくページを子ページといいます。
例: 親=スポーツ, 子1=サッカー, 子2=野球
子ページを親ページとして更に子ページを作成することも可能です。
例: 親=サッカー, 子=サッカーのルール
親ページはいつでも変更することが可能なのでとりあえず作ってみましょう!
| この記事の要点 |
|
「その他」カテゴリの位置づけ
HTML5 では数多くの要素が定義されており、当サイトでは「テキスト」「フォーム」「テーブル」「メディア」のような大きなカテゴリ別にまとめています。本ページではそれらのいずれにも収まりにくい、便利だが少し用途の専門的な要素を「その他」としてまとめて紹介します。子ページから興味のある要素を選んで詳細を確認してください。
主な「その他」要素の早見表
| 要素 | 分類 | 用途 |
|---|---|---|
| 対話 | モーダル/非モーダルのダイアログを表現 |
| 対話 | 開閉可能なアコーディオン |
| 対話 | コマンド類のリスト(コンテキストメニュー的に使われる) |
| テンプレート | JavaScript で動的に挿入する DOM の雛形 |
| テンプレート | Web Components のスロット |
| メタ | 機械可読な値を人間可読なテキストに添える |
| メタ | 日付・時刻を機械可読な形で表現 |
| テキスト補助 | 改行可能位置のヒントを与える |
| テキスト補助 | 意味的な強制改行 |
| セクション | テーマの区切り(水平線) |
使用例:dialog 要素でモーダルを開く
showModal() でモーダル表示、show() で非モーダル表示。閉じるときは close() を呼ぶか、フォームの method="dialog" を使うとボタン押下で自動的に閉じます。
使用例:details 要素でアコーディオン
詳細を開く
ここに本文を書きます。JavaScript 不要で開閉できます。
使用例:template 要素で雛形を用意
使い分けのコツ
- 開閉 UI は
を第一候補にすると、CSS だけで装飾できアクセシビリティも担保される - モーダルは無理に独自実装せず
を使うとフォーカストラップやキー操作が標準で動く - 機械可読な日時は
を必ず付ける(SEO・支援技術の両面でメリット) - 長い URL や英単語の改行制御には
を活用するとレイアウト崩れを防げる
関連記事
ページの作成
親となるページを選択してください。
親ページに紐づくページを子ページといいます。
例: 親=スポーツ, 子1=サッカー, 子2=野球
子ページを親ページとして更に子ページを作成することも可能です。
例: 親=サッカー, 子=サッカーのルール
親ページはいつでも変更することが可能なのでとりあえず作ってみましょう!
人気ページ
- 1 Eclipseで「サーバーに追加または除去できるリソースがありません。」の原因と対処法
- 2 tomcat の起動 / 停止ログと catalina.log・catalina.out の違い
- 3 JavaScript base URL 取得方法|window.location.origin と SSR/Node.js 対応
- 4 YouTube Data API v3 エラー一覧|403/400/404 の主要原因と切り分け
- 5 Spring Frameworkのアノテーション一覧
- 6 Laravel エラー一覧|500/Blade/DB 接続/ルーティングの代表エラー
- 7 3Dグラフィックスとは|モデリング/レンダリング/主要ソフトウェア (Blender / Maya)
- 8 【Spring】@Valueアノテーションとは
- 9 CATALINA_HOME の確認方法 (Linux / Mac)
- 10 【Spring】@Autowiredアノテーションとは
最近更新/作成されたページ
- HTML q要素(インライン引用 / blockquote との違い / cite属性の使い方) 2026-06-11 05:44:46
- SQL 制約(NOT NULL / UNIQUE / PRIMARY KEY / FOREIGN KEY / CHECK / DEFAULT 完全ガイド) 2026-06-11 05:44:46
- Mac Safari でユーザーエージェントを切り替える方法(開発メニュー / Chrome や IE のフリ) 2026-06-11 05:44:46
- Laravel ルート一覧確認|php artisan route:list の使い方・フィルタオプション・JSON 出力・キャッシュ 2026-06-11 05:44:46
- Java static変数(クラス変数 / インスタンス変数との違い / 使い所と落とし穴) 2026-06-11 05:44:46
- HTML bdo要素(双方向テキストの方向を強制 / dir 属性の使い方 / bdi との違い) 2026-06-11 05:44:46
- Webスクレイピングとは|Python で始めるサンプルコード・robots.txt・利用規約・法的注意点まとめ 2026-06-11 05:44:46
- Canvas API 図形描画|四角形 fillRect / 円 arc / 線 lineTo / 多角形 と塗りつぶし・輪郭の使い分け 2026-06-11 05:44:46
- jQuery 値の取得|.text() / .html() / .val() / .attr() / .data() の違いと使い分け 2026-06-11 05:44:46
- UE5 ThirdPersonテンプレート キャラクターを歩かせる方法(Max Walk Speed / Shift で走る切替) 2026-06-11 05:44:46
- HTML figure要素(figcaption と一緒に図表・画像・コードを意味付け) 2026-06-11 05:44:46
- SQL DELETE 文 完全ガイド|WHERE 句必須、ROLLBACK、TRUNCATE との違い、Oracle/MySQL/PostgreSQL の違い 2026-06-11 05:44:46
- jQuery クリックイベント完全ガイド|.click() と .on("click") の違い・イベント委譲・ダブルクリック対策 2026-06-11 05:44:46
- jQuery .ready()(DOM 構築完了で実行 / 4 つの書き方 / 現代の代替) 2026-06-11 05:44:46
- Java Calendar.getInstance() 使い方|タイムゾーン/ロケール指定・年月日曜日の取得・LocalDate との比較 2026-06-11 05:44:46
コメントを削除してもよろしいでしょうか?