更新記録なんかを書くのにページの中にスクロールするBOXを作りたいとする。

わざわざ別のファイルに書いてインラインフレームでリンクさせると、二つのファイルを扱うことになってめんどい…という人用の小技。

まず設置したいHTMLファイルの該当する場所に、こんな感じのタグを書く。

<div class="box">
ここに文章を書く
</div>

CSSで箱を作る

.box {
     border: solid 1px #080;
     width: 80%;
     height: 120px;
     padding: 0.5em;
     overflow: auto;
		 background-color:#fff;
		 color:#000; 
               }

overflow: auto;に指定しておけば、はみだしたぶんはスクロールバーが表示されてうまく収まってくれます。色とか大きさはお好みで。

class名は仮にboxにしたけど、好きな言葉でOK。

ちなみに、

visible：初期値。はみ出た部分が、はみ出たままの状態で表示される場合あり hidden：はみ出た部分が隠れる scroll：はみ出た部分が隠れてスクロールできる状態に auto：ブラウザにより表示が変わる（基本的にはスクロールできる状態に）

デメリットは、HTMLファイルの中身が長くなってしまうこと。でもこれは一説によると、ちゃんと中身が更新されているようだねって検索エンジンが判定してSEO的にいいことだという説も…普通そこまで気にしないので別ファイルにするほうがすっきりはします。