CSSの概略－スタイルシートやCSSの書式

04/30/2021CSS

CSSのことを大まかに理解するための概略です。スタイルシートや、CSSの基本的な書式についてです。

スタイルシート

HTMLでは、タグによって文書の構成要素の意味や役割を表すだけではありません。文書の構成要素の範囲も明確に示します。ですから、スタイルシートの役割は、タグによって示されたそれぞれの範囲のコンテンツの表示指定を行うことです。

表示指定をスタイルシートに任せ、HTMLから表示に関わる部分をできるだけ取り除きます。これによって、元データとしてのHTMLは表現方法を限定しない、言い換えると様々な環境で利用可能なものになります。

CSSは、基本的に次のような書式で記述されます。

セレクタ｛プロパティ：値｝

セレクタとは、どの要素に対してスタイルを適用させるかを指定する部分です。この部分でスタイルの適用対象を示し、それに続く「｛～｝」の中に適用させたいスタイルを記述します。

プロパティとは、セレクタで指定した要素に適用するスタイルの種類を示す部分です。

たとえば、色を表す「color」や、フォントサイズを表す「font-size」などです。これに続けて「:」記号と値を記述することでスタイルを設定することができます。スタイルは、「;」で区切って複数指定することもできます。

h1要素のフォントサイズを２６ポイントに設定した例です。

h1 { font-size: 26pt }

h1要素のフォントサイズを２６ポイントに、色を赤に設定した例です。

h1 { font-size: 24pt; color: #ff0000 }

指定するスタイルが多い場合には、次のような書き方もできます。この場合、スタイルとスタイルの間を「;」で区切ることを忘れないようにしましょう。

h1 {
  mmargin: 0;
  padding: 0.4em;
  font-size: large;
  font-weight: normal;
  color: #ffffff;
  background-color: rgba(0,0,0,0.85);
}

「;」はスタイルを区切る場合だけでなく、一番最後のスタイルの後に付けておいても間違いにはなりません。そのため、スタイルの後には常に「;」を付けると考えても良いでしょう。

CSSで大きさを指定する場合には、数値に次の単位を付けて示すことができます。これらは、絶対的な値を示す単位と、相対的な値を示す単位の２つに分類することができます。

em	その範囲で有効なフォントサイズを1とする単位
rem	html要素のフォントサイズを1とする単位
ex	その範囲で有効なフォントの小文字の「x」の高さを1とする単位
vw	ビューポートの幅の1％を1とする単位
vh	ビューポートの高さの1％を1とする単位
vmin	ビューポートの幅か高さのうち短い方の1％を1とする単位
vmax	ビューポートの幅か高さのうち長い方の1％を1とする単位
%	他の基準となる大きさに対する割合(基準はそれぞれ異なる)

％	他の大きさに対する割合で表す場合に使用します。対象とする大きさは状況に応じて、同じ要素内の他のプロパティ、親要素のプロパティ、それを含むブロックの幅などになります。
em	その範囲で有効なフォントの高さ(font-sizeの値)を1とする単位です。スタイルシートのfont-sizeプロパティの値としてこの単位が使用された場合には、親要素で有効なフォントの高さを1とする単位になります。
ex	その範囲で有効なフォントのアルファベットの小文字「x」の高さを1とする単位です。フォントによっては、必ずしも「x」の高さと一致するとは限りません。また、この単位は「x」を含まないフォントにも適用されます。