Skip to main content

内部CSSスタイルシートを作成する方法

初心者でもできるHTML&CSS講座 第1回HTML,CSSの概要 (六月 2026)

初心者でもできるHTML&CSS講座 第1回HTML,CSSの概要 (六月 2026)
Anonim

内部スタイルシートとは

内部スタイルシートは、HTML文書の中に配置されるスタイルです。これらのスタイルは、それらのドキュメントにのみ影響し、他のWebドキュメントでは参照できません。

内部スタイルシートの利点

  • 内部スタイルシートは、そのページにのみ影響します。
    • 大規模なサイトで作業していて、サイト全体にスタイルをロードする前にスタイルをテストする必要がある場合、内部スタイルシートは素晴らしいツールになります。これらのスタイルを使用すると、ページ全体をテストせずに、サイト全体のコンテキストでスタイルをテストすることができます。
  • 内部スタイルシートでは、クラスとIDを使用できます。
    • インラインスタイルとは異なり、内部スタイルシートでは、クラス、ID、兄弟、およびその他の要素関係を利用できます。
  • 内部スタイルシートでは、複数のファイルをアップロードする必要はありません。
    • これは、編集可能なHTMLファイルが1つしかない電子メールやキオスクなどの作業をする場合に特に便利です。どのようなURLがCMSに読み込まれたスタイルシートであるかわからないときは、インラインスタイルを使用することがよくあります。
  • 内部スタイルは、外部スタイルシートよりも優先順位が高い場合があります。
    • これは、外部スタイルシートがロードされる順序によって決定されます。ページのWeb開発者は、内部スタイルをドキュメントの先頭に配置する場所を制御できます。それらが外部スタイルへのリンクの後に配置されている場合、それらはカスケードでより高い優先順位を持ち、外部スタイルシートをオーバーライドします。

内部スタイルシートの短所

  • 彼らは彼らがいるページだけに影響します。
    • 複数のドキュメントで同じスタイルを使用する場合は、すべてのページ(または外部スタイルシートへのリンク)で同じスタイルを使用する必要があります。
  • 内部スタイルシートはページの読み込み時間を増加させます。
    • 内部スタイルシートを持つすべてのページは、ページが読み込まれるたびにスタイルシート情報を読み込んで解析する必要があります。外部のスタイルシートはブラウザによってキャッシュされます。これにより、最初のページがロードされた後の各ページの読み込み時間が改善されます。

内部スタイルシートを書き込む方法

素子:

  1. WebエディタでHTML文書を開きます。
  2. 次の項目を

完全な内部スタイルシートは次のようになります: