本書のサンプルサイトの背景をファブリック調にして、デザインも背景にあわせて少しだけ変えてみましょう。
HTMLは変更せず、CSSの修正だけでかなりデザインイメージを変えることができます。新たなCSSプロパティを覚えることはありません。
書籍内で登場するCSSプロパティだけでデザインを変更してみましょう。

• デザインをナチュラル系に変更したサンプルサイトを見る

1背景を変更し、ヘッダー上部にラインを入れる

左のような継ぎ目の目立たない背景画像を用意します。
ここでは、「【解説】背景画像を指定する（P181）」に登場する背景画像「bg1.png」を利用します。

「/common/images/bg1.png」となるようにフォルダに配置しましょう。

CSSファイル（/common/css/style.css）を開き、bodyセレクタにbackground・border-topプロパティを次のように追加します。

body {
  color: #333333;
  background: url(../images/bg1.png);
  border-top: 4px solid #7E7827;
}

2サイトタイトルの文字色を変更する

#siteTitleセレクタにcolorプロパティを次のように追加します。

/* ページヘッダー */
#pageHead #siteTitle {
  font-size: 30px;
  line-height: 1.2;
  margin-bottom: 0;
  font-family: ‘Antic Didone’, serif;
  color: #857E38;
}

3グローバルナビのデザインを変更する

グローバルナビが少し目立たなくなってしまいました。そこで、背景のファブリック調の雰囲気に合わせつつデザインを変更します。

.globalnavセレクタのborder・paddingプロパティを削除し、次のようにbackgrond-colorで背景色を白にします。
次に、柔らかさを出すためにborder-radiusプロパティを指定して角丸にし、box-shadowプロパティを指定してグローバルナビの周りにふんわり浮かび上がるような影を作ります。 グローバルナビに背景色をつけると、上の内容（サイトタイトルや概要）との間が詰まって見えるようになったので、margin-topプロパティで余白を指定しています。

/* グローバルナビ */
#pageHead .globalNavi {
  background-color: #FFFFFF;
  border-radius: 8px;
  box-shadow: 0 0 5px rgba(124,109,34,0.2);
  margin-top: 20px;
}

box-shadow（P242参照）は、順番に次の値を設定することができます。ここでは、水平・垂直方向の影のオフセット値をどちらも0に指定することで右下に影がでず、周囲全体に影ができます。 box-shadowは下記のように最大6つの値を指定することができます。なお、水平・垂直の影のオフセット値は必須ですが、その他の値は省略することができます。様々な値を指定して表示を確認してみましょう。

マウスホバー時とカレント時の表示を見ると、意図しない白い余白があります。これは、書籍内のデザインで、グローバルナビのli要素に左右のpaddingを指定しているためなので、次の赤字部分を削除します。 また、グローバルナビの高さが低いので、a要素のpaddingの値を「5px 0」→「15px 0」と増やします。

#pageHead .globalNavi ul li {
  list-style: none;
  width: 245px;
  float: left;
  border-left: solid 1px #CCCCCC;
  padding: 0 10px;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  text-align: center;
  font-size: 14px;
  line-height: 1.429;
}
#pageHead .globalNavi ul li:first-child {
  border-left: none;
}

#pageHead .globalNavi ul li a {
  color: inherit;
  text-decoration: none;
  display: block;
  padding: 15px 0;
}

マウスホバー時とカレント時の背景色がbodyの背景画像の色と似ているため、見えにくくなってました。そこで、全体の雰囲気に合わせてうっすらとオレンジのグラデーションをかけてみます。background-imagesプロパティに指定することのできる値linear-gradientは、7-3-2 立体的なボタンを作成する 手順5（P241）で解説しています。 background-imagesプロパティが利用できない古いブラウザのことを考慮し、background-colorプロパティにもうすいオレンジを指定しておきます。

#pageHead .globalNavi ul li a:hover,
#pageHead .globalNavi ul li.current a {
  background-color: #FFF8E0;
  background-image:-webkit-linear-gradient(top,#FFF8E0,#FFFFFF);
  background-image:linear-gradient(to bottom,#FFF8E0,#FFFFFF);
}

そこで、左のようにli要素に、疑似クラス「:first-child」「:last-child」を追加したCSSを追加します。border-radiusプロパティの値を順番に指定し、「ホーム」は左上・左下を、「おといあわせ」は右上・右下を角丸にします。

次に、グローバルナビの「ホーム」と「おといあわせ」のホバー・カレント時の表示をみると、端の角丸の上にaタグの四角いボックスが重なった状態になり、不自然です。

#pageHead .globalNavi ul :first-child a:hover,
#pageHead .globalNavi ul :first-child.current a {
  border-radius: 8px 0 0 8px;
}
#pageHead .globalNavi ul :last-child a:hover,
#pageHead .globalNavi ul :last-child.current a {
  border-radius: 0 8px 8px 0;
}

4グローバルナビのデザインに、メインカラムのデザインを合わせる

メインカラムをグローバルナビと同様に背景白・角丸・影をつけるために、セレクタ#pageBodyMainに、次のようにbackground-color・border-radius・box-shadowプロパティを追加します。
メインカラムを白背景にしたことで、囲みと内容の間に余白が必要になったため、paddingを20pxと指定します。paddingを指定した分メインカラムの横幅が40px増えて760pxとなりました。そこで、サブカラムのwidthを220pxから190pxに変更します。

#pageBodyMain {
  width: 720px;
  float: left;
  background-color: #FFFFFF;
  border-radius: 8px;
  box-shadow:0px 0px 5px rgba(124,109,34,0.2);
  padding: 20px;
}

#pageBodySub {
  width: 190px;
  float: right;
}

たったこれだけの作業で、かなりサイトの雰囲気が変わりましたね。CSSの特性を正しく理解していれば、少しのCSSの変更で多くのデザインバリエーションを作ることができます。

5ページタイトルのデザインを変更する

手順4までのCSS変更で十分なほどデザインイメージは変わりましたが、もうひとつ、背景画像を使った装飾のテクニックを紹介します。

左のように1pxのドットが交互に配置された画像bg2.png（2×3px：左図は10倍の大きさ）を用意します。
画像のダウンロードはこちら（右クリックしてリンク先のファイルを保存）
「/common/images/bg2.png」となるようにフォルダに配置しましょう。

【解説】背景画像を指定する（P181）で紹介しているbackgroundプロパティの使い方を応用して次のように指定すると、ページタイトルに雰囲気のある装飾をほどこした下線をつけることができます。ここではドットを繰り返した市松模様の線ですが、画像を工夫することで様々なバリエーションを作ることができるでしょう。
なお、paddingとmargin-topも指定して、文字の余白がちょうど良くなるように調整しています。

/* 見出し */
#pageBodyMain .pageTitle {
  font-size: 26px;
  padding: 0 10px 10px;
  line-height: 1.231;
  margin-top: 0;
  background: url(../images/bg2.png) repeat-x bottom;
}