制作者の活動(PR)。

アイドル・堀北真希ちゃんがモデルのうさ耳女子大生化キャラクタ。次ぎ
主な作品

オリジナルキャラクタのイラスト例とそれを組み込んだアニメーション動画

背景に画像を用いる場合の注意事項。

ウェブに背景画像を使う場合は、文書がちゃんと読めるような画像を撰んで下さい。

背景に画像を用いる場合の注意事項・目次。

おことわり。

この文書はもともと鉄道のお話しの新コンテンツに用いるつもりで書いたものです。このため、鉄道に興味のない方には分かり難い箇所があるかも知れません。

大変読み難い「背景画像付きウェブ」。

ウェブを見て廻っていると、ときどき非常に見辛いページを見る事があります(特に鉄道系サイト)。

その原因は背景画像が不適切である事に尽きます。

そこで、背景画像として不適切な画像を考えてみましょう。

一般に写真を背景に使ってはいけません。

鉄道系サイトでは、多くの場合背景に鉄道写真を用いております。

しかしながら、これは非常に好ましくないものです。

例えば、夏の日本海を背に山陰本線を走る、かつてのキハ58/28型気動車の写真を考えてみましょう。

この写真に使われている色はだいたい以下のようになるでしょう。

白
空に浮かんだ雲や、海の波が白く見えるでしょう。
青
空の色は水色、海の色は紺色に見えるでしょう。
黒
車輌の足廻りは影になって黒く見えるでしょう。
肌色・朱色
鉄道に興味の無い方は分かりにくいかも知れませんが、山陰本線を走っていたキハ58/28は肌色の車体に窓廻りが朱色になっていました。
緑
夏なので、周りの木々は緑色になっている筈です。

さて、ここに出てきた色のどれが背景になっても、きちんと読めるような文字の色は何色でしょうか？

そんな色はありませんよね。

結局、こんな写真を背景にしてしまうと、文書の何処かが読めなくなる可能性があります。

この様な理由から、鉄道に限らず、写真を背景画像にするのは好ましくありません。

写真以外の不適切な画像。

写真以外にも、背景画像に用いるのに不適切な画像も少なくありません。

文書の読み易さを考えると、以下のような画像は背景画像には適さないでしょう。

均質な色遣いでないもの。
例えば、画像全体が緑系統でも、あるところだけ赤系統だとその箇所で問題が生じ得ます。
細かな模様の画像。
背景画像の模様が細かすぎると、文字が背景に紛れて読めなくなることがあります。特にコントラストの強過ぎる画像は要注意です。
色の強過ぎる画像。
色が強過ぎると、例え補色関係となる色(いわゆる"反対色")を文字の色にしても文字は読み難くなります。

どうしても不適切な画像を背景に使いたい方へ。

どうしても写真などと言った背景に不適切な画像を背景画像として使いたいのなら、文字を扱う全てのHTML要素に背景色を指定して置きましょう。例えば、以下のようなCSSスタイル定義ファイルをリンクすることで、テキストを背景画像に紛れなくすることができます。

p {
    margin: 0em ○○;
    padding: 1em;
    background: #fff;
    color: #000;
    }

p * {
    color: #000;
    }

p a:link {
    color: #00f;
    }

p a:visited {
    color: #099;
    }

p a:active {
    color: #f00;
    }

p a:hover {
    color: #00f;
    }

この他にも、<h○>要素などにも適切な背景色を当てておくと良いでしょう。

しらぎくのウェブサイト作成入門サイトマップ

ページ外へのご案内。

marguerite.site@gmail.com