スライドショーの背景を黒にするのはなぜ？

Question

前提・実現したいこと

スライドショーをつくる。

発生している問題・エラーメッセージ

スライドショー全体のコンテナーの背景色を黒にしているのですが、なぜそうするのでしょうか？

該当のソースコード

<div class="slideshow">
    <div class="slideshow-slides">
        <a href="./" class="slide" id="slide-1"><img src="./img/slide-1.jpg" alt="" width="1600" height="465"></a>
        <a href="./" class="slide" id="slide-2"><img src="./img/slide-2.jpg" alt="" width="1600" height="465"></a>
        <a href="./" class="slide" id="slide-3"><img src="./img/slide-3.jpg" alt="" width="1600" height="465"></a>
        <a href="./" class="slide" id="slide-4"><img src="./img/slide-4.jpg" alt="" width="1600" height="465"></a>
    </div>
</div>

.slideshow {
    background-color: rgb(0, 0, 0);
    height: 465px;
    min-width: 960px;
    overflow: hidden;
    position: relative;
}

試したこと

補足情報（FW/ツールのバージョンなど）

Answer 1

背景色に関して言えば写真を目立たせたいから背景を黒にしているのだと思います。（既に他の方が回答されていますが・・・）

ですが黒でなければいけないわけではないです。
パステルカラーが主体のWebサイトで黒い背景色でスライドショーを作ると完全に浮きますし、
背景に写真や画像を取り入れていて、背景を見せたいWebサイトなどでも黒い背景が合わないことも多々あります。

背景色をつける必要がないこともあるのではないでしょうか。
黒にこだわる必要はないと思います。
センス次第といったところでしょうか。

Answer 2

プログラミングというよりデザイン分野ですね。
黒があたえる心理的効果・・・というか黒のイメージ、役割と言った目線。

• 黒色のイメージ効果！ブラックセラピー

黒は枠で囲まれた中のものを浮き出させる働き、額縁効果が高い色です。収縮や後退の効果が大きいので、黒の中に置かれた色は前面に出てきてよく見えるようになります。黒い器に入った料理は食材の「色」を引き立たせる効果を活用してのものです。

黒を背景にすると、それより暗い色というのはありません。
人間の目は明るいものに集中する、注意がいくように出来ています。
だから背景を黒にすることで、実際に見せたい情報をより目立つように見せる、という効果があります。

映画館とか美術館の照明が暗いのも同じような効果ですね。

Comments

[m.ts10806]

むかーし
Webデザイン講座でやってたのを思い出しました。色とか配置
もうほとんど忘れたなあ

[tadashi_konno]

ご回答いただきありがとうございます。

スライドショーのコンテナーの大きさと各スライドの画像の大きさが同じな場合、
背景色は画像の見え方に影響しますか？

このコードだと、heightは
写真→465px
コンテナー→465px

widthは、
写真→1600px
コンテナー→ウィンドウ枠の幅(最低でも960px)

なので、コンテナーが画像よりも大きくなる部分がない
（＝コンテナーに指定した背景の部分が画像に隠れてみえない)
（＝コンテナーに背景色を指定する意味がない）
と思ってしまったのですが、

この理解で間違っていたら教えていただけますでしょうか？

[m.ts10806]

さあそれは見せたい情報によるのではないでしょうか。
ある程度の指標となる数値はあるでしょうけど、どう見せたいかにもよるので絶対というのはないと思います。
なのでどのようにしても「意味を持たせる」ことができたらそれで良いかと。