2008.04.17
blockquoteブロッククォート
BLOCKQUOTE の使い方を見て<blockquote>～</blockquote> を適当に使って来たぼくとしては反省しなくっちゃ！。
<blockquote>～</blockquote> で囲まれた文章は、引用文であることを明示するタグです。
前後に改行され、左右がインデント(字下げ)されて表示されます。
「blockquote」すると上の様に見えるんです。
これ的にブロッククォートを使わずに同じように文章を表示するためにクラスセレクタ「.txbox」を作成以下のようにコードをCSS.phpに書き込んでおきます。
/*てきすとぼっくす*/
.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;/*文字行間*/
}
そしてHTMLでは
<div class="txbox">投稿記事</div>
の様に書けばいいんですね。
ただ上のCSSではwidth、height、overflowをコメントアウトしています、これを使ったCSSをもひとつクラスセレクタ「.txbox2」を作っておきましょう、これを作れば大量の文章を省スペースで納める事が出来ます。
/*てきすとぼっくすスクロール*/
.txbox2 {
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;/*文字行間*/
}
.txbox2 {
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;/*文字行間*/
}
で、これを使いたい時のHTMLでは
<div class="txbox2">投稿記事</div>
こんな風にスクロールしたいときは「div class=”txbox2″」として使わないときはdiv class=”txbox”」のように「2」を外せばいいんですね！
