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

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色見本さんより好みの色に指定してね


コロナ禍で必需品

毎日13:00から先着順販売中





【アイリスオーヤマ公式オンラインショップ】アイリスプラザ
で毎日先着販売していますよ!

1人1回限りの購入制限になっていますが、購入登録時にちょっと工夫で家族分買うことがきる方法を掲載中!



アルコール消毒液の代用品





【アイリスオーヤマ公式オンラインショップ】アイリスプラザ
で予約販売中!

成分が水だけでできた強アルカリ電解水なので、水で5倍に薄めて除菌できるのでコスパに優れていて助かっています。


スポンサーリンク

新着記事

スポンサーリンク