【Chrome Developer Tools】実例で学ぶelementタブで出来ること～CSS・margin編

ある日のQiita Advent Calendar 2017のページです。
これを使って、Chrome Developer Tools（開発者ツール）を使ってみましょう:wink:
![001_045.png](https://qiita-image-store.s3.amazonaws.com/0/188980/0d6ce0f9-e1bf-1ebc-de25-20e9bc13aeb3.png)

# この記事で学ぶこと
1. marginのシミュレーション方法。
2. CSSのmarginについて

# まずはじめに
この記事では、（例えば）カテゴリの１ブロックを「カード」と呼ぶことにします。
![001_045_orange.png](https://qiita-image-store.s3.amazonaws.com/0/188980/09a991df-f630-e4f5-6246-b49eb7330a9c.png)
オレンジ色の四角で囲んだ部分が、１カードです。
この画面キャプチャには、データベース、Webテクノロジーなど、６カード並んでいます。

ちなみに、カード１つ分のHTMLソースはこちら:arrow_down:
:warning:わかりやすくするために、一部省略しました。

```HTML:カード１枚分
<div class="col-lg-3 col-md-4 col-sm-6">
	<div class="adventCalendarCard">
		<a class="adventCalendarCard_title-mobile" href="/advent-calendar/2017/categories/mobile">モバイル</a>
		<div class="adventCalendarCard_block">
			<div class="adventCalendarCard_block_stats">
				<span class="adventCalendarCard_block_counts">カレンダー数<span class="adventCalendarCard_block_count">11</span></span>
				<span class="adventCalendarCard_block_stocks">参加者数<span class="adventCalendarCard_block_count">144</span></span>
			</div>
			<ul class="adventCalendarCard_block_list">
				<li><a href="/advent-calendar/2017/monaca">Monaca</a></li>
				<li><a href="/advent-calendar/2017/automation">モバイル 自動化 / 自動テスト</a></li>
				<li><a href="/advent-calendar/2017/ios2">iOS2</a></li>
			</ul>
			<a class="adventCalendarCard_block_showAll" href="/advent-calendar/2017/categories/mobile">全て表示する</a>
		</div>
	</div>
</div>
```

# 隣のカードとの間隔を広くしてみる
下の図で「ここ！」と示している、赤と緑のカードの隙間をもう少し広げてみましょう。
今回は緑のカードを少し右にずらすことにします。
![002_070.png](https://qiita-image-store.s3.amazonaws.com/0/188980/b1aef3df-489e-c244-ee51-5193a74dddc0.png)

## １．ずらしたいHTML要素を探す
まず、操作したいHTML要素を探します。
探し方は[【Chrome Developer Tools】実例で学ぶelementタブで出来ること～HTML編](https://qiita.com/mtanabe/items/5c9de7ecf0e2f039202a)をご覧ください:bow:
そして、緑のカード「Webテクノロジー」の`<div class="adventCalendarCard">`を見つけてください。

## ２．marginを設定する
上記で見つけた緑のカード「Webテクノロジー」の`<div class="adventCalendarCard">`に対して、左側に隙間を作りましょう。

developer toolをブラウザの下に表示させている場合は、このように:arrow_down:右側にあるComputedタブをクリック。
![003_070.png](https://qiita-image-store.s3.amazonaws.com/0/188980/67cbb850-7fbb-3782-b3f0-d87efe1f0047.png)

ブラウザの右or左に表示させている場合は、elementを選択した時点でこのような:arrow_down:表示になるかと思います。
![004_070.png](https://qiita-image-store.s3.amazonaws.com/0/188980/e6fc8398-ebbe-b440-8fa1-ce54c6c674ed.png)

この４色くらいの四角で、margin/border/paddingを設定することが出来ます。
赤い丸で示している:arrow_down:marginの左側をダブルクリックして適当な数値を入力すると・・・。
![005_075.png](https://qiita-image-store.s3.amazonaws.com/0/188980/b36fc094-05e0-75ec-b33e-b145a7918015.png)

隙間が広がりました！:heart_eyes:
上下のカードと比べてみるとわかりやすいと思います。
![006_075.png](https://qiita-image-store.s3.amazonaws.com/0/188980/b27b1e42-45a9-d16a-4736-815d230627fb.png)

## ３．実装に反映させる
さて、上記でシミュレーションした状態で、developer toolから緑のカード「Webテクノロジー」の`<div class="adventCalendarCard">`を見てみると、シミュレーション結果のCSSが反映されていることがわかります。

HTML側には「style属性」として追加されています。
CSS側には「elementクラスのstyle属性」という体で追加されています。
![007_060.png](https://qiita-image-store.s3.amazonaws.com/0/188980/a295309b-8b8c-7ca6-e259-fc5688f16b49.png)
HTML側はこのままコピー＆ペーストすればOK:ok:です。
CSS側は中カッコ→｛｝の中身だけコピー＆ペーストしてください。idやclassの指定は別途自分で行う必要があります。

どうでしょう？
CSSがわからなくても実装が出来てしまいました:astonished:
developer toolすごいですねー。

# marginとは？
よくわからないまま実装が出来てしまいましたが、何となくレベルでいいので理解しておきましょう:pig: 
marginとは、ものすごくざっくりいうと、「外側の隙間」です。
つまり、ほかのHTML要素との隙間を調節したいなぁと思ったら、marginを操作すればよいわけです。


# まとめ
- 他のHTML要素との隙間を調節したい時のCSSプロパティは「margin」。
- marginの調整はdeveloper toolから視覚的にシミュレーション可能。

# おまけ
こういう記事を読んだら :arrow_down: 
　[CSSで「余白」を制してデザイナーに好かれよう](https://qiita.com/rhirayamaaan/items/78544723724ccc2a50e9)
　[デザイナーの考える「余白」とは何か書き下してみる](https://qiita.com/ln-north/items/dcf305d80edde550645e)
margin＝余白をシミュレーションしたくなりますよね？:yum: