htmlで更新情報などボックス内をスクロールさせる方法

目次

スクロールボックス

ホームページを見ていると、新着情報や最新記事などをズラズラ並べているだけでなく、

フレームの中に納まっていて、スクロールすると下の部分が見えるようになる方法を使っているホームページを見かけます。

見た目もよくスマートに見えますよね。こんな感じです。

2017年10月16日 更新内容

2017年10月15日 更新内容

2017年10月14日 更新内容

2017年10月13日 更新内容

2017年10月12日 更新内容

2017年10月11日 更新内容

2017年10月10日 更新内容

これを「スクロールボックス」と言って、自分のホームページに使うととても便利です。

何よりもホームページはもちろん、特にスマホで見る時は、とても親切ですね。

なぜなら、縦にズラズラ書かれていないので、スペースの節約になるからです。

特にホームページ初心者の方には、cssが分からない方がほとんどなので触らなくてもできますので、ぜひ活用してくださいね。

HTMLだけでスクロールボックスは作れます

これをコピペしてスクロールボックスを作りたいHTMLページに張り付けてください。


スクロールボックスの各種設定

項目 設定 備考
横幅(width) 100% ページ幅いっぱいにしてあります

px設定できますがスマホで見た時に画面からはみ出る可能性があります

縦幅(height) 200px 好みで高さ変更して下さい
背景色(background-color) #ffffff 好みで色を変更してください

こちらのhtml色見本さんより好みの色に指定してね

枠線太さと線の種類(border) 1px dotted 線なしnone

実線solid

二重線double

破線dashed

点線dotted

文字サイズ(font-size) 14px 好みで大きさ変更でしきます。%も利用可能
背景色(color) #000000 好みで文字色を変更できます

こちらのhtml色見本さんより好みの色に指定してね

文字色(color) #000000 好みで文字色を変更できます

こちらのhtml色見本さんより好みの色に指定してね

とりっぷぼうる

年が明けて寒い日が続いていますが、春の訪れを感じられる菜の花が見頃を迎えますので、お出かけには渋滞を回避して電車やバスでお得なフリーきっぷを使ってお出かけしませんか?

また、意外に知られていませんが高速道路版のフリーパスも活用してみませんか?

1月から見ごろとなる菜の花名所
よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次