HTML
Progate

 要素のイメージ:HTML道場コース中級を終えて【Progate】

未来電子テクノロジーでインターンをしているUsamです。

今日はHTML&CSSコースを終えて悩んだところのメモを残します。


「要素」三兄弟

ここで悩んだ方ならパッと気付くであろう内容だと思います。


  • インライン要素

  • ブロック要素

  • インラインブロック要素

この3つです。論理的で詳しい説明はググればたくさん出てくるのでここでは僕のイメージで描かせてもらいます。


ブロック要素

こいつは高校生ぐらい長男ですね。体(幅)も大きくwidth,height,padding,marginの全てに対応することができ、心臓(テキスト)から指先(外枠)までの距離(空白)がある。ちなみにマウントを取りたい縦並び。

<h1> <p> <ul> <li> <div>


インラインブロック要素

こいつは小学生ぐらいの次男、体(幅)は兄に比べると小さいが、wedth,height,padding,marginは全て使える。小学校の授業であるようなみんな一緒に横並び。

例)img


インライン要素

これは赤ん坊のイメージです。心臓(テキスト)から指先(外枠)までの距離はなく、width,hightは使えない。padding,marginは左右のみの使い勝手。もちろんこいつは横並び。

<a> <span> <strong>


終わりに

これは僕がイメージを覚えるための施策ですので共感が少ないと思います。これを考えてもなお今でも完璧に理解できておらず、コチャることが多いです。やっぱりコードを打つ前に大体のイメージを紙に残すべきですね。

CSSのdisplayで要素の形を変えることができるのでinlin → inline-block へ買えて幅や高さを買えたり、縦並びから横並び、など変更して使いこなしましょう!!

今回はイメージのみですので詳しくはググってください

プログラミング初心者であるため、内容に誤りがあるかもしれません。

もし、誤りがあれば修正するのでどんどん指摘してください。