◎ InsidersMarkupの基礎

　InsidersMarkupには、「★」で始まるインライン処理と、「□」で始まるブロック処理の2種類がある。まず最初にこれを覚えてほしい。

★タグ名【ここにインライン処理を記述する。】★

□タグ名------------------------
ここにブロック処理を記述する。
□□□--------------------------

　インライン処理のスコープは、「【」と「】」で囲むことで指定できる。

　ブロック処理のスコープは、行頭の「□」と行頭の「□□□」で囲むことで指定できる。なお、「------」の部分は無視される。

　※ ここでいう「インライン処理」と「ブロック処理」は、あくまで「インライン＝行内」と「複数行の塊＝ブロック」という意味で定義されており、必ずしもHTML仕様上の「インライン要素」と「ブロック要素」に1対1で対応しているわけではないので注意してほしい。

　インライン処理の「】★」やブロック処理の「□□□」は、ほかのタグと共通の終了タグになる。そのため、タグを入れ子に組む場合は階層構造が分かりにくくなる場合がある。そのような場合、次の記述例のように、「】タグ名★」や「□□□タグ名」という形で、明示的に終了タグを記述することもできる。

★タグ名【ここにインライン処理を記述する。】タグ名★

□タグ名------------------------
ここにブロック処理を記述する。
□□□タグ名--------------------

◎ 重要な書式タグの一覧

　InsidersMarkupを使ううえでの必要最小限のタグとして、以下のものを覚えてほしい。

★アイコン【/path/to/img.png】★
連載名またはサブタイトル｜――副題――（省略可能）
記事タイトル｜――副題――（省略可能）

所属組織1　筆者氏名1 名前1（◆http://www.wings.msn.to/◇http://www.wings.msn.to/◆） ＆ 所属組織2　筆者氏名2 名前2
20xx/xx/xx

紹介文（省略可能）
############################################################################

　ここから本文を書く。

############################################################################
▼改ページ【前のページのタイトル（2ページ目以降は省略可能）｜次のページのタイトル】

■章タイトル／大見出し（通常）
●節タイトル／中見出し（通常）
○段タイトル／小見出し（通常）
▽項タイトル／項目タイトル（通常）

◆テキスト・リンク◇http://www.yahoo.co.jp/◆

▲太字テキスト▲　＝　★太【太字テキスト】★　……<b>タグ
△重要テキスト△　＝　★重【重要テキスト】★　……<strong>タグ

★テキストの色★　＝　★赤【テキストの色】★　……赤色
☆マーカーの色☆　＝　☆黄【マーカーの色】☆　……黄色

★+1【フォント・サイズは「-3|-2|-1|+1|+2|+3」の中から指定】★

◎WebClient◎クラス　……プログラミング上のキーワード（ITmedia-CMSでは無視）
［Alt］＋［A］キー　……キーボードのキー入力（ITmedia-CMSではそのまま出力）

①②③　＝　≪1≫≪2≫≪3≫　……丸数字（画像内の項目説明に使う）
≪A≫≪B≫≪C≫　……四角アルファベット（画像内の項目説明に使う）

・箇条書きリスト１
・箇条書きリスト２
1. 番号付きリスト１
2. 番号付きリスト２
① 丸数字リスト１
② 丸数字リスト２
a. アルファベットリスト１
b. アルファベットリスト２
≪A≫ 四角アルファベットリスト１
≪B≫ 四角アルファベットリスト２

ここに★画面：画面タイトル（省略可能）【/path/to/screen-image.png】★
インラ★図：図タイトル（省略可能）【/path/to/figure-image.gif】★
イン画像★写真：写真タイトル（省略可能）【/path/to/photo-image.jpg】★
◆★拡大画面：タイトル指定【screen-image-s.png】★◇screen-image.png◆

□画像-------------------------- ←ブロック開始
◆★画面：タイトル指定【screen-image-s.png】★◇screen-image.png◆
□：---------------------------- ←仕切り
★図【figure-image2.png】★｜★図【figure-image3.png】★
　　　上記の横並び画像のキャプション（左側の余白は無視される）
□：---------------------------- ←仕切り
　　　　　　　▼
□：---------------------------- ←仕切り
★写真：上の▼の左側の余白も無視される【photo-image3.png】★
□□---------------------------- ←説明領域開始
1行目は画像タイトル（省略可能）
2行目以降は画像の説明になる（省略可能）。なお、説明領域内で空白行を入れると段落として処理される。
①項目説明1（ここから下の箇条書き領域も省略可能）。②のような丸数字も書ける。
②項目説明2。
③項目説明3。→≪A≫へ。
□□□-------------------------- ←ブロック終了

□------------------------------
タグ名を明示しない場合は、画像かコードで自動判定する。
□：----------------------------
2つ目以降の画像やコード。
□□----------------------------
説明欄
□□□--------------------------

□インデント
左側をインデント。～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～
□□□

脚注はこんな感じに書く★*1★。注釈と脚注は別物。

□脚注---------------------------
★*1★　ここに説明を書く。
★脚注【*2】★　明示することもできる。
□□□---------------------------

◎ 利用上の注意点

