CSS

基本書式

cssbox("any: css; style: here;"){{段落など}}

内部のテキストの段落を適用させない書式

cssbox("any: css; style: here;",テキスト)

2つの書式は、HTML/CSSでいう**「ブロック要素（箱）」として扱うか、「インライン要素（文字の一部）」**として扱うか、という決定的な違いがあります。
簡単に言うと、「改行されて独立した箱になるか」、**「文章の途中に埋め込めるか」**の違いです。
1. 基本書式（ブロック型）
#cssbox("スタイル"){{ 中身 }}

* イメージ: 「段ボール箱」
* 挙動:
  * これを使うと、前後で必ず改行されます。
  * 内部は「段落（Paragraph）」として扱われるため、テキストの上下に**自動的に余白（マージン）**が生まれます。
  * 用途: 記事のセクション全体、警告ボックス、枠で囲ったコラムなど、まとまった文章やコンテンツを作るときに使います。

2. テキスト引数書式（インライン型）

* イメージ: 「マーカー」や「付箋」
* 挙動:
  * これを使っても、改行されません。文章の流れるラインの中に留まります。
  * 内部に「段落」が生成されないため、余計な余白（マージン）がつきません。
  * 用途: 文中の特定の単語だけ赤く囲む、短いボタンを作る、ラベルを貼るなど、行の中にデザインを混ぜたいときに使います。

比較まとめ

具体的な使い分けの例
【基本書式 {{...}} を使う場面】

「ここから下は重要な注意書きです」という、独立した枠を作りたいとき。

これは注意書きです。改行しても大丈夫です。

【第2引数書式 (,テキスト) を使う場面】
承知いたしました。

cssbox("CSS", テキスト) の形式は、**「箱の中に余計な隙間（段落のマージン）を作らず、文字をピタッと箱に収めたいとき」や「ボタンのようなパーツを作りたいとき」**に使います。

特に display: inline-block; というCSSと組み合わせることで真価を発揮します。
そのままコピペして使えるサンプルを3つ、プレーンテキストで提示します。
サンプル1：ボタン風のデザイン
（背景色と枠線をつけ、角を丸くしてボタンのように見せます）

送信する

サンプル2：NEW! バッジ
（文字サイズを小さくし、赤背景で目立たせるラベルです）

NEW!

サンプル3：付箋（ふせん）風メモ
（左側に太い線を引き、背景を薄くして、要点を目立たせます）

ここが重要なポイントです

使い方のコツ:
この display:inline-block; をCSSに入れると、箱が「文字の長さ」に合わせて自動で小さくなり、横並びしやすくなります。

「この文章の [ここだけ] を目立たせたい」というとき。

結論から言うと、「箱の中に『隙間（行間）』ができるか、できないか」 という違いが最も大きいです。
WIKIWIKIのシステム（PukiWiki）が、中身をどう処理するかが異なります。
1. {{ ... }} の場合（基本書式）
「文章（段落）」を入れるための箱です。

* 中身の扱い: 自動的に <p>（段落タグ） で包まれます。
* 見た目の結果: 文字の上下に 「段落としての隙間（マージン）」 が勝手に追加されます。
* 用途: 長い文章、箇条書き、表組みなど、まとまったコンテンツを入れるとき。

2. ,テキスト の場合（引数書式）
「文字データ」をそのまま入れるための箱です。

* 中身の扱い: <p> タグが付きません。文字が裸のまま 箱に入ります。
* 見た目の結果: 隙間が生まれません。枠線と文字がピッタリくっつきます。
* 用途: ボタン、ラベル、バッジなど、箱のサイズを文字ギリギリにしたいとき。

🖼️ 比較図解
もし「赤い枠線」をつけた場合、こうなります。
① {{ ... }} の場合

#cssbox("border:1px solid red;"){{ テキスト }}

[ 🟥🟥🟥🟥🟥🟥 ]

[ 🟥　　　　　🟥 ]

[ 🟥　テキスト　🟥 ] ← 勝手に上下に隙間ができる

[ 🟥　　　　　🟥 ]

[ 🟥🟥🟥🟥🟥🟥 ]

② ,テキスト の場合

#cssbox("border:1px solid red;",テキスト)

[ 🟥🟥🟥🟥🟥🟥 ]

[ 🟥テキスト🟥 ] ← 隙間なし。ピッチリ。

[ 🟥🟥🟥🟥🟥🟥 ]

💡 使い分けの決定版

* 「ボタン」や「アイコン」を作りたい
  * 👉 ,テキスト (カンマ区切り) を使う。
  * （理由：隙間がないので、padding で自分で余白を細かく調整できるから）
* 「コラム」や「囲み記事」を作りたい
  * 👉 {{ ... }} (中括弧) を使う。
  * （理由：中で改行したり、箇条書きを使ったりできるから）

中央寄せ margin:0 auto;
右寄せ margin-left: auto; margin-right: 0;
左寄せ margin-right: auto;

​🎨 1. background (背景) のレパートリー

🖼️ 2. border (枠線) のレパートリー

border: thick double
border:2px dashed

1. 📏 間隔 (Margin & Padding)
​これらは、要素の内外の余白を制御し、他の要素との距離を調整するために使用

2. 🖼️ 枠と背景 (Border & Background)
​要素の視覚的な境界線と背景色を決定

3. 📐 サイズ (Width & Height)
​要素の寸法を制御します。これらはすべてpx（ピクセル）や%（パーセント）などの単位で指定

4. 🧭 配置 (Alignment)
​要素内のテキストや内容の位置を調整

​🎨 CSS（カスケーディング・スタイル・シート）とは？
​CSSは、ウェブページの見た目（スタイル）やレイアウトを定義するための言語です。
​HTMLがウェブページの内容（コンテンツ）と構造（骨組み）を決めるのに対し、CSSは、そのHTMLでマークアップされた要素をブラウザでどのように表示するかを指示します。