スタイルシート（CSS）の適用方法

CSS（スタイルシート）をHTMLに組み込むことで、HTML言語で書かれた文字や画像の大きさ、色など視覚デザインを変えることができます。

CSSの適用方法は次の3通りあります。

  • HTMLのhead内に組み込んで実行させる方法
  • 外部シート(.cssファイル)から読み取って実行する方法
  • タグに直接記述する方法

どれでなくては駄目というのはないですが、あとで修正する手間が一番簡単な２番の方法を推奨します。１番と３番では１ページずつ直さなければいけないですので。

HTMLのhead内に組み込んで実行させる方法

CSSを内部に組み込む場合は、headの間に次のように記述します。type属性は必須ではありません。省略するとデフォルトのtext/cssが適用されます。 

<!--HTMLのみ-->
<head>
<style type="text/css">
<!--
/*適用スタイル*/
h1 {
	color:#00f;
	}
-->
</style>
</head>

「!--」のような記号はコメントアウト、この部分はHTMLスクリプトとして認識されないことを示します。ここでコメントアウトしているのは古いブラウザでstyleの間に記述した内容が表示されてしまうためです。

HTMLやCSS、Javascriptでそれぞれコメントアウトの記号が異なるので注意してください。 

　<!-- HTMLのコメントアウト -->
 
　/* CSSのコメントアウト */
 
　// JavascriptとPHPの１行コメントアウト
 
　/* 
　JavascriptとPHPの複数行コメントアウト
　*/

html内へのコメントアウトの記述はHTMLであれば問題ないですが、XHTMLやXMLで記述するときには記述してはいけないことになっています。

外部シート(.cssファイル)から読み取って実行する方法

外部からCSSファイルを読み込ませる場合は、headの間に次のように記述します。これは、外部シートであるstyle.cssを読み込むことを意味します。 

<!--XHTML1.0-->
<head>
<link rel="stylesheet" type="text/css" href="style/style.css" media="all" />
</head>

<!--HTML5-->
<head>
<link rel="stylesheet" href="style/style.css" media="all" />
</head>

HTML5ではtype属性を省略することができます。

href以下は、style.cssファイルがある場所へのパスを記述します。ここではstyleというフォルダの中のstyle.cssを選択するパスになっています。

mediaではCSSを適用させる出力媒体（メディア）を指定します。何も指定しなければallになります。

Screen（PC画面）ならこのスタイル、tv（テレビ）ならこのスタイル、というように媒体によってスタイルを使い分ける場合（スタイルシートは１つだけでなく複数読み込めます）に使います。

aタグであればhref属性だけ指定しましたが、linkにはrel属性（この文書からみた別の文書との関係）があって、ここに「stylesheet」と打ち込むことでスタイルシートを読み込むことを知らせます。

タグに直接記述する方法

ページのある一部分だけ限定的にちょこっとスタイルを変えたいと思う時に重宝します。

タグの中にstyle="";の文を追加して、その中にスタイルを指定する方法です。 

<!--XHTML1.0、HTML5共通-->
<p style="color:#00f;">文書</p>

<img src="" alt="" style="width:300px; height:200px;" />

コメントor補足情報orご指摘あればをお願いします。

（件名or本文内でキーワード検索できます）



  • << 前のページ
  • 次のページ >>
ページトップへ