螺旋デザイン｜はじめてのCSS　デザイン通りに組む！　～背景画像～

はじめてのCSS：やさしさいっぱいのCSSが肌にしみこむ！カモ。

デザイン通りに組む！　～背景画像～

2008/08/11

トモ・リーン: CSSでとっても大事な背景画像の解説しま〜っす！

ケンジ: おう〜〜〜！
分かりそうな気もするけど聞いとくぜ。

トモ・リーン: そうね、今回はこのデザインのバックの設定をするわ！

図：今回の作業箇所

ケンジ: こんな感じで組もうと思うけど、どう？？
↓↓↓

図：ケンジの組案

トモ・リーン: う〜ん、「div id="page"」と「div id="shadow"」は要らないわね。
それよりこっちの方がいいわよ。
↓↓↓

トモ・リーンの組案

ケンジ: ええ？HTML要素に背景付けちゃうんだ〜〜〜！
ちょっと気持ち悪いけど、やってみるぜ。

付けてみた実際のファイル【HTML】付けてみた実際のファイル【CSS】

トモ・リーン: うふうふ。
影の背景がずれてるわね！！

図：ずれてしまった背景と影

ケンジ: うぐうぅぅう。
画像をずらして書き出し直すよ・・・！

トモ・リーン: そんなに面倒な事をしなくても大丈夫！
この場合はhtml要素の背景画像の開始位置をずらすのよ。


CSSファイル

html {

background-image: url(img/back.gif);/*★file14：背景画像の指定★*/

background-position: 2px top;

}


/* 以下省略 */

ずらしてみた実際のファイル【HTML】ずらしてみた実際のファイル【CSS】

ケンジ: お〜〜！
ぴったり合ってるよ！！

トモ・リーン: うふふ！

今回のポイント！

「html」にも背景設定ができる
数値・ポジションなどで表示位置を微調整できる
縦、または横方向のみに繰り返す、と言った指定が可能

次の記事を見る

前の記事を見る

トラックバック(0): このブログ記事を参照しているブログ一覧：デザイン通りに組む！　～背景画像～

このブログ記事に対するトラックバックURL: http://www.rasen-d.net/z/mt/mt-tb.cgi/95

コメントする

オススメ本: HTMLタグ+スタイルシート辞典ちび
基礎はもちろんCSSの記述に必要なことも載っているのでオススメ！; 現場のプロから学ぶXHTML+CSS
実際のXHTML+CSSの作業について学びたい方にオススメ！

オススメCSSのサイト: TAG index
ものすごく使いやすいHTML & CSSのリファレンスサイト; CSSフリーライブラリー
色々なテーマごとにCSSの情報が集まっています！

オススメ勉強会: CSS Nite
お気軽な無料の会（主にアップルストアで）から、本格的な有料セミナーまで楽しい勉強会を開催してくれます。; Re:Creator’s Kansai（リクリ）
関西のクリエイターの交流、勉強会・セミナーの開催を目的としたコミュニティです。

螺旋デザインメンバーも執筆に参加！: XHTML+CSS プロが教える“本当の使い方”
現場で培われたXHTML+CSSのテクニックを徹底解説!!

話題のiPhoneアプリ: 大藤幹のHYML/XHTML辞典
HTML5に対してもアップデート対応するらしいですよ！これで重い辞書とはおさらば♪; myPANTONE
色辞典です。サイトの色のイメージをクライアントと打ち合わせするときに、これを使ったらカッコ良すぎて話しがまとまりやすくなるかも！

Amazon.co.jp ウィジェット