|
|
|
全て
| カテゴリ未分類
| 【日記もどき】
| 【日記の雛形！】
| 【プチ講座】
| 【頼まれ物】
| パイプ奮闘記
| パイプ奮闘記〔自作パイプ〕
| 【3年ぶりの日記もどき】
2004/02/01
カテゴリ：カテゴリ未分類
１月３１日のプチ講座でボックスの中に画像を入れまして、階段状に並べて見ました。 元は整然と２列２行に並んでいるボックスです。 どのようにしているか、簡単に説明しますと、各ボックスの元の位置から 各ボックスの配置を指定しています。 まずは、ボックスを並べてみましょう！ １ ２ ３ ４ 外側の青い枠もボックスですが、これを日記全体の枠と思って下さい。 ボックスの中に入れた画像をまずは並べてみましょう。 注：ボックスの中は画像の変わりに背景色を入れてあります。 この画像を入れたボックスのタグを↓下に書いてみます。
タグは各ボックスの色に色分けしてあります。 ボックス自体の幅と高さは指定していません。その代わり画像の幅と高さを指定しています。 ボックスは高さ幅を指定しなくとも、画像の大きさに比例してくれます。 【重要】ボックスを横に並べる時には、日記全体の幅以下で並べないと、 日記の幅をオーバーしますと、自動改行してしまいます。 日記の幅は、みなさんのブラウザを見ている環境や状況にもよりますが、 ブラウザをフルスクリーンで見て７００ＰＸぐらいだと思って下さい。 ですから幅３００のボックスを横に３個並べますと、３個目のボックスが自動改行で 下に行ってしまいます。 そうしますと、配置を指定するのに厄介になるからです。判ります・・・か！お願い判って・・！(￣_￣ i)ﾀﾗｰ では １～４ の各ボックスの配置を指定してみましょう。 各ボックスに配置（ポジュション）を指定するタグを入れます。 【ボックスの配置を指定する！】で紹介しました、このタグです。 position:relative;top:数値;left:数値;z-index:数値;
１ position:relative;top:0px;left:-100px;z-index:2; 画像がもとあった位置の上から0 左端から-100 移動しています。 left:-100px; は左端から右に移動が+になります。 ココでは左ですから-になります。 ２ position:relative;top:100px; left:-150px;z-index:1; ボックスがもとあったところより 下に100左に-150移動しています ３ position:relative;top:0px;left:300px;z-index:1; 元ボックスがあった位置の上から0 左端から300移動しています ４ position:relative;top:100px;left:250px;z-index:0; 元のボックスの位置の上から100 左端から250移動しています 各ボックスに配置をどのように指定しているか載せて見ました。 各ボックスの元位置から上と左端を起点にして どれだけ移動しなさいと命令しています。
１～４の元あったボックスの位置から配置を指定しています。 ボックスのＴＯＰ（上端）からいくつ下に・・ＬＥＦＴ（左端）から右方向にいくつ といった具合です。 逆に動かす場合は －（マイナス）をつけます。 注：画像の大きさを指定するときは幅と高さの比率に気をつけましょう。 400×300 の画像の幅を 250 にしますと高さは 188 というふうになります。 また、200 にしますと 150ということになりますね。 z-index:0; は、ボックスとボックスが重なった時の表示順序を命令しています。 0 が一番下です。数値が大きくなるほど上になります。 ではみなさんがんばって下さいませ！(￣m￣*)V 日記の飾り付け【プチ講座メニュー】はこちらから！ ご注意：プチ講座は2003/11/28のタグ規制で使えないものがあります。 ご承知おきください。 とり急いで載せましたので、不具合がありましたら、お知らせ下さい。 お気に入りの記事を「いいね！」で応援しよう
|
|
||||
