610632

HOME | DIARY | PROFILE

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

テンプレートとアクセスアップのでめらら楽天日記

< 新しい記事

新着記事一覧(全372件)

過去の記事 >

2005.05.30

スタイルシート（28）

(4)

テーマ：アクセス向上(301)

カテゴリ：【実験中】

スタイルシート>>基本>>ボックス>>position: ***;（ボックスの位置を指定）
////////////////////////////////////////////////////////////////////

【ボックスの位置の指定】
スタイルのボックスで表示するメリットとしてHTMLタグではできないテキストや画像を任意の場所に表示することができるということがあげられます。
ボックスを重ねて表示したりすることで変化のある表示画面ができます。

■position: ***;
positionはボックスの位置を指定するプロパティです。

【position: ***;に使用できる値】

□relative･･･通常の位置に対して相対的に指定することができます。続くボックスがあればこのボックスの位置を基準に位置が決まります。
□absolute･･･絶対的な位置の指定です。ボックスの位置及びサイズは、left、right、top、bottomで指定します。独立したボックスなので続くボックスがあってもこのボックスの位置は影響しません。
□fixed･･･(NNのみ)ボックスの位置がページやウィンドウなどの表示域に対して固定され、スクロールやページ分割に対して移動しません。

▲直接指定の記述方法
<div style="height:60px; background-color:#F0E68C; font-weight:bold; position:relative">position:static
<div style="color:#ff0000; position:static; top:10px; left:10px; ">staticの場合の表示</div>
<div style="color:#0000FF; display: block;">続くボックス</div>
</div>
↓こんな感じですね（＾＾）

position:static

staticの場合の表示

続くボックス

<div style="height:60px; background-color:#F0E68C; font-weight:bold; position:relative">position:relative
<div style="color:#ff0000; position:relative; top:10px; left:10px; ">relativeの場合の表示（相対表示）</div>
<div style="color:#0000FF; display: block;">続くボックス</div>
</div>

position:relative

relativeの場合の表示（相対表示）

続くボックス

position:relativeの文字を含むボックスから数えて上から10px左から10pxの位置に指定されます。
また「続くボックス」は「relativeの場合の表示」ボックスが通常(デフォルト)に表示された場合と認識しますのでstaticと同じ位置に表示されます。

<div style="height:60px; background-color:#F0E68C; font-weight:bold; position:relative">position:absolute
<div style="color:#ff0000; position:absolute; top:10px; left:10px; ">absoluteの場合の表示（絶対表示）</div>
<div style="color:#0000FF; display: block;">続くボックス</div>
</div>
↓こんな感じですね（＾＾）

position:absolute

absoluteの場合の表示（絶対表示）

続くボックス

親要素である＜div＞内の上から10px左から10pxの位置に指定されます。
また「続くボックス」は前に「absoluteの場合の表示」ボックスは無いものとして表示されます。

<div style="height:60px; background-color:#F0E68C; font-weight:bold; position:relative">position:fixed
<div style="color:#ff0000; position:fixed; top:10px; left:10px; ">fixedの場合の表示</div>
<div style="color:#0000FF; display: block;">続くボックス</div>
</div>
↓こんな感じですね（＾＾）

position:fixed

fixedの場合の表示

続くボックス

IEでは有効ではありません「absoluteの場合の表示」と同じですがスクロールしても動かなくなります。

【応用編】
表示位置の指定だけでテキトーに作っています（＾＾;汗）
<div style="width:90%; background-color:#000000; position:relative">
<div style="width:100px; height:100px; background-color:red; position:relative; top:10px; left:10px; padding:20px;">
商品画像</div>
<div style="width:100px; height:100px; background-color:blue; position:relative; top:0px; left:90px; padding:20px;">
商品画像</div>
<div style="width:100px; height:100px; background-color:green; position:relative; top:-10px; left:170px; padding:20px;">
商品画像</div>
<div style="width:100px; height:100px; background-color:yellow; position:absolute; top:30px; left:170px; padding:21px;">
商品画像</div>
<div style="width:100px; height:100px; background-color:orange; position:absolute; top:120px; left:260px; padding:20px;">
商品画像
</div>
</div>
↓こんな感じですね（＾＾）

Eric　Lavilleアウトレットレザ－バッグパ－ト2 ワンショルダ－ミニバッグ（ネイビ－）

☆Eric　Laville アウトレットキャンパス×レザ－コンビト－トバッグ（小）

*****************************************************

【庶事所感】
ヤフオクが偽ブランド対策を強化
『ヤフーは「Yahoo！オークション」で5月30日から、偽ブランド品対策を強化した。
特定商取引法上の事業者に当たると同社が判断したブランド品出品者には、表示義務を守るよう指導。違反を続ける場合はIDを削除する。偽物が多く出回っているブランドに関しては、個人でも出品数を制限する仕組みの導入も検討する。
また、商標権について解説するサイト「知的財産権保護ガイド商標権」をこのほどオープンした。偽ブランド品や海賊版CDなどを出品・落札する場合に生じるリスクを、イラスト入りで説明している。』
やっと今頃になって･･･というカンジがしました（＞＜）
web上での商取引がいまだに世の中の認知度が低いのは日本は自己責任感がすごく低いのもありますが、こうした面での対策が本当に遅れていたからだと思いました。

*****************************************************

なぜか行掛かりでBlogLankingに参加しました(^^;)面白かったらポチして下さいネ

リンクはフリーですご自由にどうぞ(バナーリンクタグはprofileのページ年表欄にあります）

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

Last updated 2005.05.30 16:14:25
コメント(4) | コメントを書く

[【実験中】] カテゴリの最新記事

■コメント

Re:スタイルシート（28）(05/30)

カモミール9828 さん

重なり部分があるのってこうやって出来てたんですね。

ヤフオクやっとって感じですね。
でも完全にはコピー商品なくならないんだろうなぁと
思います・・・ (2005.05.30 17:04:49)

返事を書く

テキトーではなく適当だと思いますよ

TAXI-DRIVER さん

でめららさん。
今回の領域は難しそうで、自分でも避けていた部分です。
でも、実は簡単だったのですね。
おかげさまで、何だか素敵なサイトを作れそうです。
(2005.05.30 17:43:03)

返事を書く

Re[1]:スタイルシート（28）(05/30)

でめらら58 さん

カモミール9828さん
-----
こんにちは（＾＾）コメントありがとうございます♪
重ねること自体は他にもたくさん方法はあるんですよ、ただし要領よく短い記述でまとめるならば位置の指定がラクなのはありますね（＾＾）
もったいない使い方のタグやスタイルで書いてしまうとタグソースがやはり無駄になってしまいますので気をつけたいところですよね（＞＜）
・・・そうそうコピー商品はなくならないでしょうねぇ、何度捕まっても犯罪は無くならないですものね（ToT）
(2005.05.30 17:58:15)

返事を書く

Re:テキトーではなく適当だと思いますよ(05/30)

でめらら58 さん

TAXI-DRIVERさん
-----
こんにちは（＾＾）コメントありがとうございます♪
ガハハハ、わたくし、そのあたりがテキトー(適当)なんですね。
画像やテキスト、メディアなど自分の思い通りに配置できるようになってくるとやっぱり意欲が湧いてきますよね（＾＾）
やってみると意外とカンタン！是非どんどん使ってみてくださいね！！
(2005.05.30 18:02:11)

返事を書く