4.プチ☆カスタマイズ

スクロールする枠 - HTMLのお勉強

HTML編集画面を使って、スクロールする枠をつける方法を紹介します。

 

 

リストの一部分だけ表示させない場合に便利。

  • かくれんぼ
  • 武蔵野
  • 昔の侍
  • イージー
  • シグナル
  • 東京の空
  • 月の夜
  • いつものとおり
  • 赤い薔薇

↓↓↓ スクロールします ↓↓↓

  • かくれんぼ
  • 武蔵野
  • 昔の侍
  • イージー
  • シグナル
  • 東京の空
  • 月の夜
  • いつものとおり
  • 赤い薔薇

設定方法

  1. HTMLが編集できる画面(HTMLソースエディタ)に切り替えます。
  2. 下記のHTMLソースを“コピペ”して使ってください。

1)高さ100px、枠を表示する

ここに入力する
ここに入力する
ここに入力する
ここに入力する
ここに入力する
ここに入力する
ここに入力する
ここに入力する
ここに入力する

 

↓下記をコピー&ペースト

 

<div style="width: 100%; height: 100px; overflow-y: scroll; border: 1px #999999 solid;">

ここに文字を入力する

</div>

 

 

2)高さ100px、背景色を入れる

ここに入力する
ここに入力する
ここに入力する
ここに入力する
ここに入力する
ここに入力する
ここに入力する
ここに入力する
ここに入力する

 

↓下記をコピー&ペースト

 

<div style="width: 100%; height: 100px; overflow-y: scroll; background:#eeeeee;">

ここに文字を入力する

</div>

 

 

変更箇所

高さ指定:height:***px

背景色:background:#******

 

番外

番外A)枠内にリストを入れる
※上記の設定方法を使って、枠内に文章コンテンツの編集でリストを選択してもOK。

  • ここに入力する
  • ここに入力する
  • ここに入力する
  • ここに入力する

 

↓下記をコピー&ペースト

 
<div style="width: 100%; height: 100px; overflow-y: scroll; border: 1px #999 solid;">
<ul>
<li>ここに入力する</li>
</ul>
</div>

番外B)枠内に余白を入れる
※余白を入れる場合は、枠内を<p></p>で囲みStyleをいれます。

ここに入力するここに入力するここに入力するここに入力するここに入力するここに入力するここに入力するここに入力するここに入力するここに入力するここに入力するここに入力するここに入力するここに入力するここに入力するここに入力するここに入力するここに入力するここに入力するここに入力するここに入力するここに入力するここに入力するここに入力するここに入力するここに入力する

 

↓下記をコピー&ペースト

 
<div style="width: 100%; height: 100px; overflow-y: scroll; border: 1px #999 solid;">
<p style="padding:10px;">ここに入力する </p>
</div>