どうもNaokiです！今日は昨日に引き続きhtmlとcssのお話です！

皆さんhtmlやcssでコードを書くと聞くと複雑そうな作業を思い浮かべると思います！しかしそんな事はありませんでしたすごく身近にあるものと構造が同じだったのです！それはなんと「お弁当」です！ではなぜお弁当が構造と似ているかを一緒に見ていきましょう！

タグにはお弁箱と具材の2種類がある！？

そうなんです！今日はじめて知ったのですがとてもわかりやすい考え方ですまずhtmlのタグにはお弁当箱の仕切りの役割(ブロック要素）と中身の食材（インライン要素)の2種類があります！つまり一つのページが大きなお弁当箱だと考えてご飯の場所、ハンバーグの場所、卵の場所等、中身をどこに入れるかを整理してその後にハンバーグや卵等を入れていくと考えればとてもわかり易いと思います！　下はその一例です↓

<div class="obentoubako">
    <div class="gohan_basyo">
      <p>ごはん</p>
    </div>
    <div class="hanba-gu_basyo">
      <p>ハンバーグ</p>
    </div>
    <div class="tamago_basyo">
      <p>卵</p>
    </div>
  </div>

上の例ではdivタグがブロック要素pタグがインライン要素です！やはりお弁当箱に例えるとわかりやすいですね笑　htmlを始めたての方はぜひお弁当箱を意識しながら書いてみて下さい！

覚えて置いて損は無い！豆知識！

画像等を使う時に使用するimgタグはbodyの中に直接書き込まずdivタグで囲ってあげてから使用するとgoodです！またdivタグはcssでデザインする上で非常に使いやすいタグでありdivの中にdivを入れても大丈夫なんです！つまり常にどの要素をどのように囲みその中に何を入れるかを意識しながらコードを書けばかなりデザインの幅が広がると思います！

まとめ

皆さんいかがでしたか？ブロック要素とインライン要素の違いはわかって頂けたでしょうか？始めのうちはどのタグがブロック要素でどのタグがインライン要素なのかを調べてみるとより理解が深まると思います！ブロック要素とインライン要素をマスターすると次はいよいよcssデザインです！