ウェブゴトこのページはJavaScriptを使用しています。ブラウザの設定画面よりJavaScriptを有効にして下さい。́・ω・`)HTML5の勉強を始めました。今までは「ブロックコンテンツ」と「インラインコンテンツ」があり、「ブロックコンテンツ」である<div>や<p>の中に、「インラインコンテンツ」の<span>や「テキスト」を入れるいうルールがありました。HTML5では「コンテンツモデル」という概念が導入されました。content)といった新しい要素の区分に変更され「ブロックコンテンツ」・「インラインコンテンツ」が無くなりました(display属性でのblockやinlineの振る舞いは今まで通りです)。ココが難しいややこしいのが必ずしも1つの要素が、1つのコンテンツに属しているとは限らないと言うところです。<img>要素は「フロー」「フレージング」「エンベッディッド」「インタラクティブ」の4つのコンテンツに属しています。ガイドルールを覚えるよく「フローコンテンツ」はHTML4の「ブロックコンテンツ」に似ていると言われますが、正確には「フローコンテンツのみ」に属している要素が「ブロックコンテンツ」に似ているのでは無いかと思います。(ほぼ全ての要素が「フローコンテンツ」に含まれていますから...)HTML4で「インライン」の中に「ブロック」を入れることができなかったように、HTML5でも要素によって内包できるコンテンツモデルとできないコンテンツモデルがあります。<span>はフレージングコンテンツを内包できるので「テキスト」や<img>要素を内包できます。ガイドをご覧ください。特別な要素トランスペアレント<a><audio><canvas><ins><del><map><noscript><video><object>要素はトランスペアレントという特徴を持ちます。トランスペアレントの要素は「内包できるコンテンツモデルを親要素から引き継ぐ」というルールがあります。</a></div>このような書き方も構文的に問題ありません。解説<div>はフローコンテンツを内包できるので、<a>要素を含めます。<a>要素はトランスペアレントなので内包できるコンテンツモデルは<div>から引き継いだフローコンテンツになります。したがって<p>要素を含んでも問題ありません。<p>要素はフレージングコンテンツを内包できるので「テキスト」を内包できます。コンテンツモデルの理解が重要どのタグがどのコンテンツモデルの属して、どのコンテンツモデルを内包できるかが重要になってくるHTML5。この画像を見れば、属しているコンテンツモデルがわかりやすいと思いますので、是非活用していただければと思います。類似の投稿2017.07.14Article人気のツイートまとめサービス「イイツイ」をリリースしました。類似の投稿2013.07.10ArticleCSV編集エディターならLibreOfficeが絶対おすすめ!!1件のコメントがあります。コメントをキャンセルコメント*名前*メールアドレスコメントへの返信をメールで知らせる。