コーディング上達に必須!!htmlの2つの種類を押さえよう!

こんにちは! 吉田です!

今日は
コーディング基礎講座
7回目をお届けします!

実はhtmlのタグは
大きく2種類に分類されます。
(厳密には3種類)

感覚的に理解されている方も多いのですが
コーディングでよく使う
divやa、imgといったタグは
その性質上、いずれも違う種類になるんですね。

ただ種類が違うだけ
ならいいのですが..

厄介なことに

種類によって
並び方が違ったり、
marginやpaddingを設定しても
意図通りにならなかったり...

知らずに進めていくと
タグの初期動作の意味がわからず
めちゃめちゃ色んなところで
細かくつまづきます。

ということで..

今日はその
ブロック要素、インライン要素、
そしてインラインブロック要素という
3種類のタグの性質について
画面を見ながら一緒に学んでいきましょう!

↓↓

(動画でお伝えし忘れたのですが
ブロック要素とインライン要素、
インラインブロック要素との切り替えは
cssのdisplayプロパティで行なっていきます!)

displayプロパティは
フレックスボックスでも使いますし、
非表示にするdisplay: none;でも
お馴染みの最頻出cssになります!

やや細かいですが
この機会にぜひ
習得していきましょう!

ではでは今日は
この辺で!

吉田

p.s.

ちなみに、
今日お伝えしている

「ブロック要素・インライン要素」

という概念は、
HTML5以降のバージョンでは
公式に廃止され、
「コンテンツ・モデル」という考え方に
統合されています。

「廃止されてるなら意味ないだろ!!
無駄なこと教えるな!!」

という声が聞こえてきそうですが
あくまで「概念」が廃止されただけで
実装上、タグの性質については
そのまま生きているんです。

(ややこしい話ですが...汗)

なので、タグの表示については
ブロック要素やインライン要素、
インラインブロック要素の考え方は
今でも生きています。

「じゃあ新しくなった
コンテンツ・モデルって何なの?」

って話ですが..

これは
「タグの性質」というよりも
「タグの入れ子ルール」に
重点を置いて

タグの種類を
かなり細かーくに
定めたものになります。

(spanタグの中には
divタグ入れちゃダメだよ!とか、

これまで慣習的に
NGとされていたものを
明文化したようなものです)

もちろん
これも重要なんですが

そもそも複雑すぎて
混乱しますし、

経験者でも、ちゃんと読まないと
何を言ってるのかさっぱりでした。笑

なので、
まずは実装上避けられない
タグの性質について
押さえていただき、

慣れてきた段階で
コンテンツ・モデルを
参照いただくのが良いかなと
個人的には思っています。

そのうち取り上げますね!

もしご興味ある方は
ぜひ調べてみてください^^

(たぶん、初見では何言ってるか
よくわからないと思います笑)

では!

ご質問お待ちしています!

↓吉田への感想・質問はこちら↓

https://salesdesign-lab.jp/p/r/oIA6aeRR

率直な感想や質問など大歓迎です! 励みになります!

投稿者プロフィール

吉田 祥太
吉田 祥太
フロントエンジニア出身の叩き上げセールスデザイナー
セールスデザイナーとしては5年目。

ノンデザイナー出身でめちゃめちゃ苦労した経験から、
感覚的になりやすいデザインの指導を
理論的かつ再現性ある形で伝えることをモットーにしている。

詳しいプロフィールはこちら