SIRIUS2深掘り

検索結果

「 ID 」の検索結果
  • アイキャッチ画像
    クラスとID-SIRIUS2
    SIRIUS2にはデザインモードという”HTMLやCSSを知らなくてもサイトが作れる”機能が搭載されてます。しかしながらページの修正時には一時的にテキストモードに切り替えて作業した方が便利なケースも少なくありません。そんなときに知っておくと役に立つのがクラスとIDの知識です。「HTMLとはなんぞや、CSSとはなんぞや?」みたいなことは勉強する必要はありませんが、クラスとIDの概念を理解しているとサイト作成がかなりラクになります。筆者カスタムテンプレート【Volar2】は基本的にテキストモードでの利用が前提ですので、最低でもクラスとIDだけでも理解しているとサイト作成がかなりはかどります。クラスやIDの概念クラス(class)たとえば『ボックス』の「通常枠」を適用すると下のような装飾効果が付きます。ボックス枠で囲むこれをテキストモードで見ると下のようなHTML(※ページを構成する言語)で構成されており、「nmlbox」という部分がクラス(class)になります。<div class="nmlbox">ボックス枠で囲む</div>この「nmlbox」というクラスにはさまざまなスタイル(装飾効果)が設定されてます。その設定の一部が【テンプレート】→【スタイルシート編集】→【共通スタイル】にあります。.nmlbox { border:2px solid #E0E0E0;}スタイルシート上では先頭に”.(ドット)”が付いてるのがクラス名になります。クラスは繰り返し使えるのが特長です。つまりページ内で”『ボックス』の「通常枠」は何度使ってもOK”ということです。そしてスタイルシート上の設定値を変えることで、そのスタイルを適用している全部の箇所の装飾効果を一気に変えることができます。たとえば先ほどの「border:2px solid #E0E0E0;」という記述は囲み枠の線種や太さや色の設定値になるんですが、囲み枠の色の設定値を”赤”に変えれば『ボックス』の「通常枠」を適用させてる箇所の囲み枠の色は一気に赤に変わります。IDIDはそのページ内で一回だけしか使わない部分の装飾効果になります。クラス同様、【テンプレート】→【スタイルシート編集】の各スタイルに設定が保存されてます。スタイルシート上では先頭に”#(シャープ)”が付いてるのがID名になります。たとえば下のHTMLコードは”ヘッダー部分”の構成部分を指しています。この”ヘッダー”という部品はページ内に1個しかないのでID指定になってます。(※ID名は「header」)<header id="header">divとspanここは知らなくても問題ないんですが、ついでにご紹介しておきます。クラスやIDが付いてるHTMLをよく見ると先頭に「div id="...」と付いていたり「span class="....」となっていたりします。divと付いてる場合はブロック単位での装飾効果になります。例えば先ほどの<div class="nmlbox">ボックス枠で囲む</div>というのはブロック、つまり四角で囲ったエリア全体に装飾効果がかかるという意味です。これに対しspanというのはブロックの中の一部を装飾する時に使います。たとえば装飾メニュー内の『マーカー』の「レッド」を使ってテキストの一部の色を変えてみます。このテキストの色は赤です。これはテキストモード上では下のようなようなHTMLになります。このテキストの色は<span class="mky_red">赤</span>です。これは「赤」という一部分だけの装飾になるのでspanになってるということです。divもspanも(他のタグでも)基本的には開始タグと終了タグが存在し、それらで選択範囲をはさむことで効果が表れます。また終了タグの先頭には必ず『/(スラッシュ)』が付きます。例:<div>~</div>
    Read More