[CSS]CSSの適用方法

HTMLファイルへのスタイル適用方法は、主に3つの方法に分けられます。

• 外部スタイルシートファイルで適用する方法
• head要素内のstyle要素で適用する方法
• タグのstyle属性で適用する方法

最適な方法は「外部スタイルシートファイルで適用する方法」で、汎用性が高くメンテナンシビリティに優れています。
また、文書構造と視覚表現を分離して制作することにも適しています。

style要素とstyle属性で適用する方法は、使用するHTMLファイルへ個別に記述するため、運用・管理が煩雑になり、複数のページに同じスタイルを適用する場合に適しません。

外部スタイルシートファイルで適用する方法

拡張子「css」のファイルにスタイルを記述し、スタイルシートファイルを作成します。
適用するHTMLファイルからは、外部スタイルシートファイルとしてhead要素内のlink要素や@importで参照します。

CSSファイルの適用方法：外部スタイルシートファイル

外部スタイルシートファイルの記述例：link要素

&lt;head&gt; <span class="accent1">&lt;link rel=&quot;stylesheet&quot; 　　href=&quot;share.css&quot; 　　type=&quot;text/css&quot; /&gt;</span> &lt;/head&gt;

1 2 3 4 5

&lt;head&gt; <span class="accent1">&lt;link rel=&quot;stylesheet&quot; 　　href=&quot;share.css&quot; 　　type=&quot;text/css&quot; /&gt;</span> &lt;/head&gt;

外部スタイルシートファイル記述例：@import

&lt;head&gt; <span class="accent1">&lt;style type=&quot;text/css&quot;&gt;&lt;!-- @import url(&quot;share.css&quot;) --&gt;&lt;/style&gt;</span> &lt;/head&gt;

1 2 3 4 5

&lt;head&gt; <span class="accent1">&lt;style type=&quot;text/css&quot;&gt;&lt;!--     @import url(&quot;share.css&quot;) --&gt;&lt;/style&gt;</span> &lt;/head&gt;

※Firefoxで外部スタイルシートファイルを利用した場合、適用されないことがあります。
これはサーバーがMIMEタイプをブラウザに送信できないことが原因のため、サーバーのMIMEタイプ設定を行うことで正常に適用されます。

FirefoxでCSSが適応されない場合(Apache)：「.htaccess」に記述

<span class="accent1">AddType text/css .css AddHandler server-parsed .css</span>

1 2	<span class="accent1">AddType text/css .css AddHandler server-parsed .css</span>

head要素内のstyle要素で適用する方法

head要素内にstyle要素として記述をすると、そのHTMLファイルの全体に共通のスタイルを適用することができます。

head要素内のstyle要素の記述例：

&lt;head&gt; <span class="accent1">&lt;style type=&quot;text/css&quot;&gt;&lt;!-- body{background-color:white;} h1{color:black;} --&gt;&lt;/style&gt;</span> &lt;/head&gt;

1 2 3 4 5 6

&lt;head&gt; <span class="accent1">&lt;style type=&quot;text/css&quot;&gt;&lt;!--     body{background-color:white;}     h1{color:black;} --&gt;&lt;/style&gt;</span> &lt;/head&gt;

タグのstyle属性で適用する方法

HTMLファイル内で使用しているそれぞれのタグにstyle属性を記述することによりスタイルを適用することができます。

タグのstyle属性に適用する方法を利用した場合は、head要素内にmetaタグでtypeを指定する必要があります。

タグのstyle属性の記述例：

&lt;head&gt; <span class="accent1">&lt;meta http-equiv=&quot;Content-Style-Type&quot; content=&quot;text/css&quot; /&gt;</span> &lt;/head&gt; &lt;body style=&quot;background-color:white;&quot;&gt; &lt;h1 <span class="accent1">style=&quot;color:black;&quot;</span>&gt;大見出し&lt;/h1&gt; &lt;/body&gt;

1 2 3 4 5 6 7

&lt;head&gt; <span class="accent1">&lt;meta http-equiv=&quot;Content-Style-Type&quot;   content=&quot;text/css&quot; /&gt;</span> &lt;/head&gt; &lt;body style=&quot;background-color:white;&quot;&gt; &lt;h1 <span class="accent1">style=&quot;color:black;&quot;</span>&gt;大見出し&lt;/h1&gt; &lt;/body&gt;