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

Check Tweet

• サンプルファイル

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

必要に応じてスクロールバーが表示されるようにボックスを作成するには、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」にします。この場合、ボックスからはみ出た部分は表示されませんので注意しましょう。

• CSSレイアウトを一から作ってみよう
• Firefoxでもテーブルをセンタリングするには
• 字下げスタイルを作成するには

問題は解決しましたか？

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

▲このページのトップへ