Markdown記法ガイド

このアプリケーションで使用可能なMarkdown記法とHTMLタグについて説明します。

基本的なMarkdown記法

見出し

# 見出し1 (最大)
## 見出し2 (大)
### 見出し3 (中)

文字装飾

**太字**
*斜体*
***太字斜体***
~~取り消し線~~
`インラインコード`

リスト

- 箇条書き
- 項目2
  - ネストした項目

1. 番号付きリスト
2. 項目2
   1. ネストした番号付き

リンク

[リンクテキスト](https://example.com)
[内部リンク](./other-page)

• 外部リンクはツールバーのインターネットアイコンから作成できます。
• 内部リンクは、ツールバーのリンクボタンを押して作成済みのページを選択すると作成できます。

画像

![代替テキスト](画像URL)
![代替テキスト](画像URL){{size:60%}}  // サイズ指定(30,60,90のみ)

• ツールバーの画像ボタンを押して、画像ファイルをアップロードまたは選択してください。

コードブロック

```javascript
const example = "コードブロック";
```

表

| 列1 | 列2 | 列3 |
|-----|-----|-----|
| データ1 | データ2 | データ3 |

引用

> 引用文
> 複数行の引用

許可されているHTMLタグ

基本タグ

• <p> - 段落
• <div> - ブロック要素
• <span> - インライン要素
• <br> - 改行
• <hr> - 水平線

見出しタグ

• <h1> - <h6> - 見出し

リストタグ

• <ul>, <ol>, <li> - リスト

表タグ

• <table>, <thead>, <tbody>, <tr>, <th>, <td> - 表

リンクと画像

• <a href="URL"> - リンク
• <img src="URL" alt="代替テキスト"> - 画像

文字装飾タグ

• <strong>, <b> - 太字
• <em>, <i> - 斜体
• <u> - 下線
• <s>, <del> - 取り消し線
• <small> - 小さい文字
• <big> - 大きい文字（非推奨だが使用可能）

コード関連

• <code> - インラインコード
• <pre> - 整形済みテキスト

引用

• <blockquote> - 引用ブロック

カスタムタグ

内部リンク

[[ページパス]]
[[sidebar]]  // サイドバーリンク

style属性を使用したカスタムスタイル

セキュリティを保ちながら、以下のCSSプロパティのみ使用可能です：

許可されたCSSプロパティ

• font-size - フォントサイズ
• color - 文字色
• font-weight - 文字の太さ
• font-style - 文字スタイル（斜体など）
• text-decoration - 文字装飾（下線など）
• text-align - 文字揃え

使用例

フォントサイズの変更

通常の文字 <span style="font-size: 1.5em;">大きい文字</span> <span style="font-size: 0.8em;">小さい文字</span>

文字色の変更

<span style="color: red;">赤い文字</span>
<span style="color: #3b82f6;">青い文字</span>
<span style="color: rgb(34, 197, 94);">緑の文字</span>

複合スタイル

月額 <span style="font-size: 2em; color: #ff6b35; font-weight: bold;">¥1,980</span> <span style="font-size: 0.8em; color: #666;">税込</span>

文字装飾

<span style="text-decoration: underline;">下線付き</span>
<span style="font-style: italic;">斜体</span>
<span style="font-weight: bold;">太字</span>

文字揃え

<div style="text-align: center;">中央揃え</div>
<div style="text-align: right;">右揃え</div>

料金表示の例

## プレミアムプラン

<div style="text-align: center;">
  <span style="font-size: 2.5em; color: #059669; font-weight: bold;">¥2,980</span>
  <span style="font-size: 0.9em; color: #6b7280;">/月</span>
</div>

**特徴:**
- <span style="color: #dc2626;">✗</span> 基本機能
- <span style="color: #059669;">✓</span> プレミアム機能
- <span style="color: #059669;">✓</span> 優先サポート

セキュリティ制限

以下の要素はセキュリティ上の理由で使用できません：

禁止されたCSSプロパティ

• background - 背景関連（XSS攻撃の可能性）
• position - 位置指定（レイアウト破壊の可能性）
• display - 表示方式（レイアウト破壊の可能性）
• width, height - サイズ指定（レイアウト破壊の可能性）

禁止された値

• javascript: - JavaScriptコード
• url() - 外部URL参照
• expression() - IE独自の式
• <, > - HTMLタグを含む値

禁止されたタグ

• <script> - JavaScript実行
• <style> - CSS定義
• <iframe> - 外部コンテンツ埋め込み
• <object>, <embed> - プラグインコンテンツ

注意事項

1. セキュリティ: 許可されていないCSSプロパティや値は自動的に除去されます
2. 互換性: 標準的なMarkdown記法を優先して使用することを推奨します
3. プレビュー: 編集画面のプレビュー機能で実際の表示を確認してください
4. パフォーマンス: 過度に複雑なスタイルは避け、シンプルな装飾を心がけてください