• 「<」「&」などのHTML上の特殊文字は（「<」「&」などに）自動変換される。逆に自動変換されたくない場合は、インライン生HTML（例えば「★html【π】★」）を使う
• 行頭や文中などどこでも「＾」「★」「☆」「◆」「◇」「▲」「△」「◎」などのタグや、絵文字（＝「≪」や「≫」で囲んだ丸数字／四角アルファベット）は、予約済みキーワードとなっており、本文中で使うには基本的にエスケープが必要になる
• 行頭でのみ「■」「□」「●」「○」「▼」「▽」などのタグや、箇条書きリスト、区切り線は, 予約済みキーワードとなっており、行頭で使うにはエスケープが必要になる。段落は複数行を含むが、その2行目以降の行頭もこの仕様に当てはまる
• 各InsidersMarkupタグなどの予約済みキーワードは、英数字は大文字／小文字、全角／半角はどちらを使ってもよい（ただし、「半角」「小文字」の英数字を使うことを推奨する）。またカタカナや記号は、全角／半角のどちらを使ってもよい（ただし、「カタカナは全角」「IMEなしで入力できる記号は半角、それ以外の記号は全角」を推奨する）

◎ キーワード・エスケープ

　上記の予約済みキーワードは、「^」（全角、半角、どちらでもOK）でエスケープできる。

^★エスケープしたのでそのまま出力^★

^□タグ名--------------------
エスケープしたのでブロック処理されない。
^□□□--------------------------

^=================================

^^エスケープ文字のエスケープ

　ただし、「^」に続く1文字が予約済みキーワードではない場合は、そのままの「^」という文字が出力される。

◎ レイアウト関連のタグ

　ページ・レイアウトを構成するためのタグがとしては、「改行」「クリア（回り込み解除）」「段落」「区切り線」「文章の分割／まとめ」「ページ区切り」がある。

◎ 改行

　「改行」は、実際の改行で表現する。

1行目で改行して、
2行目に続ける。

　ただし、その行が単なる空白行（＝何の文字もない空行、もしくは1つ以上の半角スペースやタブのみが含まれる行）の場合は、後述する「段落」となってしまうので注意してほしい。明示的に空行を作成したい場合には、次の例のように「★改行★」「★空行★」「★br★」のいずれかを記述する（思い出せるもので間に合わせられるように、InsidersMarkupではこのような別名を多数定義している）。

1行目と、
★改行★
3行目の間を改行している。★改行★（「改行」インライン・タグ）。
長い英数字はaaaaaaaaaaaaaaaaaaaaaaaaaaaadddddaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaeee★wbr★fffaaaaaaaaaaaaaaddddddddddddddddaaaaaaaaaaでも改行できる。

◎ クリア（回り込み解除）

　単なる改行ではなく、右寄せボックスなどの回り込みなどをクリアする改行。「★クリア★」「★回り込み解除★」「★回込解除★」「★clear★」のいずれかを記述する。

★クリア★

◎ 段落

　「段落」は、1行～複数行の文章を空白行（＝何の文字もない空行、もしくは1つ以上の半角スペースやタブのみが含まれる行）で囲むことで表現する。

1段落目。

空白行を入れたので、
ここは2段落目になる。

3段落目。

　※ なお、ファイルの先頭行の場合、下に空白行があれば、上には空白行がなくても段落になる。

　※ また、ファイルの末尾行の場合、上に空白行があれば、下には空白行がなくても段落になる。

　※ 空行が2つ以上連続する場合は、1つ分の空行として処理される。上下に大きくスペースを空けたいようなケースでは、前述の★改行★を入力すればよい。

◎ 区切り線

　行内に「★hr★」「★区切り線★」「★水平線★」「 ★罫線★」「★線★」もしくは「-----」や「=====」（行頭から5つ以上連続する「-」や「=」）を記述する。区切り線にしたくない場合は、エスケープが必要になる。

------------------------------------------------
================================================
★区切り線★

　後述の「インライン処理の基礎」や「そのほかのインライン処理」で詳しく説明するが、「hr」などのタグ名の後に続けて「：＜HTMLタグ内の属性指定＞」のようなオプション／HTMLタグ属性も記述可能（※「：」は、全角もしくは半角のコロン）。

★hr：style="border-style:dotted; border-color: blue;"★

◎ コメント区切り線

　行頭に「#####」（行頭から5つ以上連続する「#」）を記述すると、その行は出力時にはコメントとして無視される（原稿の中で、例えば記事タイトル枠と本文の切り分けや、ページ区切りなどで、区切りを視認しやすくするために使う）。

#################################################

■ 文章の分割／まとめ

　行頭に「■」「★■★」「★分割★」「★分離★」「★まとめ★」を記述する。

■

★■★
★まとめ★
□
◆
◇
▼
★■：赤★
★■：青★
★■：緑★
★■：深緑★
★■：深★
★■：オレンジ★
★■：オ★
★■：黄★
★■：紫★
★■：灰★

▼ ページ区切り

　行頭に「▼改ページ」もしくは「▼ページ区切り」と記述する。その後にスコープを付けて、前後ページのタイトルを設定することもできる。下記の例では、区切りが分かりやすくなるように「#####」という「コメント区切り線」を入れているが、入れなくてもよい。

############################################################################
▼改ページ【前のページのタイトル（2ページ目以降は省略可能）｜次のページのタイトル】

############################################################################
▼改ページ【2ページ目以降のページのタイトル】

############################################################################
▼【こんな感じでタグ名を省略してもOK】

　※タイトルに「｜」が含まれる場合も「^｜」でエスケープ可能。

　※2ページ目以降の先頭にジャンプする方法は「リンク」で説明している。

◎ 記事タイトル枠

　以下の順番に記述する。空行は必要な場所に入れる。

連載名またはサブタイトル
――副題――（省略可能）

記事タイトル
――副題――（省略可能）

所属組織1　氏名1 名前1（http://www.wings.msn.to/） ＆ 所属組織2　氏名2 名前2

20xx/xx/xx

紹介文

★アイコン：/path/to/article-icon.png★
連載名またはサブタイトル｜――副題――（省略可能）
記事タイトル｜――副題――（省略可能）

所属組織1　筆者氏名1 名前1（◆http://www.wings.msn.to/◇http://www.wings.msn.to/◆） ＆ 所属組織2　筆者氏名2 名前2
20xx/xx/xx

紹介文（省略可能）
############################################################################

　上記の例では、区切りが分かりやすくなるように「#####」という「コメント区切り線」を入れているが、入れなくてもよい。入れない場合は、（空白行を除いて）上から6行目までがタイトル枠として処理される（※逆に入れた場合は「紹介文」を省略できる）。

　上記の例では空白行が入っているが、これも見やすくするためなので、入れなくてもよい。

　「アイコン」については、「インライン画像」を参照。

　※ 連載名や記事タイトルでは、「｜」を記述することで副題を付けることができる。ITmediaCMSでは、副題は半角スペースを空けて、連載名や記事タイトルの後に連結される。

　※ 長すぎるタイトルや複数の筆者がある場合などで、要素内で改行したい場合には、その位置に「★改行★」を挿入すればよい。これを使わずに改行すると、タイトル枠の情報が適切に解析されないので注意。

◆ リンク

　同一フォルダ内であれば、ファイル名のみの指定（例：「basic01_02.html」）を推奨。

　サイト内へのリンクであれば、ルートからの絶対パス指定（例：「/fdotnet/basic/basic01_01.html」）を推奨。

　外部サイトへのリンクであれば、プロトコルからの絶対パス指定（例：「http://www.yahoo.co.jp/」）を推奨。

◆テキスト１◇http://www.yahoo.co.jp/◆　……通常のリンク。
　※外部サイトの場合は新しいウィンドウで開く（※自身のサイトの場合は、ページ遷移する）

◆テキスト２◇/fdotnet/basic/basic01_01.html：target="_blank"◆　……強制的にターゲット・リンクにする

◆テキスト３◇url：◆　……なお、「target="_blank"」は省略可能

◆テキスト４◇url：target="_self"◆　……強制的に同じウィンドウで開く

◆テキスト５◇url：title="aaa" target="_blank"◆　……titleなどの属性付きリンク

★a：href="url" title="aaa"【テキスト６】★　……<a>タグの記述方法

◆◇#id-name◆　……リンク・テキストを空にして「#」を付けると「アンカーID」
　※アンカーID＝ ページ内リンクのジャンプ先になるid属性付きの<a>タグのこと。

◆アンカーIDの位置にジャンプ◇#id-name◆　……ページ内リンク

◆2ページ目にジャンプ◇#da-page-2◆　……2ページ以降の先頭にリンクする方法

　※「アンカーID」のリンク・テキストは、基本的に空にする。

★ インライン処理の基礎

　前述の通り。「：」以降はオプション。インライン・コンテンツは指定が必要なものと不要なものがある。主にテキストの装飾で使われる。

★インライン・タグ名：HTMLタグ内の属性指定、もしくはInsidersMarkupが提供するオプション機能（省略可能）【インライン・コンテンツ】★

　日本語のタグ名は、最初の1文字に省略可能。英語名のタグは、省略不可。

★重要【～】★　→　★重【～】★
★strong【～】★　→　省略不可

★ テキストの装飾

　「★ テキストの強調（太字／重要／下線／斜体／強調／書籍引用）」「★ テキストの色」「★ マーカー」「★ 文字サイズ」「★ 不正確なテキスト」「★ 等幅フォント」「★ 上付き文字／下付き文字」「★ 編集挿入／編集削除」など。

★ テキストの強調

　テキストに対して、重要／強調／書籍引用などの意味付けを与える。

　また、テキストに対して、太字／斜体／下線などの装飾を施す（この場合のテキストは、特段の意味付けを与えるべきではないものになる。例えば重要ではないが画一的にクラス名を目立たせるときには、そのクラス名は「重要」や「強調」ではなく、「太字」で装飾しなければならない）。

▲太字テキスト▲　……最も基本的な太字（＝<b>タグ）
★太字【太字１】★　／　★太【太字２】★　／　★b【<b>タグ】★

△重要テキスト△　……２番目に大切な重要（＝<strong>タグ）
★重要【重要１】★　／　★重【重要２】★　／　★strong【<strong>タグ】★
★キーワード【キーワード１】★　／　★キ【キーワード２】★

※以下は、ITmedia向けには使えません
★下線【下線１】★　／★u【<u>タグ】★

★斜体【italic斜体１】★　／　★斜【italic斜体２】★　／　★i【<i>タグ】★
★強調【強調italic１】★　／　★強【強調italic２】★　／　★em【<em>タグ】★
★アクセント【アクセントitalic１】★　／　★ア【アクセントitalic２】★

『★書籍【書籍引用１】★』　／　『★書【書籍引用２】★』　／　『★cite【<cite>タグ】★』

★ テキストの色

　「★赤★」の代わりに、「★red★」という英語表記も可能。ほかには、「★red★」「★blue★」「★green★」「★darkgreen★」「★deepgreen★」「★bottlegreen★」「★orange★」「★yellow★」「★purple★」「★gray★」が定義されている。

　Webカラーの色名は、「WEB色見本 原色大辞典 - HTML Color Names」を参照してほしい。

★テキストの色★　……最も基本的な色付け（＝赤色）
★赤【テキスト赤】★
★青【テキスト青】★
★緑【テキスト緑】★
★深緑【テキスト深緑】★　／　★深【テキスト深】★
★オレンジ【テキストオレンジ】★　／　★オ【テキストオ】★
★黄【テキスト黄】★
★紫【テキスト紫】★
★灰【テキスト灰】★
★色：#6699FF【RGB値による色指定】★
★色：hotpink【Webカラー名による色指定】★

