テーブル内の背景位置を指定する | 四つ葉のクローバー

100万ポイント山分け！1日5回検索で1ポイントもらえる

843320

HOME | DIARY | PROFILE

【フォローする】【ログイン】

はじめにお読み下さい

< 新しい記事

新着記事一覧(全2405件)

過去の記事 >

November 23, 2004

久しぶりのシリーズ更新です。

今日は，テーブル内背景の位置指定を取り上げます。

background-repeat:繰り返し方; background-position:位置;
このタグを，スタイルシートの中に入れます。

ついでに，スタイルシートを使う時の，背景の入れ方は，HTMLタグの時と微妙に違って，次のようになります。

＜p style="background: url(http://---ここに画像のURL---.jpg)"＞～＜/p＞

(このスタイルシート内の＜ｐ＞～＜/ｐ＞については別の機会に取り上げますm(__)m)

繰り返し方には，次の4種類があります。

（1） repeat 通常の繰り返し（上下左右全面的に繰り返し）

（2） repeat-x 　　横方向のみの繰り返し

（3） repeat-y 　　縦方向のみの繰り返し

（4） no-repeat 　繰り返し無し（一箇所に固定したい時）

background-repeat 指定なし
これだと全面に繰り返されます。

background-repeat:repeat-x;
横方向の繰り返し
位置の指定がないと上部で繰り返します。

background-repeat:repeat-ｙ;
縦方向の繰り返し
位置の指定がないと左に繰り返します。

位置には，指定の仕方が三種類あります。
「位置を表すキーワードを使う方法」と「距離を比率（％）で指定する方法」と「距離をpx数などで指定する方法」です。

一番わかりやすいのは，「位置を表すキーワードを使う方法」です。
（「距離を比率（％）で指定する方法」と「距離をpx数などで指定する方法」については，また別の機会に取り上げます。）

キーワードには次の5種類があります。

（1） left

左

（2） center

中央

（3） right

右

（4） top

上

（5） bottom

下

実際の入れ方：
background-position: bottom

このうち，左右と上下の指定を二つ組み合わせることで，更に細かく指定ができます。
二つ並べる時は，間に半角スペースを入れます。

background-position: right bottom;
↓
これで，「右下」を指定できます。

同じように， left bottom や right top など組み合わせて使えます。

このようにして，繰り返し無しで一箇所に固定したい場合は，
background-repeat:no-repeat と一緒に入れます。

＜p style="background: url(http://---ここに画像のURL---.jpg)" background-repeat:no-repeat;background-position:right bottom;＞～＜/p＞

background-repeat:no-repeat;background-position:right bottom
右下に繰り返し無しで固定。

repeat-x と repeat-ｙ
の
x は・・・ x-axis 「X軸・横軸」
ｙは・・・ ｙ-axis 「Y軸・縦軸」

repeat 本来の意味：
[他動詞]～を繰り返す，復唱する，～を（他人に）伝える，
　　　　　再び経験する再放送する

[自動詞]繰り返す，再び起こる，後味が残る，
　　　　　（同じ模様などが）反復・連続して使用される
　　　　　二重投票する，連勝する

[可算名詞]繰り返し，反復，再発，再放送，反復記号，循環模様

repeat を使った例文：
・Could you repeat that, please?
　( もう一度繰り返してもらえますか？)

・Do not repeat the same mistake.
(同じ失敗を繰り返すな)

・I don't like leeks because they repeat on me.
(ニラは後味が残るので好きではありません)

・We don't want a repeat of last year's failure.
(私たちは去年の失敗を繰り返したくありません)

・He repeated a course.
(彼は留年した)

お気に入りの記事を「いいね！」で応援しよう