文字色・背景に関するプロパティ

ニコニコ大百科:HTMLタグ一覧 スタイルシートプロパティの一覧 文字色・背景に関するプロパティ

文字色・背景に関するプロパティ一覧

• 文字色を指定する（color）
• 背景色を指定する（background-color）
• 背景画像を指定する（background-image）
• 背景画像の繰り返しを指定する（background-repeat）
• 背景画像の表示位置を指定する（background-position）
• 背景画像のスクロール・固定を指定する（background-attachment）
• 背景に関する設定をまとめて行う（background）

クリックするとジャンプします

文字色を指定する

↑

---

プロパティ	適用対象
color	すべての要素

値
色	16進数、カラーネームなどで指定。詳しくはこちら

大百科のデフォルトの文字色は#303030　です。

ソースコード
<p><span style="color:#ff0000;">赤</span><span style="color:blue;">青</span><span style="color:#0f0;">緑</span><span style="color:rgb(255,255,0);">黄</span><span style="color:rgb(100%,0%,100%);">紫</span></p>
表示結果
赤青緑黄紫

背景色を指定する

↑

---

プロパティ	適用対象
background-color	すべての要素

値
transparent	透明。親要素が透けて見える状態。（標準）
色	16進数、カラーネームなどで指定。詳しくはこちら

大百科のデフォルトの背景色は、thで#f1f1f1  、その他でtransparentです。また記事部分全体の背景色は#ffffffです。

特に背景色を指定しない場合、記事部分の背景色である白色が背景色になります。

ソースコード
<div style="background-color:#EEE8AA;"> <p style="background-color:transparent;">背景色を指定する時はなるべく文字色も一緒に指定しましょう。</p> <p style="background-color:sandybrown; color:#ffffff;">背景色を指定する時はなるべく文字色も一緒に指定しましょう。</p> </div>
表示結果
背景色を指定する時はなるべく文字色も一緒に指定しましょう。 背景色を指定する時はなるべく文字色も一緒に指定しましょう。

背景画像を指定する

↑

---

プロパティ	適用対象
background-image	すべての要素

値
none	何も無い状態。（標準）
URL	URLで画像ファイルを指定。大百科で使える画像についてはHTMLのimgタグの項を参照

画像の指定方法は background-image:url('【画像のアドレス】'); です。指定できる画像のアドレスについてはこちら

また大百科のデフォルトの背景画像は、liでhttps://dic.nicovideo.jp/img/li1.gif、blockquoteで/img/quote.gif、h2で/img/disc_l.gif、h3で/img/disc_m.gif、h4で/img/disc_s.gif、h5で/img/disc_ss.gifとなっています。

ソースコード
<div style="background-image:url(/oekaki/174503.png); background-color:#D2B48C; height:100px;"> <p style="color:#000000; text-align:center;">背景画像を指定する時はなるべく背景色・文字色も一緒に指定しましょう。</p> </div> <div style="background-image:url('http://tn-skr.smilevideo.jp/smile?i=9509854'); height:150px;"> <p style="vertical-align:middle; color:#000000; text-align:center;">背景画像を指定する時はなるべく背景色・文字色も一緒に指定しましょう。</p> </div>
表示結果
背景画像を指定する時はなるべく背景色・文字色も一緒に指定しましょう。

背景画像の繰り返しを指定する

↑

---

プロパティ	適用対象
background-repeat	すべての要素

値
repeat	背景画像を敷き詰める（標準）
repeat-x	背景画像を横に繰り返す
repeat-y	背景画像を縦に繰り返す
no-repeat	背景画像を一度だけ表示する

background-repeatプロパティを使用した場合、繰り返しの基準となる位置はその要素の左上となります。開始位置を変更したい場合はbackgroun-positionプロパティを使用してください。

ソースコード
<p style="font-size:12px;">repeat</p> <div style="background-image:url('/oekaki/17909.png'); height:100px; background-color:#FFFFE0; background-repeat:repeat;"></div> <p style="font-size:12px;">repeat-x</p> <div style="background-image:url('/oekaki/17909.png'); height:100px; background-color:#FFFFE0; background-repeat:repeat-x;"></div> <p style="font-size:12px;">repeat-y</p> <div style="background-image:url('/oekaki/17909.png'); height:100px; background-color:#FFFFE0; background-repeat:repeat-y;"></div> <p style="font-size:12px;">no-repeat</p> <div style="background-image:url('/oekaki/17909.png'); height:100px; background-color:#FFFFE0; background-repeat:no-repeat;"></div>
表示結果
repeat repeat-x repeat-y no-repeat

