[CSS]CSSの適用方法

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

タグのstyle属性の記述例:

sponsors

top of page

©2024 coliss