span classでdiv classを代用するサンプル

某ダイアリーで、gooブログのCSSカスタマイズに関する「むだづかいにっき♂のCSS」という記事を見かけたので、ちょっと試してみました。

何でgooブログ、div class が使えないのじゃ？

むだづかいにっき♂のCSS - 越後屋娯楽堂

そうなんです。gooブログでは、divタグにclass属性が使えません。しかし、spanタグにはclass属性が使えるので、display: blockのプロパティを追加したスタイルをspanタグに指定して、見た目だけ代用してみました。
＃ タグの意味として、spanでdivを代用できる訳ではありません

ここは、
<div style="border-left: #999 4px solid; border-top: #999 1px dashed; border-right: #999 2px solid; border-bottom: #999 1px dotted;">ここは、～ます。</div>
って書いてあります。

ここは、
<span style="display:block; border-left: #999 4px solid; border-top: #999 1px dashed; border-right: #999 2px solid; border-bottom: #999 1px dotted;">ここは、～ます。</span>
って書いてあります。
ここは、
<span class="sampleSpanLikeDiv">ここは、～ます。</span>
って書いてあります。

なお、CSSには以下の内容を追加してあります。

/* サンプルクラス：spanタグでdivタグのように見せる */
.sampleSpanLikeDiv {
	display: block; /* 指定された範囲をブロック表示 */
	/* 以下は、その他のプロパティ */
	border-left:   #999 4px solid;
	border-top:    #999 1px dashed;
	border-right:  #999 2px solid;
	border-bottom: #999 1px dotted;
}

一応、大丈夫なように見えるんですが、どうでしょうか。それとも、やりたいことは、これじゃないのかな。
＃ CSS更新後に、Ctrl+[更新]とかShift+[リロード]しても駄目ですか？

---

むだづかいにっき♂のCSS - 越後屋娯楽堂 2006年01月08日22:21:23

因みに、spanタグのstyle属性にdisplay:blockのプロパティがないと、ブロックレベルではなくインラインレベルになります。

ここは、
<span style="border-left: #999 4px solid; border-top: #999 1px dashed; border-right: #999 2px solid; border-bottom: #999 1px dotted;">ここは、～ます。</span>
って書いてあります。

ここは、
<span style="display:inline; border-left: #999 4px solid; border-top: #999 1px dashed; border-right: #999 2px solid; border-bottom: #999 1px dotted;">ここは、～ます。</span>
って書いてあります。

ここは、
<div style="display:inline; border-left: #999 4px solid; border-top: #999 1px dashed; border-right: #999 2px solid; border-bottom: #999 1px dotted;">ここは、～ます。</div>
って書いてあります。