Top
ご訪問ありがとうございマス!!
ブログちょこちょこ再開予定です。
みなさま、またよろしくお願いします☆

↑デザイン・アート部門
最高記録10位です☆
++最新の記事++
9/14【映画を観る】
NANA
9/14【雑記】
脳みそゲーム
9/13【愛犬と暮らす】
こんなに大きく
9/12【あなたとわたし】
ハッピーサマーウェディング♪
7/9【オンナの愉しみ】
エスニックブーム
7/2【あなたとわたし】
もめごと
6/21【あなたとわたし】
やきもち
6/20【映画を観る】
交渉人 真下正義
6/7【オンナの愉しみ】
10年ぶり
6/5【あなたとわたし】
すきなひと
6/4【あなたとわたし】
ふわふわ
6/1 【デザインとアート】 +others+
かたちあるもの
S M T W T F S
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30
Category
【あなたとわたし】
恋愛のコト、友達のコト。

【本を読む】
オススメ度と感想。

【音を楽しむ】
お気に入りのオンガク。

【映画を観る】
観るものは偏りがち。

【ブログ試行錯誤】
初心者なりの
スキンいぢり挑戦談。

【愛犬と暮らす】
わんこの話題。

【デザインとアート】
インテリアとか、
雑貨とか、好きな物。

【オンナの愉しみ】
美容、食べ物とか
ファッションのこととか。

【日々想うこと】
心の整理と日記

【雑記】
どうでもいいこと。
Comment
最新のコメント
cheap cheap
by FywAjata at 00:56
Greetings, ..
by Investblogger at 17:28
Ladies and G..
by Investblogger at 14:14
hypnotherapy..
by elizabeth at 06:22
[url=http://..
by orielmilm at 03:58
penis enlarg..
by hypnothera at 02:51
Recently fr..
by arabic fre at 01:02
[url=http://..
by orielmilm at 22:38
hypnotherapy..
by hypnothera at 14:31
Most downlo..
by boost free at 13:00
その他のジャンル
ファン
記事ランキング
ブログジャンル
画像一覧
Trackback
最新のトラックバック
watch Enemy ..
from movies review
Manchurian C..
from historical rev..
divx Hostage..
from uk film reviews
online Kanga..
from reviews of cur..
download thi..
from movie trailer ..
download a M..
from Download New M..
Mousehunt ip..
from review movies ..
Mousehunt ip..
from review movies ..
Birds, The v..
from movie trailers
download new..
from movies reviews..
Link
【動作確認】
Internet Explorer6.0/Netscape7.1
Opera7.53/Firefox 1.0
IE以外ご利用の方で
文字が見にくい方は
表示→文字のサイズなどで
変更してご覧下さい。
お手数をおかけします。
【トラックバックをする際のお願い】
アフィリエイト目的だと判断した
トラバは削除させて頂いております。
トラックバックは大歓迎ですが、
記事の中で紹介・もしくは
コメントがない場合も内容を確かめた上で
削除する場合があります。ご了承下さい。
皆さんネットマナーを守って
楽しくインターネットをしましょうよ(懇願)
++ CLASSとID ++
スキン編集の基礎知識シリーズ第4弾。
今回は、ブログのスキンデザインに欠かせない存在の
CLASSとIDについてです。

本来、HTMLは主な構造を定義し、デザイン面はスタイルシートで定義するものです。
HTML内にフォントの色、大きさなどを記述することも出来ますが、
メンテナンスや、情報量、統一感などの面で、スタイルシートの方が良いです。



++続き++


まず、CLASSとはどういったものかというと。
複数の要素に、同じ属性を指定したいときに使用します。

asamiの場合、記事の内容によってフォントの色を変えているので、
ブログ関係の記事のときは、この色。
犬関係の記事のときは、この色。
・・・と言った指定を、外部スタイルシート(ブログの場合はcss編集部分)に記述し、
HTML本文(ブログの場合は、html編集部分とpost部分)でそれを活用します。

1)基本的な指定の仕方

まず、<p>(段落)全ての文字色を黒、大きさを15ピクセルにしたい場合。

css編集画面
p { color :black; font-size :15px; }

html編集画面またはpost本文
<p>これで、全ての<p>要素に適用されます。</p>

実際の表示

これで、全ての<p>要素に適用されます。



2)特定の要素にクラスを指定する

次に、例えば注意書きをするために、
<p>要素の、文字色を赤、大きさを18ピクセルにしたい場合。

css編集画面
p { color :black; font-size :15px; }
p.chuui { color :red; font-size :18px; }
↑この部分を書き加えます。詳しく説明をすると、
p(要素) .(ピリオド) chuui(クラス名。任意ですが、半角英字でわかりやすいものを)
そして、そのあとの{}内に属性を記述します。

html編集画面またはpost本文
<p>これで、全ての<p>要素に適用されます。</p>
<p class="chuui">この様に、class=クラス名の形で指定します。</p>

実際の表示

これで、全ての<p>要素に適用されます。


この様に、class=クラス名の形で指定します。



3)クラスだけを指定し、あとから要素を指定する

また、要素を指定しないで、クラスだけ指定することも出来ます。

css編集画面
p { color :black; font-size :15px; }
p.chuui { color :red; font-size :18px; }
.small { color :green; font-size :10px; }
↑この部分を書き加えます。
.(ピリオド) small(クラス名)
そして、同じように、この後の{}内に属性を記述します。

html編集画面またはpost本文
<p>これで、
<span class="small">全ての<p>要素</span>
に適用されます。</p>
<p class="chuui">この様に、class=クラス名の形で指定します。</p>

実際の表示

これで、全ての<p>要素に適用されます。


この様に、class=クラス名の形で指定します。



要素を指定しないでクラス名を指定した場合、複数の要素に適用できます。
反対に、要素を指定した場合(上記の場合はp要素にchuuiクラスを指定)
他の要素には適用できません。
(上記の場合、span要素にchuuiクラスは適用されません)

4)IDについて

CLASSとIDの違いは、CLASSは同じ文書の中で何度でも使用できますが、
IDは同じ文書の中で1回しか使用できないことです。
asamiは、CLASSの方が使いやすいのでIDは使用してませんが、
一応やり方だけ書いておくので、応用してみてください。

css編集画面
#chuui { color :red; font-size :18px; }

html編集画面またはpost本文
<p id="chuui">基本的に、記述の仕方はCLASSと大差ないです。</p>

実際の表示

基本的に、記述の仕方はCLASSと大差ないです。



5)補足

このように、わかりやすいクラス名をつけながら整理していくと、
後から整理しやすくなります。新しくなにか書き加えるときも、
以前と同じ仕様で書くことが出来て、統一しやすくなります。
是非、覚えて使ってみましょう。
[PR]
by trickycat | 2004-10-27 15:48 | ブログ試行錯誤 ▲page top▲