[CSS]CSSの適用方法
HTMLファイルへのスタイル適用方法は、主に3つの方法に分けられます。
- 外部スタイルシートファイルで適用する方法
- head要素内のstyle要素で適用する方法
- タグのstyle属性で適用する方法
最適な方法は「外部スタイルシートファイルで適用する方法」で、汎用性が高くメンテナンシビリティに優れています。
また、文書構造と視覚表現を分離して制作することにも適しています。
style要素とstyle属性で適用する方法は、使用するHTMLファイルへ個別に記述するため、運用・管理が煩雑になり、複数のページに同じスタイルを適用する場合に適しません。
外部スタイルシートファイルで適用する方法
拡張子「css」のファイルにスタイルを記述し、スタイルシートファイルを作成します。
適用するHTMLファイルからは、外部スタイルシートファイルとしてhead要素内のlink要素や@importで参照します。
外部スタイルシートファイルの記述例：link要素
<head> <link rel="stylesheet" href="share.css" type="text/css" /> </head>
外部スタイルシートファイル記述例：@import
<head> <style type="text/css"><!-- @import url("share.css") --></style> </head>
※Firefoxで外部スタイルシートファイルを利用した場合、適用されないことがあります。
これはサーバーがMIMEタイプをブラウザに送信できないことが原因のため、サーバーのMIMEタイプ設定を行うことで正常に適用されます。
FirefoxでCSSが適応されない場合(Apache)：「.htaccess」に記述
AddType text/css .css AddHandler server-parsed .css
head要素内のstyle要素で適用する方法
head要素内にstyle要素として記述をすると、そのHTMLファイルの全体に共通のスタイルを適用することができます。
head要素内のstyle要素の記述例：
<head> <style type="text/css"><!-- body{background-color:white;} h1{color:black;} --></style> </head>
タグのstyle属性で適用する方法
HTMLファイル内で使用しているそれぞれのタグにstyle属性を記述することによりスタイルを適用することができます。
タグのstyle属性に適用する方法を利用した場合は、head要素内にmetaタグでtypeを指定する必要があります。
タグのstyle属性の記述例：
<head> <meta http-equiv="Content-Style-Type" content="text/css" /> </head> <body style="background-color:white;"> <h1 style="color:black;">大見出し</h1> </body>
Post on:2007年4月19日
