about css option

1. HTML/CSSなんて怖くない！
HTML/CSS 入門②
〜ざっくり学ぶ[ちょっと知ってるとお得なhtml/css]編〜
亀田みさ緒

2. 再び自己紹介。

3. 名前：亀田みさ緒
所属：フランジア・ジャパン
職種：名前ばかりのデザイナー、フロントエンドエンジニア
趣味：服、料理、ゲーム
主に担当している案件：
リスティング広告のLPの制作〜運用。
現在運用方法などの見直し中。
守備範囲：
少しのデザイン、Photoshopでデザイン修正したり、
HTML/CSSコーディング、jQueryちょぴっと。

4. ではさっそく本題へ。

5. なんとなくHTMLって分かるんだけど、いざちょっとレイアウト変えるとうまくできない
↓
HTMLってゆうか、え、これCSSどうなってんのかわかんない
↓
（；ω；）
と思っていらっしゃる方へ何かお役に立てれば嬉しいです。

6. ざっくりな説明です、ざっくり。

7. 前回の復習です

8. 前回はCSSのdisplayプロパティの簡単説明を実施しました。
まず知ってると得する値の３つが、
inline, inline-block, block
の３つでしたね。

9. それぞれを画面でみるとこう。
inlineとinline-blockの横幅は文字数分の横幅のエリアを確保している。
blockの横幅は画面横幅いっぱいにエリアを確保している。
<div class="inline" style="display: inline;">display:inlineがかかっている要素</div> <br>
<div class="block" style=”display:block;">display:blockがかかっている要素</div>
<div class="inline" style="display: inline-block;>display:inline-blockがかかっている要素</div>

10. 違いは 幅 でしたね！
では今回も楽しくざっくりといきましょう。

11. 目次
1. コレを真ん中に移動させたいの！
2. position:absolute したのに動かんがな！
3. margin と padding の違いが意味不明なんですけど〜
4. おまけ

12. 目次
1. コレを真ん中に移動させたいの！
2. position:absolute したのに動かんがな！
3. margin と padding の違いが意味不明なんですけど〜
4. おまけ

13. 実はブラウザは真ん中寄せであふれている

14. 900pxのブロックも、1200pxのブロックも真ん中寄せ

15. HTML CSS

16. margin: 0 auto; が魔法の言葉。
ただし、 margin: 0 auto; を効かせるタグに
横幅を● ●pxと指定をしないと動いてくれない。
margin: 0 auto; は、margin: 0 auto 0 auto ; の略。
左右の値をautoにすることによって真ん中に移動するので、
上下の値は入れても問題ない。

17. 動かしたい けど動かない そんな時は 試してみよう margin:0 auto;
（5・7・5・7・7な流れをイケボでどうぞ）

18. ちなみに

19. text-align: ceterが効くものと効かないもの
・移動させたいものが display:block を装備している場合。
・浮いているもの（float / position:absolte）

20. 1. コレを真ん中に移動させたいの！
2. position:absolute したのに動かんがな！
3. margin と padding の違いが意味不明なんですけど〜
4. おまけ

21. ・親要素に「position : relative;」がついていますか？
→直上の親要素がベスト！
・「position: absolute;」の子要素に「position:absolute」をしていませんか？
→きちんとお尻のすわったrelativeさんを用意しましょう。
・<th>や<td>タグにrelativeをかけて使っていませんか？
→そもそも相性最悪。thやtd内でabsoluteを使いたい場合はタグをかませて！
・display:inline の要素に指定していませんか？
→inline要素は”ブロック”ではないので、持ち上がりません！
この使い方は希望通りに動いてくれません

22. ・親要素に「position : relative;」がついていますか？
→直上の親要素がベスト！
・「position: absolute;」の子要素に「position:absolute」をしていませんか？
→きちんとお尻のすわったrelativeさんを用意しましょう。
・<th>や<td>タグにrelativeをかけて使っていませんか？
→そもそも相性最悪。thやtd内でabsoluteを使いたい場合はタグをかませて！
・display:inline の要素に指定していませんか？
→inline要素は”ブロック”ではないので、持ち上がりません！
この使い方は希望通りに動いてくれません
ここに関してははあまり突っ込まないでください。
正直、今までの感覚です・・・。

23. タグの相性、ってものもあるってことにしておきます。
人間でも相性ってありますし。

24. 人間だもの

25. では、なぜdisplay:inlineはabsoluteで浮かないのか？

26. position: relative / absolute はクレーンゲームのようなものです。

27. いい例かはわからないですが、クレーンゲームで例えます。
・クレーンゲーム全体がrelative
・アームはabsolute
・ 景品はabsoluteがかけられている要素

28. display:inlineはそもそも”高さ”を持っていません。
クレーンは景品をつかめない
あれ、つかめない・・

29. つかめない!!!!!!

30. と、いうことです。

31. 1. コレを真ん中に移動させたいの！
2. position:absolute したのに動かんがな！
3. margin と padding の違いが意味不明なんですけど〜
4. おまけ

32. ある日のこと。
旦那が言いました。

33. marginとpaddingの違いがわからない！！！！
同じ余白じゃん！
何が違うの！！！！

34. えぇ、余白で合ってますがな( ^ω^ )
てゆうか私に言われても困る。

35. marginは外側で、paddingは内側
ってよく聞きますよね？
まぁ、そのまんまなんです、実は。

36. marginは外側 → スーパーサイヤ人のあのメラメラ
paddingは内側 → ふ●っしー と 中の人
果たしてこの例えは正しいのか・・・

37. marginサイヤ人を見てみる

38. そう、この体の外にある →
メラメラしてるやつ。

39. ここmargin。 →

40. 体（ブロック）の外！！！！

41. paddingなっしーを見てみる

42. ふ○っしーって、中の人いるよね。
絶対に。

43. 中の人とふなっしーの →
間の余白・・・

44. padding →

45. 体（ブロック）の内！！！！

46. ふ◯っしーの中の人の外だからmarginじゃん
とか言わないでください・・・

47. そうなるとですね

48. 皮下脂肪はpaddingですね。

49. 基本は同じ余白。
でも、 border（枠）を境に運命が変わります。

50. GoogleChromeで良く見かけるこれ。これ結構重要
ん？よく見るのは私だけかしら・・・？

51. ボタンでとか、実はpaddingやmarginであふれている
margin →
← padding
← padding
実は border で縁取られている

52. だいぶ遠回りしましたが、
ざっくり言うと
そのブロックにとって外か内か
ってこと。

53. だと思います。

54. 1. コレを真ん中に移動させたいの！
2. position:absolute したのに動かんがな！
3. margin と padding の違いが意味不明なんですけど〜
4. おまけ

55. position:absolute(またはfixed)を使って上下中央にしたい時

56. position:absolute(またはfixed)をつけてる子に、
top: 50%;
margin-top: -(持ってる高さの半分の数値)px;
をつけてあげると、上下中央にバヒン！ってきます。
モーダルとかに便利ですね。

57. おわり
ご静聴ありがとうございました。