★ マーカー

　別名として「★マ★」「★ハイライト★」「★ハ★」「★背景色★」「★背★」なども記述できる。

☆マーカーの色☆　……最も基本的な色付け（＝黄色）
☆赤【マーカー赤】☆
☆青【マーカー青】☆
☆緑【マーカー緑】☆
☆深緑【マーカー深緑】☆　／　☆深【マーカー深】☆
☆オレンジ【マーカーオレンジ】☆　／　☆オ【マーカーオ】☆
☆黄【マーカー黄】☆
☆紫【マーカー紫】☆
☆灰【マーカー灰】☆
★マーカー【マーカーテキスト黄色】★
★マーカー：#6699FF【RGB値による色指定】★
★マーカー：hotpink【Webカラー名による色指定】★

★ 文字サイズ

　「-3|-2|-1|+1|+2|+3」を指定可能。別名として「★フ★」「★文字サイズ★」「★文★」「★サイズ★」「★サ★」なども記述できる。

★+3【フォント・サイズ＝+3】★
★+2【フォント・サイズ＝+2】★
★+1【フォント・サイズ＝+1】★
フォント・サイズ＝0
★-1【フォント・サイズ＝-1】★
★-2【フォント・サイズ＝-2】★
★-3【フォント・サイズ＝-3】★
★フォントサイズ：+3【+3のフォント・サイズ】★

★ 等幅フォント

　別名として「★等★」「★tt★」も記述可能。

★等幅【等幅なテキストee】★
★tt【aabbcc比較用ddee】★

★ 上付き文字／下付き文字

　上付き文字の別名として「★上★」「★sup★」も記述可能。

　下付き文字の別名として「★下★」「★sub★」も記述可能。

5★上付き【3】★
H★下付き【2】★O

★ 不正確なテキスト

　（後述の「編集削除」のように記載が不要になっただけではなく）不正確な情報なので無効であることを明示。別名として「★不★」「★s★」も記述可能。

★不正確【不正確なテキスト】★

★ 編集挿入／編集削除

　編集挿入の別名として「★挿★」「★ins★」も記述可能。

　編集削除（不正確というわけではない）の別名として「★削★」「★del★」も記述可能。「不正確なテキスト」と似ているので注意。

★挿入【挿入されたテキスト】★
★削除【削除されたテキスト】★

★ テキストの情報付加

　「★ ルビ」「★ 略語」「★ プログラミング関連」「★ キーボード入力」「★ クリックでテキスト表示」。

★ ルビ

　別名として「★ル★」「★ruby★」も記述可能。

★ルビ【明：めい|鏡：きょう|止：し|水：すい】★

★ 略語

　別名として「★略★」「★abbr★」も記述可能。

★略語【XML：Extensible Markup Language】★

★ プログラミング関連

　変数の別名として「★変★」「★引★」「★var★」も記述可能。

　出力の別名として「★出★」「★samp★」も記述可能。

　コードの別名として「★コ★」「★code★」も記述可能。後述の「インライン・コード」と同じもの。

★変数【variable1】★　／　★引数【arg1】★

★出力【output1】★

◎WebClient◎クラス　／　★コード【code1】★

★ キーボード入力

　別名として「★キーボード★」「★キー★」「★kbd★」も記述可能。

［Alt］＋［A］キーを押下。
［★キーボード入力【→】★］キーを押してください。

★ キーボード入力

　別名として「★キーボード★」「★キー★」「★kbd★」も記述可能。

［Alt］＋［A］キーを押下。
［★キーボード入力【→】★］キーを押してください。

★ クリックでテキスト表示

　「〓～〓」で囲む記述の他、別名として「★クリック★」「★ク★」も記述可能。

穴埋め問題の文章は（〓クリックすると表示される部分〓）で囲んで表現する。
もしくは（★クリック【ここを隠す】★）でもOK。

≫ 絵文字（丸数字／四角アルファベット／＊）

①②③　＝　≪1≫≪2≫≪3≫
≪A≫≪B≫≪C≫

　※「≪」や「≫」をテキストとして入力したい場合は、「^≪」や「^≫」のようにエスケープが必要になる。

★ そのほかのインライン処理

　インライン要素のHTMLタグ（例えば<span>タグ、<a>タグ、<b>タグ、<strong>タグ、<em>タグ、<i>タグ、<kbd>タグ、<sub>タグ、<sup>タグなど）を使って表現できる。

★span：class="aaa"【～】★　……インライン要素。<span>タグと同じように扱う
★span：style="color: #ff0000;"【～】span★　……閉じタグも明示できる。

□ ブロック処理の基礎

　行頭の「□」は基本的に何らかの囲みが入ることを意味する。「：」以降はオプション。タッグ名やオプションの後に、「-----」を続けることがあるがこれは、ブロックの領域を視認しやすくするためなので記述しなくてもよい（記述しても無視される）。

□ブロック・タグ名（省略可能。省略すると、画像かコードで自動判定される）：HTMLタグ内の属性指定、もしくはInsidersMarkupが提供するオプション機能（省略可能）
ここにブロック処理を記述する１。
□： ←仕切り（省略可能）
ここにブロック処理を記述する２。
□□ ←説明領域開始
1行目は画像タイトル（省略可能）
2行目以降は画像の説明になる（省略可能）。なお、説明領域で空白行を入れると段落として処理される。
□□□

● 見出し

