こんにちは、CSSで頭を抱えている皆さん！
「margin効かねぇ」「widthが言うこと聞かねぇ」って壁に頭打ちつけていませんか？（やり過ぎ注意ですよ！）
今日は、そんなあなたの悩みをスッキリ解決しちゃいます。
準備はいいですか？
深呼吸して…さぁ、CSSの不思議な世界に飛び込みましょう！
クリックできる目次
ブロック要素 VS インライン要素、大バトル勃発！
HTML要素には、実は性格の違う2つのタイプがいるんです。そう、
「ブロック要素」と「インライン要素」。
この2つ、まるで犬と猫くらい性格が違うんですよ。
ブロック要素が俺様だ！タイプ
例：<div>、<p>、<h1>など
こいつらの特徴：
- 横幅いっぱいに広がる（超目立ちたがり屋）
- 縦に積み重なる（一列に並ぶのは嫌いらしい）
- width、height、marginが全方向に効く（超わがまま）
インライン要素「みんなで仲良く」タイプ
例：<span>、<a>、<strong>など
こいつらの特徴：
- 自分のサイズだけ（控えめ）
- 横に仲良く並ぶ（群れが好き）
- width, heightが効かない（「そんなの気にしないよ〜」って感じる）
- marginは左右だけOK（上下はノーサンキュー）
実際に見てみましょう！
それでは、実際にこの2つがどう振る舞うか、見てみましょう。
ブロック要素の例
See the Pen
ブロックレベル要素 by 武田 弘貴 (@hiroki_t1)
on CodePen.
インライン要素の例
See the Pen
インライン要素 by 武田 弘貴 (@hiroki_t1)
on CodePen.
おまけ：インラインブロック要素の例
See the Pen
インラインブロック要素 by 武田 弘貴 (@hiroki_t1)
on CodePen.
「えっ、じゃあどうすりゃいいの？」って？
こんなテクニックがありますよ：
- インライン要素にサイズを指定したいときは、「
display: inline-block」使ってみて。これで、インラインとブロックのいいとこ取りができます！ - 余白の調整が難しいときは、「
box-sizing: border-box」使ってみてください。これで、padding と border を含めたサイズ指定が可能になります。 - どうしてもうまくいかないときは…深呼吸！そして、「これってブロック？インライン？」ってもう一度確認。きっと答えが見つかるはず！
さいごに
CSSって、「なんじゃこりゃ！」って感じるかもしれません。でも、コツをつかめば、すっごく楽しいんですよ。
ともに、CSSやHTMLの世界で一緒に成長していきましょう！困ったことがあったら、遠慮なくお問い合わせください。
これからも一緒にコーダーへの道を歩んでいけるのを楽しみにしています！
