==教えることは自分育て==

カテゴリ:├クラス名の付け方( 2 )
|TOPに戻る
クラス名の付け方(1)

.waku2img.waku4の違い

.waku2 はテキストP12要素のバリエーション(2)にあるように、「すべての要素に適用可能」なクラス名の付け方です。<div>でも<h2>でもすべての要素に適用されます。
因みに<h2>に適用してみましょう。

タイトル

文字に適用する時は、幅(文字数)がかわりますので、保存スタイルには幅を入れません。
インラインで幅を設定しましょう。
<投稿画面>
<h2 class="waku2" style="width:90px">タイトル</h2>

img.waku4 は、img限定のスタイルになります。親の性格を継承しつつ、子ども独自の性格を付け加えるという形です。テキストP12要素のバリエーション(1)に当たります。

ポラロイド風は写真の周りに付けるスタイルですから、img.waku4がいいでしょう。写真のサイズは問いません。
[PR]
by otomi7771 | 2007-05-04 14:47 | ├クラス名の付け方 |TOPに戻る
クラス名の付け方(2)

.waku4img.waku4の違い

★ポラロイド風写真のスタイルを.waku4で保存してみました。

【タグ】<img src="http://pds.exblog.jp/pds/1/200704/23/21/b0063421_1153778.jpg" class="waku4"> 結果は同じです。


何が違うかというと、
.waku4はすべての要素に適用可能ですので、divに適用できます。
ああああああああああああああ
【タグ】<div class="waku4">ああああああああああああああ</div>


★次にblockquoteに適用してみました。
ああああああああああああああ
【タグ】<blockquote class=waku4>ああああああああああああああ</blockquote>

Q. divとblockquoteが何故同じスタイルになってしまったのか?

A. blockquoteがもともと持っている3文字分の左右のmarginをmargin:5pxにかえてしまったからです。imgというインライン要素はwidth、heightを最初から設定しますが、divとblockquote要素の場合は、幅一杯の枠を持っていますので、文字の長さにふさわしいwidthを設定する必要があります。

しかし、いずれにしても上二つはポラロイドのスタイルになっていないので失敗ですね。中が文字ですから適用されないのです。丸いGIF画像もできません。【結論】矩形の画像にしか使えませんので、img.waku4 がいいということです。

[PR]
by otomi7771 | 2007-05-04 13:10 | ├クラス名の付け方 |TOPに戻る