★h1【^★記事タイトル（前述）^★】★
★h2【^★連載名／サブタイトル（前述）^★】★
■章タイトル／大見出し（通常）
●節タイトル／中見出し（通常）
○段タイトル／小見出し（通常）
▽項タイトル／項目タイトル（通常）
■深緑：章タイトル（ダークグリーン）
↑ITmedia CMSでは「●章タイトル」に変換されることを想定
●緑：節タイトル（ライトグリーン）
↑ITmedia CMSでは「○節タイトル」に変換されることを想定
■赤：タイトルの色パターン（赤）
■青：タイトルの色パターン（青）
■緑：タイトルの色パターン（緑）
■深：タイトルの色パターン（深緑）
■オ：タイトルの色パターン（オレンジ）
■黄：タイトルの色パターン（黄）
■紫：タイトルの色パターン（紫）
■灰：タイトルの色パターン（灰）
■●章タイトル（●付き）
■■章タイトル（■付き）
■★下線【章タイトル（下線付き）】★
■深緑：●章タイトル（●付きダークグリーン）

・ 箇条書きリスト関連

　行頭に、「・」「－」などの記号や、「1.」などの算用数字を記述すると、箇条書きなどのリストになる。リストにしたくない場合は、エスケープが必要になる。

・ 箇条書きリスト

・ 箇条書き１（DA用のclass属性が指定された<ul>タグが出力される）
　　・ 階層を作るには4個の半角スペース（＝2個の全角スペース）でインデント
　　　　・ ※ただし、ITmediaCMS向けの出力は★改行★階層ネストに対応していない
・ 箇条書き２
・ 箇条書き３

★以下のように「－」（半角でもOK）を使って、リスト・マークを指定することもできる。★

－ 箇条書き（リストマークなし） ※半角スペースも必要。
－● 箇条書き（黒い丸）
－○ 箇条書き（白い丸）
－■ 箇条書き（黒い四角）
－1. 箇条書き（数字）
－01. 箇条書き（先頭に0をつけた数字）
－ⅰ 箇条書き（小文字のローマ数字） ※アルファベットの「i」ではない。
－Ⅰ. 箇条書き（大文字のローマ数字） ※アルファベットの「I」ではない。
－α. 箇条書き（小文字のギリシャ文字）
－a. 箇条書き（小文字のアルファベット）
－A. 箇条書き（大文字のアルファベット）
－あ. 箇条書き（ひらがな）
－ア. 箇条書き（カタカナ）

　※箇条書きの中で改行したい場合には、その位置に「★改行★」を挿入すればよい。

１ 番号付きリスト

　上記の「箇条書き（数字）」は、以下のようにもっとシンプルに記述できる。

1. 番号付きリスト１
2. 番号付きリスト２
8. 番号付きリスト８（番号も変更可能）

① 丸数字／英字リスト

　行頭に、「①」「≪」などの記号を記述するとリストになる。リストにしたくない場合は、「^①」のようなエスケープが必要になる。

①丸数字リスト１
②丸数字リスト２
③丸数字リスト３
≪A≫四角アルファベットリスト１
≪B≫四角アルファベットリスト２
≪C≫四角アルファベットリスト３

◎ 画像関連

◎ インライン画像

　インライン画像は、本文中だけでなく、「記事タイトル枠」や「画像ブロック」の中でも使う。

　基本的には「画面：screen」「図：figure」「写真：photo」の3種類がある。別名として「★画★」「★スクリーン★」や「★写★」も記述可能。

　例えば「画像」や「アイコン」など、上記の3種類以外を指定した場合は、クラスが省略されて一般画像として取り扱われる。一般画像の別名は、「★バナー★」「★バ★」「★ロゴ★」「★ロ★」「★アイコン★」「★画像★」が定義されている。

ここに
インラ
イン画像
／class属性の指定なしの一般画像
／<img>タグ指定もOK
拡大画像

ここに★画：画面タイトル（省略可能）【/path/to/screen-image.png】★
インラ★図：図タイトル（省略可能）【/path/to/figure-image.gif】★
イン画像★写真：写真タイトル（省略可能）【/path/to/photo-image.jpg】★
／class属性の指定なしの一般画像★画像：画像タイトル（省略可能）【/path/to/image.png】★
／<img>タグ指定もOK★img：src="/path/to/image.jpg" alt="タイトル指定"★
拡大画像◆★画面：タイトル指定【screen-image-s.png】★◇screen-image.png◆

□ 画像ブロック

　画像ブロック内のインライン画像は、基本的に「★画面★」「★図★」「★写真★」のいずれかを指定する。

　画像ブロックの別名としては、「□画」「□画面」「□図」「□スクリーン」「□写真」「□写」が定義されている。※画像ブロックのタグ名は、インライン画像のタグ名にそろえる必要はない。

【画像の枠： 中央／単一】

　別名として、画像系のタグ名に「中央」と付けて、例えば「□中央画像」と指定してもよい。ブロック・タグ名を省略した場合、中に「★画面★」「★図★」「★写真★」などのインライン・タグが入っていれば、画像ブロックと判別されて処理される。

　説明領域より前のブロック領域の空白行は無視される。説明領域の空白行は、前後が段落になる。

1行目は画像タイトル（省略可能）

2行目以降は画像の説明になる（省略可能）。なお、説明領域で空白行を入れると段落として処理される。

• 1項目説明1（ここから下の箇条書き領域も省略可能）。2のような丸数字も書ける。
• 2項目説明2。
• 3項目説明3。→Aへ。

□画像-------------------------- ←ブロック開始
◆★画面：タイトル指定【screen-image-s.png】★◇screen-image.png◆
□□---------------------------- ←説明領域開始
1行目は画像タイトル（省略可能）
2行目以降は画像の説明になる（省略可能）。なお、説明領域で空白行を入れると段落として処理される。
①項目説明1（ここから下の箇条書き領域も省略可能）。②のような丸数字も書ける。
②項目説明2。
③項目説明3。→≪A≫へ
□□□-------------------------- ←ブロック終了

