作りながら学ぶ HTML/CSSデザインの教科書

ステップアップ

デザイン
チェンジ

2014.5.7

背景素材を上手に使って、サンプルサイトをナチュラル系にチェンジ!

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

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

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

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

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

/common/css/style.css

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

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

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

/common/css/style.css

/* ページヘッダー */
#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プロパティで余白を指定しています。

/common/css/style.css

/* グローバルナビ */
#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」と増やします。

/common/css/style.css

#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プロパティにもうすいオレンジを指定しておきます。

/common/css/style.css

#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タグの四角いボックスが重なった状態になり、不自然です。

/common/css/style.css

#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;
}

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

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

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

/common/css/style.css

#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も指定して、文字の余白がちょうど良くなるように調整しています。

/common/css/style.css

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

このように、少しの工夫でデザインを変えることができます。ただし、見栄えをよくするにはHTML/CSSの知識だけではなく、「デザイン」についての知識や理解も必要です。デザインに興味のある方は、最初のうちは様々なサイトを見て、どこが良いと思うのか考えてみると良いでしょう。

ウェブデザインのを紹介するサイトはいくつかありますが、ここでは、私が気に入っているサイトを3つ紹介しますので、ぜひじっくり眺めてみてください。

  

また、最初の頃は見出しなどの装飾もどのように工夫したらよいか迷うことが多いかと思います。見出しのデザインだけを集めたこんなサイトもありますので、参考にしてみてもよいでしょう。

気になるデザインのサイトがどのように実装されているかを知りたい場合は、Google Chromeの場合はメニューバーの「表示>開発・管理>ソースを表示」を選択するとHTMLを確認することができます。
また、POINT Google Chromeの開発者ツール(P111)で紹介しているように、気になる部分で「要素の検証」をして、HTML/CSSを確認してみると良いでしょう。

自分にはセンスがないからデザインはできないと考えている方も多いのですが、デザインにも一定のセオリーやルールがあり、それを知り、経験を積むことでセンスは磨かれていきます。まずは、デザインの本を読んでみるのがオススメです。