編集:環境設定:CSSスタイルシート
Home>Dreamweaver>操作リファレンス>編集:環境設定>CSSスタイルシート
CSSルールの作成時
ショートハンドを使用
ショートハンドとは、1つのCSSのプロパティタグに、複数のプロパティの設定を含める方法です。例えば、枠線の上部を設定するCSSプロパティは、
- border-top-width(枠線の太さ)
- border-top-color(枠線の色)
- border-top-style(枠線のデザイン)
の3つですが、これを「 border-top 」という一つのプロパティでまとめることができます。
border-top:1px solid #000000;
上記は、太さが1、デザインは棒線、色が黒の枠線を上側に指定するプロパティです。
このように、一つのプロパティに複数のプロパティをまとめて指定できるプロパティをショートハンドと呼びます。
フォントに使用
以下のプロパティを一括してfontプロパティに設定します。
プロパティ | 意味 | 値 |
font-family | フォント名 | フォント名(カンマで区切って複数指定可能) |
font-size | 大きさ | 単位付数値、%、smaller、larger、xx-small、x-small、small、medium、large、x-large、xx-large |
font-size-adjust | 第一候補以外のフォントのサイズ調整 | none、inherit、実数値 |
font-stretch | フォントの幅 | normal、wider、narrower、ultra-condensed、extra-condensed、condensed、semi-condensed、semi-expanded、expanded、extra-expanded、ultra-expanded、inherit |
font-style | 斜体 | normal、italic、oblique |
font-variant | スモールキャップで表示する | normal、small-caps |
font-weight | 太さ | normal、bold、lighter、bolder、100~900 |
line-height | 行間 | normal、数値、単位付数値、% |
実際には、以下のように指定します。
.class{
font: italic bold 120% "Times New Roman"
}
クラス名「class」を指定されたフォントは、Times New Romanでイタリック体の太字で通常よりも120%大きいサイズで表示されます。
fontプロパティでは、「font-size-adjust」と「font-stretch」と「font-variant」の3つは、指定できません。
これらの値は自動的にデフォルト値に設定されます。
背景に使用
以下のプロパティを一括してbackgroundプロパティに設定します。
プロパティ | 意味 | 値 |
background-attachment | 背景画像の固定 | fixed、scroll、inherit |
background-color | 背景色 | 色名、16進数の色指定 |
background-image | 背景画像 | 画像のURL |
background-position | 背景画像の表示位置 | bottom、center、inherit、left、right、top |
background-repeat | 背景画像の並べ方 | repeat、no-repeat、repeat-x、repeat-y、inherit |
実際には以下のように指定します。
これは、背景にback.jpgを画面下部に常に固定して表示する設定です。
.class{
background:url(data/back.jpg) repeat-x bottom fixed;
}
マージンと余白に使用
以下のプロパティを一括してmarginプロパティに設定します。
プロパティ | 意味 | 値 |
margin-top | 上マージン | 単位付数値、%、auto |
margin-bottom | 下マージン | 単位付数値、%、auto |
margin-left | 左マージン | 単位付数値、%、auto |
margin-right | 右マージン | 単位付数値、%、auto |
ボーダーとボーダー幅に使用
borderプロパティにおいて一括指定できるのは、上下左右の枠線の幅と色と形式です。上下左右の枠線を個別に設定することはできないため、4箇所すべてに同じ色・幅・形式が適用されます。
.class{
border:1px solid #000000;
}
上下左右の枠線を1pxの太さの黒色、直線で表示します。
リスト―スタイルに使用
以下のプロパティを一括してlist-styleプロパティに設定します。
プロパティ | 意味 | 値 |
list-style-image | リストマークの画像 | 画像ファイルへのパス |
list-style-position | リストマークの表示位置 | inherit、inside、outside |
list-style-type | リストマークの形 | armenian、circle、cjk-ideographic、decimal、decimal-leading-zero、disc、geogian、hebrew、hiragana、hiragana-iroha、katakana、katakana-iroha、lower-alpha、lower-greek、lower-latin、lower-roman、none、square、upper-alpha、upper-latin、upper-roman |
.{
list-style:square outline;
}
上記の設定は、リストのマークを■にして、リストマークが文章の外側に来るように設定しています。
CSSルールの編集時
ショートハンドの使用
オリジナルで使用している場合
CSSルールを作成するときに、ショートハンドによる設定を反映しません。
上記のチェックボックスに合わせる
CSSルールをダイアログを利用して追加・編集した場合、[ショートハンドを使用]でチェックをつけたプロパティは、ショートハンドによる記述がなされます。
ただし、CSSファイルに直接手書きで編集を行う場合には、このオプションの内容は反映されません。
修正時にCSSファイルを開く
チェックを入れておくと、CSSパネル等からCSSを変更したときに、外部ファイルとして保存されている該当するCSSファイルを開きます。
チェックをはずしておくと、CSSファイルを開かずに自動的に修正・保存されます。
Dreamweaverが自動的に生成するCSSではなく、自分で直接コードを入力したいという人はチェックをいれておきます。
CSSパネルのダブルクリック時
パネルウィンドウのCSSパネルの、CSSスタイルには、現在のドキュメントに設定されているCSSの一覧が表示されています。このCSSの各設定をダブルクリックしたときの動作を以下の3つから選びます。
CSSダイアログを使用して編集
ダイアログウィンドウを開いて、個別に設定します。
予め設定項目が表示されているので、初心者やリファレンスを調べるのが面倒な人向けです。
プロパティウィンドウを使用して編集
パネルウィンドウ内にプロパティが表示されます。ここで既存のプロパティをしたり新規にプロパティを追加したりできます。
コードビューを使用して編集
CSSの保存してある外部ファイルをドキュメントウィンドウ表示して、ソースコード内の該当箇所カーソルを移動します。
環境設定のメニュー
一般 | APエレメント | CSSスタイルシート |
アクセシビリティ | コードカラーリング | コードの書き換え |
コードヒント | コードフォーマット | コピー/ペースト |
サイト | ステータスバー | ハイライト |
バリデータ | ファイルタイプ/エディタ | ファイルの比較 |
フォント | ブラウザでプレビュー | レイアウトモード |
新規ドキュメント | 不可視エレメント |
関連リンク
よく読まれている記事
- 右クリックメニューの表示が遅い【Information】
- 画像の一部にリンクを貼る(クリッカブルマップ【Dreamweaver】
- 一定時間でローテーションする広告【JavaScript】
- Dreamweaver【Dreamweaver】
- クリックした画像を拡大・縮小する【JavaScript】
UpDate:2010-3-16