スタイルシート(CSS) background-attachment

background-attachmentは、背景画像が他のコンテンツと共にスクロールするか、あるいは固定するかを指定をするプロパティです。

ブラウザーのウィンドウ内が基準となるためスクロールバーが出るほどの内容があるページで指定しないと意味がありません。

background-attachment: 値;
値には次のようなキーワードが入ります。

fixed: 背景画像の固定でスクロールしても画像はその位置から動きません。
scroll: これが初期値で背景画像は他のコンテンツと共にスクロールするために、スクロールすると画像は見えなくなります。

※補足するとブラウザーのウィンドウ(ブラウザーで見えている部分)を基準にして、そのブラウザーで見えている部分に画像を固定(fixed)するか、ブラウザーで見えている部分で画像がスクロール(scroll)するかが決まっています。

実際に適用したらどうなるかは、下記のページで確認して下さい。
固定した場合 background-attachment:fiexd;
スクロールした場合(初期値) background-attachment:scroll;

スタイルシート(CSS) background-position

今回はbackground-positionプロパティの解説です。
background-positionプロパティは、指定した背景画像の表示位置を指定するのに使用します。

background-position: 値;

値には「表示位置」を左上角を起点にした横位置と縦位置を%か単位付きの数値、あるいはキーワードで指定します。

pxなどの単位付きの数値で指定する場合は、画面の解像度に依存するので必ず全て同じように表示されるわけでないことを考慮しましょう。ちなみにマイナスでの指定も出来ます。
上記のことからbackground-positionの値は、%で指定した方が間違いないでしょう。
キーワードは以下のような値を指定します。
キーワード: left right center top bottom

次のように間に半角スペースを入れ横位置と縦位置の順に指定します。
値に一つしか指定しなかった場合は、横位置だけ指定したことになり縦位置は「50%」を指定したことになります。
background-position: 横位置 縦位置;

また、キーワードで指定したときは「left」「top」は「0%」、「center」は「50%」、「right」「bottom」は「100%」を指定したのと同じになります。
値を一つしか指定しなかったときは、片方が「center」を指定したのと同じになります。


それでは300×300のボックスに下のような50×50の画像を背景画像に指定し、background-repeatでno-repeatを指定した上で、background-positionを指定します。。
背景画像



「background-position:50% 50%;」を指定。



「background-position:100% 100%;」を指定



「background-position:50% 100%;」を指定



「background-position:50% 100%;」を指定


上のようなボックスの中で指定すると解りませんが、background-positionを「body」に指定するとブラウザを大きくしたり小さくしたりすることで、表示位置が変ることを覚えておきましょう。

スタイルシート(CSS) background-repeat

前回のbackground-imageでは、背景画像の指定をやりました。
今回はcolorimageに続くbackgroundプロパティの解説です。
今回のbackground-repeatプロパティは、背景画像を指定しているときに、表示の仕方を指定するのに使用します。

background-repeat: 値;

値には次のような「表示の仕方」を指定します。
repeat: 繰返し表示する。初期値
repeat-x: 横方向だけ繰返し表示
repeat-y: 縦方向に繰返し表
no-repeat: 繰り返さずに1度だけ表示

それでは300×300のボックスに下のような50×50の画像を背景画像として表示してみましょう。
背景画像


背景画像に「background-repeat:repeat;」を指定。または指定しなくてもこのように表示されます。



背景画像に「background-repeat:repeat-x;」を指定



背景画像に「background-repeat:repeat-y;」を指定



背景画像に「background-repeat:no-repeat;」を指定


background-repeatプロパティは、背景にbackground-imageで指定した画像にのみ適用されるので、background-repeatとbackground-imageは対で使用することになります。
まとめて指定することも出来ますが、それは次回以降で解説します。

スタイルシート(CSS) background-image

前回のbackground-colorでは、背景色の指定をやりました。
今度は背景に画像を表示してみましょう。

background-image: url(画像の保存先URL);

括弧内の「画像の保存先URL」は画像を保存した場所によって変ります。
ただスタイルシートを外部(別ホルダー)に保存した場合はそのスタイルシートの位置が基準になるので注意が必要です。
※解らない方はHTML 画像の配置 img要素などを参考にして下さい。

それでは300×300のボックスに下のような100×100の画像を背景画像として表示してみましょう。
カモフラージュ