【画像の枠： 右寄せ／単一】

1行目は画像タイトル（省略可能）

2行目以降は画像の説明になる（省略可能）。なお、説明領域で空白行を入れると段落として処理される。

• 1項目説明1（ここから下の箇条書き領域も省略可能）。2のような丸数字も書ける。
• 2項目説明2。
• 3項目説明3。→Aへ。

長い文章を書くと、ボックスをよけて回り込みます。ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ。

□右寄せ画像--------------------------
★画面：タイトル指定【screen-image.png】★
□□----------------------------
1行目は画像タイトル（省略可能）
2行目以降は画像の説明になる（省略可能）。なお、説明領域で空白行を入れると段落として処理される。
①項目説明1（ここから下の箇条書き領域も省略可能）。②のような丸数字も書ける。
②項目説明2
③項目説明3。→≪A≫へ
□□□--------------------------

長い文章を書くと、ボックスをよけて回り込みます。ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ。

【画像の枠： 左寄せ／単一】

1行目は画像タイトル（省略可能）

2行目以降は画像の説明になる（省略可能）。なお、説明領域で空白行を入れると段落として処理される。

• 1項目説明1（ここから下の箇条書き領域も省略可能）。2のような丸数字も書ける。
• 2項目説明2。
• 3項目説明3。→Aへ。

長い文章を書くと、ボックスをよけて回り込みます。ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ。

□左寄せ画像--------------------------
★画面：タイトル指定【screen-image.png】★
□□----------------------------
1行目は画像タイトル（省略可能）
2行目以降は画像の説明になる（省略可能）。なお、説明領域で空白行を入れると段落として処理される。
①項目説明1（ここから下の箇条書き領域も省略可能）。②のような丸数字も書ける。
②項目説明2
③項目説明3。→≪A≫へ
□□□--------------------------

長い文章を書くと、ボックスをよけて回り込みます。ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ。

【画像の枠： 中央／複数】

　インライン画像を1行内に記述して「｜」（＝半角もしくは全角のパイプ）で区切ると、画像が横並びになる。

1行目は画像タイトル（省略可能）

2行目以降は画像の説明になる（省略可能）。なお、説明領域で空白行を入れると段落として処理される。

• 1項目説明1（ここから下の箇条書き領域も省略可能）。2のような丸数字も書ける。
• 2項目説明2。
• 3項目説明3。→Aへ。

□画像--------------------------
★画面：タイトル指定【screen-image1.png】★｜★画面：タイトル指定【screen-image2.png】★
□□----------------------------
1行目は画像タイトル（省略可能）
2行目以降は画像の説明になる（省略可能）。なお、説明領域で空白行を入れると段落として処理される。
①項目説明1（ここから下の箇条書き領域も省略可能）。②のような丸数字も書ける。
②項目説明2
③項目説明3。→≪A≫へ
□□□--------------------------

【画像の枠： 縦並び／複数】

　複数のインライン画像を別行に記述して「□：」（＝半角もしくは全角のコロン）の仕切りで区切ると、画像が縦並びになる。

上記画像のキャプション１（左側の余白は無視される）

▼

上記画像のキャプション２

▼

1行目は画像タイトル（省略可能）

2行目以降は画像の説明になる（省略可能）。なお、説明領域で空白行を入れると段落として処理される。

• 1項目説明1（ここから下の箇条書き領域も省略可能）。2のような丸数字も書ける。
• 2項目説明2。
• 3項目説明3。→Aへ。

□画像--------------------------
◆★画面：タイトル指定【screen-image1_s.png】★◇screen-image1.png◆
　　　上記画像のキャプション１（左側の余白は無視される）
□：---------------------------- ← 仕切り
　　　　　　　▼
□：---------------------------- ← 仕切り
★図【figure-image2.png】★
□：---------------------------- ← 仕切り
　　　　　　　▼
□：---------------------------- ← 仕切り
◆★写真：タイトル指定【photo-image3-s.png】★◇photo-image3.png◆
　　　上記画像のキャプション３
□□----------------------------
1行目は画像タイトル（省略可能）
2行目以降は画像の説明になる（省略可能）。なお、説明領域で空白行を入れると段落として処理される。
①項目説明1（ここから下の箇条書き領域も省略可能）。②のような丸数字も書ける。
②項目説明2
③項目説明3。→≪A≫へ
□□□--------------------------

□ インデント／センタリング

　ボックス（＝複数の段落）ごと、インデントしたり、左寄せ／センタリング／右寄せしたりできる（これとは別に段落テキストの中身の左寄せ／センタリング／右寄せも行える。詳しくは後述）。センタリングの別名として「□中央寄せボックス」が定義されている。

□インデント
インデントしています。～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～
□インデント
二重に。～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～
□インデント
三重に。～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～
□□□
□□□
□□□

□右インデント
右側をインデントしています。～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～
□□□

□両側インデント
両側をインデントしています。～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～
□□□

長い文章を書くと、右寄せや左寄せのボックスをよけて回り込みます。

□センタリングボックス：278px
センタリングしています。～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～
□□□

ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ。

□左寄せボックス：278px
左寄せしています。～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～
□□□

いいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいい。

□右寄せボックス：278px
右寄せしています。～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～
□□□

　段落テキストの中身を、インデントしたり、左寄せ／センタリング／右寄せしたりもできる（これとは別に段落テキストごとの左寄せ／センタリング／右寄せも行える。詳しくは後述）。センタリングの別名として「□中央寄せテキスト」が定義されている。

