10月 142011
灰色背景がサンプルソース薄緑背景が実際の見た目
サンプルソース
HTMLソース
<div class=”gijif”>
限られたエリアにたくさんの情報を書きたい時に使うと便利。<br/>
更新履歴とかがよいかな？<br/><br/>
ただし長文の文章の場合、限られた狭い範囲でこのように頻繁なスクロールが発生すると、読む気がなくなってしまうことも。
読み物中心の時は、あまり使わないほうが良いかも。<br/>
どうしても使いたい場合は、縦の擬似フレームの高さ(heightの値)を多めに取ってやることが重要です。
</div>
限られたエリアにたくさんの情報を書きたい時に使うと便利。<br/>
更新履歴とかがよいかな？<br/><br/>
ただし長文の文章の場合、限られた狭い範囲でこのように頻繁なスクロールが発生すると、読む気がなくなってしまうことも。
読み物中心の時は、あまり使わないほうが良いかも。<br/>
どうしても使いたい場合は、縦の擬似フレームの高さ(heightの値)を多めに取ってやることが重要です。
</div>
CSSソース
.gijif {
width:500px; height:100px; overflow:scroll;
}
width:500px; height:100px; overflow:scroll;
}
サンプル表示
限られたエリアにたくさんの情報を書きたい時に使うと便利。
更新履歴とかがよいかな？
更新履歴とかがよいかな？
ただし長文の文章の場合、限られた狭い範囲でこのように頻繁なスクロールが発生すると、読む気がなくなってしまうことも。
読み物中心の時は、あまり使わないほうが良いかも。
どうしても使いたい場合は、縦の擬似フレームの高さ(heightの値)を多めに取ってやることが重要です。
解説
HTMLソース
擬似フレームにしたい部分のみに適用させる為、divにclassを指定します。
ここでは、<div class=”gijif”>としています。
CSSソース
擬似的にフレームを作るには、overflow:scroll;というものを使います。
これは、width:500px;とheight:100px;で指定した幅(width)・高さ(height)を超えた時に、スクロールバーを表示するというものです。