ホームページ制作,維持・保守
サーバーシステム構築・管理
ネットワーク構築・管理
IT環境サポート
インフラ構築サポート
ITアウトソーシング
HTMLプログラミング
ホーム > WEBプログラミング > HTML,CSS
HTML,CSS

HTML文書でCSSを適用する3つの方法

森之宮 0 116 0

HTML文書にCSSを適用する方法は3つがあります。


外部スタイルシート(External Style Sheet)

内部のスタイルシート(Internal Style Sheet)

HTMLタグ内にスタイル指定(Inline Styles)

外部スタイルシート(External Style Sheet)


cssという拡張子を持ったスタイルシートファイルを作成してこのファイルをHTML文書に連結して使用する方法です。


<head>
 <link rel="stylesheet" type="text/css" href="mystyle.css">
</head> 


この方法のメリットはホームページ全体のスタイルを一貫性維持しながら、

変更時にも、一括的に変更されるのでホームページ制作の効率性を最大化することができます。


一方、外部スタイルシートファイルを継続的に管理しながら、HTML文書を作っていかなければならないので不便な場合があります。 

そして外部スタイルシートファイルが過度に複雑化された場合、困難なので、cssファイルを管理するノウハウが必要になります。

それにもかかわらず、専門的なホームページを作るためには、外部スタイルシートを積極的に活用することをお勧めします。 


内部のスタイルシート(Internal Style Sheet)


HTML文書内で<head>と</head>の間にスタイルを定義する方法です。


<head>
 <style type="text/css">
 <!--
  body {font-size:9pt;}
 //-->
 </style>
</head> 


HTML文書ごとにスタイルを毎回指定してなければならないが、1つの文書だけに該当するスタイルを指定するとき使用します。


HTMLタグ内にスタイル指定(Inline Styles)


上記の方法に比べて適用範囲がさらに狭くなった形です。 

スタイルを適用したいHTMLタグの中で定義する方法です。


<p style="color:gray;">ここの段落の色はグレーに指定されます。</p> 


内容とスタイルの分離そしてこれによるスタイル一括変更の効率性側面で見る時は望ましくない方法です。


しかし、上記のソースでも示したように、直観的に使用が可能というメリットがあるに

講座を進行する時は主にこの方法を使用するようにします。

0 コメント