レインボーカラーの画像いじり
今イジっている素材があります。画像について私はド素人。 勉強がてらにいろいろ試していたのですが、何が何だかよくわからなくなってきました。
迷うのは "待てのサイン" です。今が決定の時期ではないことだけはわかります。
そこで思いついたのが、
記事に残しておけば、実験結果をその場で比較できるし、後で見直せるので便利では？
ということです。それでこの記事を書くこととなりました。
さて、今イジっている素材ですが、レインボーカラー(虹色)の画像です。
- 素材提供 ： 風と樹と空とフリー素材
- サイト様ご紹介記事
※ 画像名：li_rainbow2.gif、横：353px、縦：3px、容量：2KB
昔から虹色って好きでした。何かこう惹きこまれるっていうんですかね。
車で高速道路を走行中に目の前に虹が現れると、
「よ〜し、追いつくぞ！」「くぐってみた〜い！」
なんて思ったものです。いきなり波動が上がってしまうんですよね。アクセルを踏み込む原因になりますので、みなさんもご注意ください。
虹色はチャクラカラーでもありますので、癒しのサイトとしてはぜひともどこかに配置したいものです。 ですが、色が多いって案外扱いが難しいですね。
それに、よく悩まされるのが、FirefoxとIE6の表示の違いです。画像の扱いに限ったことではありませんが、近い表示を実現するのに非常に苦労します。
「やりたいことがすぐに実現できない」というのは何とももどかしいですが、 これも課題の一つと考えて、ボチボチやっていこうと思います。
それでは、これから実験を開始します。ここに書かれている内容は、"ただの実験記録" です。 私が困っているのを発見したら、ぜひお手を差しのべて頂けたらうれしいです。
まずは、確認という感じですが、表示領域を250pxに固定し、背景画像を左・中央・右に配置してみます。
背景画像を左寄せ
背景画像を中央寄せ
背景画像を右寄せ
うん、これだけでも雰囲気が変わりますね。
画像を繰り返し表示して、いろいろ試してみます。
背景画像を繰り返し
背景画像を繰り返し + 枠
背景画像を繰り返し + 枠(二重線)
ここでFirefoxとIE6の違いを発見しました。二重線の外側と内側の間にある "空間の表示" が違います。ちなみにこれを確認するために、枠線の太さを10pxと大きめに設定してあります。
Firefoxでは、文字の背景と同様に画像が繰り返されています。途切れたような部分があるのでちょっとキレイとは言えません。
IE6では、画像は表示されず真っ白けです。枠の太さを調整すれば、使えそうな感じはします。
親要素の背景色「background-color: #ffffff;」が影響しているのか、あるいは、枠線「border-style: double;」の解釈が違うのか、確認はしていません。
borderも研究の余地ありですが、今はさほど必要に迫られていないこともあり、このままスルーさせて頂きます。
ここでは上下2つの画像を使用することになるので、背景設定ではなく、
「上の画像」→「文字」→「下の画像」
と単純に要素を並べてみました。
文字サイズを変更しても、画像が自動的に上下してくれますので、けっこう便利な方法です。
上下の画像で文字をはさむ
おっ、なかなかいい感じです。
上の画像を左に寄せ、下の画像を右に寄せてみました。
上下の画像で文字をはさむ + 文字背景色
はい、ここでFirefoxとIE6の違いを見つけました。
Firefoxでは、上の虹と下の虹の間に背景色がキレイに表示されています。
IE6では、変な隙間ができます。上の虹と背景色の間に3pxくらいの空間があります。同様に下の虹と背景色の間にも空間があります。
ちなみに、上の虹・文字・下の虹には、「margin: 0;」「paddin: 0;」を、虹の画像には「height: 3px;」を設定してあります。後はどこを確認すればいいのか・・・
と思って虹の画像の設定を確認してみたら、どちらの虹も上下の配置が「center」になっていました。とりあえず、上の虹には「bottom」を、下の虹には「top」を指定してみたら、IE6での変な隙間がなくなりました。
実はこの隙間の件で壁に当たっていたのですが、自己解決してしまったようです。やっぱりこうして記録しておくといいものですね。
