スクロールのやり方 ページ6
##
さりげなくCSS辞典に書いてありません。なので紹介しようと思います。
簡単に言うと、
・高さを決める
・決めた高さ以上の長さになったら、スクロールする設定にする
これだけです。
スクロールするCSSでは背景に画像を使っている場合が多いですが、背景に必ず画像を使わなければいけないわけではありません。
使う画像によっては、高さを決めて画像を一枚だけ見せた方がきれいになる、というだけ。
ここでは、例として作品説明欄のスクロールを紹介します。
div#desc{
height:500px;
overflow:auto;
}
これだけです。
ここに、背景や文字 の色の設定を加えて使えます。
スマホ向けに、下のように記述しておいた方がいいでしょう。
@media screen and (max-width:600px){
div#desc{height:345px;}}
これは、端末の幅が600pxより小さかったら、作品説明欄の高さを345pxにするよーというもの。これについても後でゆっくり説明しましょう。
前は900pxと紹介していましたが、小さめのタブレットで確認したところ表示崩れに繋がったので、600pxに変更しました。また、表記ミスで反映されない場合がありましたが、確認/修正済みです。ご迷惑おかけしました。
上級者向けですが、
div#descと#descは同じところを表します。
が、ここで#descと書くとスクロールできなくなるので注意が必要です。
##
画像の詳しい設定-I 〜background-repeat〜→←「直リンク」ってなあに？
この小説をお気に入り追加 (しおり)
登録すれば後で更新された順に見れます 134人がお気に入り
お気に入り作者に追加
この作品を見ている人にオススメ
この作品を見ている人にオススメ
「CSS」関連の作品
違反報告 - ルール違反の作品はココから報告感想を書こう！(携帯番号など、個人情報等の書き込みを行った場合は法律により処罰の対象になります)
さくさく - 参考にさせていただきます。ありがとうございます！ (12月13日 19時) (
レス) id: 8125d01b3c (このIDを非表示/違反報告)
青い鳥 - 参考にさせてもらいました。関係ないんですけど１００票目に評価しました (10月17日 17時) (レス) @page27 id: 55adadd6b3 (このIDを非表示/違反報告)
ぽんきち丸ドリーム号(プロフ) - 参考にさせていただきました、、！ありがとうございます！！ (7月10日 9時) (レス) @page27 id: 2431247bf4 (このIDを非表示/違反報告)
雨の緑茶。(プロフ) - ゆゆゆ。さん» 失礼します。em7様とは関係のない者ですがご回答させていただきます。もう解決されているかなと思いますが、一応https://uranai.nosv.org/u.php/novel/hetadesum4/の「画像のサイズ変更」ページに載っているかと。 (2023年3月17日 14時) (レス) id: 2f0ba08fc2 (このIDを非表示/違反報告)
おはぎ(砂糖・おはぎサブ垢) - 参考にさせていただきました (2022年11月27日 11時) (レス) @page35 id: dfee7c88d4 (このIDを非表示/違反報告)
作品は全て携帯でも見れます
同じような小説を簡単に作れます → 作成
この小説のブログパーツ
