中・上級向け：画像置換の最終形
今月号のweb creators10月号でCSSに関して久しぶりにオッと思わせる記事があった。
画像置換についてはまた機会があれば書いてみたいと思いますが、最近ではJavascriptが台頭してきて画像置換の必要性がなくなってきました。
それはアクセシビリティ（ユーザビリティも含む）の問題や、IE6での印刷においてクリアする点が画像置換において問題があるからです。
今回の画損置換はそのアクセシビリティをクリアし、かつユーザビリティもクリアしているようなのでメモしたいと思います。
（ただしブラウザの状況や、IE6の印刷についてはとくに掲載元には触れていなかったので注意して下さい。）
まずhtmlのソースから。
<p class="imageReplace"><span>画像置換</span></p>
次にcss。
.imageReplace span{
position:absolute;
width:0;
height:0;
overflow:hidden;
}
※クラスのimageReplaceについてははしょっていますが、画像に関する設定が入ります。
○解説
htmlから見るとspanでくくられているのが特徴です。画像置換の準備です。
cssではこのspanにすべての設定が入ります。position:absolute;で絶対配置、width:0;height:0;でオブジェクトの数値をすべて0。最後にoverflow:hidden;であふれたテキストを隠しています。
htmlに不要なタグが入るのが気になりますが、かなりスタイリッシュな方法に思えました。
しかし個人的な感想を入れると、昨今のウェブ事情を考えてJavascriptで十分だと思いますが……。
ドロップシャドウのパラーメーターについて
ドロップシャドウの使い方は慣れてくると結構パターン化してくるのだが、新たな発見があった。
レイヤースタイルの追加 > ドロップシャドウ
と順に選んでいくのだが、次に画質のところで輪郭をクリック。
10パターン選べ、中にはシャドウが2段階かけれたりする。具体的には濃い部分がオブジェクトの内側に、その外側には薄いシャドウがかかるというように。
使いどころは少ないが勢いメモということで。
IE7のみ、Operaのみ、SafariのみにCSSを適応
使っているわりには、ほかのブラウザでも適応されて意図しない表示がたまにあったので改めて調べたのでそのメモとしたい。
( *の前に半角スペースがあるがHatenaではそのままスペースなしで書くと表示されないので一時的に入れている。そのため実際に使用する際は*ではじまる先頭の半角スペースは削除してよい。)
●IE7のみ
*:first-child+html .test{
}
*+html .test{
}
○IE7以外
※Validatorに通らない。
*+html>/**/body .test{
}
上記の組み合わせから下記のようなOperaのみに適応できるハックができあがる。（IE7を先に指定して次にIE7を除外するハックを指定して、残ったOperaに適応させるというわけである。）
●Operaのみ
※IE7とモダンブラウザ
*+html .test{
}
※IE7を除外しOperaのみ
*+html>/**/body .test{
}
※Validatorに通らない。
●Safariのみ
※Validatorに通らない。
html:\66irst-child .test{
}
背景が指定した位置から繰り返さない
たとえば背景に画像を配置したい場合があると思う。
また指定した位置（ここでは上から600pxの位置）で縦方向に繰り返したい場合、以下のようにしていた。
#container{
background:url(img/test.jpg) repeat-y 0 600px;
float:right;
width:500px;
}
一見問題がないように見えるが、背景の位置が600pxではなく0pxからはじまってしまう。
これがなかなかほかの要素と絡まってくると解決に時間がかかったのでメモしたい。
具体的に問題の箇所はfloat:right;がいわゆる浮動化することによって背景がおそらく正しく表示できないのではなかろうかと推測している。
そこでフロートしている箇所に背景をするのではなく別のボックスに指定するなどしてほかの代替案を考えよう。
たとえば
のように。
body{
background:url(img/test.jpg) repeat-y 0 600px;
}
ボディにほかの画像が指定されているなら新たなボックスを作成するなどして別の方向も考えてみればいいと思う。
画像にかかった不要なもの（ごみ）をトル
とり方はいろいろあるが比較的や早くしかもきれいだったのでメモとして。
１．ごみ周辺をパスで作成
２．パスから選択範囲を作成
３．画像を選択しCtrl+J（選択範囲が複製される）
４．複製された画像を拡大させ、ごみにかぶるように
５．拡大させた画像のレイヤー上で、「ベクトルマスクを追加」
６．ブラシに持ち替え、描画色を黒、不透明度を50％に
７．先ほど作成したベクトルマスク（レイヤーマスクサムネール）をクリックし、ブラシで画像周辺をなじませる
描画モード：スクリーンよりやわらかな表現を
描画：スクリーンでは明るすぎる場合などイメージと少し違うといった場合に、やわらかいソフトフォーカスとなるのでメモとして。
１．元画像を複製（非表示にしておく）
２．チャンネルで最も濃度があるチャンネルの複製
３．そのチェンネルのみ選択してレベル補正で全スライダを少し左寄りに
４．チェンネルをCtrlを押しながらクリック
５．複製した画像を表示させ描画：スクリーンに
６．レベル補正で中間のスライダを少し右に寄せる
