###見出しと強調とリンクの書き方### Markdown では見出しは ``` #見出し(h1 レベル)# ##見出し(h2 レベル)## ###見出し(h3 レベル)### ####見出し(h4 レベル)#### #####見出し(h5 レベル)##### ######見出し(h6 レベル)###### ``` という記法で見出しを記述します。この文書の見出しもこの記法で書かれています。 Markdown では、文章の中で強調したい部分をアスタリスクで囲みます。アスタリスクの他にアンダースコアも使用できます。 > Duis aute irure dolor in *reprehenderit in voluptate* velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa __qui officia__ deserunt mollit anim id est laborum. Markdown 中ではリンクの表現には`[リンクテキスト](http://example.com/hello.html "title")`という表記を使います。"title" 部分は省略が可能です。この記法を使って文章中に自由にリンクを付けることができます。 > Lorem ipsum dolor sit amet, [www.frameworks.co.jp](http://www.frameworks.co.jp/ "www.frameworks.co.jp") elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. リンクを置く方法には他に``という表記を使う方法もあります。リンクテキストとしてリンク先の URL を使っても良い場合に便利です。 > Lorem ipsum dolor sit amet, elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. メールアドレスを指定して mailto: リンクを置く時は `` という記法を使います。 > Lorem ipsum dolor sit amet, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. ###箇条書きを書いてみましょう### Markdown では簡単に箇条書きができます。行頭がアスタリスクとスペースで始まる行は箇条書きとしてマークアップされます。箇条書きは入れ子にもできます。入れ子にする場合は下位の項目のアスタリスクの前にスペースを 4 つ置きます。更に入れ子にする場合はスペースを 8 つ置きます。 * Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. * Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. * Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. * Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. * Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. * Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. * Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 番号付きの箇条書きもできます。数字の 1 とピリオドで始まる行は番号付きの箇条書きとしてマークアップされます。入れ子にする場合の方法は上のとおりです。 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 1. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 1. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 1. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 1. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. ###イメージを置いてみましょう### まず、Markdown 記法でイメージを置いてみましょう。Markdown では `![ALT テキスト](URL)` という記法を使う事で文書中に簡単に画像を入れることができます。(画像を再配布する権利がありませんので、差し替えさせて頂きました) ![Pencil,Compass,Diagram,PC](000006665910XSmall.jpg) ところで、Markdown では、画像を扱う事ができますが、そのスタイルを指定することはできません。従って、画像を `float: right;` などで配置する場合には img タグを直接書いてしまうのが良いでしょう。その img タグに style 属性を指定すれば、画像の位置を自由に指定することができます。img タグを書くのは難しく感じるかもしれませんが``ぐらいの html を書けばで事足りるわけですから、敢えて Markdown でイメージを扱う事にこだわる必要は無いのでしょう。style 属性に `float:left` がある場合や `float:right` がある場合にはそれに応じて img に margin を指定するスタイルシートを書いておけば、style の指定も最小限で済むと思います。(画像を再配布する権利がありませんので、差し替えさせて頂きました) Working with PC Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. ###引用文を置いてみましょう### 文書の中に引用部分がある場合には、その部分の行頭に > を付けるとその部分が引用として表示されるようになります。引用は入れ子(ネスト)することもできます。 > Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. >> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. > reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. > ###略語に説明を付けてみましょう### [CMS]: * "Content Management System" [IaaS]: * "Infrastructure as a Service" Markdown には、略語に説明を付ける機能があります。略語の説明を [CMS]: * "Content Management System" [IaaS]: * "Infrastructure as a Service" という形式で文書のどこか(先頭か末尾が良さそうです)に定義しておけば、それらの略語を文中で [] で囲んで使用することで、その部分に abbr タグでマークアップされます。マークアップされている部分にマウスを乗せると定義が表示されます。 Lorem ipsum dolor sit amet, www.frameworks.co.jp elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis [CMS] exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu nulla pariatur. Excepteur sint occaecat cupidatat non [IaaS] proident, sunt in culpa qui officia deserunt mollit anim id est laborum. ###コードブロックを置いてみましょう### markdown 中には「コードブロック」を記述することができます。コードブロックとは、コンテンツ中にプログラムコードなどを書く時に使うブロックのことです。その部分がコードであることがよく判るようにマークアップするのが普通です。 ```html %pageTitle()% %style()% %markdown% ``` コードブロックの内側に書かれているコードを Syntax Highlight する場合がありますが、それは Markdown だけではできないのでな javascript を併用する必要があります。 コードは、ブロックとしてだけでなく、インラインにも置く事ができます。たとえばインラインのコード部分は \` (backquote) で囲みます。例えば次の部分``はインラインのコードとしてマークアップされます。