スポンサーサイト

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

デザインの小技 背景の画像をフルスクリーンにして固定するスクリプト

2011-11-16
ウェブサイトデザインでいつも困るのが背景(といっても、デザインすべてに常に困っているのですが)

背景が画面いっぱいに広がるとすごくインパクトありますね

CSSのみで設定するのもいいのですが。(以前はCSSのみで設定しました)
コレだとちょっと古いブラウザで読み込まないのが難点でした IE6だとアウト
まだまだIE6ユーザーが多いので、jQueryのプラグインで対応できるそうです。デモサイトみつけたのでコチラをどうぞノ
DEMOサイト

ページ中央くらい Download it からダウンロードページにいけます
そこのDownloads からtxt形式のjsを落としてきて、.jp になるようにリネーム

あとはサーバーにアップして
CSSとhtmlに記述をすればいいだけですね。色々昨日はあるようですが
指定画像を画面いっぱいに背景にして固定する(一番オーソドックスだと思われる使用方法)を簡単に記述しておきます。

htmlのヘッダーにスクリプトの指定

<script src="(ダウンロードしたJSファイルをアップしたディレクトリを指定)/jquery.maximage.js" type="text/javascript" charset="utf-8"></script>

<script>
$(function(){ jQuery('img.bgmaximage').maxImage({
isBackground: true,
overflow: 'auto'
});
});
</script>

bodyタグ内に画像の指定を
<img src="image/haikei.jpg" class="bgmaximage" />


CSSに記述
img.bgmaximage {
position:fixed !important;
}


上記 importantで、Mozilla, Opera に対して優先順位を上げて固定配置にする


これで背景画像がウィンドいっぱいに広がり固定表示となる(はず)

画像の画質とサイズを調整しないとすごく重いサイトになってしまうので注意ですね


ちなみにjs使えない場合のCSSのみで同じ事をする場合の記述方法を紹介
まずは、htmlファイルへの記述
<img class="bgmaximage" src="img/haikeigazou.jpg" alt="" />
<div id="container">
↑と↓をコンテンツの上下に配置
</div>

CSSに

img.bgmaximage {
min-height: 100%;
min-width: 1024px; /* これ以上は画像は縮小されない */
width: 100%;
height: auto;
position: fixed;
top: 0;
left: 0;
}

/* 表示ディスプレイが最小表示よりも小さい場合の設定 */
@media screen and (max-width: 1024px){
img.bgmaximage {
left: 50%;
margin-left: -512px; }
}

/* 背景固定用の親を指定 */
div#container {
position: relative;
}

これでできる(はず)
ただし、先述の通り、IE6だと背景画像の下にコンテンツが表示されちゃうので一般向けサイトには不向きかもしれません。

スポンサーサイト
tag :

オートネットリンク tableバナーの隙間を無くす方法

2011-09-18
あまり自信持ってかけません。。。

基本的にIEでレイアウト確認しています。

理由・・・・・ユーザーが一番多いから

その他のブラウザも一応インストールして
基本的にCSSにはIEバグを修正するように別ファイルを用意したりしてますが

IEを使っています。

やはり、ユーザーが一番多いものに合わせるというのが
サイトのユーザービリティー(使いやすさ)だと思っています。

しかし、現状IE系とそれ以外ではだいぶ見た目レイアウト
変わってしまうことが多いですね

キツキツで隙間を作ると特にですね

サイトの構築は余裕を持って・・・・

ということで オートネットリンクの
タグにclass="tbl0"を指定して
(※tbl0は好きな物でいいですよ)


CSSに以下の構文を書けば恐らく問題は解決します
table.tbl0 {
border-collapse:collapse;
border:0px;
}

table.tbl0 tr td {
padding:0px;
line-height:0px;
font-size:0px;
}

table.tbl0 tr td img {
line-height:0px;
vertical-align: bottom
}

ん~ 一応、こちらの環境では 解決してるんですが。。。
もっと綺麗に書ける方いたら教えて下さい。

tag :

移植6 CSSの奥深さ というかブラウザのいい加減さ

2007-11-25
CSSの奥深さ2007-09-01 (土) HTMLに挑戦
サブドメインとってみました。
クランのHPですが、元 http://www.force-for-good.com/wakuren/index.htmlだったものを http://wakuren.force-for-good.com/index.htmlにしてみました。
サブディレクトリよりもSEOによいみたいです。

UPフォルダもそのまま指定しているので。今までのリンクもそのまま有効なので
なかなかナイスなアイディアと思います。
次回のくろーりんぐでの結果が楽しみです。

そしてHPも一新し、アドセンスもいれ。アマゾンも入れ
デザインを全てCSSで書き上げてみました。

よーし。ばっちりそしてUPしかーし・・・・・クラメンから一言
「IE7でレイアウトが崩れてますよ」
うはぁ確かに全く確認してませんでした><だってIE7使ってないもんね。

しかたなし、CSSを正しく読んじゃう。FireFoxで確認・・・・
ぐっちゃぐちゃじゃない。
で、それも何とかレイアウト修正・・・・
っておい。背景がでてこないYO なんでだYO
→いろいろ検証、一個ずつ消しながら・・・・犯人 「float:left」
うーむ、しかしこれがないと、綺麗にレイアウトできましんし~。どうしましょう。さっそく出番です
Google先生 辿り着いたのは ここ
CSSでfloatを指定したボックスを含むボックスの背景が出なくなる件


読んでみる。まぁなるほど。たしかにおっしゃるとおり。では修正
しかしきついですね~。
IE7で確認はしてませんが、多分ダイジョウブだと思います。いや、お願いします。
CSSをブラウザで振り分けるってのも考えなければだめなんですかねぇ
でも、それって手間的には、・・・・orzですね。

しかしねー、バグってる方が、希望のレイアウトできるってどうなんでしょう?
いっそのこと、バグを標準って設定にしたほうがいいのでは?
なんておもってしまいます。

それにしても


の点が消えない。
IE6では消えているのに。
・・・・・・見た目にそんなには問題ないから。 あとまわし・・・・
tag :
出会い
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。