2011.06.15 Wednesday
スポンサーサイト
この広告は60日以上更新がないブログに表示されております。
新しい記事を書くことで広告を消すことができます。
新しい記事を書くことで広告を消すことができます。
| - | | - | - |
2011.06.12 Sunday
画面全体に背景画像を表示する
Webサイトの背景を画像で表示するデザインは個人的に結構好きです。その世界にトリップしたような気分になるので。
しかし、このデザインを採用する上で問題となるのは見ている側の設定によって画面のサイズが変わることです。小さめな解像度の画面で見たら格好良く見えていても、大きなモニタで見たら画像が繰り返されたり小さく見え過ぎたりして見栄えが悪かったりします。最近では1920×1080が主流になってきているという話もあります。そこで、よく使われるであろう手法をメモしてみました。
方法1. 大きめの画像を作り、単色になじませる
body {
background:url(full_image_back1.png) center top no-repeat #3B5DC6;
}
CSSで画像を中央配置して繰り返さないように設定、同時に背景色を設定し、もともとの画像もそのエッジが背景色になじむように作るというやり方です。それほど大きくない画面で見ている人はサンプル画面をCtrl（もしくはCommand）キーを押しながら−（マイナス）キーを連打するとどうなっているかわかると思います。ナイキのサイトはこのやり方ですね。
方法2. 繰り返しても大丈夫な画像を作る
body {
background:url(full_image_back2.png) center top;
}
つまりパターンになるような画像を作る方法です。
ちなみにPhotoshopで作る方法は、パターンにしたい画像のレイヤーを複製し、フィルタ＞その他＞スクロールでその画像の大きさの横幅の半分と縦幅の半分だけずらす、で作れます。こういう大きい画像の繰り返しでなくても、背景にパターンを使用しているサイトは多いです。
方法3. 画面の大きさに合わせてCSSで拡大縮小するような画像を配置する
* {
margin:0;
padding:0;
}
img#back {
width: 100%;
min-width: 1024px;
height: auto;
min-height: 100%;
position: fixed !important;
position:absolute;
z-index:-1;
top: 0;
left: 0;
}
* html, * html body {
height: 100%;
overflow-y: hidden;
overflow-x: auto;
}
* html #cover {
overflow: auto;
position: relative;
width: 100%;
height: 100%;
}
<img id="back" src="full_image_back3.png" alt="back">
<div id="cover">
<div id="contents">
<h1>Sample</h1>
<p>Hello, World!</p>
</div>
</div>
bodyに背景画像を設定するのではなく、画面大の画像を配置するやり方です。画面をリサイズするとそれに合わせて画像も拡大縮小します。繰り返したりなじませるのが無理な画像だとしたらこれがオススメです。
參考にしたこちらの記事にはCSSだけではなくてさまざまなjQueryのプラグインも紹介されています。
それから、こちらの記事からIE6でposition:fixedを実現する方法を使わせていただきました。詳しい説明はそちらのサイトで見るといいと思います。
一応、z-index:-1を設定してIE６のみposition:absoluteにする（他のブラウザでは同じプロパティを同時に設定した場合、!importantと書かれている項目の方が優先されるが、IE6では無視され最後に書かれたものを適用することを利用したハック）ことでIE6の「コンテンツが画像に隠れる」という点はクリアできたように思いますが、IE6ではmin-widthが効かないので縦横比がおかしくなります。
方法4. JavaScriptを使ってリサイズする
* {
margin:0;
padding:0;
}
img#back {
position: fixed !important;
position:absolute;
z-index:-1;
top: 0;
left: 0;
}
* html, * html body {
height: 100%;
overflow-y: hidden;
overflow-x: auto;
}
* html #cover {
overflow: auto;
position: relative;
width: 100%;
height: 100%;
}
<script type="text/javascript">
var width = 1024;
var height = 768;
var ratio=width/height;
function imgResize(){
var img = document.getElementById('back');
var windowWidth = window.innerWidth ? window.innerWidth : document.documentElement.clientWidth;
var windowHeight = window.innerHeight ? window.innerHeight : document.documentElement.clientHeight;
var currentRatio=windowWidth/windowHeight;
if(windowWidth>width&¤tRatio>ratio){
img.width=windowWidth;
img.height=windowWidth/ratio;
}
else if(windowHeight>height&¤tRatio<ratio){
img.height=windowHeight;
img.width=windowHeight*ratio;
}
}
window.onresize = imgResize;
window.onload = imgResize;
</script>
<body>
<img id="back" src="full_image_back3.png" alt="back">
<div id="cover">
<div id="contents">
<h1>Sample</h1>
<p>Hello, World!</p>
</div>
</div>
今度は画像の大きさをJavaScriptで変化させています。
配置する画像のwidthとheightをそれぞれスクリプト部分のvar width = の右側と、var height = の右側の数字に記入すると使えます。コンテンツを増やしたりといったさまざまな状況で確認していないので問題があるかわかりませんが、よかったら使ってみてください。
あと、JavaScriptがオフの環境を無視してしまっているので方法3のCSSも同時に使用したほうがいいかもしれません。
一応、プラグインを使わないで設定する方法を紹介しました。
參考にさせていただいた方々、ありがとうございました。
2011.06.11 Saturday
ロールオーバーについてのまとめ
Web制作の基本的な技術（？）であるロールオーバー（マウスポインタが乗ったら画像が入れ替わったり見た目が変わったりするアレです）の方法をまとめてみました。
無駄に文章が長いのはいつものことなのでやり方の部分以外は流し読みで構いません。オススメ度は独断と偏見と今日の運勢に基づいています。
方法１．CSSによる画像置換
オススメ度 ☆☆☆
画像置換とは、タグにCSSで背景画像を設定し、擬似クラスhoverで別の画像に差し替えることです。この場合タグの中に記入する文字はtext-indent:-9999pxで彼方に飛ばします。
a{
display:block;
text-indent:-9999px;
width:164px;
height:45px;
background:url(menu.gif);
}
a:hover{
background:url(menu_on.gif);
}
<ul>
<li><a href="#">メニュー</a></li>
</ul>
CSSでロールオーバーするためには:hoverを使う必要があります。
:hoverというのは何かというと「この要素にマウスポインタが重なったら（hoverは上に浮いている、というような意味です）」という条件設定です。こういうのを擬似クラスと呼ぶらしいです。何かニセモノ風の名前ですが気にしないようにしましょう。
ともかく、このクラスはIE6ではa要素にしか適用されないという制約があるので、わざわざa要素をブロック要素に変換して背景画像の操作をしているのです。
利点は、何と言ってもJavaScriptがオフになっていてもロールオーバーができる、ということです。もっとも、どれだけオフにしている人がいるかというと
このサイトの記事によれば1-2％ということなのであまり気にするような時代ではないのかもしれません。
もう一つのいい点は、動作がJavaScriptに比べて軽くて早いらしいです。あとはJavaScriptを覚えなくても使える、という点かも。（一番重要？）
良くないかもしれないところは、text-indent:-9999px;がもしかしたら検索エンジンでスパム扱いされ、ネガティヴに捉えられる（＝検索の順位が下がる）可能性があるという、結構有名なウワサです。
これに関しても画像の内容と飛ばした文章の内容があまりにもかけ離れていなければそれほど問題ではないらしいです。この件については「text-indent:-9999px」で検索してみると色々と出てくると思います。ただ、いくら画面上に表示しないからと言って<a>タグの中に文字を何も入れないと隠しリンク扱いになるので、飛ばしてでも入れたほうがいいと思います。
方法２．CSSによる画像置換２
オススメ度 ☆☆☆☆
a {
display:block;
width:164px;
height:45px;
}
img {
border:none;
}
li {
list-style:none;
background:url(./menu_on.gif);
width:164px;
height:45px;
}
a:hover {
background-color:transparent;
}
a:hover img {
visibility:hidden;
}
<ul>
<li><a href="#"><img src="menu.gif" width="164" height="45" alt="メニュー"></a></li>
</ul>
上の改良版です。今度は画像を使うので怪しい「テキスト飛ばし」はやる必要がありません。
:hoverはIE6ではa要素にしか対応していないと書きましたが、このように「a要素経由でimgに設定する」のなら適用可能なようです。と言ってもCSSでは背景画像を変えることはできますがimg要素のsrc属性まで変えることはできないので、変更後の画像は予めli要素の背景画像として仕込んでおき、内側のimgをvisibility:hiddenで消すことで見えるようにします。background-color:transparent;をa要素のhoverに設定するのはIE6用に必要なようです。
さらに良いことには、予め仕込んで置くのでプリロード（ロールオーバー時にチラつかないようにするため前もって画像を読み込むこと）も兼ねているということです。
良くない点はちょっとCSSがややこしいというぐらい。
方法３．CSSによる透明度変更
オススメ度 ☆☆☆
マウスポインタが乗ったら微妙に透明度が変わります。そこまで派手な効果を期待しないならこれで十分かもしれません。
li {
list-style:none;
}
img {
border:none;
}
a:hover img {
opacity:0.8;
filter:alpha(opacity=80);
}
<ul>
<li><a href="#"><img src="menu.gif" alt="メニュー"></a></li>
</ul>
背景画像を操作するわけではないのでそのままimgタグを配置しています。
それで透明度を変える方法ですが、上のように
filter:alpha(opacity=80);
opacity:0.8;
とhoverクラスで指定します。内容的には同じで、透明度を80％にするという意味です。
なぜ２つ書くのかというと、IE８以前ではopacityというプロパティに対応していない代わりにフィルターと呼ばれる独自のものがあるからです。
この方法の良いところは全体的に一番コードが短いことと、差し替え用の画像を用意しなくていいところです。画像もないのでプリロードなども必要ありません。プリロードの方法はどこかでまた書きます。
あえて良くない点をあげるとすれば、W3Cバリデータにひっかかります。片方はCSS2.１で通るけれどもう片方は通らず、3.0で検証したらその逆になりました。
方法４．jQueryによる画像置換
オススメ度 ☆☆☆☆
結果は方法１と同じですがjQuery（JavaScriptライブラリ）を使用します。
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$('img').mouseover(function(){
$(this).attr('src','menu_on.gif');
}).mouseout(function(){
$(this).attr('src','menu.gif');
});
});
</script>
<ul>
<li><a href="#"><img src="menu.gif" width="164" height="45" alt="メニュー"></a></li>
</ul>
JavaScriptライブラリへのリンクと、ロールオーバーのためのコードが入るので多少長くなった印象があるかもしれません。最初のscriptタグの部分はそのままページ内のどこかに貼ります。普通はheadタグの中に記述することが多いです。実際にコードが書いてある方も外部ファイル化してリンクしたりしますが、ここではそのままHTMLファイルに記述しています。
そもそもライブラリとは何か、というとJavaScriptを強化して使いやすくするための補助プログラムのことで、上のようにリンクを貼るとjQuery専用の機能が使えるようになります。
わざわざJavaScriptを使わなくてもCSSで十分じゃないかと思うかもしれません。
しかしこれは、もうちょっと工夫をするとすごく便利になる可能性を秘めています。
jQueryの入門書として有名な西畑一馬さんの「jQueryデザイン入門」から引用します。
$(function(){
$('img.rollover').mouseover(function(){
$(this).attr('src',$(this).attr('src').replace(/^(.+)(¥.[a-z]+)$/,"$1_on$2"));
}).mouseout(function(){
$(this).attr('src',$(this).attr('src').replace(/^(.+)_on(¥.[a-z]+)$/,"$1$2"));
});
});
<ul><li>
<a href="#">
<img class="rollover" src="menu.gif" width="164" height="45" alt="メニュー"></a></li>
</ul>
コードが相当複雑になりましたが、上のコードでどうなるかというと「class="rollover"に設定したimgタグは、全てマウスポインタが乗ると画像名に_onを追加した別の画像に置き換わる」というものです。
必要なことはオリジナル画像と、ロールオーバー用の_onをつけた画像を用意し、あとはクラスを設定するだけでいくら画面上に配置してもそれ以上コードを書き足す必要はありません。ロールオーバーしたい要素が多い場合に重宝します。
jQueryのコードそのものについての説明は割愛しましたが興味があるなら上記の本がオススメです。
方法５. JavaScriptを使う
オススメ度 ☆☆☆
玄人好みのあなたにオススメです。素人の僕が言ってもあまり説得力はありませんが。
<ul>
<li><a href="#"><img src="menu.gif" onmouseover="this.src='menu_on.gif'" onmouseout="this.src='menu.gif'" width="164" height="45" alt="メニュー"></a></li>
</ul>
一応、これだけで動きます。インライン形式でタグの属性に直接コードを書いているので短いです。ロールオーバーしたい要素が少ない場合にいいと思います。
けれども、これだとロールオーバーしたい要素の数だけ個別に画像ファイル名を変えてこの記述をしなくてはなりません。
そこで、さっきのように汎用コードを書くとすれば
<script type="text/javascript">
function imgChange(target){
var defaultImg = target.getAttribute("src");
var changeImg = defaultImg.replace(/^(.+)(¥.[a-z]+)$/,"$1_on$2");
target.setAttribute("src",changeImg);
}
function imgBack(target){
var defaultImg = target.getAttribute("src");
var changeImg = defaultImg.replace(/^(.+)_on(¥.[a-z]+)$/,"$1$2");
target.setAttribute("src",changeImg);
}
</script>
<ul>
<li><a href="#"><img src="menu.gif" onmouseover="imgChange(this)" onmouseout="imgBack(this)" width="164" height="45" alt="メニュー"></a></li>
</ul>
こんな感じになりました。
これはこのサイトに載っているコードと先程のコードを組み合わせて作ったものです。
このコードの場合はクラスの設定はしなくても大丈夫です。その代わり、ロールオーバーしたいimgタグにonmouseover="imgChange(this)" onmouseout="imgBack(this)"と書く必要があります。 この設定をした画像は同じように_onが末尾に追加された画像と入れ替わります。
長くなりましたが、同じ内容をタグに書けばいいので良いソフトを使っているのなら「検索/置換」で一発完了できるかもしれません。
方法６. Dreamweaverのメニューから作る
オススメ度 ☆
このソフトを持っている人は簡単に設定できるので作るの自体は楽だと思います。
しかし意味不明な長いコードが吐き出されるのでオススメはしません。見てみたい方は下のサンプルファイルを右クリックしてソースを表示してみてください。
こんなところでした。「まとめ」と言っている割には全ての方法を網羅したとはとても言い難いエントリーですが、よく使われるのはこんなところではないでしょうか。
特にjQueryを使えば可能性は色々と広がると思います。
Copyright (C) 2012 JUGEM Some Rights Reserved.
