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

03/06/2020

CSS入門アイキャッチ

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

スタイルシート

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

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

CSSの基本的な書き方

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

セレクタ{ プロパティ:値 }

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

プロパティとは、セレクタで指定した要素に適用するスタイルの種類を示す部分です。たとえば、色を表す「color」や、フォントサイズを表す「font-size」などです。これに続けて「:」記号と値を記述することでスタイルを設定することができます。スタイルは、「;」で区切って複数指定することもできます。

h1要素のフォントサイズを設定した例

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

h1 { font-size: 26pt }

h1要素のフォントサイズと色を設定した例

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

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で大きさを指定する場合には、数値に次の単位を付けて示すことができます。これらは、絶対的な値を示す単位と、相対的な値を示す単位の2つに分類することができます。

絶対的な大きさを示す単位

mm ミリメートル
cm センチメートル
in インチ(1インチ=2.54cm)
px 1/96インチを1とする単位(96dpiの1ピクセルを1とする単位)
pt ポイント(1ポイント=1/72インチ)
pc パイカ(1パイカ=12ポイント)

相対的な値を示す単位

em その範囲で有効なフォントサイズを1とする単位
rem html要素のフォントサイズを1とする単位
ex その範囲で有効なフォントの小文字の「x」の高さを1とする単位
vw ビューポートの幅の1%を1とする単位
vh ビューポートの高さの1%を1とする単位
vmin ビューポートの幅か高さのうち短い方の1%を1とする単位
vmax ビューポートの幅か高さのうち長い方の1%を1とする単位
%  他の基準となる大きさに対する割合(基準はそれぞれ異なる)
  • ビューポートとは、サイト(例:ホームページ)を表示させる領域のことです。
  • 値が0の場合は、単位を省略することができます。

相対的な大きさの単位をもう少し詳しく

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

Posted by kiri