コーディング上達に必須！！htmlの２つの種類を押さえよう！
吉田 祥太
こんにちは！ 吉田です！
今日は
コーディング基礎講座
７回目をお届けします！
実はhtmlのタグは
大きく２種類に分類されます。
（厳密には３種類）
感覚的に理解されている方も多いのですが
コーディングでよく使う
divやa、imgといったタグは
その性質上、いずれも違う種類になるんですね。
ただ種類が違うだけ
ならいいのですが..
厄介なことに
種類によって
並び方が違ったり、
marginやpaddingを設定しても
意図通りにならなかったり...
知らずに進めていくと
タグの初期動作の意味がわからず
めちゃめちゃ色んなところで
細かくつまづきます。
ということで..
今日はその
ブロック要素、インライン要素、
そしてインラインブロック要素という
３種類のタグの性質について
画面を見ながら一緒に学んでいきましょう！
↓↓
（動画でお伝えし忘れたのですが
ブロック要素とインライン要素、
インラインブロック要素との切り替えは
cssのdisplayプロパティで行なっていきます！）
displayプロパティは
フレックスボックスでも使いますし、
非表示にするdisplay: none;でも
お馴染みの最頻出cssになります！
やや細かいですが
この機会にぜひ
習得していきましょう！
ではでは今日は
この辺で！
吉田
p.s.
ちなみに、
今日お伝えしている
「ブロック要素・インライン要素」
という概念は、
HTML5以降のバージョンでは
公式に廃止され、
「コンテンツ・モデル」という考え方に
統合されています。
「廃止されてるなら意味ないだろ！！
無駄なこと教えるな！！」
という声が聞こえてきそうですが
あくまで「概念」が廃止されただけで
実装上、タグの性質については
そのまま生きているんです。
（ややこしい話ですが...汗）
なので、タグの表示については
ブロック要素やインライン要素、
インラインブロック要素の考え方は
今でも生きています。
「じゃあ新しくなった
コンテンツ・モデルって何なの？」
って話ですが..
これは
「タグの性質」というよりも
「タグの入れ子ルール」に
重点を置いて
タグの種類を
かなり細かーくに
定めたものになります。
（spanタグの中には
divタグ入れちゃダメだよ！とか、
これまで慣習的に
NGとされていたものを
明文化したようなものです）
もちろん
これも重要なんですが
そもそも複雑すぎて
混乱しますし、
経験者でも、ちゃんと読まないと
何を言ってるのかさっぱりでした。笑
なので、
まずは実装上避けられない
タグの性質について
押さえていただき、
慣れてきた段階で
コンテンツ・モデルを
参照いただくのが良いかなと
個人的には思っています。
そのうち取り上げますね！
もしご興味ある方は
ぜひ調べてみてください＾＾
（たぶん、初見では何言ってるか
よくわからないと思います笑）
では！
ご質問お待ちしています！
投稿者プロフィール
-
フロントエンジニア出身の叩き上げセールスデザイナー
セールスデザイナーとしては５年目。
ノンデザイナー出身でめちゃめちゃ苦労した経験から、
感覚的になりやすいデザインの指導を
理論的かつ再現性ある形で伝えることをモットーにしている。
⇒ 詳しいプロフィールはこちら
最新の投稿
記事2023年12月25日【成果続々！】おめでとうございます！- 記事2023年12月20日「強みがない」デザイナーの生存戦略
- 記事2023年12月4日ガクブルしながら選ばれるデザイナーになろう
- 記事2023年11月27日サービスや営業メールを強くする泥臭い秘訣
