トップ > スッキリかんたんスタイルシート


パソコン選びのポイント
WinIE
5.05.56.0
WinNS
4.x6.x7.x
WinOpera
6.07.x8.0
winFirefox
1.x
MacSafari
1.x2.0
MacNs
4.x6.x7.x
MacOpera
6.07.58.0
MacFirefox
1.x
【下記CSSのブラウザ対応】 バージョンがグレーで表示されているブラウザは対応していません。表示は一部対応です。
color 文字の色を指定する

16進数で2桁ずつ指定。 記述例 color:#ff6600

16進数で1桁ずつ指定。 記述例 color:#039

色の名前で指定。 記述例 color:blue

rgbを10進数で指定。 記述例 color:rgb(100,0,50)

rgbを%で指定。 記述例 color:rgb(20%,60%,90%)

>>> HTMLソース
background-color 背景色の指定

h2要素に背景色を指定する。

p要素に背景色を指定。
body要素にも背景色を指定してあります。

>>> HTMLソース
フォームの色と背景色を指定する

メッセージ

>>> HTMLソース
見出しと段落のデザイン

見出しと段落のデザイン

見出しには濃いめの色を背景に指定し、文字を白抜きにする。段落には見出しよりも薄い色を指定する。さらに見出しと段落の上下のマージンを0にして、ボックスの上下をくっつけ、パディングを指定する。

>>> HTMLソース
background-image ページ全体に背景画像を適用する
ページ全体に背景画像を適用



>>> HTMLソース
body要素と見出しの背景に画像。p要素の背景に色。

background-image

背景に画像を指定すると,文章が読みにくくなることがあります。
文字の背景には明るめの画像や色を設定しましょう。
パディングなどを利用するなどして,
文章を読みやすくする工夫が必要です。

>>> HTMLソース
テーブル要素の背景を設定する
ここはthセル 画像を指定
ここはtdセル ここはtdセル
ここはtdセル 色を指定
>>> HTMLソース
WinIE
5.05.56.0
WinNS
4.x6.x7.x
WinOpera
6.07.x8.0
winFirefox
1.x
MacSafari
1.x2.0
MacNs
4.x6.x7.x
MacOpera
6.07.58.0
MacFirefox
1.x
【下記CSSのブラウザ対応】 バージョンがグレーで表示されているブラウザは対応していません。表示は一部対応です。
background-repeat 背景画像を横方向に繰り返す








>>> HTMLソース
背景画像を縦方向に繰り返す








>>> HTMLソース
背景画像を1つだけ表示させる








>>> HTMLソース
WinIE
5.05.56.0
WinNS
4.x6.x7.x
WinOpera
6.07.x8.0
winFirefox
1.x
MacSafari
1.x2.0
MacNs
4.x6.x7.x
MacOpera
6.07.58.0
MacFirefox
1.x
【下記CSSのブラウザ対応】 バージョンがグレーで表示されているブラウザは対応していません。表示は一部対応です。
background-attachment 背景画像を固定する

デジタルハリウッド株式会社

「デジハリ・オンラインスクール」は、IT・デジタルコンテンツ産業で仕事をするために必要なスキルを習得するカリキュラムを、スクールに通うことなく自宅のパソコンとインターネットを使って、リアルタイムに受講することができるオンラインスクールです。

双方向でのやり取りが可能なインターネットによるリアルタイム授業提供の仕組みを最大限に活かし、母体である「デジハリ(デジタルハリウッド)」で培ってきた実績あるカリキュラム、さらにはデジハリの創設以来の理念である「産学協同」のコンセプトに基づく企業とのコネクションを積極的に活かしたカリキュラムを学習することができます。

ITスキルやデジタルコンテンツ制作スキルを身に付けたいと思っていても、近くにスクールがなく、通学にかかる時間や費用が理由で学ぶことができなかった全国の皆様に「デジハリ・オンラインスクール」が新しい学びの場をご提供させていただきます。

>>> HTMLソース
WinIE
5.05.56.0
WinNS
4.x6.x7.x
WinOpera
6.07.x8.0
winFirefox
1.x
MacSafari
1.x2.0
MacNs
4.x6.x7.x
MacOpera
6.07.58.0
MacFirefox
1.x
【下記CSSのブラウザ対応】 バージョンがグレーで表示されているブラウザは対応していません。表示は一部対応です。
background-position 背景画像の位置を指定する

日経BPマーケティング

日経BP社が発行する日経ビジネスや日経パソコンなどの雑誌をはじめ、 「日経BP Biz Board」などのデジタルコンテンツ、さらには日本経済新聞社や他社の出版物、 情報商品などの販売促進を支援するため、 様々なチャネル・手法を駆使して事業を展開する総合マーケティング企業です。

>>> HTMLソース
表示位置を割合で指定する

日経BPマーケティング

日経BP社が発行する日経ビジネスや日経パソコンなどの雑誌をはじめ、 「日経BP Biz Board」などのデジタルコンテンツ、さらには日本経済新聞社や他社の出版物、 情報商品などの販売促進を支援するため、 様々なチャネル・手法を駆使して事業を展開する総合マーケティング企業です。

>>> HTMLソース
表示位置を座標で指定する

日経BPマーケティング

日経BP社が発行する日経ビジネスや日経パソコンなどの雑誌をはじめ、 「日経BP Biz Board」などのデジタルコンテンツ、さらには日本経済新聞社や他社の出版物、 情報商品などの販売促進を支援するため、 様々なチャネル・手法を駆使して事業を展開する総合マーケティング企業です。

>>> HTMLソース
WinIE
5.05.56.0
WinNS
4.x6.x7.x
WinOpera
6.07.x8.0
winFirefox
1.x
MacSafari
1.x2.0
MacNs
4.x6.x7.x
MacOpera
6.07.58.0
MacFirefox
1.x
【下記CSSのブラウザ対応】 バージョンがグレーで表示されているブラウザは対応していません。表示は一部対応です。
background 背景画像を一括指定する(縦に並べる)
body {background-color:#ffffff;
      background-image:url("bg008.gif");
      background-repeat:repeat-y;
      background-position:80%;}

           ↓ 一括指定

body {background:#ffffff url("bg008.gif") repeat-y 80%}
使用画像
>>> HTMLソース
背景画像を一括指定する(横に並べる)
◆一括指定できる値◆

@background-color Abackground-image Bbackground-repeat
Cbackground-attachment Dbackground-position
どれも省略可能。省略した場合は初期値の設定が適用。

使用画像
>>> HTMLソース
「ホームページ」検索 byベクターPCショップ

つくろう!魅せよう! スッキリかんたんスタイルシート〜基本 スッキリかんたんスタイルシート〜文字 スッキリかんたんスタイルシート〜色と背景 スッキリかんたんスタイルシート〜リンク スッキリかんたんスタイルシート〜ボックス スッキリかんたんスタイルシート〜配置 スッキリかんたんスタイルシート〜リスト スッキリかんたんスタイルシート〜表 スッキリかんたんスタイルシート〜いろいろ スッキリかんたんスタイルシート〜HP構成
Copyright(C)1997. itoben style. All Rights Reserved.