【HTML入門】#05. 要素の配置ルールとカテゴリー
HTML-код
- Опубликовано: 31 май 2017
- 本気で学ぶHTML入門講座5回目は、
要素の配置ルールとカテゴリーについてです。
今回は、記述の演習はないです。
時間がある時にさらっと聞いておいてください。
■目次
・概要と目標 0:22
・要素の配置ルール 1:44
・要素のカテゴリー 2:53
・練習問題 7:55
・解答 8:51
・まとめ 14:43
■配置ルール
HTMLの各要素、自身の中に配置できる要素が決まっています。
HTML5では各要素にコンテンツモデルという名前で、
中に入れれる要素が定義されています。
例えばp要素のコンテンツ・モデルは、
フレージング・コンテンツです。
つまり、p要素の中に入れれる要素は
フレージング・コンテンツのカテゴリに属している
要素のみ配置することができます。
ただ、コンテンツ・モデルはカテゴリばかりじゃないです。
・何も入れれない
・要素が限定されている
・親要素のコンテンツモデルを引き継ぐ
などの例外もあります。
従来（HTML4.01やXHTML1.0）の配置ルール
・ブロックレベル要素の中にはブロックレベル要素や
インライン要素を入れれる。
・インライン要素にはインライン要素は入れれるが、
ブロックレベル要素は入れれない。
＊一部例外はあります。
○コンテンツ・モデルを調べれるサイト
・W3C HTML5
www.w3.org/TR/html5/
・CreatorQuest - HTML要素リファレンス
creatorquest.jp/reference/htm...
■要素のカテゴリー
HTMLの要素は複数のカテゴリに分類されます。
HTML5では以下のカテゴリに分類されます。
・メタデータ・コンテンツ
・フロー・コンテンツ
・セクショニング・コンテンツ
・フレージング・コンテンツ
・エンベッデッド・コンテンツ
・インタラクティブ・コンテンツ
従来（HTML4.01やXHTML1.0）は以下の
カテゴリに分類でされています。
・ブロックレベル要素
・インライン要素
・その他の要素
これらのカテゴリーは要素の配置ルールに使われます。
・CreatorQuest - 要素のカテゴリー
creatorquest.jp/reference/htm...
■HTML入門講座のHTMLのバージョン
基本的には、HTML 5に対応したレッスンです。
ただし、HTML5.1、XHTML1.0、HTML4.01
に対する補足説明も出来る限り行います。
■本気で学ぶ！HTML入門講座
• 本気で学ぶ！HTML入門講座
素材
・CV：さとうささら（CeVIO）
cevio.jp/
・CV：タカハシ（CeVIO）
cevio.jp/
・BGM：甘茶の音楽工房
amachamusic.chagasi.com/
これをRUclipsで公開してるのすごいな。わかりやすすす
すごく面白くて楽しく勉強できます！！だんだん彼が、伝説のWEBデザイナーになることを応援したくなってきます笑
凄く丁寧で分かりやすいです！
今日もありがとうございます💖☘✨
漫才みたい、本当に面白いですね🤣🤣🤣
高校の情報の授業でweb製作やって興味持ったので独学してみる
作業しながら聞くのにちょうどいい
(生徒の「伝説の〜」がくどいけど...)
三番目を間違えた。囲う時と囲われるときで同じ名前のコンテンツモデル、カテゴリに分類されるわけではない。覚えました
いつも泣くほどありがたいナリ
最近、この動画で勉強してます。
難しい、、ここが1番難しいのでは、、。
それに、間違えていてもエラーとか文字化けが起こらないから、尚更難しい、。
この後に、結構コンテンツモデルは、的なことが出てくるから理解しようと思って戻ってきたものの、尚更わかんなくなってしまった、！😫😫
うわああああああああああああ
難しくなってきたけど
解説が面白くてわかりやすいので楽しく学べるのがとても助かってます；＿；
ありがとうございます！！
pがフレージングコンテンツに属しているのはその大枠のフローコンテンツだからか…他のサイトでカテゴリーの関係図見てやっと分かった。動画だと分からんかった〜
わかりにくい表現になってしまっていて、申し訳ありません。今後の参考にさせて頂きます🙇🏾♂️
その要素自身の「コンテンツ・カテゴリ」とその要素の「コンテンツ・モデル」（梱包出来る要素）がごっちゃになりそう。。。要素自身が属している「コンテンツ・カテゴリ」は【フロー・コンテンツ】と【パルパブル・コンテンツ】の２つだけど、「コンテンツ・モデル」は【フレージング・コンテンツ】。やは【フレージング・コンテンツ】に（も）「コンテンツ・カテゴリ」が属しているので要素の中に梱包出来る。であってますか？
あってます
難しくなりました。 私も伝説の販売員になります。 苦笑。
あ、あたなが、あの伝説の販売だったのですね！！
伝説のアパレル店員を辞めていま伝説のウェブクリエイターの勉強をしてます
そして今日の先生優しい
今勉強中なのですが、HTML Referenceの方では要素も要素も同じフローコンテンツになっています。
要素が無いのでこのとの組み合わせは間違っているという認識で宜しいのでしょうか？
もしくは2021現在では仕様が変わってフローコンテンツとして使えるんでしょうか？
em要素、CSSの裏切り者感があって好き
コンテンツモデルの中には、コンテンツモデルと同じカテゴリーでないということか、、、。難しい笑
14:37 先生優しい（ ＾ω＾）・・・
のカテゴリーがフローコンテンツなのは分かります、ですがどうやって「のコンテンツ・モデルはフレージングコンテンツだ！」となるのですか？表とかがあるのでしょうか？それだけがわかりません。
全く同じところに疑問もってます😭
@@jw276 僕のコメントに返信きましたよ！
@@jw276 それは仕様書の各タグの説明の部分にあります。CreatorQuestでも各タグを紹介する時に、コンテンツ・モデルも紹介しています。
頑張るぜえエアエアエアエア
質問なんですが、たとえばA要素のコンテツモデルがBであっても
A要素のカテゴリーがBであるとは限らない、もしくは違うんですか？
カテゴリーは自分が属しているカテゴリーで、コンテンツモデル中に配置できる要素を表しています。
コンテンツモデルとは要素を分類した7つのカテゴリーに対するルールということですよね？
ご指摘ありがとうございます！
コンテンツ・モデルは、梱包可能な要素を表した配置ルールのことです。
その多くは、7つのカテゴリー名で示されていますが、カテゴリー名以外で示されているものもあります。
div要素のコンテンツモデルはフローコンテンツですよね。だからpタグが入るのは分かるんですが、strong要素などはなんでフレージングコンテンツなのにdiv要素の中にはいれるのですか...
pタグにの中に入れられるのは分かるんですが、div要素の中にもstrongが入っている感じがするのですが
ナルシ・ストロング皇帝 strong要素のカテゴリーは確かにフレージングコンテンツですが、フローコンテンツにも属しています。
pでemを囲んで仕舞えばemがdivの中に入っていると言うことにはならないのでしょうか？
em が divの中に入っていても大丈夫です。
先生に半殺しにされる無能ボイス
ここから難しい、、、
CreatorQuest - 要素のカテゴリーの要素を調べようとしたら、ページが存在しませんでした。；；
今回ｴｯが多い笑笑
div要素の中になんでフレージングコンテンツが入れられるのかが分かりません！！
フローコンテンツにも属してからですね。
@@CreatorQuest ありがとうございます(*^^*)
質問なのですがこちらの動画は今から勉強しても大丈夫ですか？
していただいても大丈夫です
今回は少し難しい
この練習問題はどこにあるのですか？
どうやってのコンテンツモデルがフレージングコンテンツと分かるのですか？の要素カテゴリはフローコンテンツと分かるのですが。混乱してます。
最初が要素だった場合にからのなかで使える要素がフレージング・コンテンツが使えて
他の要素が最初でその中で要素をいれて使うためには最初の要素がフロー・コンテンツ
じゃないといけない
たぶんこんな感じだと思います！
@@meria12323 のカテゴリーがフローコンテンツなのは分かります、ですがどうやって「のコンテンツ・モデルはフレージングコンテンツだ！」となるのですか？
申し訳ございません、もう少し詳しく教えていただけませんか？
それは仕様書の各タグの説明の部分にあります。CreatorQuestでも各タグを紹介する時に、コンテンツ・モデルも紹介しています。
@@CreatorQuest ありがとうございます！！
コメント欄で他の方の質問に対して回答している公式のコメントを見ると、動画からは読み取りにくい内容も少しばかりですが書かれてますね。
見終わった後にコメントもチェックしておくの大事だなと思いました。
動画ちゃんと見ろよ！って感じの質問の方が多いけど。笑
ゆうて貴方も質問してますけどね笑
@@cz_kn_yy5972
ゆうて動画で説明されてないものしか質問してませんけどね笑
クエスト２をやっていたのですが、要素のカテゴリーのページのメタデータコンテンツにheadがないのと、解凍したzipファイルのchapter05が空っぽなのは俺だけでしょうか・・。
head要素はどのカテゴリーにも属していません。また、Chapter05は空っぽであってます。
@@CreatorQuest 失礼いたしました。ためになる動画ありがとうございます！
何故というフローコンテンツの中にというフレーズコンテンツが存在してるんですか？まじで意味が分かりません。
p要素で囲まれた文章の中に、強調したい文字があれば、そこをem要素で囲みます
445
7:14余計な事言うなァ〜🤯笑
バックの音量デカい 集中しづらい
ご指摘ありがとうございます。
申し訳ございません。