CSS Grid Layout を極める！（基礎編）

# 0. はじめに

**CSS Grid Layout**（グリッドレイアウト）は、**2次元レイアウト** を、HTML/CSS を使って簡単・自由に操作できる、CSSの新しい機能です。
格子状のマス目のグリッドに好きな順番に配置したり結合したりすることで、様々なレイアウトが可能になります。

![img-grid.PNG](https://qiita-image-store.s3.amazonaws.com/0/87822/d6cf06a2-44a7-5808-1c72-2ce57f699aa5.png)

例えば、こんな簡単なHTMLで・・・

```html:簡単なHTML
<body>
	<h1>タイトル</h1>
	<article>記事1</article>
	<article>記事2</article>
	<article>記事3</article>
	<article>記事4</article>
	<nav>ナビ</nav>
	<footer>フッター</footer>
</body>
```

CSSをちょっと書けば、こんなレイアウトが出来てしまいます！
![1.PNG](https://qiita-image-store.s3.amazonaws.com/0/87822/5e780628-b986-6a47-1c9a-d27c7d868cda.png)

当記事では、こんなレイアウトを可能にする **CSS Grid Layout** の解説をしていきます。

尚、**CSS Grid Layout** は現時点（2017年4月）ではまだ新しいモジュールのため、対応ブラウザが少ないです。
（Fx52～、GC57～、Safari10.1～、Opera44～ など）
[Can I use... CSS Grid Layout](http://caniuse.com/#feat=css-grid)
しかし、2017年3月にはFirefox, Google Chrome, Opera, Safari などが **CSS Grid Layout** 対応のバージョンをリリースしており、今後に対応ブラウザが急増するのは確実なので、ぜひともマスターしておきたいです。

この記事は4部構成の中の **基礎編** です。
**[CSS Grid Layout を極める！（基礎編）][1]** ←これ
[CSS Grid Layout を極める！（場面別編）][2]
<font color="#ccc">作成中：CSS Grid Layout を極める！（アルゴリズム編）</font>
<font color="#ccc">作成中：CSS Grid Layout を極める！（番外編）</font>

# 1. Grid Layout の用語

まずは、この後の解説を理解しやすくなるよう、CSS Grid Layout特有の用語を見てみましょう。

## HTML要素が作る構成物

- **コンテナ**

グリッド全体を囲む要素です。
`display: grid;` または `display: inline-grid;` を指定することで、その要素は Grid Layout の **コンテナ** になります。

- **アイテム**

コンテナの子要素です。コンテナの直接の子要素は基本的にすべて**アイテム**になります。

```html
<div style="display:grid;"> <!-- コンテナ -->
	<div></div> <!-- アイテム-->
	<p></p> <!-- アイテム -->
	<section> <!-- アイテム -->
		<div></div> <!-- これはアイテムではない -->
	</section>
</div>
```


## その他の構成物

- **ライン**

グリッドを分ける垂直および水平の線のことです。グリッドの上下左右それぞれの両端にも存在します。
ラインには、上あるいは左から1から順に正の番号が振られています。同時に、下あるいは右からは-1から順に負の番号が振られています。（0という番号のラインはないのです）

- **トラック**

グリッドの行および列のことです。言い換えれば**トラック**とは、隣接する2本のラインの間を表しています。

- **セル**

隣接する垂直および水平方向のラインが作る、アイテムを配置できる最小の単位です。

- **エリア**

一つあるいは複数のセルが結合してできるセルの集まりです。
エリアには名前を付けることができ、アイテムを配置できます。

## 【チートシート】Grid Layout用語の図解

![用語1](https://qiita-image-store.s3.amazonaws.com/0/87822/a23b9346-aaec-9880-c6a8-38f3d6d1d52e.png)

-----

![用語2](https://qiita-image-store.s3.amazonaws.com/0/87822/89db10df-8583-3d18-702f-6acd0a15589b.png)

# 2. Grid Layout を使う！

グリッドレイアウトを使う手順はたった３ステップです。
今回は簡単なサンプルとして、下のような2x2のレイアウトを作ってみます。
![s-手書き.jpg](https://qiita-image-store.s3.amazonaws.com/0/87822/c03f7183-ccda-d486-390b-cb407dc2631b.jpeg)

## ＜ステップ１＞ HTML と 必須のCSS を記述する

まずは HTML を記述します。といっても非常に簡単で、記述しなければならない要素は

- **コンテナ**（＝グリッド全体を表す要素）
- **アイテム**（＝グリッドのエリアに配置する要素）

だけです。各々の**アイテム**は、**コンテナ**の子要素として記述してください。
要するに、HTML は下の例のように書けばオッケーです。

```html:HTML（完成）
<div id="container"> <!-- コンテナ -->
	<div id="itemA">A</div> <!-- アイテム -->
	<div id="itemB">B</div> <!-- アイテム -->
	<div id="itemC">C</div> <!-- アイテム -->
</div>
```

そして、**コンテナ** に `display: grid;` と記述します。

```css:コンテナのCSS
#container {
	display: grid; /* グリッドレイアウト */
}
```

これで必須のHTML/CSSの記述は終わりです。

## ＜ステップ２＞ CSS で各トラックの大きさを指定する

次に、縦横それぞれのトラックの大きさを指定します。
ここで使う新しいプロパティは下の2つです。これらを **コンテナ** のスタイルとして記述します。

- **grid-template-row<font color="orangered">s</font>**: 行のトラックの高さを半角スペースで区切って指定
- **grid-template-column<font color="orangered">s</font>**: 列のトラックの幅を半角スペースで区切って指定

（※「<font color="orangered">s</font>」を忘れやすいので注意！）

行のトラックの高さは、1行目は100px、2行目は50pxなので、下のようになります。

```css
grid-template-rows: 100px 50px;
```

列のトラックの幅は、1列目は150px、2列目は残り全部です。
ここで新しい単位 `fr` というのを使います。今は**「残りの幅」**という指定だと理解しておいてください。

```css
grid-template-columns: 150px 1fr;
```

これで、トラックの高さ・幅の指定はできました。

```css:#containerのCSS（完成）
#container {
	display: grid;
	grid-template-rows: 100px 50px;
	grid-template-columns: 150px 1fr;
}
```

## ＜ステップ３＞ CSS でアイテムの配置を指定する

最後に、それぞれの **アイテム** をグリッドのどのエリアに配置するのかを指定します。
アイテムを配置するには2通りの方法があります。

### ＜ステップ３ - 方法Ａ＞ ラインの番号で指定する

この方法で新しく使うプロパティは下の2つです。これらをそれぞれの **アイテム** のスタイルとして記述します。

- **grid-row**: アイテムが占める<font color="red">行のラインの番号</font>をスラッシュ区切りで指定する
- **grid-column**: アイテムが占める<font color="blue">列のラインの番号</font>をスラッシュ区切りで指定する

言葉だとちょっと分かりづらいですね。サンプルは一旦置いておいて、行2トラックｘ列3トラックのグリッドの例で見てみましょう。
![方法A-1.png](https://qiita-image-store.s3.amazonaws.com/0/87822/eff50aaa-a3c0-b0ae-ca35-11c54d78527d.png)
このように行2トラックｘ列3トラックの場合、<font color="red">row</font>のラインは1～3、<font color="blue">column</font>のラインは1～4 が存在することになります。
<font color="orangered">番号は1から始まる</font>こと、ラインは両端にもあるので<font color="orangered">最大のラインの番号はトラックの数+1になる</font>ことに注意です。
（図では括弧書きになっていますが、負の数字でも指定することが出来ます。）

**アイテム** をグリッドのどこに配置するのかは、このラインの番号を用いて指定することになります。

---

例えば、このように **アイテム** を配置したい場合、
![方法A-2.png](https://qiita-image-store.s3.amazonaws.com/0/87822/3dbf7ab8-8835-9815-23ac-8533cb003e84.png)
<font color="red">row 1～2</font>、<font color="blue">column 2～3</font> を占めているので、下のようになります。

```css:CSS
#item {
	grid-row: 1 / 2;
	grid-column: 2 / 3;
}
```

尚、このように隣り合わせのラインを指定する場合は、スラッシュのあとを省略することも出来ます。

```css:CSS
#item {
	grid-row: 1;
	grid-column: 2;
}
```

---

また、このように **アイテム** を配置したい場合、
![方法A-3.png](https://qiita-image-store.s3.amazonaws.com/0/87822/45e04757-4b27-1558-29fe-0ec56ae91979.png)
<font color="red">row 1～3</font>、<font color="blue">column 3～4</font> を占めているので、下のようになります。

```css:CSS
#item {
	grid-row: 1 / 3;
	grid-column: 3 / 4;
}
```

尚、大きい方のラインの番号を書く代わりに、いくつ先のラインまで伸ばすかを記述する方法もあります。
その場合、スラッシュのあとに `/ span ○○` のように記述します。

```css:CSS
#item {
	grid-row: 1 / span 2; /* ライン番号1から始めて、2つ先のラインまで伸ばす */
	grid-column: 3 / span 1; /* ライン番号3から始めて、1つ先のラインまで伸ばす */
}
```

先程も言ったように、隣り合わせのラインを指定する場合は、スラッシュのあとを省略することも出来ます。
逆に言えば、スラッシュのあとを省略した場合には、`/ span 1` が指定されているのと同じということです。

```css:CSS
#item {
	grid-row: 1 / span 2;
	grid-column: 3;
}
```

また、図に書いてあるように負のラインの番号で指定することも出来ます。

```css:CSS
#item {
	grid-row: -3 / -1; /* or -3 / span 2 */
	grid-column: -2 / -1; /* or -2 / span 1　*/ /* or -2  */
}
```

このように、下端あるいは右端のエリアを表すには`grid-row: -2;`あるいは`grid-column: -2;`になるんですね。

---

さて、最初のサンプルに戻りましょう。
![手書きライン入り.png](https://qiita-image-store.s3.amazonaws.com/0/87822/ec368ba9-1e20-b7ff-3708-2061efbbde7a.png)

`<div id="itemA">A</div>` は <font color="red">row 1～3</font>、<font color="blue">column 1～2</font> を占めているので、下のようになります。

```css:#itemAのCSS（完成）
#itemA {
	grid-row: 1 / 3;
	grid-column: 1 / 2;
	background: #f88;
}
```

`<div id="itemB">B</div>` は <font color="red">row 1～2</font>、<font color="blue">column 2～3</font> を占めているので、下のようになります。

```css:#itemBのCSS（完成）
#itemB {
	grid-row: 1 / 2;
	grid-column: 2 / 3;
	background: #8f8;
}
```

同様に`<div id="itemC">C</div>` は <font color="red">row 2～3</font>、<font color="blue">column 2～3</font> を占めているので、下のようになります。

```css:#itemCのCSS（完成）
#itemC {
	grid-row: 2 / 3;
	grid-column: 2 / 3;
	background: #88f;
}
```

これで、方法ＡによるGrid Layoutが完成しました。

```html:HTML（方法Ａで完成）
<div id="container">
	<div id="itemA">A</div>
	<div id="itemB">B</div>
	<div id="itemC">C</div>
</div>
```

```css:CSS（方法Ａで完成）
/* コンテナ */
#container {
	display: grid;
	grid-template-rows: 100px 50px;
	grid-template-columns: 150px 1fr;
}

/* アイテム */
#itemA {
	grid-row: 1 / 3;
	grid-column: 1 / 2;
	background: #f88;
}
#itemB {
	grid-row: 1 / 2;
	grid-column: 2 / 3;
	background: #8f8;
}
#itemC {
	grid-row: 2 / 3;
	grid-column: 2 / 3;
	background: #88f;
}
```

![02.PNG](https://qiita-image-store.s3.amazonaws.com/0/87822/b745175c-29c4-722c-39fe-30463c7931bf.png)
[実際のサンプル](https://jsfiddle.net/kura07/3edx9ad2/2/) （サンプルが動かない場合には、ブラウザが対応しているかどうか確認してみてください。[Can I use... CSS Grid Layout](http://caniuse.com/#feat=css-grid)）

### ＜ステップ３ - 方法Ｂ＞ エリアに名前を付けて指定する

この方法で新しく使うプロパティは下の2つです。

- **grid-template-area<font color="orangered">s</font>**: **エリア**を作ってそれぞれに名前を付ける（**コンテナ**のスタイルとして記述する）
- **grid-area**: 各**アイテム** が占める**エリア**の名前を指定する（**アイテム**のスタイルとして記述する）

**grid-template-area<font color="orangered">s</font>**の指定の仕方は独特です。まずはサンプルの場合の例を見てみましょう。

![s-手書き.jpg](https://qiita-image-store.s3.amazonaws.com/0/87822/b886c502-201d-97d0-eaf0-9d1a72ce77c2.jpeg)

このサンプルは、2x2のグリッドとみなすことが出来ます。

![手書きをエリアに.png](https://qiita-image-store.s3.amazonaws.com/0/87822/f0058f5a-8df1-5f87-353d-64974d0abcd0.png)

これを `grid-template-areas` を使って書くと、このようになります。

```css
#container {
	grid-template-areas:
		"areaA areaB"
		"areaA areaC";
}
```

ダブルクオーテーション（`"`）で囲まれた1行の文字列が、グリッドの1行を表しています。
1行の文字列に含まれる一連の文字（`areaA`、`areaB` など）はエリアの名前を表しています。エリアの名前は自由に決めることが出来ます。
エリアの名前は半角スペース(` `)で区切られており、これがグリッドの縦方向のラインを表しています。
同じエリアの名前を指定することで、エリアが複数のセルにまたがることを表すことも出来ます。（この場合`areaA`は縦方向に2つセルを占めている。）

このように指定することで、アスキーアートのように視覚的にエリアを記述することができるわけです。

また、見た目を整えるために、半角スペースを複数続けることや、文字列の前後に付けることも出来ます。
名前を付ける必要のないセルにはピリオド（`.`）を一つ以上連続して記述します。
（エリアに名前がないというだけですので、grid-row/grid-columnを使えばその場所にもアイテムを配置できます。）

```css
#container {
	grid-template-areas:
		"header header header"
		"nav contents aside"
		". footer .";
}

/* ↓分かりやすく見た目を整える↓ */

#container {
	grid-template-areas:
		" header header   header "
		" nav    contents aside  "
		" .....  footer   .....  ";
}
```

さてさきほども書きましたが、最初のサンプルの場合はこのように記述すればいいでしょう。

```css
#container {
	grid-template-areas:
		"areaA areaB"
		"areaA areaC";
}
```

次に**アイテム**に**grid-area**を記述します。
これはとても簡単で、配置したい場所のエリアの名前を**grid-area**に指定すればいいだけです。
（ダブルクオーテーションでは囲いません。）

```
#itemA {
	grid-area: areaA;
}
```

これで、方法ＢによるGrid Layoutが完成しました。

```html:HTML（方法Ｂで完成）
<div id="container">
	<div id="itemA">A</div>
	<div id="itemB">B</div>
	<div id="itemC">C</div>
</div>
```

```css:CSS（方法Ｂで完成）
/* コンテナ */
#container {
	display: grid;
	grid-template-rows: 100px 50px;
	grid-template-columns: 150px 1fr;
	grid-template-areas:
		"areaA areaB"
		"areaA areaC";
}

/* アイテム */
#itemA {
	grid-area: areaA;
	background: #f88;
}
#itemB {
	grid-area: areaB;
	background: #8f8;
}
#itemC {
	grid-area: areaC;
	background: #88f;
}
```

![02.PNG](https://qiita-image-store.s3.amazonaws.com/0/87822/b745175c-29c4-722c-39fe-30463c7931bf.png)
[実際のサンプル](https://jsfiddle.net/kura07/3edx9ad2/5/) （サンプルが動かない場合には、ブラウザが対応しているかどうか確認してみてください。[Can I use... CSS Grid Layout](http://caniuse.com/#feat=css-grid)）

## 【チートシート】Grid Layoutで使用するプロパティ

**方法Ａ**（ラインの番号で指定する）で使うもの

- **コンテナ**に指定 [**grid-template-row<font color="orangered">s</font>**][2-2]: 行のトラックの高さを半角スペースで区切って指定
- **コンテナ**に指定 [**grid-template-column<font color="orangered">s</font>**][2-2]: 列のトラックの幅を半角スペースで区切って指定
- **アイテム**に指定 [**grid-row**][2-3-A]: アイテムが占める<font color="red">行のラインの番号</font>をスラッシュ区切りで指定する
- **アイテム**に指定 [**grid-column**][2-3-A]: アイテムが占める<font color="blue">列のラインの番号</font>をスラッシュ区切りで指定する

```css:方法ＡのCSS例
/* コンテナ */
#container {
    display: grid;
    grid-template-rows: 100px 50px;
    grid-template-columns: 150px 1fr;
}
/* アイテム */
#item {
    grid-row: 1 / 3;
    grid-column: 1 / 2;
}
```

**方法Ｂ**（エリアに名前を付けて指定する）で使うもの

- **コンテナ**に指定 [**grid-template-row<font color="orangered">s</font>**][2-2]: 行のトラックの高さを半角スペースで区切って指定
- **コンテナ**に指定 [**grid-template-column<font color="orangered">s</font>**][2-2]: 列のトラックの幅を半角スペースで区切って指定
- **コンテナ**に指定 [**grid-template-area<font color="orangered">s</font>**][2-3-B]: **エリア**を作ってそれぞれに名前を付ける
- **アイテム**に指定 [**grid-area**][2-3-B]: 各**アイテム** が占める**エリア**の名前を指定する


```css:方法ＢのCSS例
/* コンテナ */
#container {
    display: grid;
    grid-template-rows: 100px 50px;
    grid-template-columns: 150px 1fr;
    grid-template-areas:
        "areaA areaB"
        "areaA areaC";
}
/* アイテム */
#item {
    grid-area: areaA;
}
```

# 3. サンプル

- 写真と文章を左右に振って配置する

![写真と文章.PNG](https://qiita-image-store.s3.amazonaws.com/0/87822/03843206-b72c-0813-ed09-5a274a424fa5.png)

```html:HTML
<dl id="images">
	<dt id="dt1"><img src="cat0.jpg" alt="猫0"></dt>
	<dd id="dd1"><p>＜　ごはんまだかな？</p></dd>
	<dt id="dt2"><img src="cat1.jpg" alt="猫1"></dt>
	<dd id="dd2"><p>少しの辛抱にゃ　＞</p></dd>
</dl>
```

```css:CSS
#images {
	display: grid;
	grid-template-columns: 200px 200px
}
#dt1 {
	grid-row: 1; grid-column: 1;
	margin-bottom: 20px;
}
#dd1 {
	grid-row: 1; grid-column: 2;
}
#dt2 {
	grid-row: 2; grid-column: 2;
}
#dd2 {
	grid-row: 2; grid-column: 1;
}
```

- よくある2カラムレイアウト

![よくある2カラムレイアウト.PNG](https://qiita-image-store.s3.amazonaws.com/0/87822/7a54d193-bad4-6ecf-354f-4749e6f8e300.png)

```html:HTML
<h1>タイトル</h1>
<main>メイン</main>
<nav>ナビ</nav>
<footer>フッター</footer>
```

```css:CSS
body {
	display: grid;
	margin: 0;
	min-height: 100vh;
	grid-template-rows: 100px 1fr 100px;
	grid-template-columns: 100px 1fr;
}
body > * {
	margin: 3px;
	padding: 10px;
}
h1 {
	grid-row: 1;
	grid-column: 1 / span 2;
	background: #faa;
	border-radius: 10px 10px 0 0;
}
main {
	grid-row: 2;
	grid-column: 2;
	background: #afa;
}
nav {
	grid-row: 2;
	grid-column: 1;
	background: #aaf;
}
footer {
	grid-row: 3;
	grid-column: 1 / span 2;
	background: #aaa;
	border-radius: 0 0 10px 10px;
}
```

- よくある3カラムレイアウト

![よくある3カラムレイアウト.PNG](https://qiita-image-store.s3.amazonaws.com/0/87822/583f6289-0917-c07a-83a9-b3d73b8335ef.png)

```html:HTML
<h1>タイトル</h1>
<main>メイン</main>
<nav>ナビ</nav>
<aside id="side">サイド</aside>
<footer>フッター</footer>
<aside id="ad">広告</aside>
```

```css:CSS
body {
	display: grid;
	margin: 0;
	min-height: 100vh;
	grid-template-rows: 100px 100px 1fr 100px;
	grid-template-columns: 100px 1fr 100px;
	grid-template-areas:
		"title  title  title "
		"nav    main   ad    "
		"nav    main   side  "
		"footer footer footer";
}
body > * {
	margin: 3px;
	padding: 10px;
}
h1 {
	grid-area: title;
	background: #faa;
	border-radius: 10px 10px 0 0;
}
main {
	grid-area: main;
	background: #afa;
}
nav {
	grid-area: nav;
	background: #aaf;
}
#side {
	grid-area: side;
	background: #faf;
}
footer {
	grid-area: footer;
	background: #aaa;
	border-radius: 0 0 10px 10px;
}
#ad {
	grid-area: ad;
	background: #888;
}
```

# 4. 今までと何が違う？

この **CSS Grid Layout**、気づいた方もいるかもしれませんが、**CSS Flexible Box Layout** や **HTMLの&lt;table>** などに似ていると思いませんか？
実際これらは似ており、お互いに同じようなレイアウトを作ることも出来ます。
しかし、これらは性質が異なるものであり、利用する際には違いを理解する必要があります。

## CSS Grid Layout と CSS Flexible Box Layout

**CSS Flexible Box Layout** とは、おなじみ `display: flex;` を使ったレイアウトです。
両者の違いは、要素の配置の次元にあります。

||<font color="orangered">CSS Grid Layout</font>|CSS Flexible Box Layout|
|:--|:--|:--|
|CSSの記述|display: **grid**; /* or **inline-grid** */|display: **flex**; /* or **inline-flex** */|
|配置の次元|<font color="orangered">2次元</font>|1次元|
||![img-grid.PNG](https://qiita-image-store.s3.amazonaws.com/0/87822/d6cf06a2-44a7-5808-1c72-2ce57f699aa5.png)<br>縦横自由に配置|![img-flex.PNG](https://qiita-image-store.s3.amazonaws.com/0/87822/45529723-e3c5-2dcd-3a86-6c63b5853ed7.png)<br>折り返しはするけど一方向|

## CSS Grid Layout と HTMLの&lt;table>

**HTMLの&lt;table>**も同様にグリッドレイアウトを実現できますが、用法が全く異なります。
決定的な違いは、HTMLのセマンティック（意味）です。

**CSS Grid Layout** では、HTMLを操作せずにグリッドレイアウトを実現します。
つまり、HTMLのセマンティックを変えずに表示を変えることができるのです。

```html:CSS&nbsp;Grid&nbsp;Layout&nbsp;の&nbsp;HTML
<!-- CSS を用いてグリッドレイアウトにする -->
<h1>タイトル</h1>
<main>メイン</main>
<nav>ナビ</nav>
<footer>フッター</footer>
```

当然、これを&lt;table>を使って記述するのはダメです。なぜなら、HTMLのセマンティックがおかしなことになってしまうからです。

```html:ダメなHTML
<table>
	<tr><td colspan="2"><h1>タイトル</h1>
	<tr><td><nav>ナビ</nav><td><main>メイン</main>
	<tr><td colspan="2"><footer>フッター</footer>
</table>
```

しかし逆に、**HTMLの&lt;table>**を使うべき場面もあります。表をデータとして表示する場合などです。

```html:&lt;table>を使うべき例
<table>
	<caption>果物の値段</caption>
	<thead>
		<tr><th>店名<th>りんご<th>もも
	</thead>
	<tbody>
		<tr><th>A店<td>100円<td>300円
		<tr><th>B店<td>110円<td>280円
	</tbody>
</table>
```

目的によって適切な記述をするようにすべきでしょう。

# 5. 次のステップへ

ここまでの解説で、**CSS Grid Layout** のおおよその感じはつかめる思います。
さらに、<font color="orangered">「もっと簡単にCSSを書きたい！」</font>、<font color="orangered">「横幅に合わせてセルの個数を変化させたい！」</font>ということであれば、[場面別編][2]へとお進みください。

# 6. 参考ページ
[CSS Grid Layout Module Level 1](https://www.w3.org/TR/css-grid-1/)
[CSS Grid Layout - CSS | MDN](https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Grid_Layout)


[1]:http://qiita.com/kura07/items/e633b35e33e43240d363
[2]:http://qiita.com/kura07/items/486c19045aab8090d6d9
[3]:http://www.google.com/
[4]:http://www.google.com/

[2-2]:http://qiita.com/kura07/items/e633b35e33e43240d363#%E3%82%B9%E3%83%86%E3%83%83%E3%83%97%EF%BC%92-css-%E3%81%A7%E3%82%B0%E3%83%AA%E3%83%83%E3%83%891%E3%83%9E%E3%82%B9%E3%81%AE%E7%B8%A6%E6%A8%AA%E3%81%AE%E5%A4%A7%E3%81%8D%E3%81%95%E3%82%92%E6%8C%87%E5%AE%9A%E3%81%99%E3%82%8B
[2-3-A]:http://qiita.com/kura07/items/e633b35e33e43240d363#%E3%82%B9%E3%83%86%E3%83%83%E3%83%97%EF%BC%93---%E6%96%B9%E6%B3%95%EF%BC%A1-%E3%83%A9%E3%82%A4%E3%83%B3%E3%81%AE%E7%95%AA%E5%8F%B7%E3%81%A7%E6%8C%87%E5%AE%9A%E3%81%99%E3%82%8B
[2-3-B]:http://qiita.com/kura07/items/e633b35e33e43240d363#%E3%82%B9%E3%83%86%E3%83%83%E3%83%97%EF%BC%93---%E6%96%B9%E6%B3%95%EF%BC%A2-%E3%82%A8%E3%83%AA%E3%82%A2%E3%81%AB%E5%90%8D%E5%89%8D%E3%82%92%E4%BB%98%E3%81%91%E3%81%A6%E6%8C%87%E5%AE%9A%E3%81%99%E3%82%8BE3%82%A2%E3%81%AB%E5%90%8D%E5%89%8D%E3%82%92%E4%BB%98%E3%81%91%E3%81%A6%E6%8C%87%E5%AE%9A%E3%81%99%E3%82%8B