19. 3月 2013 · 1 comment · Categories: WEB制作 · Tags: , ,

css_sprite_thumbnailはい、ごめんください。

先月から、片手間にココナラでサービスを出品しています。

ウェブ解析とか、WordPress で困ったことのご相談とか、キャッチコピーとか、チビの声とかw おかげさまで、適度なペースでお声がけいただいています。ありがとうございます。

WordPress のご相談とか、解決できるとこちらもスッキリ気持ちいいです。「わかる人ならわかるんだろうなあ…」と悩むことがありましたら、お手伝いさせてくださいな。

さて前置きが長くなりましたが、先日「CSS スプライト」で作るグローバルメニューのご相談を受けました。CSS スプライトを使ったメニューの説明ページは多いのですが、ご依頼の内容をバッチリ解決できる参考ページが見つからなかったので、ちょいとエントリー。

CSS スプライトって?

一枚の画像を背景に設定し、CSS で表示エリアを設定する手法です。画像の任意の位置(X座標とY座標)と幅、高さがわかれば、四角く切り抜くことができます。

要するに CSS で画像の一部を四角く切り抜いて表示する という手法です。

0.CSS スプライトの基本条件

  • マウスオーバーで画像を変えるため、大抵はリンク(アンカータグ)で利用します。
  • リンクはブロック要素(display:block;)(=四角形)にします。
  • 画像は背景(background-image)として使います。
  • 背景画像を表示する位置(background-position)を決めます。
  • 背景画像はリピートして使えません。(background-repeat:no-repeat;)
  • アンカーの :hover で背景画像の位置を変更します。
  • アンカータグ内に入れたテキストは、text-indent か padding で表示しないようにします。

1.どんなデザインでどんな動きにしたいのか想像してみよう

css_sprite1

こんなグローバルメニューがあるとします。
メニューの周りには背景がありますね。HOME はマウスオーバーした時の状況を表します。
つまり普段は、背景が青、文字は白。マウスオーバーで背景が薄い青、文字が青となります。
まずは動きの想定とデザインを把握しておきましょう。

2.メニューの周りに注目しよう

css_sprite2

グローバルメニューの外側には背景(1)があります。
また、グローバルメニューの左右には、マウスオーバーしても変わらない部分の背景(2)があります。

これらの部分は、X軸(横)方向にリピートして使う必要があります。

ん?CSS スプライトはリピートできましたっけ…?(上記0番で確認してみてください)

CSS スプライトはリピートできません。背景は CSS スプライトとは別に考えましょう

ということで、メニューのまわりで使う背景(1)とメニュー用の背景(2)はそれぞれ切り抜くかスライスして、名前をつけて保存しておきます。

左右の端を角丸にするのは、画像を並べてもいいですが、CSS の border-radius で設定したほうがスマートですね。

3.各メニューの大きさを確認しよう

メニューの高さは全て揃うはずですね。幅がすべて同じ場合は、1つだけ分かれば良いです。違う場合は、それぞれの幅をしっかり確認しておきます。

たとえば今回の例ならすべて同じ大きさなので、1つのメニューは130×60(ピクセル)となります。それが4つあるので、メニュー部分は520×60(ピクセル)となりますね。

css_sprite3

4.上段に通常時、下段に :hover 時のメニューを並べます

メニュー部分のみを切り抜き、キャンバスの大きさを調整します(例では 520×60 となります)。

CSS スプライトにハマってしまう人は、メニューの外の背景ごとコピーしてしまうことが多いようです。必ずメニューのみを使ってください。

キャンバスの高さを2倍にして(例では120px)、メニューをコピー(レイヤーやグループ機能を使える場合は、それらを複製すると使いやすいです)して移動し、縦に並べます。

上段が通常時、下段がマウスオーバー時となります。

css_sprite4

黄色の線で示された部分をスライスして4つの画像にしてもいいですが、1つの画像として保存して進めます。(下記サンプルデモ参照)

5.CSS で設定して仕上げよう!

画像の左上を基準に、位置を指定します。

css_sprite5

右上に行くほど数値が大きくなり、左下に行くほど数値が小さくなります。
だから メニュー画像を設定 = 画像を左に移動させる 時は X座標がマイナスになり、hover 時 = 画像を上に移動させる 時は Y座標がマイナスになるのです。

・・・ややこしいですが、CSS を確認してみてください。

画像の切り抜きさえ間違わなければ、CSS スプライトは難しくありません。
今回のサンプルは下記にあります。基本部分しか入れていないのですが、お好きに使ってください。(あとで改良の余地あり)

CSS スプライトサンプル ZIP DEMO

参考サイト

CSSスプライトで画像を円滑に表示させる | Webクリエイターボックス

基本部分がわかりやすく解説されています。私が今回の記事で言いたかったのは、背景は別になるんだよ!という部分だけです。

