2008.04.18
ブロッククォートの代替えクラスセレクタ
前回はブロッククォートの代わりにクラスセレクタ「.txbox」を使う方法について書いてみました。
/*てきすとぼっくすスクロール*/
.txbox {
margin:10px 15px 10px 15px;/*上、右、下、左の空き*/
padding: 0.5em;
border: solid 1px #808080;/*囲み線の太さと色*/
background: #EBF0FF;/* ろぐぼっくす背景色*/
width: auto;/*nnpxと左右幅を固定しても良い*/
height: 100px;/*スペースの高さ*/
overflow: auto;/*オーバーフローの文章をスクロールをしたい時*/
font-size: 95%;/*文字の大きさ*/
line-height: 1.5em;/*文字行間*/
}
.txbox {
margin:10px 15px 10px 15px;/*上、右、下、左の空き*/
padding: 0.5em;
border: solid 1px #808080;/*囲み線の太さと色*/
background: #EBF0FF;/* ろぐぼっくす背景色*/
width: auto;/*nnpxと左右幅を固定しても良い*/
height: 100px;/*スペースの高さ*/
overflow: auto;/*オーバーフローの文章をスクロールをしたい時*/
font-size: 95%;/*文字の大きさ*/
line-height: 1.5em;/*文字行間*/
}
css.phpにクラスセレクタ「.txboxh」を設置してみます。
「.txbox」との違いは赤く表示してみました。
僕の場合、画像はあらかじめ51x12pxで作成してサイトの適当なでイレクトリに置いておきました。
/*てきすとぼっくすHTML*/
.txboxh; {
margin:10px 15px 10px 15px;/*上、右、下、左の空き*/
padding: 1em 0.5em 0.5em 0.5em;
border: solid 1px #808080;/*囲み線の太さと色*/
background: #fff3fb;/* ろぐぼっくす背景色薄紫*/
background-image: url(http://画像を設置したディレクトリ/画像の名前.gif);
background-repeat: no-repeat;
/*width: auto;/*nnpxと左右幅を固定しても良い*/
/*height: 100px;/*スペースの高さ*/
/*overflow: auto;/*オーバーフローの文章をスクロールをしたい時*/
font-size: 95%;/*文字の大きさ*/
line-height: 1.5em;/*文字行間*/
}
.txboxh; {
margin:10px 15px 10px 15px;/*上、右、下、左の空き*/
padding: 1em 0.5em 0.5em 0.5em;
border: solid 1px #808080;/*囲み線の太さと色*/
background: #fff3fb;/* ろぐぼっくす背景色薄紫*/
background-image: url(http://画像を設置したディレクトリ/画像の名前.gif);
background-repeat: no-repeat;
/*width: auto;/*nnpxと左右幅を固定しても良い*/
/*height: 100px;/*スペースの高さ*/
/*overflow: auto;/*オーバーフローの文章をスクロールをしたい時*/
font-size: 95%;/*文字の大きさ*/
line-height: 1.5em;/*文字行間*/
}
で、こんな風にするとここは「HTMLを記述しています」という意味が分かりやすくなると思います。
<div class="txboxh">投稿記事</div>
このようにして「txboxc」も作成、「CSS」を記述する箇所も作ってみました。
Content Comments
Comment