みなさま、こんにちは
Adobe Museでスクロールバー付きボックスを表示させようと
コードを調べて試してみたのですが、なかなかうまくいかなかったので、
配置できたコードをまとめてみます
ちなみに、アメブロの記事(HTMLタグを表示)でも表示可能でした
スクロールバー付きボックスのコード
【コード例】
<div style="font-size:16px; width:300px; height:100px; background: #ffffff; border:1px solid #666666; padding:10px; overflow:auto; letter-spacing:0px; line-height:140%;">
<p><font>あいうえお</font></p>
<p><font>かきくけこ、さしすせそ</font></p>
<p><font>たちつてと、なにぬねの、はひふへほ、まみむめも、やゆよ、らりるれろ、わをん</font></p>
<p><font>あいうえお</font></p>
<p><font>かきくけこ、さしすせそ</font></p>
</div>
【表示例】
あいうえお
かきくけこ、さしすせそ
たちつてと、なにぬねの、はひふへほ、まみむめも、やゆよ、らりるれろ、わをん
あいうえお
かきくけこ、さしすせそ
タグの意味
font-size=文字の大きさ
width=幅
height=高さ
background=背景色、transparentで透明色指定可能
border=ボックスを囲む線の設定、(太さ、線の形状、色)を指定可能
padding=ボックス内の余白設定
overflow=スクロール表示
letter-spacing=文字の間隔(今回は非表示のため0px)
line-height=文章の行間
縦スクロール・横スクロールの非表示
overflow=幅・高さの領域からはみ出た部分はどうするか
overflow-x=幅(横)ではみ出た部分はどうするか、
overflow-y=高さ(縦)ではみ出た部分はどうするか、
ということなので、
visible=領域をはみ出して表示
scroll=はみ出た部分をスクロールバー表示
hidden=はみ出た部分は表示しない
auto=自動、必要なときにスクロールバー表示
のなかで、指定すると表示・非表示が可能です。
横スクロールを指定して強制的に表示させる
スクロールバー付きのボックス表示の場合、
自動改行になっていて横スクロールバーが表示されない場合が
あります。"overflow-y=scroll"と記入しても、機能しないことも。
そんなときは、コードに追加で、
white-space:nowrap=自動改行禁止
=横スクロール表示指定
を記入したところ解決しました。
【コード例】
<div style="font-size:16px; width:300px; height:100px; background: #ffffff; border:1px solid #666666; padding:10px; overflow:auto; letter-spacing:0px; line-height:140%; white-space:nowrap">
<p><font>あいうえお</font></p>
<p><font>かきくけこ、さしすせそ</font></p>
<p><font>たちつてと、なにぬねの、はひふへほ、まみむめも、やゆよ、らりるれろ、わをん</font></p>
<p><font>あいうえお</font></p>
<p><font>かきくけこ、さしすせそ</font></p>
</div>
【表示例】
あいうえお
かきくけこ、さしすせそ
たちつてと、なにぬねの、はひふへほ、まみむめも、やゆよ、らりるれろ、わをん
あいうえお
かきくけこ、さしすせそ
余談:アメブロを利用して本文のコードを取得
Adobe Museでスクロールバー付きボックスを挿入する場合、
普段は記入しなくて済んでいる文章のコードを入力しなくては
なりません。
アメブロの「ブログを書く」の下には、
「タグの非表示」「HTMLタグを表示」の2つのタブがあるので、
細かいことを気にしなのなら、
アメブロで本文を書いて、「HTMLタグを表示」から
コピー&ペーストして本文のコードを取得すると楽かもしれません。