□センタリングテキスト
テキストをセンタリングしています。
□□□

□左寄せテキスト
テキストを左寄せしています。
□□□

□右寄せテキスト
テキストを右寄せしています。
□□□

□ グレイの枠なし囲み

□枠なし------------------------
枠なし囲みの上部タイトル（省略可能）
□□--- ← 囲みの場合はこれの上が説明欄。タイトル省略時はこれも省略
枠なし囲みの本文。画像や箇条書きも記入可能。～～～～～～
□□□--------------------------

□ 有色の枠付き囲み

【囲み：通常のお知らせ。警告ではない】

　記事冒頭で、連載やコーナーの説明をするための囲み。警告の意味合いはない。タイトル行が入る場合がある。

　別名として「□青」が定義されている。以下の「お知らせ」「警告」「コラム」「ノート」「筆者紹介」「動画／スライド」のどれにも当てはまらない場合に、この色名による指定を使う（例えば「登場人物を枠で囲んで目立たせたい」「複数のお知らせを色分けして表示したい」などのケースが考えられる）。色名を使ってもclass属性名には「da-announcement」などの意味名を含む名前が入ることになる。

□お知らせ------------------------
お知らせ囲みの上部タイトル（省略可能）
□□----------------------------
お知らせ囲みの本文。画像や箇条書きも記入可能。～～～～～～
□□□--------------------------

【囲み：警告】

注意や警告を喚起する枠。

　別名として「□赤」が定義されている。

□警告------------------------
警告囲みの上部タイトル（省略可能）
□□----------------------------
警告囲みの本文。画像や箇条書きも記入可能。～～～～～～
□□□--------------------------

【囲み：コラム】

コラム枠。

　別名として「□オレンジ」が定義されている。

□コラム------------------------
コラム囲みの上部タイトル（省略可能）
□□----------------------------
コラム囲みの本文。画像や箇条書きも記入可能。～～～～～～
□□□--------------------------

【囲み：ノート】

ノート枠（警告ほどではない注意書き）。

　別名として「□緑」が定義されている。

□ノート------------------------
ノート囲みの上部タイトル（省略可能）
□□----------------------------
ノート囲みの本文。画像や箇条書きも記入可能。～～～～～～
□□□--------------------------

【囲み：筆者紹介】

筆者紹介枠。ITmedia CMSの無色（＝背景があればグレイ）／Build Insiderではグレイの囲みを想定。

　別名として「□灰」が定義されている。

筆者紹介囲みの上部タイトル（省略可能）

筆者紹介囲みの本文。画像や箇条書きも記入可能。～～～～～～

• リンクなどの箇条書き１
• リンクなどの箇条書き２
• リンクなどの箇条書き３

□筆者紹介------------------------
筆者紹介囲みの上部タイトル（省略可能）
□□----------------------------
★写真：タイトル指定【photo-image.png】★
筆者紹介囲みの本文。画像や箇条書きも記入可能。～～～～～～
・ リンクなどの箇条書き１
・ リンクなどの箇条書き２
・ リンクなどの箇条書き３
□□□--------------------------

【囲み：動画／スライド枠】

動画／スライド枠。ITmedia CMSの無色（＝背景があればグレイ）／Build Insiderでは黒の囲みを想定

　別名として「□黒」が定義されている。

□スライド------------------------
動画／スライド囲みの上部タイトル（省略可能）
□□----------------------------
<iframe src="http://www.slideshare.net/slideshow/embed_code/16190380" width="576" height="614" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" style="border:1px solid #CCC;border-width:1px 1px 0;margin-bottom:5px" allowfullscreen webkitallowfullscreen mozallowfullscreen></iframe>
動画／スライド囲みの本文。画像や箇条書きも記入可能。～～～～～～
□□□--------------------------

※「□動画」の方も同じなので、サンプル表示は割愛。

段落内の関連記事枠：Insider.NET

段落の右上隅に設置している関連記事の枠。Insider.NET用。ITmedia CMSの「透明ボックス」で一番外側を囲んで右寄せし、その中にブルーの囲み、その中に画像＋キャプションで実現できないか？

□Insider.NET関連記事------------------------
・◆記事名◇url◆
・◆.NET初心者のためのMicrosoft .NET入門◇url◆
□□□--------------------------

【更新履歴】

更新履歴。従来は日付を【】でくくっていたが、体裁を変えやすいように、今後はくくらないようにする。

□更新履歴------------------------
2012/09/16： 更新内容１
2012/09/14： 更新内容２
・ブロック要素の例

2012/09/01： 更新内容３
□□□--------------------------

◎ コード関連

　Syntax highlighting機能付き。

◎ インライン・コード

　別名として「★コ★」「★code★」も記述可能。「プログラミング関連」でも説明している。

◎WebClient◎クラス　／　★コード【code1】★

□ コード・ブロック

　別名として「□コ」「□code」も記述可能。

単一の構文ハイライトなし（従来型）コード・リスト

□コード-----------------------
Date: Wed, 09 Jan 2013 01:41:56 +0900
From: noreply@google.com
To: *****@willcom.com　　★オレンジ【……指定した通信キャリアのメール・アドレス】★
Subject: 

Google 確認コードは 685234 です 
□□---------------------------- ←説明欄開始
1行目はコードタイトル（省略可能）
2行目以降はコードの説明になる（省略可能）。なお、説明領域で空白行を入れると段落として処理される。
①項目説明1（ここから下の箇条書き領域も省略可能）。②のような丸数字も書ける。
②項目説明2
③項目説明3。→≪A≫へ
□□□--------------------------

