JUGEM ユーザ互助会

「ユーザー助け合い掲示板」に投稿された質問を中心に、JUGEM ユーザの皆さんが JUGEM を使っていて困ったこと、疑問点などの解決策をまとめていきます。


Entry : main   << >>
スポンサーサイト

一定期間更新がないため広告を表示しています

| スポンサードリンク | | - | - | pookmark |
サイドのメニューにスクロールバーをつける

質問

 サイドバーのメニューがインラインフレーム(アイフレーム、iframe)のように枠に入って、その枠にスクロールバーがついているサイトを見つけました。あれはどのようにして実現されているのでしょうか?

回答

 CSS でスクロールバーを出したい場所を囲っている「div 要素」の「クラス属性」に width、height およびスクロール設定(overflow: auto;)を付与することで、内容が指定した高さ以上になると自動的にスクロールバーが出るようになります。以下は、テンプレート clover でのサンプルです。

HTML テンプレート
<!-- BEGIN latest_entry -->
<div class="links">
<img src="../template/clover/img/newentries.gif" width="180" height="34" alt="newentries" /><br />
<div class="linktext"> ← スクロールをつける場所
{latest_entry_list}
</div>
</div>
<!-- END latest_entry -->
CSS テンプレート
.linktext {
    (省略)
    width: 140px;
    height: 150px;
    overflow: auto;
}
スクリーンショット
リストのスクロール表示のスクリーンショット

 なお、スクロールをつけたい部分のクラス属性とつけたくない部分のクラス属性は必ず分けて定義して下さい。別になっていない場合は自分で新しいクラス属性を定義して下さい。

 また、この方法で表示されたスクロールバーの色を変えたい場合は、上記で編集した CSS のクラス定義に(=html {} の中ではなく、.linktext {} の中に)以下で紹介されているスクロールバー変更用の設定を入れてみて下さい。

| co-op | 14:07 | - | trackbacks(0) | pookmark |
スポンサーサイト
| スポンサードリンク | 14:07 | - | - | pookmark |
Trackback

New entries
Recent comment
  • トラックバック修正受付/記述誤り・訂正報告
    オレンジ (09/05)
  • トラックバック修正受付/記述誤り・訂正報告
    農民 (10/31)
  • トラックバック修正受付/記述誤り・訂正報告
    co-po (01/21)
  • トラックバック修正受付/記述誤り・訂正報告
    サキ (01/19)
  • トラックバック修正受付/記述誤り・訂正報告
    co-op (09/11)
  • トラックバック修正受付/記述誤り・訂正報告
    はるか (09/11)
  • トラックバック修正受付/記述誤り・訂正報告
    co-op (09/04)
  • トラックバック修正受付/記述誤り・訂正報告
    はるか (08/27)
  • トラックバック修正受付/記述誤り・訂正報告
    くみ (08/26)
  • トラックバック修正受付/記述誤り・訂正報告
    co-op (08/17)
Recent trackback
Recommend
Recommend
君が選んだ人
君が選んだ人 (JUGEMレビュー »)
さだまさし,倉田信雄,渡辺俊幸
Profile
Categories
Archives
FREE SPACE
フリースペース
Links
Admin
Genius Party