さてマークダウンとは何でしょうか?
HTMLに変換できる軽量なマークアップ言語なんです。 実はこのブログもマークダウンで書いています。
HTMLでタグを書くのはちょっと面倒なのでこの記法を覚えると割とらくにHTMLがかけます。といってもすべてのタグを網羅しているわけではないのでちょっとしたメモ書きやブログなどでよく利用されています。マークダウン対応エディタなどで確認が出来ます。
以下エディタAtom、MarkDown#Editor、MarkdownPad、MacDown、sublimetext、etc…私はSublimetextです。その他簡単に確認できるブラウザ上で編集できたりするブラウザエディタなどもあります。Stackedit、Dillinger、Marxico、Wri.peなど結構探せばあります。chromeのブラウザならMarkdown Preview Plusというエクステンションもあります。
覚えるルールはだいたい10個ぐらいなので比較的に覚えやすいですね。
まずは見出しから
#と半角スペースでh要素になり#の数でh1~h6が決まります。タイトルの下に=(イコール)でh1-(ハイフン)でh2などの表示も可能。
Markdown
# 見出しh1
## 見出しh2
### 見出しh3
#### 見出しh4
##### 見出しh5
###### 見出しh6
見出しh1違うパターン-文字の下に=が在るとh1扱いになります
=
見出しh2違うパターン(3つ以上つけると水平線になる)
-
HTML
段落は一段落空ける、改行は半角スペース2つ
Markdown
始めの文章の[][]
ここで改行
段落を開けたのでpタグが入ります。
HTML
始めの文章の[][]
ここで改行
段落を開けたのでpタグが入ります。
3つ以上の*(アスタリスク), -(ハイフン), _(アンダースコア)は、水平線として扱われます。
Markdown
----
____
****
HTML
強調を示す場合は、*(アスタリスク)か、_(アンダーバー)で文言を囲みます。個数で強調が変わります。1つ(em)2つ(strong)3つ(strong+em)打ち消し線は~チルダ2つで囲む
Markdown
ここの文章は*アクセント*です。
ここの文章は**太字**です。
ここの文章は***アクセント太字***です。
これは~~打ち消し線~~です。
HTML
ここの文章はアクセントです。
ここの文章は太字です。
ここの文章はアクセント太字です。
これは打ち消し線です。
リストを示す場合は、*(アスタリスク), -(ハイフン), +(プラス)のどれかを入力し、半角スペース、またはタブを挿入します。リストの途中で、スペース、タブを入れて記号を変更すると、入れ子として扱われます。dl要素は:(コロン)で表記します。
Markdown
* リスト1
- リスト1-2
- リスト1-3
* リスト2
+ リスト2-2
* リスト3
1. 番号付きリスト1
1. 番号付きリスト2
1. 番号付きリスト3
1. 番号付きリスト4
1. 番号付きリスト5
ホームページ
: インターネットの用語で、ウェブサイトの表紙にあたるフロントページのこと。またはFacebookやTwitterなど、ユーザー毎に表示が異なるウェブサイトのページ。
HTML
リンクは主に下記の4つのパターンに分けてみました。
<リンクアドレス>
でURLリンクを表記します。
Markdown
<http://www.google.com>
<info@php-fan.org>
HTML
[名前](アドレス "タイトル")
でリンクを表記します
Markdown
[グーグル](http://www.google.com/ "グーグルのアドレスだよ")
HTML
URLを注釈化にして見やすくしたパターンです。数値じゃなくてアルファベットなどでも良いです。
Markdown
主な検索エンジンは[グーグル][1]を主力エンジンとして[Yahoo!JAPAN][2]や[MSN][3]等があります。
[1]: http://google.com/ "Google"
[2]: http://www.yahoo.co.jp/ "Yahoo!Japan"
[3]: http://jp.msn.com/ "MSN"
HTML
主な検索エンジンはグーグルを主力エンジンとしてYahoo!JAPANやMSN等があります。
![alt](画像パス "画像タイトル1")
で画像を表記します。
Markdown
![イメージテキスト](/common/img/blog/sample11.jpg "画像タイトル1")
[![リンク画像](http://its-office.jp/common/img/blog/sample12.jpg "画像タイトル2")](http://its-office.jp/)
![外部参照画像][img]
[img]:http://its-office.jp/common/img/blog/sample13.jpg "画像タイトル3"
HTML
文頭に>を使うことで引用になります。メール時の引用と同じです。 上下には空行がないと正しく表示されません。 引用の中に別のマークダウンを使用することも可能です。
Markdown
> 引用文
> 引用文
> 引用文
>> 引用の引用文
>> 引用の引用文
HTML
引用文
引用文
引用文
引用の引用文
引用の引用文
バッククオート(`)でコードブロックができます。 タブか4つの半角スペースで複数行のコードブロックができます。
Markdown
`var x = "This is text";`
↓タブ
function echo(){
var v = "This is Outer";
return function (){
alert(v);
};
}
var s = echo();
s();
```bootstrap
bootstrap/
├── css/
│ ├── bootstrap.css
│ ├── bootstrap.css.map
│ ├── bootstrap.min.css
│ ├── bootstrap.min.css.map
│ ├── bootstrap-theme.css
│ ├── bootstrap-theme.css.map
│ ├── bootstrap-theme.min.css
│ └── bootstrap-theme.min.css.map
├── js/
│ ├── bootstrap.js
│ └── bootstrap.min.js
└── fonts/
├── glyphicons-halflings-regular.eot
├── glyphicons-halflings-regular.svg
├── glyphicons-halflings-regular.ttf
├── glyphicons-halflings-regular.woff
└── glyphicons-halflings-regular.woff2
```
↓スペース
$ sudo gem install jekyll
$ jekyll new myblog
$ cd myblog
$ jekyll serve
# => http://localhost:4000 を見てください
HTML
var x = "This is text";
↓タブ
function echo(){
var v = "This is Outer";
return function (){
alert(v);
};
}
var s = echo();
s();
bootstrap/ ├── css/ │ ├── bootstrap.css │ ├── bootstrap.css.map │ ├── bootstrap.min.css │ ├── bootstrap.min.css.map │ ├── bootstrap-theme.css │ ├── bootstrap-theme.css.map │ ├── bootstrap-theme.min.css │ └── bootstrap-theme.min.css.map ├── js/ │ ├── bootstrap.js │ └── bootstrap.min.js └── fonts/ ├── glyphicons-halflings-regular.eot ├── glyphicons-halflings-regular.svg ├── glyphicons-halflings-regular.ttf ├── glyphicons-halflings-regular.woff └── glyphicons-halflings-regular.woff2
↓スペース
$ sudo gem install jekyll
$ jekyll new myblog
$ cd myblog
$ jekyll serve
# => http://localhost:4000 を見てください
テーブル記法は下記参照
Markdown
名前 | 好きな食べ物 | 年齢 |場所
:----|:------------:|------:|-----
田中 | カレーライス | 29 |東京
斉藤 | お寿司 | 47 |神奈川
中田 | ハンバーグ | 32 |埼玉
佐藤 | スパゲッティ | 41 |千葉
HTML
名前 | 好きな食べ物 | 年齢 | 場所 |
---|---|---|---|
田中 | カレーライス | 29 | 東京 |
斉藤 | お寿司 | 47 | 神奈川 |
中田 | ハンバーグ | 32 | 埼玉 |
佐藤 | スパゲッティ | 41 | 千葉 |
\(バックスラッシュ)でエスケープ。例えば# はh1属性ですが#でシャープの記号を利用することができます。h要素にならない。
\# h要素
以上になります。シンプルでとても簡単ですね。あまり複雑なことはできません。id要素とかclass要素など入れたい場合はタグで書くしかないのですがmarkdownはhtmlタグを混在させても構いません。
よく使われるのは見出し、強調、リストとリンクぐらいですかね。例えばレシピなどを考えた時などに下記のように書いてもいいですよね。
Markdown
# 材料 (20×20cm型)
* 日清エキストラバージンココナッツオイル_40g_
* チョコレート(スイート)_110g_
* 卵2個
* 三温糖またはきび砂糖_80g_
* レーズン_50g_
* くるみ_50g+30g_
---------------------------
## 【A】
* 薄力粉_60g_
* ベーキングパウダー小さじ_1/2_
[詳しい作り方はこちら](http://cookpad.com/recipe/3535443)
HTML
ぜひこの記法使ってみてください。
∞Tadashi Suyama∞
あまりcgiは使いたくないのですが使わざるを得ない時があります。仕方なく設置するのですがエラーが出ちゃうんです。なんか知らないけど。 ありがちなのがパーミッションとかパスが問題になるんのですけど...
19 Feb 2022
今回はワードプレス専用のアドレス変更方法をご紹介します。ワードプレスのアドレスはwordpress@~という形で送られてきますが変更可能です。 functions.phpに記載するのですがプラグ...
12 Feb 2022
Sassの遷移は多すぎる今日この頃 Ruby Sass→LibSass→DartSass(いまここ) Ruby SassはSassの最初の実装でしたが、2019年3月26日にサポートが終了しま...
22 Jan 2022
明けましておめでとうございます。 本年も何卒よろしくお願いいたします。 年末年始は雪でしたね、そこまで積もっていませんが。 {% include adsensearticle.html...
10 Jan 2022
最近はjQueryよりvueで書いた方が楽ではないかと思い学習中です。 そもそもVuejsはドキュメントが日本語対応なので試しやすいし情報も豊富なので学習しやすいです。 3大フレームワークと呼...
02 May 2021
ウェブエンジニアの須山のブログです。
WEBに関することや個人的に関心のあることについて書きます。主に技術系ブログです。