-
■背景に関するCSSプロパティ
容量が大きい画像ファイルを背景に指定すると、きれいな画像が表示されますが、Webページを表示するときの動作が遅くなることがあります。 背景画像には「GIF」や「PNG」などの高圧縮画像を指定することをおすすめします。 あまり大きい画像ファイルを背景として指定しない方が無難です。
CSSプロパティ 意味 background：下記参照 背景に関する全てを指定 background-color：color 背景色を指定 background-image：url 背景画像を指定 background-repeat：background-repeat 背景画像の繰り返しを指定 background-attachment：background-attachment 背景画像の固定・移動を指定
■背景に関する全てを指定
backgroundプロパティは、背景に関する指定をまとめて行う際に使用します。 指定の順序は問われません。 また、必要のない指定は省略可能です。
CSSファイル記述例 div#test-background{ background: #000000 url(./flower.gif) repeat fixed; color:red; }HTMLファイル記述例 <div id="test-background">背景に関する全てを指定</div> Webページの表示 背景に関する全てを指定
■背景色を指定
background-colorプロパティは、背景色を指定する際に使用します。 #ffffffなどRGB値で指定、blueなどカラーネームで指定する方法があります。
background-colorプロパティの指定値 transparent 背景色を透明にします。これが初期値です。 RGB値で指定 #000000〜#ffffff カラーネームで指定 black、white、red、yellow、blue、greenなど CSSファイル記述例 div#test-background-color{ background-color:#ffccff; }HTMLファイル記述例 <div id="test-background-color">背景色を指定</div> Webページの表示 背景色を指定
■背景画像を指定
background-imageプロパティは、背景画像を指定する際に使用します。 背景画像はURLで指定します。 外部CSSファイルに記述している場合には、HTMLファイルから見た相対パスではなく、外部CSSファイルからの相対パスで指定する必要があります。
background-imageプロパティの指定値 none 背景に画像ファイルを使用しないことを明示します。これが初期値です。 URLで指定 URLで背景として表示する画像ファイルを指定します。 CSSファイル記述例 div#test-background-image{ background-image:url(./flower.gif); color:red; }HTMLファイル記述例 <div id="test-background-image">背景画像を指定</div> Webページの表示 背景画像を指定
■背景画像の繰り返しを指定
background-repeatプロパティは、背景画像のリピートの仕方を指定する際に使用します。
background-repeatプロパティの指定値 repeat 縦横に背景画像を繰り返して表示します。これが初期値です。 repeat-x 横方向にのみ背景画像を繰り返して表示します。 repeat-y 縦方向にのみ背景画像を繰り返して表示します。 no-repeat 背景画像を一回だけ表示して繰り返しません。 CSSファイル記述例 div#test-background-repeat{ background-repeat:no-repeat; background-image:url(./flower.gif); color:red; }HTMLファイル記述例 <div id="test-background-repeat">背景画像の繰り返しを指定</div> Webページの表示 背景画像の繰り返しを指定
■背景画像の固定・移動を指定
background-attachmentプロパティは、画面をスクロールする際、背景画像をその位置に固定されたままにするか、スクロールに伴って移動するかどうかを指定します。 Webサイトの壁紙以外に設定しても無意味なプロパティです。
background-attachmentプロパティの指定値 scroll スクロールに伴って、背景画像も移動します。これが初期値です。 fixed 背景画像の位置が固定され、スクロールしても動かなくなります。 CSSファイル記述例 div#test-background-attachment{ background-attachment:fixed; background-image:url(./flower.gif); color:red; }HTMLファイル記述例 <div id="test-background-attachment">背景画像の固定・移動を指定</div> Webページの表示 背景画像の固定・移動を指定
トップページ » スタイルシート入門講座 » CSSで背景色と背景画像を設定して表示する方法
-
-
- フェイスブック 若き天才の野望
- 発売：2011/01/13
- 定価：1,890円
- 著者：デビッド・カークパトリック
- 出版：日経BP社
内容：ユーザー数が5億人を超え、会社の時価総額が2兆円を超え、グーグルを驚かす存在となった、フェイスブック。同社を率いるマスコミ嫌いのCEO、マーク・ザッカーバーグからの信頼を勝ち得たベテラン記者が、徹底取材からフェイスブックの真実を初めて明かします。 - フェイスブック 若き天才の野望
-
- できるホームページ HTML&CSS入門
- 発売：2010/12/24
- 定価：1,659円
- 著者：佐藤 和人
- 出版：インプレスジャパン
内容：オールカラーの大きな画面で操作手順がよく見える初心者向けの書籍です。HTMLタグやスタイルシートの入力手順を丁寧に解説してます。手順の横にヒントも掲載されており、関連知識も身に付きます。ホームページやHTMLの用語集も付属してます。 - できるホームページ HTML&CSS入門
-
- ネットではじめる！輸出ビジネス
- 発売：2010/08/21
- 定価：1,575円
- 著者：陳 立浩
- 出版：すばる舎
内容：売れる商材の特徴、言葉の壁の乗り越え方、ネット輸出会社の作り方、効果抜群の広告宣伝のコツやクレームへの対処法まで、この1冊で新たなビジネスモデルが見えてきます。 - ネットではじめる！輸出ビジネス
-
- Webサイト制作・運営に役立つ! ホームページ担当者が最初に覚える100の基本
- 発売：2010/06/05
- 定価：1,575円
- 著者：服部 洋二
- 出版：ソーテック社
内容：初心者向けの書籍です。中小企業のWebサイトに携わる方向けの書籍ですので、個人のウェブサイトにも適用しやすい内容となっています。 - Webサイト制作・運営に役立つ! ホームページ担当者が最初に覚える100の基本
-
- Webデザインの基本ルール
- 発売：2009/03/27
- 定価：1,890円
- 著者：デザインラボ編集部
- 出版：ソフトバンククリエイティブ
内容：色の力を最大限に活かす配色の基本とベースカラー別配色パターン集、XHTMLとCSSでデザインをカタチにするWeb制作技術の概要と基本、Web標準、SEO、ユーザビリティ、アクセシビリティの考え方など。 - Webデザインの基本ルール
-
- HTML/XHTML&スタイルシートレッスンブック
- 発売：2007/06/20
- 定価：2,604円
- 著者：エビスコム
- 出版：ソシム
内容：初心者の方におすすめしたい参考書籍です。 HTMLやCSSに関しても基礎的なことを、丁寧にとても分かりやすく説明してます。 Webページを作成する過程が、段階的に解説されているため、無理なくHTMLとCSSを習得できます。 - HTML/XHTML&スタイルシートレッスンブック
-
-
-
発売日：2010/09/30参考価格：6,000円分類：ペンタブレットブランド：ワコムパソコンで、手書き文字やイラストを描くことを可能にするペンタブレットです。ドキュメントにコメントやイラストを書き込んだり、お絵描き掲示板に投稿したり、もちろんマウス代わりにも使えます。 -
発売日：2009/05/29参考価格：7,980円分類：画像編集ソフトブランド：セルシス快適に絵を描くことにこだわった基本性能、表現の幅を広げる多彩なツール、「作業」を減らす効率的な機能、イラストを描くユーザー全てのニーズにこたえるペイントツールです。 -
発売日：2010/12/03参考価格：18,800円分類：ホームページ作成ソフトブランド：ジャストシステムバリューパックは、「ホームページ・ビルダー15」、フルCSSテンプレート「フルCSSプロフェッショナルテンプレート 増強パック」、Webデザインテンプレート「＠rt Web select pack for ホームページ・ビルダー15」、ガイドブック『できる ホームページ・ビルダー15[特別版]』、Flash作成ソフト「かんたんWebアニメーション2」、Webデザイン素材集 「DDN Web素材集」が入った、便利でお得なセットです。 -
発売日：2010/05/28参考価格：49,875円分類：ホームページ作成ソフトブランド：アドビシステムズ主要なWebテクノロジーのサポートに加え、コンテンツ管理システム(CMS)との連携が強化されています。また、CSSサポートをはじめとする数多くの機能拡張により、Webデザイン・開発をいっそう効率化できます。プロのデザイナーも利用している、中級者以上に適したソフトです。 -
発売日：2004/04/07参考価格：8,400円分類：ホームページ素材ブランド：データクラフト素材集のベストセラー「素材辞典シリーズ」から、高品位な写真20000点を厳選収録した著作権フリーの素材集です。カードや名刺などの印刷物、ラフカンプ作成、Webデザインなどに幅広くご利用できます。ITビジネス・自然・食・人物・季節のイベントなど多彩なテーマが、640×480Pixel、JPEG 72dpi形式で収録されています。 -
発売日：2009/10/16参考価格：8,400円分類：ホームページ素材ブランド：データクラフト「素材辞典フォトバイブル Vol.2」はロイヤリティフリー・デジタルフォトコレクション「素材辞典」シリーズVol.101からVol.150までの画像1万点が 640×480Pixelで収録されています。Webデザイン、チラシ、POP、ポストカード、企画書やプレゼンテーションなど幅広く活用できます。
発売日：2010/01/15参考価格：13,300円分類：ペンタブレットブランド：ワコムマンガ製作からお絵描き、イラストや写真加工などが楽しめます。タッチ入力機能で直感的なPC操作を実現、便利なアプリケーションソフトも付属してます。 -
