未分類
マークダウンで使えるHTML要素一覧
このページでは、Nuxt Content（MDX/MDC）で使用可能なHTML要素を実際に表示して確認できます。
1. テキスト装飾系
ハイライト（mark）
これはハイライトされたテキストです
上付き・下付き文字（sup / sub）
H2O（水の化学式）
E = mc2（アインシュタインの式）
略語（abbr）
HTMLは、ウェブページの構造を定義する言語です。
キーボード入力（kbd）
コピーするには Ctrl + C を押してください。
取り消し線と追記（del / ins）
この機能は廃止されましたv2.0で復活しました。
小さい文字（small）
※これは注釈です。小さい文字で表示されます。
引用元（cite）
『となりのトトロ』は1988年に公開されました。
定義（dfn）
APIとは、Application Programming Interfaceの略です。
変数（var）
方程式 x + y = 10 を解きなさい。
サンプル出力（samp）
コマンドを実行すると、Hello, World! と出力されます。
2. インタラクティブ系
折りたたみ（details / summary）
クリックして詳細を表示
これは折りたたまれていた内容です。
- リスト項目1
- リスト項目2
- リスト項目3
最初から開いている折りたたみ
open属性を付けると、最初から開いた状態で表示されます。
ネストした折りたたみ
レベル1
レベル2
<details>
<summary>レベル3</summary>
最深部のコンテンツです。
</details>
3. レイアウト系
汎用コンテナ（div）
これはdivで囲まれたコンテンツです。背景色とパディングを設定しています。
インライン要素（span）
これは赤い文字と青い文字を含む文章です。
セクション分け（section）
セクション1
これはsectionタグで囲まれた領域です。
セクション2
別のセクションです。
記事（article）
記事タイトル
これはarticleタグで囲まれた独立したコンテンツです。
サイドバー（aside）
4. テーブル系
基本テーブル
| 名前 | 年齢 | 職業 |
|---|---|---|
| 田中太郎 | 30 | エンジニア |
| 山田花子 | 25 | デザイナー |
セル結合テーブル
| 売上（万円） | |||
|---|---|---|---|
| 店舗 | 1月 | 2月 | 3月 |
| 東京 | 100 | 120 | 130 |
| 合計: 350 | |||
| 大阪 | 80 | 90 | 100 |
5. メディア系
図とキャプション（figure / figcaption）
画像とキャプション
6. リスト系
説明リスト（dl / dt / dd）
- HTML
- ウェブページの構造を定義するマークアップ言語
- CSS
- ウェブページのスタイルを定義するスタイルシート言語
- JavaScript
- ウェブページに動的な機能を追加するプログラミング言語
7. 引用系
ブロック引用（blockquote）
シンプルさは究極の洗練である。
インライン引用（q）
彼は明日やろうは馬鹿野郎
と言った。
8. フォーム要素（表示のみ）
入力フィールド
セレクトボックス
チェックボックスとラジオボタン
テキストエリア
ボタン
プログレスバー
70%
メーター
9. ルビ（ふりがな）
基本的なルビ
漢字複数のルビ
東京から大阪まで。
10. その他
水平線（hr）
上のコンテンツ
改行（br）
1行目
2行目
3行目
時間（time）
このイベントはに開催されます。
住所（address）
株式会社サンプル〒100-0001
東京都千代田区1-1-1
マーク付きリスト（data）
- りんご
- みかん
- バナナ
双方向テキスト（bdo）
通常: Hello World
右から左: Hello World
注意事項
<script>タグはセキュリティ上使用できません<style>タグも基本的に使用できません（インラインスタイルは可）- イベントハンドラ（onclick等）は動作しません
- iframe は外部サイトによっては表示されない場合があります