HOME»  » TOP  » RSS  » ADMIN

category

  • [BYJ]情報(204)
  • [BYJ]家族の想い(10)
  • [BYJ]動画(18)
  • [BYJ]Artwork(0)
  • [好き]音楽(19)
  • [好き]BOOK(5)
  • [好き]映画/ドラマ(9)
  • [好き]未分類(7)
  • [3D]動画(23)
  • [3D]画像(3)
  • [3D]日々徒然(148)
  • [3D]覚書(10)
  • [3D]お気にソフト(1)
  • [3D]情報(3)
  • [3D]未分類(49)
  • [情報]孫ブロ(21)
  • [情報]韓国(11)
  • [情報]PC関連(59)
  • [情報]サイト関連(11)
  • [情報]ソフト関連(2)
  • [情報]動画(12)
  • [情報]音楽(4)
  • [情報]画像(5)
  • [情報]カメラ(3)
  • [情報]未分類(24)
  • [情報]電子マネー(1)

クリック募金

Sponsored Link

dot1 dot1

listスポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
スポンサー広告--.--(--)--:--|コメント(-)|トラックバック(-)|Top↑
dot1 dot1

#104 

こんにちは
手直し??
横文字苦手な``r(^^;)のために追加解説ですね。うれしい♪
でも大変そうm(_ _)mカムサムミダ
いろんな可能性がこの中には埋もれているんですものね。
がんばって3D様
( ・_・)ノ☆(*_ _)バシィ!!オモエモナッ…はい!!
2005.06.23(Thu)15:26|さかぼう編集Top↑

#103 ここでも、こんち

RUCHANさん、さかぼうさん、こんち^^。
ここももう少し手直しをしたいんだ。頑張る。ここでも宜しく。
2005.06.23(Thu)12:25|3D編集Top↑

#101 よろしくお願いします♪

スタイルシートの文字に惹かれてここに書き込みさせてもらっちゃいます。

こんな風にしたいを形に出来たらほんとうに素敵ですね。
どうか勉強させてください。
2005.06.22(Wed)11:48|さかぼう編集Top↑

#100 いつもありがとうございます♪

3Dさん、いつも勉強させてもらってます♪本当にありがとうございます^^
がんばって自分のHPを作りたいと思ってます。いつか、こちらのようなステキなHPができたらなぁ・・・って、努力あるのみですね!!!
がんばります^^
2005.06.22(Wed)09:55|RUCHAN編集Top↑

コメント投稿フォーム

本文:


名前:

件名:

BLOG/HP:

PASS:

SECRET:

[非公開コメントにしたい場合はBOXにチェックをして下さい] 

dot1 dot1
dot1 dot1

listスタイルシート

・透過する
<*STYLE> body { background-image:url(写真URL ); background-attachment: fixed; background-repeat: no-repeat; background-position: 100% 100%; } table { background-color: transparent; } td { background-color:transparent ; } <*/STYLE>




<*STYLE>で始まり <*/STYLE>のように、 / を付けて、終わる定義は今までと変わりません。
では、その間に入るTAGはどのようなものかというと、bodyTAG と tableTAG に分かれます。
bodyTAGは、ここで言えば、カキコの外側の領域(背景)を指定するTAGです。
tableTAGは、ここでは、カキコテーブルの指定をするTAGです。

まず、bodyTAGから。
{   } で囲うこと。
では、その中味。




background-image:url( 写真のURL);

▼背景画像を指定(background-image)
・ 背景画像を指定する属性(none/すべて/しない)
・「url()」のカッコの中に背景画像のURLを指定します
・外部ファイル(.css)に記述する場合はそのファイルからのURLで指定します
・文字や段落ごとに背景画像を変えることも可能です

「background-image:url(@@);」
( )内に画像のURL(相対パス)を指定

htmlではこれはできません



 
background-attachment: fixed;

↑はその写真をどう処理するかという指示です。固定するか?それとも一緒にスクロールさせるか?を指定します。

ここでは、固定しています。

▼背景を固定する(background-attachment)
・スクロールによって背景画像を移動させるか固定させるかを設定する属性 (scroll/すべて/しない)
・IEのみで有効な属性です


「background-attachment:@@;」
fixed 画面をスクロールさせても背景は移動しない
scroll 画面をスクロールさせると同時に背景も移動する(初期値)




background-repeat: yes-repeat;

▼画像の貼りこむ方法の調整(background-repeat)
・背景画像の貼りこむ方法を調整する属性 (repeat/すべて/しない)
・背景は普通画面いっぱいに繰り返して敷き詰められますが、それを調整することができます

「background-repeat:@@;」
repeat 画面いっぱいに繰り返して敷き詰める(初期値)
repeat-x 横方向だけに画像を敷き詰める
repeat-y 縦方向だけに画像を敷き詰める
no-repeat 繰り返さずに一枚だけ配置




●①background-position: up;

背景画像の位置を決めます

up     上に置きます

center  真ん中に置きます

bottom   下に置きます



●②background-position: position position

背景の横方向の位置を left(左端)、center(中央)、right(右端)または 50% のような割合で指定し、

縦方向の位置を top(上端)、center(中央)、bottom(下端)または 50% のような割合で指定します。

fixed と共に指定することにより、背景画像の表示位置を指定することができます。

下記の例では、背景画像を中央にひとつだけ表示します。


BODY {
background-image: url(image/back.gif);
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
}




ここでは、出てきていませんが、写真を使わない場合は、色の指定が出来ます。
このTAGをbodyに追加します。(必ず、 ;  で始まり : で終わること)

▼背景の色を指定(background-color)
・背景の色を指定する属性 (transparent/すべて/しない)
・文字や段落ごとに背景色を変えることも可能です

