www.wanichan.com

CSSでスクロールバー付きのボックスを作成

インラインフレームなどのフレームを使用すると、Web 標準に準拠しなくなります。しかし、CSS のoverflow を使うことによって、ひとつのWeb ページで実現可能です。

新しいスタイルを作成する

必要に応じてスクロールバーが表示されるようにボックスを作成するには、overflow値を「auto」にします。また、ボックスに枠線を付け、枠線との余白を10ピクセルに設定しましょう。

  1. [スタイル]作業ウィンドウの[新しいスタイル]をクリックします。
  2. [新しいスタイル]ダイアログボックスの[セレクタ]にクラス名を指定します。
  3. [レイアウト]カテゴリを開き、[overflow]値を下の図のように「auto」にします。
  4. [配置]カテゴリを開き、ボックスの幅と高さを指定します。幅は[width]、高さは[height]値に、それぞれ数値を指定します。
  5. ボックスの境界線との間の余白を指定します。[ボックス]カテゴリを開き、[padding]値を
    「10px」にします。
  6. 最後に、ボックスに枠線をつけます。[枠線]カテゴリを開き、線の種類(border-style)、線の太さ(border-width)及び、線の色(border-color)を指定します。
  7. 最後に[OK]ボタンをクリックします。
  8. [スタイルの適用]作業ウィンドウに、新しいスタイルが作成されました。

スクロールバーの表示について

スクロールバーを常に表示するには、[overflow]値を「scroll」にします。すると、縦と横のスクロールバーが常に表示されるようになります。逆に、スクロールバーを非表示にするには、[overflow]値を「hidden」にします。この場合、ボックスからはみ出た部分は表示されませんので注意しましょう。

INDEX
関連記事
  • このエントリーをはてなブックマークに追加

問題は解決しましたか?

操作方法、設定方法等で困ったら、 Expression Web Users Forum に投稿してください!

▲このページのトップへ