コーディング

コンテンツ・モデルって?

  • このエントリーをはてなブックマークに追加
コンテンツ・モデルって?

こんにちは!ワタナベです。

最近はあまり外出していなかったのですが、先日、映画を観に豊洲まで行ってきました。
ただいま、全国各地の映画館で、4DXの「劇場版 機動戦士ガンダム00 -A wakening of the Trailblazer-」が上映中なのです!
各地映画館の上映期間が違いますが、4/6(金)までどこかしらの映画館で上映しているので、気になる方は是非♪
テレビアニメシリーズの2年後が舞台なので未視聴でも楽しめると思います(*´▽`*)
個人的に、主人公たちが宇宙空間にいるときに座席がふわふわするのが好きでした(笑)

 

今回は、コーディングする上で最近知ったことを自分の勉強ついでに書きます(^^)/

自分はコーディングは独学でやってきたので、タグの深い意味だったり特性とかはまだまだ勉強中なのですが、
ここ最近でブロックレベル要素とインライン要素について知ったのですが、

このブロックレベル要素とインライン要素、HTML5では廃止されているそうです。し、知らなかった…( ゚Д゚)無知の知

つまり、HTML5であれば、ブロックレベル要素だったdivタグをインライン要素だったaタグで囲めるのです。
しかし、だからといって、何でもかんでも囲えるわけでもないらしいです。ややこしい

それがコンテンツ・モデルというものらしいです。( ゚Д゚)

コンテンツ・モデルとは?

コンテンツ・モデルとはどの要素(タグ)にどんなコンテンツを入れて良いかを定義したものをいいます。すべての要素に定義されており、HTML5でマークアップする場合は、コンテンツ・モデルを意識する必要があります。

例えば、section要素のコンテンツ・モデルはフロー・コンテンツとセクショニング・コンテンツに定義されます。これらのカテゴリーに属する要素であればsection要素の中に入れても良いということになり、逆を言えば、それ以外のカテゴリーは入れられないということになります。

また、HTML4やxhtmlの際のブロックレベル要素とインライン要素でもインライン要素の中にブロックレベル要素を入れてはいけないということがありましたが、それと同じような考え方なのでイメージはしやすいと思います。HTML5ではブロックレベル要素とインライン要素という分け方がなくなり、カテゴリーとして7つの分類ができた形になります。

引用:第7回目 HTML5の「コンテンツ・モデル」についてまとめよう

 

コンテンツ・モデルを簡単にまとめてみました

メタデータ・コンテンツ:head内に置くもの (例:title、mate、style …)

フロー・コンテンツ:body内で使用するほとんどのコンテンツ

ヘッディング・コンテンツ:見出し(h1~h6)

セクショニング・コンテンツ:章・節・項。見出し、フッター、文書を構成する部位の範囲定義(例:section、nav …)

フレージング・コンテンツ:文書を構成するテキスト。段落の中にあるテキスト。pのような段落そのものを表す要素は含まない(例:br、img、span …)

エンベッディッド・コンテンツ:埋め込み型コンテンツ(例:audip、camvas …)

インタラクティブ・コンテンツ:ユーザーが操作できるコンテンツ(例:a、button、textarea…)

↑は複数のコンテンツに属しているもの、特定の条件があるものもあります。

……なるほどわからん!

 

コンテンツ・モデルについて学べそうなサイト・記事

コンテンツ・モデルの一覧表

 

【超便利】コンテンツモデル ガイド

これめちゃくちゃ分かりやすいです。コーディングの御供に(/・ω・)/

 

清く正しく美しいコーディングを目指して鍛錬だ…!_(:3 」∠ )_

 

 

 

冒頭の映画の話に戻りまして…

4dx_00

↑映画を観に行くと先着でポストカードもらえます(∩´∀`)∩カッコイイ

他、「劇場版クラッシャージョウ」「装甲騎兵ボトムズ ペールゼン・ファイルズ 劇場版」サンライズ作品も4DXで上映されているようです。
気になるのがあったら是非観に行ってみてください~!4DX楽しいですよ(*´▽`*)

 

それではまた次回!

ご閲覧ありがとうございました♪

  • このエントリーをはてなブックマークに追加

【Webデザイナー募集!】D-Gripで一緒に働きませんか?

ただいま株式会社D-Gripシステムでは、制作部として一緒に働いてくれるWebデザイナーさんを募集しています。

実務経験がある方はもちろん、専門学校や独学で勉強された未経験の方でも歓迎です!
800サイト以上の運営実績のある会社で、プロのWEBデザイナーへの道を着実に歩んでいきませんか?

お問い合わせはコチラから↓
採用サイトへ

お電話はコチラから↓
TEL:03-5363-2191

採用サイトへ