クラスとID-SIRIUS2

SIRIUS2にはデザインモードという”HTMLやCSSを知らなくてもサイトが作れる”機能が搭載されてます。

しかしながらページの修正時には一時的にテキストモードに切り替えて作業した方が便利なケースも少なくありません。

 

そんなときに知っておくと役に立つのがクラスとIDの知識です。

 

「HTMLとはなんぞや、CSSとはなんぞや？」みたいなことは勉強する必要はありませんが、クラスとIDの概念を理解しているとサイト作成がかなりラクになります。

クラス（class）

たとえば『ボックス』の「通常枠」を適用すると下のような装飾効果が付きます。

 

これをテキストモードで見ると下のようなHTML（※ページを構成する言語）で構成されており、「nmlbox」という部分がクラス（class）になります。

 

この「nmlbox」というクラスにはさまざまなスタイル（装飾効果）が設定されてます。

その設定の一部が【テンプレート】→【スタイルシート編集】→【共通スタイル】にあります。

 

 

クラスは繰り返し使えるのが特長です。

つまりページ内で”『ボックス』の「通常枠」は何度使ってもOK”ということです。

 

そしてスタイルシート上の設定値を変えることで、そのスタイルを適用している全部の箇所の装飾効果を一気に変えることができます。

 

たとえば先ほどの「border:2px solid #E0E0E0;」という記述は囲み枠の線種や太さや色の設定値になるんですが、囲み枠の色の設定値を”赤”に変えれば『ボックス』の「通常枠」を適用させてる箇所の囲み枠の色は一気に赤に変わります。

 

ID

IDはそのページ内で一回だけしか使わない部分の装飾効果になります。

クラス同様、【テンプレート】→【スタイルシート編集】の各スタイルに設定が保存されてます。

 

たとえば下のHTMLコードは”ヘッダー部分”の構成部分を指しています。

この”ヘッダー”という部品はページ内に1個しかないのでID指定になってます。

（※ID名は「header」）

 

ここは知らなくても問題ないんですが、ついでにご紹介しておきます。

 

クラスやIDが付いてるHTMLをよく見ると先頭に「div id="...」と付いていたり「span class="....」となっていたりします。

 

divと付いてる場合はブロック単位での装飾効果になります。例えば先ほどの

というのはブロック、つまり四角で囲ったエリア全体に装飾効果がかかるという意味です。

 

これに対しspanというのはブロックの中の一部を装飾する時に使います。

たとえば装飾メニュー内の『マーカー』の「レッド」を使ってテキストの一部の色を変えてみます。

 

これはテキストモード上では下のようなようなHTMLになります。

 

これは「赤」という一部分だけの装飾になるのでspanになってるということです。