上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
 最初のページから読むには「スタイルシートで遊ぶ part.1(<span>タグ編)」からどうぞ。


 今度は、「クラス」というタグの書き方の研究です。
 「クラス」というのは、日本でいうと「旗印」「目印」のようなものです。これを使えば、特定のタグに囚われることなく、自由にHTML部分とCSS部分の「旗印」をあわせて、文字はもちろん、その他いろいろなものを「デコ」することが出来るようになります。


クラスって?

 例えば前回まで使っていたタグ「b」や、「strong」、それは…

HTML(記事編集画面も)部CSS(スタイルシート)部
<b> ~ </b>b { 〇〇 : ◇◇ ; }
<strong> ~ </strong>strong { 〇〇 : ◇◇ ; }


 と、対応したタグと、そのタグ名でスタイルシートを適応させていました。
 でも、決められたタグは有限ですし、そもそも、関係ないところで関係ないタグを使うテンプレートはあんまり宜しくないのです。
 例えば、「strong」タグを、いろいろな飾り文字を使いたいという理由で重要でもない文章にもどしどし使うとか…すると、検索エンジンにスパムサイトを疑われかねません。

 と言うこともあり、特定のタグに固執したスタイルの当て方には限界があります。
 そこで出てくるのが「クラス」です。

クラス=旗印

 クラスは、HTML部分とCSS部分を繋ぐ旗印の役目を果たします。

「HTML部分から「red」の旗をCSS部分から探してスタイルを適応しろ!」

 と言う記述が「クラス」と言うわけです。
 例えば…

HTML(記事編集画面も)部CSS(スタイルシート)部
<span class="red"> ~ </span>.red { 〇〇 : ◇◇ ; }
<div class="blue"> ~ </div>.blue { △△ : □□ ; }

 このように記述すると「<span class="red"> ~ </span>」タグ内の文字は「〇〇 : ◇◇ ;」という、スタイルシート・デコ命令の通りの表示、
「<div class="blue"> ~ </div>」タグ内の文字は「△△ : □□ ;」という、スタイルシート・デコ命令に従った表示になるのです。
 つまり、より凝ったスタイルを当てると、タグ部分が乱雑になりますよね。それを、旗印を目印に、全部スタイルシートファイルに纏めて記述して、HTML部分、記事部分をすっきりさせることが出来るという訳です。


実際に表示確認してみる(編集可)
【HTML】

【CSS】



 さて、ここでまた「span」「div」のタグが出てきました。これも「b」や「strong」など同じ「タグ」なのですが、「b」や「strong」にあった「強調する」などと言う意味が何も含まれていないタグなので、非常に重宝するのです。
 クラスには好きな名前を付けられるので、強調の意味のない単語にも、段落にも、ボックスにもすべての別々のデザインのスタイルシートを旗印で分けて、整理整頓(HTMLはHTMLで、CSSはCSSファイルでという整理も含みます)することが出来るのです。


書き方

 「class="〇〇"」というのを、タグ内に書きこみます。〇〇と言うのは旗印なので、自由に設定することができます。それこそ「aaaaaa」だろうと「cutesweet」だろうと、何でも構いません。

 しかし、重要な旗印。CSS部に正確に旗印を立てておきます。
「.aaaaaa { ~ }」、「.cutesweet { ~ }」などと、正確に書き、クラスの旗印である「.」(ドット)を必ず忘れないように頭に書きます。

HT
ML
 新しい朝が来た!
今日こそ<span class="standard">希望の朝だ</span>
うそぉん。
C
SS
.standard {
border : 3px solid #f00 ;
background : #cde ;
}
表示
結果
 新しい朝が来た!
今日こそ希望の朝だ
うそぉん。


 旗印は、スタイルシートファイル上であれば、どこに記述しても大丈夫です。
 わかりやすいところであれば、どこでも☆
(他に立っている旗印を壊さないように。表示が変になった時のために、必ずいじる前にテンプレートをバックアップしておこう!)


 次のページはこちら。
テンプレCSSを書く Part.3(特定の場所へのクラス)

■CSSメインメニュー
実用的スタイルシート入門
このエントリーをはてなブックマークに追加
Sun.03.21.2010
Comment
Trackback
Comment Form
質問するときは?
  • 不具合が出ているページのURLを書き込む。
  • 使っているブラウザ(IE、Firefoxなど)を書き込む※IE6はサポート外です。
  • 次の人が確認できるように、使っているテンプレートの記事ページ、或いは各カスタマイズ記事ページにコメントを書きこむ。
コメント時の注意
やっぱり自分で解決したい時
特定の記事のみでレイアウトが崩れる場合
全ページでレイアウトが崩れる場合
メールフォーム
Bookmarks
Page Top
Copyright © SAKILab All Rights Reserved.
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。