CSSで段落のスタイルを設定

CSSで段落のスタイルを設定するにはpタグについてプロパティの値を設定します。

CSSの設定の流れ

①画面右中段CSSスタイルパネルで「新規CSSルール」をクリック
②「新規CSSルールダイアログ」で「セレクタータイプ」をタグ、「タグ名」をp、ルール定義を新規スタイルシートファイルにし(既存のスタイルシートファイルに追加したいときは既存のファイルを指定)、「OK」ボタンを押す
③「スタイルシートファイルの別名で保存」ダイアログでCSSファイルに新しく名前を付けて作成・保存する。
④カテゴリ「タイプ」で行間を「Line-height」、フォントを「Font-family」、文字サイズを「Font-size」、文字色を「Color」で指定します。
⑤設定が終わったらOKを押します。

設定の例

背景白の場合、文字の色は黒が読みやすいですが、柔らかい感じを出すために少し灰色を混ぜるのも良いと思います。文字サイズは16pxが自然な感じです。行間は1.5em、フォントはゴシック系が好き嫌いが少ないかもしれません。

いろいろいじってみよう

CSSスタイルパネルの横罫線を上にマウスで引き上げると、セレクタ毎の個々のプロパティが表示されます。一時的に無効にすることもできます。プロパティの追加をクリックすれば、ドロップダウンでプロパティを設定することもできます。CSSの設定はファイルをまたぐので面倒なことも多いのですが、Dreamweaverの手助けを上手に使って慣れていきたいところです。

広告