Tweet

背景・インターフェイス周りのCSSプロパティ、11連発

使いこなしてデザインの幅を広げよう！

　無数にあるCSS/スタイルシート プロパティを大まかに分類し、分類したプロパティを1つずつ紹介していく本連載。第2回は、背景・インターフェイス周りのプロパティを11個紹介します。

　本企画で対象とするバージョンは現在多く使われている、CSS 2.1とします。CSS/スタイルシートの基本的な使い方に関しては、下記連載をご参照ください。

いまさら聞けないCSS／スタイルシート入門 Webデザインにあると便利なCSS。ちょっとサイトをステキにするためのスタイルシートです。基本の基本を学びませんか？ 「デザインハック」コーナー

　また本企画では、プロパティの参照方法のコードを、標準JavaScriptによるDOMでの参照方法に加え、jQueryのセレクタを使った参照方法も掲載してます。jQueryと、そのセレクタについては、下記記事をご参照ください。

jQuery、プラグイン、jQuery UI、Web経由のCDNとは CSSの書き方も分かるjQueryプラグイン実践活用法（1）　基本／おさらいとしてプラグインやjQuery UIについて簡単に触れ、Web経由でjQueryを使うCDNについて解説 デザインハック ＜ リッチクライアント 2009/12/8

backgroundプロパティ

　背景にかかわるプロパティをまとめて指定できます。具体的に可能なプロパティを挙げると「background-color」「background-image」「background-position」「background-repeat」「background-attachment」です。

詳しくはコチラ　background 背景周りの指定をまとめるbackgroundプロパティ

background-colorプロパティ

　背景に色を指定する際に使います。16進法のRGB値を使って指定することがほとんどです。そのほかに、決められた色名（red）などで指定することも可能ですが、自由度が低くおすすめできません。

詳しくはコチラ　background-color 背景に色を指定するbackground-colorプロパティ

background-imageプロパティ

　背景に画像を指定できます。背景に画像を使用することで、デザインの幅が広がり、background-colorプロパティのみではできなかった表現が可能になります。

詳しくはコチラ　background-image 背景に画像を指定するbackground-imageプロパティ

background-positionプロパティ

　背景画像を、どの場所から表示するかを指定できます。背景画像を指定している要素の左上が基準点となり、「10px 15px」「50% 25%」などと記述することで、基準点からそれだけ離れた位置に画像を表示させます。これを記述する順序は「左からの距離 上からの距離」の順です。

詳しくはコチラ　background-position 背景画像を、どの場所から表示するかを指定するbackground-positionプロパティ

background-repeatプロパティ

　背景画像の繰り返し方法を指定できます。HTMLの<img>要素と違い、背景画像として指定しているので、デフォルトでは縦横方向に敷き詰める形で表示されます。

詳しくはコチラ　background-repeat 背景画像の繰り返し方法を指定するbackground-repeatプロパティ

background-attachmentプロパティ

　背景画像を固定する際に使用します。通常、画面をスクロールさせても背景画像も一緒に動きますが、「fixed」という値を指定すると、画面をスクロールさせても背景画像が固定され動かない状態になります。

詳しくはコチラ　background-attachment 背景画像を固定するbackground-attachmentプロパティ

cursorプロパティ

　マウスカーソルの形を変更できます。指定した要素にマウスカーソルが入ると、変更した形状で表示されます。

詳しくはコチラ　cursor マウスカーソルの形を変更できるcursorプロパティ

outlineプロパティ

　アウトラインにかかわるプロパティをまとめて指定できます。具体的に可能なプロパティを挙げると「outline-color」「outline-style」「outline-width」です。

詳しくはコチラ　outline アウトライン周りの指定をまとめるoutlineプロパティ

outline-colorプロパティ

　アウトラインの色を指定する際に使用します。アウトラインはborderプロパティと違い、要素の大きさなどの影響を受けないので、ほかの要素と重なってしまうことがあり得ます。このため、デフォルトの値が「invert（反転させた色）」となっています。これにより、確実に表示されるようになります。

詳しくはコチラ　outline-color アウトラインの色を指定するoutline-colorプロパティ

outline-styleプロパティ

　アウトラインの種類を指定する際に使用します。使用できる値はborderプロパティで使用できるものと同じですが、hiddenがないのが違いです。

詳しくはコチラ　outline-style アウトラインの種類を指定するoutline-styleプロパティ

outline-widthプロパティ

　アウトラインの幅を指定する際に使用します。使用できる値は、borderプロパティで使用できるものと同じです。また、borderプロパティには上下左右に別々のサイズを指定可能ですが、outlineプロパティでは別々には指定できません。

詳しくはコチラ　outline-width アウトラインの幅を指定するoutline-widthプロパティ

【関連記事】

Webブラウザ別CSSハック＆フィルタTips Webブラウザの違いにより起こるレイアウトの表示ずれ問題に泣かされるWebデザイナのために、Webブラウザごとに使えるかどうかの表を交えながら問題を解決するためのさまざまなCSSハック＆フィルタTipsをお届けします 「デザインハック」コーナー

D89 Web標準HTMLタグリファレンス Web標準に基づいたXHTMLタグの正しいマークアップ方法のリファレンス一覧です。Web標準のタグリファレンスを7回連載でおさらいします 「デザインハック」コーナー

WebデザイナのためのHTMLチューニング入門 Webサイトを見た人の印象を良くするのか悪くするのかには“速度”が大きくかかわってきます。FirefoxのプラグインYSlowで測る7つの計測ポイントから“速い” HTMLの書き方を学びましょう 「デザインハック」コーナー

喜安 亮介……1980年愛媛県生まれ。タグパンダの代表取締役。ディレクター兼デザイナーとしてWeb制作案件に携わる。社名のパンダは、「白・黒はっきりした正しい判断力と柔軟性のあるクリエイティブな発想」を提供するという思いから。

「デザインハック」コーナーへ

＠ITメールマガジン　新着情報やスタッフのコラムがメールで届きます（無料）

RSSフィード