【CSS講座①】 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>
  ・
  ・
  ・

Copyright© 2018 おすすめ レンタルサーバーの選び方 All Rights Reserved.