« 続・影付き文字の試み | メイン | 前回の記事に追記 »
2004年03月15日
整形済みテキスト領域の表示
stylesheet のみで、ページの中に整形されたテキスト領域を表示する方法の検討。（つまり、外枠のページの大きさよりも幅が大きい場合などにスクロールバーが表示されるようになる）
iframe でも、結果的に見た目は似たような感じだが、その場合は「別ファイル」を用意しなければならない点が根本的に違う。
手順としては、css ファイルに、
.content div.blockqcoded {
overflow: auto;
margin-left: auto;
margin-right: auto;
width: 468px;
height: auto;
color: #545454;
font-family: "ＭＳ 明朝", "ＭＳ Ｐ明朝", Georgia, "Times New Roman", "ヒラギノ明朝 Pro W3", "平成明朝", serif;
font-size: 92%;
font-weight: normal;
line-height: 144%;
text-align: left;
background-color: #eeeeee;
border: 1px dotted #cccccc;
padding: 5px;
white-space: nowrap
}こんな感じで追記した後、記事の編集画面で、以下の様に書く。
<div class="blockqcoded"><code>.content h3 {<br />
filter: Shadow(Color=#cccccc, Direction=135, Strength=8); <br />
position: relative;<br />
letter-spacing: 0.1em;<br />
height: 1.1em;<br />
color: #cc0066;<br />
font-family: "Lucida Sans Unicode", "MS UI Gothic", "ヒラギノ角ゴ Pro W3", Osaka, "ＭＳ Ｐゴシック", Helvetica, Tahoma, Verdana, Arial, "ＭＳ ゴシック", sans-serif; <br />
font-size: 126%;<br />
border-bottom: 1px dotted #cc0066; <br />
text-align: left;<br />
vertical-align: baseline;<br />
font-weight: bold;<br />
margin-bottom: 10px;<br />
padding: 3px;<br />
}</code></div>
filter: Shadow(Color=#cccccc, Direction=135, Strength=8); <br />
position: relative;<br />
letter-spacing: 0.1em;<br />
height: 1.1em;<br />
color: #cc0066;<br />
font-family: "Lucida Sans Unicode", "MS UI Gothic", "ヒラギノ角ゴ Pro W3", Osaka, "ＭＳ Ｐゴシック", Helvetica, Tahoma, Verdana, Arial, "ＭＳ ゴシック", sans-serif; <br />
font-size: 126%;<br />
border-bottom: 1px dotted #cc0066; <br />
text-align: left;<br />
vertical-align: baseline;<br />
font-weight: bold;<br />
margin-bottom: 10px;<br />
padding: 3px;<br />
}</code></div>
これで、Windows の IE6 では、左図のような感じになる。（3月11日の記事 を60%程度の大きさに縮小した図）
投稿者 savabigi : 2004年03月15日 21:55 | [ ウェブログ・ココログ関連 ]
トラックバック
このエントリーのトラックバックURL:
http://savabigi.x0.com/mt3/mt-tb.cgi/20
このリストは、次のエントリーを参照しています: 整形済みテキスト領域の表示:
» 前回の記事に追記 from 無責任 Memo
前回の記事は、結構急いで投稿したため、説明不足だった気がするので、自分で追記。 [続きを読む]
トラックバック時刻: 2004年03月20日 01:10