【SEナレッジ】スタイルシートとCSSの違い

スタイルシートとCSSの違い

さらりと スタイルシート＝ CSS と説明しているサイトが多い気がするので補足説明的に記事にしました。

スタイルシートでググるとCSSの説明や書き方ばかりが出てくるの無理はないですが、厳密に言えばスタイルシート＝ CSS ではありません。

スタイルシートは見た目（デザイン）を司る言語で、CSSは、その書き方の1つと言うのが厳密な表現です。

まあそれでも現在のWebページではスタイル（見た目）を指定するのにほぼ間違いなく、CSSを使っていますのでスタイルシート＝ CSS と言っても問題ないのですけどね。

webページの見た目（デザイン）を司るのがスタイルシート SS（style sheetの略）です。

本来はC（Cascading 略でカスケーディングと読みます）は付けません。

スタイルシートは、HTMLタグ内に style と記述して見た目を指定していきます。

例えば、文章と言う文字を表示する場合、

<p>文章</p>

と記述しますが、さらにフォントサイズを10ピクセルに指定する場合にスタイルシートを記述します。

<p style="font-size : 10px">文章</p>

この記述の仕方だと、HTMLタグ毎にスタイルを指定する必要があるので、指定したい箇所が複数あると全部の箇所に記述する必要があり面倒です。

HTMLタグ毎にスタイルを指定するのが面倒なので出てきたのがCの付いたスタイルシート、CSSです。

Cascading（カスケーディング）とは階段状のとか流れる滝のようなという意味です。

ざっくりですがHTMLはこんな感じですよね。

<html>
<head>
  <title>タイトル</title>
</head>

<body>
  <h1>見出し</h1>
  <p>段落1</p>
  <div>
    <div>コンテンツ</div>
  </div>
 <p>段落2</p> 
</body>
</html>

なんとなく階段状に見えます。っというか見える事にして置いてください。

例えば、全てのｐタグにフォントサイズを10ピクセルに指定してあげたいとしたらCascading を用いてあげるとこんな感じに書いてあげます。

   <style type="text/css">
    p {
	font-size : 10px
      }
  </style>

これならあとでフォントサイズを10pxから11px修正するのも一カ所直せば良いだけなので楽ですよね。

たいした違いはないのですが、ちゃんと意味を抑えておいた方がのちのちの理解がスムーズにいくと思います。