当社で制作したウェブサイトでは、CMSを使ってお客様自身がページ公開する場合に、CSSの知識が無くても投稿するページで利用できる各種装飾指定を予め用意してあります。
この装飾指定は、class(クラス)と言う予め定義してある、スタイル指定を投稿内の要素に指定する事で、その指定が適応されます。
どんな指定が出来て、どんな装飾がされるのか?は、共通スタイル指定一覧にて随時公開致しますので、そのCMSのエディタ機能と組み合わせて是非ご自身のサイトで利用してみてください。
※ 共通スタイルの利用方法は、別途保守契約に含まれている場合を除き、個別にサポートする事はできません。予めご了承ください。
共通スタイルとは
当社で制作したウェブサイトで使えるお客様共通のスタイル指定です。
当社で制作したウェブサイトには、ほとんどのサイトにおいてcommon.cssというCSSファイルを読み込む様にしてあります。
※ウェブサイトによっては、組み込みしていない場合もあります。
このCSSファイルには、よく使われるスタイル指定や色・文字サイズ・行間などの指定が共通のクラスで定義されおり、HTML内の各要素に対しクラス指定をする事で、その要素に対し指定したスタイルが適応されます。
※ スタイル指定には優先順位があり、その要素に対して別の部分(別のCSSファイル)で同じプロパティが指定されていた場合、そちらの方が優先される為、クラス指定したものが適応されない場合がございます。
スタイルとは
ウェブページを構成する技術は、主にHTML、CSS、JavaScriptの技術を利用しています。
これらの技術は、それぞれの役割があり、CSS(スタイルシート)は、主にページの見栄え・デザインに対する役割を持っています。
| HTML | ウェブページを作成するために開発された言語で、情報構造を定義するための言語です。文章の各部分が、どんな役割を持つのかをマークアップします。例えば、見出し・小見出し・文章・表・リンクなどの役割は、HTMLタグというコードで挟む事で、どこからどこまでが、その役割という事を示します。 |
|---|---|
| CSS スタイルシート | HTMLの各部品の装飾をする為の言語です。HTMLでマークアップされた各部品の見栄えを制御します。例えば、見出しを赤色で表示したり、ある部分の背景色を指定するなど、ページの見栄え・デザインを指定します。 |
| JavaScript | HTMLとCSSで構成されたウェブページに、動的な動きなど複雑な機能を盛り込む為に使用するプログラム言語の一つです。例えば、画像をスライドさせたり、HTMLの中の指定した部品をマウス操作に応じて動かすという視覚的な動作を実現させるだけではなく、別のページ同士のデータの受渡をする、ブラウザの情報を取得するなど様々な機能をウェブページに付加する事が可能となります。 |
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スタイルの優先度についてはこちらをご覧ください。