お見合いパーティー


高性能検索順位チェックツール(無料)

CSS(スタイルシート)の基礎

CSSとは「Cascading Style Sheets」の略称で、一般的に「スタイルシート」と呼ばれるものの一つです。

これは、ウェブサイトのデザインを定義する為の技術であり、文章の内容はHTMLで定義し、デザインはスタイルシートで定義しようというものです。


スタイルシートの設定

スタイルシートを記述する前に、デフォルトのスタイルシート言語を設定します。

HTMLファイルのmeta要素に次のように指定します。

<meta http-equiv="Content-Style-Type" content="text/css">


要素に直接スタイルを適用する

スタイルを適用したい要素に、直接style属性を指定することができます。
書式は次のようになります。

<p style="color: red; font-size: 90%;">
  ・
  ・
  ・
</p>

※XHTMLでは、style属性を使用することは非推奨とされています。


同じ要素全てにスタイルを適用する

例えば、文書中のh2要素全てにスタイルを適用することができます。
書式は次のようになります。

h2 { font-size: 150%; }


複数のプロパティを一度に指定することもできます。

h2 {
  font-size: 150%;
  color: red;
}


複数の要素に同じスタイルを適用する

要素(セレクタ)をカンマ(,)で区切って指定し、同じスタイルを適用することができます。

h1, h2 {
  font-size: 150%;
  color: red;
}


HTML文書内にスタイルシートを記述する

スタイルシートをHTML文書の中に組み込む場合は、HTML文書のhead要素の中に以下の様に記述します。

<html>
<head>
<title>CSS基礎</title>
<style type="text/css">
h2 {
  font-size: 150%;
  color: red;
}
</style>
</head>
<body>
  ・
  ・
  ・

上記のように記述すると、文書中のh2要素全てにスタイルが適用されます。


コメントの書き方

CSSでは、「/*」と「*/」で囲った部分がコメントアウトされます。
記述例は以下の様になります。

<html>
<head>
<title>CSS基礎</title>
<style type="text/css">
h2 {
/*   font-size: 150%; */←この部分がコメントになります。
  color: red;
}
</style>
</head>
<body>
  ・
  ・
  ・




スポンサードリンク