編集:環境設定:CSSスタイルシート

Home>Dreamweaver>操作リファレンス>編集:環境設定>CSSスタイルシート

この情報はお役に立ちましたか?よろしければ皆様にもお知らせください。

  このエントリーをはてなブックマークに追加 mixiチェック  

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が一覧表示されている

CSSダイアログを使用して編集

ダイアログウィンドウを開いて、個別に設定します。
予め設定項目が表示されているので、初心者やリファレンスを調べるのが面倒な人向けです。

ダイアログウィンドウでCSSを設定

プロパティウィンドウを使用して編集

パネルウィンドウ内にプロパティが表示されます。ここで既存のプロパティをしたり新規にプロパティを追加したりできます。

コードビューを使用して編集

CSSの保存してある外部ファイルをドキュメントウィンドウ表示して、ソースコード内の該当箇所カーソルを移動します。

環境設定のメニュー

一般 APエレメント CSSスタイルシート
アクセシビリティ コードカラーリング コードの書き換え
コードヒント コードフォーマット コピー/ペースト
サイト ステータスバー ハイライト
バリデータ ファイルタイプ/エディタ ファイルの比較
フォント ブラウザでプレビュー レイアウトモード
新規ドキュメント 不可視エレメント

関連リンク

よく読まれている記事

UpDate:2010-3-16