Tag Archive CSS

共通スタイルとは

当社で制作したウェブサイトで使えるお客様共通のスタイル指定です。

当社で制作したウェブサイトには、ほとんどのサイトにおいてcommon.cssというCSSファイルを読み込む様にしてあります。

※ウェブサイトによっては、組み込みしていない場合もあります。

このCSSファイルには、よく使われるスタイル指定や色・文字サイズ・行間などの指定が共通のクラスで定義されおり、HTML内の各要素に対しクラス指定をする事で、その要素に対し指定したスタイルが適応されます。

※ スタイル指定には優先順位があり、その要素に対して別の部分(別のCSSファイル)で同じプロパティが指定されていた場合、そちらの方が優先される為、クラス指定したものが適応されない場合がございます。

スタイルとは

ウェブページを構成する技術は、主にHTML、CSS、JavaScriptの技術を利用しています。

これらの技術は、それぞれの役割があり、CSS(スタイルシート)は、主にページの見栄え・デザインに対する役割を持っています。

class(クラス)とは

クラスとは、HTMLタグに設定できる属性の一つでclass属性と言います。HTMLの各要素に対して設定する事ができる識別名です。

スタイル設定においては、スタイルシート側で各classに対して、装飾(スタイル)を定義します。HTMLの要素にclassを設定すると、そのclassに定義された装飾が適応されます。

例えば、次の文章を「赤色に装飾」したい場合は…
 
( HTML ソース )
<p class="fcGreen"> つれづれなるままに </p>
 
( 実際の表示 )

つれづれなるままに

 
これは共通スタイルに「fcGreen」というクラス名は、フォントカラーを緑にするという指定がされている為、赤色になります。

この様にそのHTMLタグに対するスタイル指定は、class属性で、CSSファイルのそのclassに定義された装飾を呼び出す事が出来ます。

この他、スタイルを呼び出す属性にはidも使えます。

class　と id の違い

id属性は、そのページ中で識別する一意な名前（識別子）を与えるものになります。つまり、ルール的には、そのページにおいて設定できるid名は、1つで複数回使う事はルール違反です。

例えば、「sample_id」というid属性を異なるHTMLタグで複数回設定してしまう事は、望ましくありません。そのidに対する何等かの指定をしていた場合、不具合の原因になってしまいます。

また、一つの要素に対して複数のidを指定する事はできません。

対してclass属性は、同一ページ内でも複数回の利用が出来ます。また、一つのHTML要素に対し複数のclassを設定する事も可能です。

以下の様に、異なる要素で同じclassを使用できます。
 
( HTML ソース )
<p class="fcGreen"> つれづれなるままに </p>
<p> 日暮らし硯に向かひて </p>
<p class="fcGreen"> 心にうつりゆくよしなしごとを </p>
 
( 実際の表示 )

つれづれなるままに

日暮らし硯に向かひて

心にうつりゆくよしなしごとを

以下の様に、一つの要素に対する異なるclassを指定する事が出来ます。
 
( HTML ソース )
<p class="fcWh bgBlack"> つれづれなるままに日暮らし硯に向かひて </p>
 
( 実際の表示 )

つれづれなるままに日暮らし硯に向かひて

上記の例では、fcWh → フォント色を「白」にする、bgBlack→ 背景色を「黒」にするという指定が共通スタイルで定義されています。

複数のclassを指定する場合、class名とclass名の間を半角スペースで区切ります。

尚、同じプロパティ(装飾対象)が定義された異なるclassを指定してしまうと、優先度が高い方のclassの指定が適応されます。

例えば fcRed(フォントカラー赤)と fcWh(フォントカラー白)という同じ「文字の色を変える」という定義がされたclassを指定した場合、優先度が高い方が適応されます。

CSSスタイルの優先度についてはこちらをご覧ください。