「background-color:@@;」
#RGB、rgb()、キーワード、いずれの指定でも可
transparent 透明色 (NNは未対応)




次は、tableTAGですね。

基本はbodyと一緒です。ここではcolorのみの記述になっていますが、bodyと同じ指定が出来ます。


table { background-color:pink ; }

↑は、テーブル枠の色を指定しています。

td { background-color:yellow ; }

↑は、テーブルの中の色を指定しています。

transparent を、どちらも指定すれば、透過色ですので、背景と同じ色に出来ます。

片方だけに色を指定して、テーブルと枠の色を同じにすることも出来ます。




▼スタイルシートのすすめ
・スタイルシートとはタグ(html)に対していろいろな効果を与えるものです
 正確には「Cascading Style Sheets」(カスケーディング・スタイルシート)といいます
 対応ブラウザはIE3.0以上、NN4.0以上ですのでどんどん使っていっても大丈夫です
 
・スタイルをうまく組み合わせば、htmlでは決してできないクールなデザインを実現することができます
 今までなら画像を使ってデザインしていたようなことも簡単に表現できます
 いままでは、テーブルを使ってWebをレイアウトしていたでしょう
 CSSを使えばもっと簡単に、もっと思い通りに、そしてテーブルより表示が早いレイアウトができます




●スタイルシートの記述方法には基本的に次の3通りがあります

・「CSSファイル」 cssファイル( .css)にスタイルを記述して、それをhtmlから読み込む方法
・「html内への埋め込み」 htmlに直接記述する方法
・「インラインでの埋め込み」 特定のタグに直接記述する方法

同時に複数の方法で記述することもできます。その場合には優先順位があります




▼CSSファイル
・「CSSファイル」という外部のファイルにスタイルの設定をして、それをhtmlファイルに読み込ませる方法です

・CSSファイルの拡張子は「.css」で、このファイルにはセレクタと属性、値といったスタイルの基本だけを書きます

・これをhtmlに読み込ませるためには、htmlのHEAD内に以下のように記述しておきます


・複数のhtmlに同じCSSファイルを読み込むようにすれば、サイト全体のデザインの統一ができます


CSSファイルには以下のようにスタイルの設定だけを書きます

DIV {color:#ff0000;font-size:10pt;}
H1 {color:#0000ff;font-style:italic;}

このCSSファイルをすべてのページから読み込むようにすれば、
全てのページの「DIV」で囲まれた分は10ポイントのフォントサイズで色は赤、
全てのページの「H1」で囲まれた分は色は青で斜体になる、といったデザインの統一ができます




▼html内への埋め込み
・スタイルシートの設定ををhtmlにまとめて記述する方法です

・記述方法は、「HEAD」内に以下のように書きます


・ページごとのスタイルを設定するときに使います

・このスタイルの記述方法の場合、スタイルシートに対応していないブラウザ対策として、
「STYLE」タグの前後を「コメントタグ(」で囲むという方法がありますが、
現在ではわざわざこのようなことをする必要は少ないと考えられます




▼インラインでの埋め込み
・スタイルを設定したいタグに直接記述する方法です

・この記述方法の場合、セレクタはありません

・上記二つの方法でスタイルを設定したファイル内において、別の効果を与えたい場合などに使います

・タグの中に直接スタイル属性として記述していきます




▼優先順位
・スタイルの記述方法には上記のように3つありますが、これらを1つのページに同時に使うこともできます
 その場合、同じ要素に対して複数の効果が設定されることもありますが、
 「インラインでの埋め込み」が最優先、次に「html内への埋め込み」が、そして「CSSファイル」と優先順位があります
 サイトの全体的なスタイルは「CSSファイル」で、ページごとのスタイルは「html内への埋め込み」、
 部分的な効果は「インラインでの埋め込み」というように使い分けるようにしましょう

・何よりも優先させたいスタイルには、「!important」をつけます。これは「インラインでの埋め込み」よりも優先されます。
 例えばCSSファイルで設定した基本スタイルとは違ったものをインラインで設定してしまうのを避けることができます
 記述の仕方は、 {font-size:10pt !important ; }といった感じです
 ただし現時点では、IE4.0以上でしか対応していません

21WebSpiderさんより引用させて頂きました
[情報]PC関連06.21(Tue)19:00コメント(4)|トラックバック(-)|Top↑
dot1 dot1

#104 

こんにちは
手直し??
横文字苦手な``r(^^;)のために追加解説ですね。うれしい♪
でも大変そうm(_ _)mカムサムミダ
いろんな可能性がこの中には埋もれているんですものね。
がんばって3D様
( ・_・)ノ☆(*_ _)バシィ!!オモエモナッ…はい!!
2005.06.23(Thu)15:26|さかぼう編集Top↑

#103 ここでも、こんち

RUCHANさん、さかぼうさん、こんち^^。
ここももう少し手直しをしたいんだ。頑張る。ここでも宜しく。
2005.06.23(Thu)12:25|3D編集Top↑

#101 よろしくお願いします♪

スタイルシートの文字に惹かれてここに書き込みさせてもらっちゃいます。

こんな風にしたいを形に出来たらほんとうに素敵ですね。
どうか勉強させてください。
2005.06.22(Wed)11:48|さかぼう編集Top↑

#100 いつもありがとうございます♪

3Dさん、いつも勉強させてもらってます♪本当にありがとうございます^^
がんばって自分のHPを作りたいと思ってます。いつか、こちらのようなステキなHPができたらなぁ・・・って、努力あるのみですね!!!
がんばります^^
2005.06.22(Wed)09:55|RUCHAN編集Top↑

コメント投稿フォーム

本文:


名前:

件名:

BLOG/HP:

PASS:

SECRET:

[非公開コメントにしたい場合はBOXにチェックをして下さい] 

dot1 dot1
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。