Recent Entries

スポンサーサイト

[スポンサード リンク]


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

CSSのpositionプロパティを使って表示位置を調整する。

[スポンサード リンク]


ブログの色に合う紫色の丁度良いRSSアイコンが見つかったので、フッター(ブログ一番下)に付けました。見てくれればわかると思いますが、動きがでるようにちょっと上にズラしてます。
このアイコンが通常表示される場所は、紫色の帯の中です。

こういう時はCSSのpositionプロパティを使います。
ちょっと難しいんですが、とても便利なプロパティです!

positionプロパティ

relative
通常表示される位置を基準として相対的に位置を配置します。
top、bottom、left、rightなども合わせて指定して、相対的な位置を決めます。

positon:relative; と書きます。
absolute
親要素を基準として絶対的に位置を指定します。
親要素にstatic以外のプロパティが指定されていない場合、ウィンドウの左上が基準になります。
親要素にstatic以外のプロパティが指定されている場合は、その親要素の位置が基準になります。

top、bottom、left、rightなども合わせて指定して絶対的な位置を決めます。

position:relative; と書きます。
static
配置方法を指定しないpositionプロパティです。
何のためにあるのかいまいちわからない・・・。
位置指定しないので、top、bottom、left、rightは使いません。

position:static; と書きます。
fixed
absoluteと似ていて絶対的な位置を指定します。ウィンドウの左上が基準です。
そして、指定した位置でボックスが固定されます。
つまり、スクロールしても位置が固定されたまま・・・。
top、bottom、left、rightを指定して、固定する位置を決めます。

position:fixed; と書きます。

上記のpositonプロパティに加えて基準の位置からの上下左右の距離を指定すればOKです。

例)
position:relative;
top:100px;
left:100px;

これで通常表示される位置を基に上から100px、左から100px移動して表示されます。
まぁ、こんな説明じゃたぶんわからないので、下記サイトを参照してください。

スタイルシート[CSS]/ボックス/ボックスの配置方法を指定する - TAG index

positionプロパティを使ってアイコンを配置してみよう!

ここからは実際にRSSアイコンを設置した時のお話です。
簡単簡単と思って、単純にposition:relative;で設置しました。

position:relative;
top:-120px;
left:700px;

top:-120pxが味噌です。
topというのは通常あるべき位置からどれだけ移動するかを設定するものですから、マイナスを設定すると逆に通常あるべき位置より上に移動します。裏ワザみたいなもんですね。

「よし!出来たー!」と思って確認したら、ちゃんと上方向にはみ出てました。
・・・が、紫色の帯(フッター)の部分がRSSアイコンのサイズ分だけ高くなってしまいました。
アチャー(ノ∀`) 我慢できるレベルだけどね。

position:relativeの弊害

これはposition:relative;の仕様らしいです。
position:relative;は移動する前の位置の大きさがそのまま確保されちゃいます!
難しいのねぇ

それでpositionを諦めて、ネガティブマージンでやってみました。
ネガティブマージンはマイナス方向にmarginをとる方法です。

例)
margin-top:-100px;

Firefox3ではOKだったんだけど、Google Chromeなどでは変になっちゃった。

アイコンが欠けてます。

ダメだなぁーと思ったので、初心にかえってpositionプロパティの見直しです。
そしたら、position:absolute;だと移動する前の位置の大きさが確保されないとの事。

じゃぁ、position:absolute;を使いましょう。
フッターのdiv要素にposition:relative;を設定して、RSSアイコンを囲むdiv要素には以下の様に設定しました。

position:absolute;
top:-120px;
left:700px;

positon:absolute;は通常、ウインドウの左上が基準になりますが、その親要素にpositon:relative;などを設定してあげるとその親要素が基準の位置になる、という事なのでした。
これで無事フッター部分が膨らむ事なく、RSSアイコンをズラして設置できました。
あースッキリ(゚∀゚)

テストしたWebブラウザ

Firefox3、Google Chrome、Safari3.2.1、Opera9.6、Internet Explorer7

あとIE6だとアルファチャンネルを含むPNG画像の透明部分が表示出来ないのでアイコンが変になっちゃいます。他のWebブラウザでは薄い水色の部分が透明になります。
IE6の方は見なかった事にしてください(・´з`・)
(その後、CSSハックでIE6の時だけアイコンを少し上にずらす事にしました。)

ちなみにRSSアイコンはこちらの海外サイトからお借りしました。
色がピッタリだっちゃ!!
40 Vector Translucent 3D Look RSS Icons

Comments

ターザン007 : このあいだは失礼しました。

しばらくランクリしていなかったということですねっ!
まさか隠れブログランキングしてあるとは?
本文に書かれてあったかもしれませんが、
たぶん読み飛ばしちまったでやんす。

「ブログランキングやめたんだー!!」
と思い込んでしまっていたのでした。 m(_ _)m
きょうはしっかり三ついつもどおりランクリしました。(笑

あとIE6だとアルファチャンネルを含むPNGが表示出来ないので
アイコンが変になっちゃいます。
見なかった事にしてください

とありましたが
わたしはIE6なのですがRSSのPNG画像
173x190は表示されていますが?
紫色でない部分(薄い水色)が表示されてしまうという意味でしょうかねえー!?

講義ありがとうございました。
ブログのテンプレ、
相変わらずよく理解できてませんが・・・(笑

ではきょうはこれにて!
ごきげんよう!!
   (^o^)/

omoro : No title

超カッコイイです
チョイはみ出すことができることも知りませんでした。
色もバッチリだし。

今度何かしらの参考にさせていただきます。

パペポ : いえいえ。

>ターザン007さん
隠していた私が悪いのでお気になさらずに^^
いつも応援ありがとうございます!

IE6の件ですが、少し言葉足らずでしたので記事を修正しておきました。
ご指摘どうもです。
アイコン自体が表示されないのではなく、透明部分がうまく表示出来ないという事です。
他のWebブラウザでは「薄い水色」の部分が透明で何も見えない状態なんです。
IE6に対応させようかどうか検討中です。

それではごきげんよう!

パペポ : No title

>omoroさん
お褒めのお言葉どうもです!
アイコン職人ってうまいですよねー
奇跡的に色が合っちゃいました(*´д`*)

少しずらすだけでも雰囲気が変わるのでお試しくださいな。

Comment Form