埋め込み <body></strong></p> <p>HTML 4 内のタグは、<style> を指示します。タグは <head> 内に配置する必要があります。セクション。ただし、ほとんどのブラウザでは、</p> 内にこれらを含めることができます。 element.<p>歴史的に、この実践は不適切なプログラミング スタイルであると考えられていました。ただし、HTML 5 でのスコープ属性の導入により、<style> の親要素内でスコープを設定したスタイルシートを作成できるようになりました。タグ。これにより、<style> が有効になります。 <body> 内に配置するタグ</p> <p><strong>ケーススタディ: スコープ付きスタイル</strong></p> <p>次の HTML コードを考えてみましょう:</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre><!DOCTYPE html> <html> <head></head> <body> <div></pre><div class="contentsignin">ログイン後にコピー</div></div><p>HTML 内-5 有効なブラウザはスコープ属性をサポートしており、このコードをレンダリングするとスタイルシートのスコープが制限されます。 <div> element.<p><strong>警告: スコープ付き属性のサポートの欠如</strong></p><p>2013 年 5 月 (執筆時点) の時点では、スコープ付き属性をサポートする主流ブラウザがないことに注意することが重要です。 。ただし、Chromium の開発者ビルドはこれをサポートしていました。</p><p><strong>意味: 将来性と現在のブラウザの動作</strong></p><p>スコープ属性のサポートがないにもかかわらず、現在のブラウザでは通常許可されています。 </p><p>次の事実を考慮すると、</p></pre> <ul> <li>Scoped 属性はほとんどのブラウザで無視されます</li> <li><style> 内のタグほとんどのブラウザで許可されています</li> <li>将来の実装では、スコープ付きの <style> を許可する必要があります。 <body></li> </ul> <p> 内のタグ <style> を配置しても本質的には無害です。 <body> 内のタグは、scoped 属性で将来も保証されている必要があります。唯一の欠点は、現在のブラウザではスタイルシートのスコープが設定されていないことです。</p> <p><strong>結論</strong></p> <p>HTML 内に CSS を埋め込むことは、カプセル化されたモジュール式コンポーネントに特定のスタイルを実現する便利な方法です。かつてはこのやり方は不適切なスタイルだと考えられていましたが、HTML 5 のscoped 属性は正当な解決策を提供します。ただし、ブラウザのサポート制限と、それに応じた将来性のあるコードを認識することが重要です。</p>
