すんこのアトリエとうぐいす工房

ゼロから始めるパソコン生活

トップ > ブログ > 【はてなブログ】枠の中の文字をスクロール表示させる方法

【はてなブログ】枠の中の文字をスクロール表示させる方法

ブログ ブログ-カスタマイズ

f:id:sunko-chan:20210729161620p:plain

これまでは文章全体を枠で囲んでいきましたが、
逆に枠の大きさを固定して文章をスクロール表示させることもできます。

こんな
感じに
表示されない
文字が
スクロールで
表示されるよ。

こんな感じのです。

長い文章を枠で囲むと枠が大きくなってしまい見た目が悪くなるので、
枠の大きさを固定してスクロールさせて表示することで
見た目すっきりするかもしれません。

枠の中で文字をスクロール表示させるコード

<div style="width: 90%;
 height: 50px;
 padding: 16px;
 overflow-y: scroll;
 border: 5px #ff0000 double;
 background:#ffffff;">こんな
感じに
表示されない
文字が
スクロールで
表示されるよ。
</div>

コードの説明

width: 90%;　枠の横幅　％で割合、pxで実数値
height: 50px;　枠の高さ　widthと同様に設定
padding: 16px;　枠の中の余白
overflow-y: scroll;　枠の大きさを越えたらスクロールさせる
border: 5px #ff0000 double;　枠の設定
background:#ffffff;　枠の中の背景色

今まで使ってきたコードも使えますよ。
（font-weight: bold;で文字を太字にしたりとか）

ここでoverflowと言うコードが出てきました。

overflow: ～;とすることで、指定した領域（この場合は枠のことですね）から
はみ出した部分をどうするか設定できます。

overflow: 横の設定 縦の設定;で指定します。
１つしか設定しなかった場合は、もう１つはautoに設定されます。

縦横の設定は以下のものが指定できます。

visible : そのままはみ出して表示する
hidden : はみ出した部分は表示しない
scroll : はみ出した部分をスクロールして表示する
auto : 見る人の環境に応じて変更

今回は枠内にはみ出た文字をスクロール表示させたいので
scrollを使います。

コードではoverflow-yとなっていますが、
これは縦方向のみスクロール表示させるための設定です。
Y軸ってことですね。

overflowのみだと縦と横、両方にスクロールバーが表示されてしまいます。

今回の場合は横にスクロールさせる必要がないので
無駄にスクロールバーが表示されるのを防ぐために
縦方向のみスクロールバーを表示する設定をします。

逆に横方向のみスクロールバーを表示したい場合はoverflow-x: ～;と設定します。
X軸ってことです。

こんな感じに表示されない文字が
スクロールで表示されるよ。

<div style=" width: 20%;
 height: 70px;
 padding: 16px;
 overflow-x: scroll;
 white-space: nowrap;
 border: 5px #ff0000 double;
 background:#ffffff;">こんな感じに表示されない文字が
スクロールで表示されるよ。
</div>

white-space: nowrap;と言うコードが追加されていますが、
これは自動改行をしないと言うコードです。

私の環境のせいかもしれませんが、
これを追加しないと枠の範囲で勝手に改行されてしまいました…

visible、hidden、autoに関しては今回は関係ないので折りたたんであります。

枠の中をリスト化する

<ul></ul>と<li></li>を使うことでリスト化することもできます。

これは特に枠のコードとは関係なく、記事中でも普通の枠内でも使えます。

  • こんな
  • 感じに
  • 文字が
  • リストに
  • なるよ。

このリストを枠の中に入れてしまおうというわけですね。

  • こんな
  • 感じに
  • 文字が
  • リストに
  • なるよ。

<div style="width: 50%;
 height: 100px;
 overflow-y: scroll;
 border: 1px #ff0000 solid;"><ul>
<li>こんな</li>
<li>感じに</li>
<li>文字が</li>
<li>リストに</li>
<li>なるよ。</li>
</ul>
</div>

やり方は簡単で、今まで文字を入力していたところに<ul></ul>と<li></li>を使って
文字を入力していくだけです。

まとめ

・枠の中でスクロール表示させるにはoverflow: scroll;を使う。
・縦方向のみスクロールさせる場合はoverflow-y: scroll;を使う。
・横方向のみスクロールさせる場合はoverflow-x: scroll;と white-space: nowrap;を使う。
・枠の中でリスト化する場合は<ul></ul>と<li></li>を使う。

基本的には枠のコードと同じなので、
枠のコードに追加するだけで簡単にスクロール表示やリスト化することができます。

あまり使い道はないかもしれませんが…