背景に「background-image:url(http://img-cdn.jg.jugem.jp/272/1474973/20091013_1058327.gif);」と指定すると全体に表示されます


背景に「background-image:url(images/camo01.gif);」と指定すると上のように全体に指定画像が表示されます。

background-imageの指定は、前回の「background-color」で示したようなHTMLのタグに使用することが出来ます。
ただし画像の色と文字の色に注意しないと、文字が読みづらくなるので注意が必要です。

スタイルシート(CSS) background-color

背景色を指定するには「background-color」プロパティを使用します。

background-color: 色指定;

色指定の値には「スタイルシート(CSS) 色の指定 color」で解説した値が使用できます。

「background-color」プロパティは、いろんなHTML要素の背景色の指定に使用できます。

例えば、div要素、h1などの見出し要素、p要素、table要素、body要素などの背景色を指定することが出来ます。

■h1要素に適用した場合

スタイルシート(CSS) background-color



■p要素に適用

・「#RRGGBB」のようにRGBを16進数で指定する。
#記号に続き、
R(赤)R(赤)G(緑)G(緑)B(青)B(青)
のようにRGBの各値を2桁ずつ16進数で指定します。



■table、td、tr要素に適用
td要素に背景色適用したセルtd要素の背景色指定なしtd要素の背景色指定なし
tr要素に背景色適用したセルtr要素に背景色適用したセルtr要素に背景色適用したセル


■div要素に適用
・「#RRGGBB」のようにRGBを16進数で指定する。
#記号に続き、
R(赤)R(赤)G(緑)G(緑)B(青)B(青)
のようにRGBの各値を2桁ずつ16進数で指定します。


このように「background-color」で指定した色に背景色を変えることが出来ます。
ちなみに背景色を指定しない場合は、ブラウザのデフォルト背景色で白になると考えて良いでしょう。
また文字(フォント)の色はcolorプロパティで指定するので間違えないようにして下さい。

スタイルシート(CSS) text-transform

文字(アルファベット)の表示に関するプロパティ。
指定した文字列全体を大文字や小文字、あるいは単語単位で先頭の文字だけを大文字で表示します。

text-transform: 値;

値には次のようなキーワードを指定します。
uppercase = 全ての文字列を大文字で表示。
lowercase = 全ての文字列を小文字で表示。
capitalize = 各単語の頭文字だけを大文字で表示。

■オリジナル例文:
「Yesterday all my troubles seemed so far away
Now it looks as though they're here to stay
Oh I believe in yesterday」

■例1:
例文に「text-transform: uppercase;」を指定した場合。

Yesterday all my troubles seemed so far away
Now it looks as though they're here to stay
Oh I believe in yesterday


■例2:
例文に「text-transform: lowercase;」を指定した場合。

Yesterday all my troubles seemed so far away
Now it looks as though they're here to stay
Oh I believe in yesterday


■例3:
例文に「text-transform: capitalize;」を指定した場合。

Yesterday all my troubles seemed so far away
Now it looks as though they're here to stay
Oh I believe in yesterday


例のように指定範囲のアルファベットは変化しますが、日本語に指定しても何ら変わりはありません。

「text-transform: uppercase;」は、タイトルや題名に使うと便利なのでたまに使用します。

スタイルシート(CSS) text-indent

text-indentプロパティは、先頭行のテキストをインデントします。
ただし指定するテキストはブロックレベル要素に含まれている必要があります。

text-indent:値;

値にはpx、em等単位つきの数字で指定します。値にはマイナスも指定できます。

インデント指定なし

10pxインデント指定

-10pxインデント指定

5emインデント指定


text-indentは、インデントするだけではなく先頭に画像を表示するときなどに使うと便利なプロパティです。

スタイルシート(CSS) vertical-align

vertical-alignプロパティは、インライン要素の縦方向の位置を指定します。

これは文字を含むインライン要素が、その行の中で縦方向のどの位置に表示するかを指定します。

vertical-align: 位置;

位置には次のような値が使用できます。
top: 指定したインライン要素の上部を行の上に合わせる。

middle: 指定したインライン要素の中心を行の中心に合わせる。

bottom: 指定したインライン要素の下部を行の下に合わせる。

baseline: 初期値(ベースラインに合わせる)

text-top: 指定したインライン要素の上部を行内のテキストの上に合わせる。

text-bottom: 指定したインライン要素の下部を行内のテキストの下に合わせる。

super: 指定したインライン要素のベースラインを行の上付き文字に合わせる。

sub: 指定したインライン要素のベースラインを行の下付き文字に合わせる。

単位付きの数値: 指定したインライン要素のベースライン(初期値)を0として+-の数値で指定する。

テーブル内で使用すると次のように表示されます。
vertical-align:top;vertical-align:middle;vertical-align:bottom;

スタイルシート(CSS) font プロパティ

fontプロパティは、フォント関係のスタイルをまとめて設定することが出来ます。

font: スタイル 太さ サイズ/行間 フォント名;

上記のようにfontプロパティの値には、「スタイル」「太さ」「サイズ」「行間」「フォント名」をまとめて指定することが出来ます。
それぞれ指定出来る値は、これまで説明したとおりです。
詳細は、それぞれのリンク先を参照して下さい。

注意が必要なのが、それぞれの値の間は半角スペースで区切ります。
しかし、サイズと行間の間だけは「/」で区切ります。

fontプロパティの値は省略することが出来ますが、サイズとフォント名は省略できません。

スタイルシート(CSS) letter-spacing

文字の間隔を調整するには「letter-spacing」を使います。

letter-spacing: 文字間隔;

文字間隔には次の値が使用できます。

normal: デフォルト(標準)の値です。

単位付き数値: px、emなど数値で指定します。
標準の間隔が基準となります。マイナスの数値も指定できます。


letter-spacingを適用すると次のようになります。

文字間隔標準

文字間隔10px

文字間隔2em

文字間隔-3px(文字間隔-3px)

文字間隔-0.5em(文字間隔-0.5em)

Recent Comments

Recent Trackbacks