Museでスクロールバーボックス(アメブロ可) | JUNK BOX

JUNK BOX

文系女子によるパソコン技術向上と趣味を兼ねたブログ

みなさま、こんにちは雪の結晶

 

Adobe Museでスクロールバー付きボックスを表示させようと

コードを調べて試してみたのですが、なかなかうまくいかなかったので、

配置できたコードをまとめてみます目

 

ちなみに、アメブロの記事(HTMLタグを表示)でも表示可能でしたアメーバ

 
 

1スクロールバー付きボックスのコード

 

【コード例】

<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>

 

【表示例】

あいうえお

かきくけこ、さしすせそ

たちつてと、なにぬねの、はひふへほ、まみむめも、やゆよ、らりるれろ、わをん

あいうえお

かきくけこ、さしすせそ

 

2 タグの意味

 

font-size=文字の大きさ

width=幅

height=高さ

background=背景色、transparentで透明色指定可能

border=ボックスを囲む線の設定、(太さ、線の形状、色)を指定可能

paddingボックス内の余白設定

overflow=スクロール表示

letter-spacing=文字の間隔(今回は非表示のため0px)

line-height=文章の行間

 

2 縦スクロール・横スクロールの非表示

 

overflow=幅・高さの領域からはみ出た部分はどうするか

overflow-x=幅(横)ではみ出た部分はどうするか、

overflow-y=高さ(縦)ではみ出た部分はどうするか、

ということなので、

visible=領域をはみ出して表示

scroll=はみ出た部分をスクロールバー表示

hidden=はみ出た部分は表示しない

auto=自動、必要なときにスクロールバー表示

のなかで、指定すると表示・非表示が可能です。

 

3 横スクロールを指定して強制的に表示させる

 

スクロールバー付きのボックス表示の場合、

自動改行になっていて横スクロールバーが表示されない場合が

あります。"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>

 

【表示例】

あいうえお

かきくけこ、さしすせそ

たちつてと、なにぬねの、はひふへほ、まみむめも、やゆよ、らりるれろ、わをん

あいうえお

かきくけこ、さしすせそ

 

4余談:アメブロを利用して本文のコードを取得

 

Adobe Museでスクロールバー付きボックスを挿入する場合、

普段は記入しなくて済んでいる文章のコードを入力しなくては

なりません。

 

アメブロの「ブログを書く」の下には、

「タグの非表示」「HTMLタグを表示」の2つのタブがあるので、

細かいことを気にしなのなら、

アメブロで本文を書いて、「HTMLタグを表示」から

コピー&ペーストして本文のコードを取得すると楽かもしれません。