差分

このページの2つのバージョン間の差分を表示します。

--- guide:bbcodes [2025/10/12 19:54] – 作成 k_mars
+++ guide:bbcodes [2025/10/13 17:58] (現在) – [掲示板コード（BBコード）の基本とネスト] k_mars
@@ 行 1: / 行 1: @@
+====== 掲示板コード（BBコード） ======
-> **解説:**
+掲示板コード（**BBコード**）は、SMFをはじめとする多くのオンラインフォーラムで投稿を整形するための仕組みです。
-> 書式設定タグ（bold, size, colorなど）は、
+投稿ページの各ボタンの説明については、「掲示板コードの基本」を参照してください。
-> **配置タグ（centerなど）の内側に置く**必要があります。
+ここでは、**ネスト（入れ子構造）** の概念について詳しく解説します。
-> HTMLでいう `<center><b>…</b></center>` のような構造と同様です。
 ----
-===== よく使うBBCode一覧 =====
+===== BBコードの一般的な形式 =====
-| コード | 表示例 | 説明 |
+BBCodeタグは、以下のように「開始タグ」「内部コンテンツ」「終了タグ」の3つの部分で構成されます。
-|---------|---------|------|
-| `[b]太字[/b]` | **太字** | 強調表示 |
-| `[i]斜体[/i]` | *斜体* | 装飾 |
-| `[u]下線[/u]` | <u>下線</u> | 重要語句 |
-| `[s]取り消し線[/s]` | ~~取り消し線~~ | 修正表示 |
-| `[color=blue]青文字[/color]` | <font color="blue">青文字</font> | 文字色変更 |
-| `[size=14pt]文字サイズ[/size]` | 大きい文字 | サイズ変更 |
-| `[url=https://example.com]サイト名[/url]` | [サイト名](https://example.com) | リンク |
-| `[img]https://example.com/pic.jpg[/img]` | （画像表示） | 画像挿入 |
-| `[quote]引用文[/quote]` | 引用ブロック | 他者投稿の引用 |
-| `[code]print("Hello!")[/code]` | `print("Hello!")` | ソースコード表示 |
-| `[list][li]項目1[/li][li]項目2[/li][/list]` | • 項目1<br>• 項目2 | 箇条書き |
-> **補足:**
+<code bbcode>
-> 画像やURLを挿入する際は、外部サイトの利用規約を遵守してください。
+[開く]テキスト[/閉じる]
-> 特に教育・研究フォーラムでは著作権に注意が必要です。
+[b]太字テキスト[/b]
+</code>
 ----
-===== 複雑な装飾の例 =====
+===== 順序が重要な場合（パート1） =====
-以下のように複数タグを組み合わせると、
+BBCodeタグは、**子タグが親タグよりも先に閉じられている限り**、他のタグの中に入れることができます。
-より見やすい強調やレイアウトが可能です。
+たとえば、太字と斜体を同時に適用する場合は次のようにします。
+<code bbcode>
+[b][i]太字と斜体のテキスト[/i][/b]
+</code>
+あるいは、逆の順序でも構いません。
+<code bbcode>
+[i][b]太字と斜体のテキスト[/b][/i]
+</code>
+インデントを付けて書くと、構造が視覚的にわかりやすくなります。
+<code bbcode>
+[b]
+    [i]
+        太字と斜体のテキスト
+    [/i]
+[/b]
+</code>
+----
+===== ネストが誤っている例 =====
+以下のように、**親タグ [b] が子タグ [i] より先に閉じられている**と、構造が崩れます。
+<code bbcode>
+[b][i]太字と斜体のテキスト[/b][/i]
+</code>
+<code bbcode>
+[b]
+    [i]
+        太字と斜体のテキスト
+[/b]
+    [/i]
+</code>
+----
+===== 順序が重要な場合（パート2） =====
+``size``、``bold``、``italic`` などの**テキスト書式タグ**を
+``center``、``left``、``right``、``pre`` などの**配置タグ**と組み合わせる場合、
+**必ず書式タグを配置タグの内側に置く必要があります**。
+**正しい例：**
+<code bbcode>
+[center][size=36pt][b][u]テキスト[/u][/b][/size][/center]
+</code>
+**誤った例（順序が逆）：**
+<code bbcode>
+[size=36pt][center][b][u]テキスト[/u][/b][/center][/size]
+</code>
+----
+===== 改善のポイント =====
+  * DokuWikiでコードを示す際は、<code> または ``` の囲みを使うと視認性が向上します。
+  * BBコード例をすべて等幅フォント（整形済み）で表示すると、タグの構造が正確に伝わります。
+  * 「正しい例」と「誤った例」を対比させることで、誤用を防ぐ教育的効果があります。
+  * 見出しの階層（======、=====、====）を活用して、ページ全体の構成を明確にします。
+  * セクション間に「----」を挟むと、読みやすく整理された印象になります。
+----
+<WRAP box round tip 80%>
+**ページナビ**
+→ [[guide:start|利用ガイド]] » [[guide:bbcodes|掲示板コード（BBC）]] » [[https://forum.fine-scale.net|フォーラムへ戻る]]
+</WRAP>