複数の従来型背景色指定コード・リスト

□コード：紺色-------------------
従来型の表現（紺色）。
以前のツールや、移行時に余計な手間をかけたくないときに使う。

タグやタグを駆使して記述することが前提。
文字はデフォルトで白色になる。
□：深緑------------------- ← 仕切り
従来型の表現（深緑）
using System;
using System.Threading;
using System.Threading.Tasks;

namespace ConsoleApplication
{
  class Program
  {
    static void Main()
    {
      var radius = 1.0;
      var area = CalculateCircleAreaAsync(radius).Result;
      Console.WriteLine(area); ★黄【// 計算結果を表示】★
      Console.ReadLine();
    }

    static async Task CalculateCircleAreaAsync(double radius)
    {
      var π = await Task.Run(() =>
      {
        Thread.Sleep(3000);
        return Math.PI; // 級数展開などで円周率を計算したとする
      });
      return π  * Math.Pow(radius, 2); ★黄【// 円の面積】★
    }
  }
}
□：style="background-color: #333; color: #fff;" -------
従来型の表現（上記の2色以外。背景色と前景色は、「style="background-color: #333; color: #fff;"」のようにHTMLコード上で明示する。
前景色とセットで適用しないと、CSSが適用されない場面で読めないため）
□□----------------------------
1行目はコードタイトル（省略可能）
2行目以降はコードの説明になる（省略可能）。なお、説明領域で空白行を入れると段落として処理される。
①項目説明1（ここから下の箇条書き領域も省略可能）。②のような丸数字も書ける。
②項目説明2
③項目説明3。→≪A≫へ
□□□--------------------------

□コード：C#-------------------
using System;
using System.Threading;
using System.Threading.Tasks;

namespace ConsoleApplication
{
  class Program
  {
    static void Main()
    {
      var radius = 1.0;
      var area = CalculateCircleAreaAsync(radius).Result;
      Console.WriteLine(area + "文字列"); // 計算結果を表示
      Console.ReadLine();
    }

    static async Task CalculateCircleAreaAsync(double radius)
    {
      var π = await Task.Run(() =>
      {
        Thread.Sleep(3000);
        return Math.PI; // 級数展開などで円周率を計算したとする
      });
      return π  * Math.Pow(radius, 2); // 円の面積
    }
  }
}
□：Visual Basic＆行番号----------------
☆灰【Imports System.Threading.Tasks】☆
☆緑【Imports System.Threading】☆
☆オ【】☆
☆青【Module Module1】☆
☆赤【】☆
☆赤【  Sub Main()】☆
☆黄【    Dim radius = 1.0】☆
    Dim area = ☆黄【CalculateCircleAreaAsync】☆(radius).Result
    Console.WriteLine(area + "文字列") ' 計算結果を表示
    Console.ReadLine()
  End Sub abcdefghkjklmnopqrstuvwxyzabcdefghkjklmnopqrstuvwxyzabcdefghkjklmnopqrstuvwxyzabcdefghkjklmnopqrstuvwxyzabcdefghkjklmnopqrstuvwxyzabcdefghkjklmnopqrstuvwxyzabcdefghkjklmnopqrstuvwxyzabcdefghkjklmnopqrstuvwxyzabcdefghkjklmnopqrstuvwxyzabcdefghkjklmnopqrstuvwxyzabcdefghkjklmnopqrstuvwxyzabcdefghkjklmnopqrstuvwxyzabcdefghkjklmnopqrstuvwxyzabcdefghkjklmnopqrstuvwxyzabcdefghkjklmnopqrstuvwxyzabcdefghkjklmnopqrstuvwxyzabcdefghkjklmnopqrstuvwxyz

  Async Function CalculateCircleAreaAsync(radius As Double) As Task(Of Double)
    Dim π = Await Task.Run(
☆深【      Function()】☆
☆紫【        Thread.Sleep(3000)】☆
☆白【        Return Math.PI ' 級数展開などで円周率を計算したとする】☆
      End Function)
    Return π * Math.Pow(radius, 2) ' 円の面積
  End Function

End Module
□□----------------------------
1行目はコードタイトル（省略可能）
2行目以降はコードの説明になる（省略可能）。なお、説明領域で空白行を入れると段落として処理される。
①項目説明1（ここから下の箇条書き領域も省略可能）。②のような丸数字も書ける。
②項目説明2
③項目説明3。→≪A≫へ
□□□--------------------------

□コード：青------------------------
using System;
□：緑------------------------
using System;
□：赤------------------------
using System;using System;using System;using System;using System;using System;using System;using System;using System;using System;using System;using System;using System;using System;using System;using System;using System;using System;using System;using System;using System;using System;using System;using System;using System;using System;using System;using System;using System;
□：------------------------
　上記コードのキャプション
□：------------------------
　　　　　▼
□：紫------------------------
全記事の一貫性を保つため、<pre>タグではなく、必ず<code>タグを使う。
□：水＆等幅------------------------
等幅フォントを指定したい場合は、
「da-code-bodylines」の代わりに、
「da-code-bodylines monospace-mode」を指定してください（ITmedia-CMSには反映されません）。
□：茶------------------------
using System;
□：灰------------------------
簡易表現
using System;
1行の中に
タグを入れて改行しています。
□□----------------------------
1行目はコードタイトル（省略可能）
2行目以降はコードの説明になる（省略可能）。なお、説明領域で空白行を入れると段落として処理される。
①項目説明1（ここから下の箇条書き領域も省略可能）。②のような丸数字も書ける。
②項目説明2
③項目説明3。→≪A≫へ
□□□--------------------------