ぼくのWEBあしあと

WEB制作勉強中michyの日記。「コーディング」や「CMS(wordpress、MovableType)によるサイト構築」、「SEO」などの話題を中心に。

  • フィード
  • サイトマップ
検索キーワード

第4回 コーディングの基礎 「まずはヘッダーフッターを飾ろう!」

  • 2008年10月20日
  • WEB

これで2カラムは一応できました。さて、ここから細かな装飾をしていきたいとおもいます。

と、その前にハッキリさせておかなければならないことがあります。前回の2カラムのときに出てきた「ソリッドレイアウト」なのか「リキッドレイアウト」なのか「エラスティックレイアウト」なのか。今回は…ソリッドレイアウト(一部リキッド)レイアウトでいくことにします。「ソリッドレイアウト」と決めたけれど、やはり文字サイズを大きくしたときの対応はしておきたいので、単位に「em」や「%」を使う箇所もありますが、そのたびに説明していきたいと思います。


コーディングに取り掛かる前に、背景画像などを入れておくimagesディレクトリをcommonやindex.htmlと同じ階層に作っておきましょう。次に、全体に共通する指定をしておきます。

body {
color: #888;
font-family: “Lucida Grande”,’メイリオ’,Meiryo,”Hiragino Kaku Gothic Pro”,”ヒラギノ角ゴ Pro W3″,”MS Pゴシック”,Osaka, sans-serif;
}
hr {
display: none;
}
a {
color: #144701;
text-decoration: none;
}
a:hover {
color: #36bc00;
}

文字色をグレー#888に指定。書体をヒラギノよりもメイリオ優先にしました。リンク文字色を深い緑、マウスオーバーしたときは明るい緑に指定しました。
サンプルページ


では、早速「header」から…といっても要素は<h1>のみですね。

/* ——————–
ヘッダー
——————– */
#header {
background-image: url(../images/bg_header.gif);
padding: 25px 20px;
}
h1 {
font-size: 200%;
}
h1 a {
color: #4d8e00;
}
h1 a:hover {
color: #274700;
}

#headerに背景色(background-color)で指定していたものを背景画像(background-image)の指定に変更しました。backgroundに関するその他の値はすべてデフォルトをしている状態になります。backgroundプロパティのデフォルトの値

  • background-attachment:スクロール
  • background-color:なし
  • background-image:なし
  • background-repeat:縦横繰り返し
  • background-position:中央(左右),中央(上下)

background:○○ …;と一括して上記の指定をすることができますが、colorとimagesの記述の順番に気をつけてください。後に書いたほうが上に重なります。background-positionも左右、上下の順番で書かないと効かないことがありますので注意してください。またデフォルトの値でいい場合は記述を省くことができます。
(例)background: #000 url(../images/bg.gif) no-repeat left top;
図にあるようにheaderの内側に余白がありますので、padding指定をしました。paddingもpadding-top、padding-right…と方向を一つ一つ指定することが可能ですが、paddingでまとめて書くこともできます。

  • padding: 10px;(上下左右に10px)
  • padding: 10px 5px;(上下に10px 左右に5px)
  • padding: 10px 5px 25px;(上に10px 左右に5px 下に25px)
  • padding: 10px 5px 25px 50px;(上に10px 右に5px 下に25px 左に50px)


こうやって覚えるといいかもです。右回りです。この方向はmarginの場合も同じです。

h1の文字サイズを相対的な値で200%(2倍)にしました。ブラウザで文字サイズを大きくしても小さくしてもその基準となる文字サイズの200%であり続けます。pxで指定をするとサイズが固定となり、ブラウザで文字サイズを変更できない場合があります。また、h1の中の<a>とマウスオーバーの際の<a>に文字色の指定をしています。
※h1はコードの中に他に存在しないので「#headerの中のh1」という記述をしていません。特にサイト名をh1とすることがほとんどなので、ひとつのページの中にh1が何度も出てくることはないので(…ないようにしましょう)、素のh1に対してcssの指定をしています。

ヘッダーを装飾したサンプルページ


続いて、コンテンツといいたいのですが簡単なフッターもやってしまいましょう。ヘッダーの時の指定と同じようにフッターにも背景画像の指定、paddingの指定をして、addressは文字色を#333で指定します。

/* ——————–
フッター
——————– */
#footer {
background-image: url(../images/bg_footer.gif);
padding: 8px 20px;
}
address {
color: #333;
}

フッターを装飾したサンプルページ

次回は10月23日(木)に、第5回 コーディングの基礎 「ハックしないCSSとよくあるグローバルナビゲーション」をお届けします。

Comment

本文

このページの先頭へ戻る