背景画像の表示位置を指定する

↑

---

プロパティ	適用対象
background-position	ブロックレベル要素及びhr、img要素

値
%指定	親要素と背景画像の揃える位置を左右、上下の順に半角スペースで区切って指定。0% 0%は左上。
数値＋単位	左上を基準として、数値に単位を付け、上下の順に半角スペースで区切って指定。単位の詳細はこちら
left、center、right	左、中央、右によせる。（横方向の0%、50%、100%と同じ）
top、center、bottom	上、中央、下によせる。（縦方向の0%、50%、100%と同じ）

%指定を使用した場合、表示領域の%位置と画像の%位置を揃えて画像が表示されます。例えば90% 20%と指定した場合、表示領域と背景画像の左から90%・上から20%の位置同士が揃います。

ソースコード
<div style="background-image:url('/oekaki/141285.png'); height:100px; background-color:#F0E68C; background-repeat:no-repeat; background-position:0% 0%;"><p style="font-size:12px; text-align:right;">0% 0%</p></div> <div style="background-image:url('/oekaki/141285.png'); height:100px; background-color:#F0E68C; background-repeat:no-repeat; background-position:50% 0%;"><p style="font-size:12px; text-align:right;">50% 0%</p></div> <div style="background-image:url('/oekaki/141285.png'); height:100px; background-color:#F0E68C; background-repeat:no-repeat; background-position:50% 50%;"><p style="font-size:12px; text-align:right;">50% 50%</p></div> <div style="background-image:url('/oekaki/141285.png'); height:100px; background-color:#F0E68C; background-repeat:no-repeat; background-position:100% 100%;"><p style="font-size:12px; text-align:right;">100% 100%</p></div> <div style="background-image:url('/oekaki/141285.png'); height:100px; background-color:#F0E68C; background-repeat:no-repeat; background-position:103% 140%;"><p style="font-size:12px; text-align:right;">103% 140%</p></div> <div style="background-image:url('/oekaki/141285.png'); height:100px; background-color:#F0E68C; background-repeat:no-repeat; background-position:0px -20px;"><p style="font-size:12px; text-align:right;">0px -20px</p></div> <div style="background-image:url('/oekaki/141285.png'); height:100px; background-color:#F0E68C; background-repeat:no-repeat; background-position:50px 50px;"><p style="font-size:12px; text-align:right;">50px 50px</p></div> <div style="background-image:url('/oekaki/141285.png'); height:100px; background-color:#F0E68C; background-repeat:no-repeat; background-position:left center;"><p style="font-size:12px; text-align:right;">left center</p></div>
表示結果
0% 0% 50% 0% 50% 50% 100% 100% 103% 140% 0px -20px 50px 50px left center

背景画像のスクロール・固定を指定する

↑

---

プロパティ	適用対象
background-attachment	すべての要素

値
scroll	背景画像も一緒にスクロール（標準）
fixed	背景画像を固定

値にfixedを指定すると、background-positionの基準が親要素ではなく、ウィンドウ全体になります。例えば、垂直に並ぶ画像を右側に配置した場合、それはボックス内の右側に配置されるのではなく、ウィンドウ内の右側に配置されることになります。

環境によって位置が大きくずれる可能性があるので、このプロパティを使用する事はお勧めできません。

ソースコード
<div style="background-color:#f0f0ff; background-image:url('/oekaki/79127.png'); height:400px; background-attachment:fixed; background-position: center center; background-repeat:no-repeat;"></div>
表示結果

背景に関する設定をまとめて行う

↑

---

プロパティ	適用対象
background	すべての要素

値
background-colorの値	背景色を指定
background-imageの値	背景画像を指定
background-repeatの値	背景画像の繰り返しを指定
background-positionの値	背景画像の表示位置を指定
background-attachmentの値	背景画像の固定を指定

backgroundプロパティを使用する事で、上記５つの設定をまとめて行う事が出来ます。それぞれの値は半角スペースで区切って記述します。

記述順は任意で、必須のプロパティの値はありません。よって、それぞれの値は省略する事が出来ます。省略した値はそのプロパティの初期値になります。

ソースコード
<div style="background:url(/oekaki/17443.png) #dddddd no-repeat center center; width:300px; height:150px;"></div>
表示結果

ニコニコ大百科:HTMLタグ一覧

この記事に関するご意見・ご要望は元記事にお願い致します。