CSSスプライトについてあれこれ。

スプライトした際の速度検証や、背景に画像を設定してガチャガチャやる一般的な方法以外にも、色々な方法を紹介しています。深く知りたい方は必見。

Webページの表示速度アップに欠かせないCSSスプライトを超簡単に作成してくれるサイト「SpriteMachine」 | OZPAの表4

CSS スプライトのための画像を作ってくれるサイトの紹介。メニュー画像は個別にあるから、全部くっつけたいよという場合に使えます。

28. 10月 2012 · [CSS] チェックボックスやラジオボタンのクリックエリアをわかりやすくしてUIを向上しよう はコメントを受け付けていません。 · Categories: WEB制作 · Tags: , ,

Trust Form のチェックボックスやラジオボタンに、label タグが入っていなかった件で、そこを弄ったついでに設定した内容です。

チェックボックスなどだけにクリックエリアが効いているだけでは非常に押しにくいため、テキストを <label> で囲ってやる必要があります。ちなみに、IE6の場合は input に id を設定し、label に for=”id名” と設定してあげないと有効になりません。制作側の手間を増やしてくれる、マゾには嬉しいブラウザです。

IE6 の場合:
<label for=”chk1″><input type=”checkbox” name=”chk1″ id=”chk1″ vaue=”めっけら” /> めっけら<label>

IE7移行 の場合:
<label><input type=”checkbox” name=”chk1″ vaue=”もっけら” /> もっけら<label>

さて、上記のようにテキスト部分を囲ってやるだけでもいいのですが、もう一歩踏み込んでもっとわかりやすくしてみましょう。例えばこんなふうに↓

スマートフォンの UI に便利な jQueryMobile のスタイルまで行かなくても、クリックエリアと選んだ選択肢はわかりやすくなりますね。大前提として、チェックボックスは複数選択できますが、ラジオボタンは1つのみです。これを jQuery と CSS で料理します。

javascript (jQuery) 

WordPress で jQuery を使いたい場合は  jQuery(document).ready(function($) { … }); の中に上記のような命令を書けば良いですね。

選択済みの選択肢に label-checked クラスを設定し、クリックした時の挙動を入れています。type の複数取得の記述は…動いてますがちと自信ナス。

HTML

span で囲むのはどちらでも構わないです。ある程度 label で対応できるので。上の例だと、最初の選択肢がすでに選択済みの状態なので、javascript によって label に CSS のクラスが設定されています。

CSS

Trust Form を作成すると div.contact-form で囲まれます。その中の label 近辺を修飾しています。好みに応じてもうちょっとボタンらしくしても良いかと。

こんな感じで EFO にもオススメなので、お試しください。

22. 10月 2012 · [CSS] 上下左右中央にボックスを配置して半透明にする(IE対応済) はコメントを受け付けていません。 · Categories: WEB制作 · Tags: , ,

transparent (6)

割と前から使われているテクニックなのですが、備忘録も兼ねてメモ。

今回作りたいもの

  • 黒い背景色+背景画像の上で、画面の中央に白いボックスを配置したい。
  • 中央のボックスは半透明にしたい。
  • 半透明にするのは背景だけでいい。

まずは中央にボックスを作る

参考:CSS で画面中央表示のサンプル | [ VERSION510 ]

こちら(↑)が一番あっさりして有用かつわかりやすいかと。
今回作りたいものに合わせ、サンプルソースに少し手を加えます。

CSS

HTML

HTML は内部に div を追加して、margin を設定しています。
ちなみに上下にくっつけたい場合は height を 100% にして top を 0 にしてネガティブマージンなどの調整を行えばOK。

ボックスの背景のみを透明にする

IE に対応する必要がなければ background-color:RGBa; のみで良いですが、IE 独自の機能である DirectX Filter の filter: progid:DXImageTransform.Microsoft.Gradient を使ってやることで対応できます。それほど難しくはないですが、aRGBとなってるところがポイント。

ということで #wrapper が下記のようになります。

Gradient フィルタは IE5.5 から有効になっているようなので安心ですね。

GradientType=[0/1]
0は縦に、1は横に変化するグラデーション。今回はどちらでも良いです。
StartColorStr=#aaRRGGBB
グラデーション開始の透明度と色を16進数で指定します。
EndColorStr=#aaRRGGBB
グラデーション終了の透明度と色を16進数で指定します。

#aa は透明度で、00(透明)〜FF(不透明)を指定します。残りの RRGGBB は色で、こちらはいつもの16進数表記。background-color の RGBa は透明度が後ろに来て、10進数表記なので、0〜255 と 0(透明)〜1(不透明) ですね。

StartColorStr と EndColorStr を同じにすることで、単一色の半透明化が実現できます。
これで画面中央に配置したボックスが半透明になりました!