レインボーカラーの画像いじり

今イジっている素材があります。画像について私はド素人。 勉強がてらにいろいろ試していたのですが、何が何だかよくわからなくなってきました。

迷うのは "待てのサイン" です。今が決定の時期ではないことだけはわかります。

そこで思いついたのが、

記事に残しておけば、実験結果をその場で比較できるし、後で見直せるので便利では？

ということです。それでこの記事を書くこととなりました。

さて、今イジっている素材ですが、レインボーカラー(虹色)の画像です。

※ 横：３５３px、縦：３px、容量：２KB
※ 素材提供元：風と樹と空とフリー素材、画像名：li_rainbow2.gif
このサイト様のご紹介記事があります。

昔から虹色って好きでした。何かこう惹きこまれるっていうんですかね。
車で高速道路を走行中に目の前に虹が現れると、

「よ〜し、追いつくぞ！」「くぐってみた〜い！」

なんて思ったものです。いきなり波動が上がってしまうんですよね。アクセルを踏み込む原因になりますので、みなさんもご注意ください。

虹色はチャクラカラーでもありますので、癒しのサイトとしてはぜひともどこかに配置したいものです。 ですが、色が多いって案外扱いが難しいですね。

それに、よく悩まされるのが、FirefoxとIE6の表示の違いです。画像の扱いに限ったことではありませんが、近い表示を実現するのに非常に苦労します。

「やりたいことがすぐに実現できない」というのは何とももどかしいですが、 これも課題の一つと考えて、ボチボチやっていこうと思います。

それでは、これから実験を開始します。ここに書かれている内容は、"ただの実験記録" です。 私が困っているのを発見したら、ぜひお手を差しのべて頂けたらうれしいです。

◆実験１・・・背景画像の位置を変える

※ 元画像(横３５３px、縦３px)

まずは、確認という感じですが、表示領域を２５０pxに固定し、背景画像を左・中央・右に配置してみます。

実験１−１・・・背景画像を左に寄せてみる。

背景画像を左寄せ

実験１−２・・・背景画像を中央に寄せてみる。

背景画像を中央寄せ

実験１−３・・・背景画像を右に寄せてみる。

背景画像を右寄せ

うん、これだけでも雰囲気が変わりますね。

◆実験２　背景画像を繰り返す

※ 元画像(横３５３px、縦３px)

画像を繰り返し表示して、いろいろ試してみます。

実験２−１・・・背景画像を縦に繰り返してみる。

背景画像を繰り返し

実験２−２・・・さらに枠を付けてみる。

背景画像を繰り返し + 枠

実験２−３・・・もうちょっと派手にしてみる。

背景画像を繰り返し + 枠(二重線)

ここでFirefoxとIE6の違いを発見しました。二重線の外側と内側の間にある "空間の表示" が違います。ちなみにこれを確認するために、枠線の太さを１０pxと大きめに設定してあります。

Firefoxでは、文字の背景と同様に画像が繰り返されています。途切れたような部分があるのでちょっとキレイとは言えません。

IE6では、画像は表示されず真っ白けです。枠の太さを調整すれば、使えそうな感じはします。

親要素の背景色「background-color: #ffffff;」が影響しているのか、あるいは、枠線「border-style: double;」の解釈が違うのか、確認はしていません。

borderも研究の余地ありですが、今はさほど必要に迫られていないこともあり、このままスルーさせて頂きます。

◆実験３　上下の画像で文字をはさむ

※ 元画像(横３５３px、縦３px)

ここでは上下２つの画像を使用することになるので、背景設定ではなく、
「上の画像」→「文字」→「下の画像」
と単純に要素を並べてみました。

文字サイズを変更しても、画像が自動的に上下してくれますので、けっこう便利な方法です。

実験３−１・・・画像を文字の上下に配置してみる。

上下の画像で文字をはさむ

おっ、なかなかいい感じです。
上の画像を左に寄せ、下の画像を右に寄せてみました。

実験３−２・・・文字に背景色を付けてみる。

上下の画像で文字をはさむ + 文字背景色

はい、ここでFirefoxとIE6の違いを見つけました。

Firefoxでは、上の虹と下の虹の間に背景色がキレイに表示されています。

IE6では、変な隙間ができます。上の虹と背景色の間に３pxくらいの空間があります。同様に下の虹と背景色の間にも空間があります。

ちなみに、上の虹・文字・下の虹には、「margin: 0;」「paddin: 0;」を、虹の画像には「height: 3px;」を設定してあります。後はどこを確認すればいいのか・・・

と思って虹の画像の設定を確認してみたら、どちらの虹も上下の配置が「center」になっていました。とりあえず、上の虹には「bottom」を、下の虹には「top」を指定してみたら、IE6での変な隙間がなくなりました。

実はこの隙間の件で壁に当たっていたのですが、自己解決してしまったようです。やっぱりこうして記録しておくといいものですね。