「CSS」で、画像を変更する方法は、
画像を背景画像にして、
マウスアクションによって、背景画像を変更する方法が、
一番簡単だと思います。

「animation」プロパティを使って、
スライド的に変更する方法もあります。

画像サイズが大きいと、
読み込むのに時間がかかり、
画像変更タイミングがズレる現象も発生します。
あらかじめHTMLファイルのヘッダーで、
事前読み込みをしておくと、
スムーズに変更することも可能です。

INDEX

■ 「マウスアクション」で背景画像を変更する方法
■ 「CSS」だけで、背景画像のスライドショーを作成する方法
■ 画像が表示されるタイミングのズレを防止する対策

■ Gallery

「マウスアクション」で背景画像を変更する方法

「マウスアクション」で背景画像を変更するのに使える「セレクタ」は、

Element:active ・・・・マウスでクリック中など、アクティブな要素
Element:hover ・・・・マウスが乗せられている要素

などがあります。

画像を変更する「CSS」コードは、すごく簡単。
「Element:hover」セレクタを追記して、
マウスが背景画像の上になったら、
背景画像を変更してくれるサンプルコードを下記に記述しています。

「マウス」が背景画像上に来たら、「背景画像」変更するサンプルコード

//--------------CSS--------------//
.クラス名{
width: 300px;
height: 300px;
margin: 0;
padding: 0;
background-image: url("./ディレクトリ名/ディレクトリ名/ファイル名-001.jpg");
}

.クラス名:hover{
background-image: url("./ディレクトリ名/ディレクトリ名/ファイル名-002.jpg");
}
//--------------CSS--------------//

//--------------HTML--------------//

<div class="クラス名"></div>

//--------------HTML--------------//

Back

「CSS」だけで、背景画像のスライドショーを作成する方法

「CSS」だけで背景画像のスライドショーを作成することは可能です。

ですが、透明度をコントロールする「Opacity」を使うと、
コンテンツも一緒に見えたり、消えたりしてしまう。

背景画像で「フェードイン」「フェードアウト」を使いたい場合は、
CSSだけで背景画像スライドショーを行うには、
背景画像ではなく、画像を変更して、フェードイン・アウトの背景画像スライドのように見せる方法などで行う。
これも、色々と試行錯誤が必要。
「Javascript」を使って作成するのが、一番簡単な様子。
ブラウザによってCSSの適用具合も異なることもあり、
CSSだけでの適用は、無理に行わない方がよさそう。

下記のサンプルコードは、背景画像をスライドショーにする基本的なサンプルコードです。

背景画像をスライドショーにするサンプルCSSコード

HTMLファイルの「head」タグに記述するコード

CSSに記述するコード

#ID名{
background-image: url('../Images/BackgroundImages/BG_001.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
animation: アニメーションの名前 10s ease 0s infinite normal;
-webkit-animation: アニメーションの名前 10s ease 0s infinite normal;
}

@keyframes アニメーションの名前 {
0% {
background-image: url('../Images/BackgroundImages/BG_001.jpg');
opacity: 0;
}
10% {
opacity: 1;
}
40% {
opacity: 1;
}
50% {
opacity: 0;
background-image: url('../Images/BackgroundImages/BG_002.jpg');
}
60% {
opacity: 1;
}
90% {
opacity: 1;
}
100% {
background-image: url('../Images/BackgroundImages/BG_001.jpg');
opacity: 0;
}
}

Back

画像が表示されるタイミングのズレを防止する対策

「HTML」には、「preload」という機能があるので、
「head」タグ内に、

を追加することで、
あらかじめ画像を読み込んでおくことができる。
「preload」しておくと、画像表示のタイミングが遅れることを防げる。

先読みできるコンテンツの種類は、

設定値	説明
audio	音声ファイル。
document	「frame」「iframe」に埋め込まれる「HTML」文書。
embed	「embed」要素の中に埋め込まれるリソース。
fetch	「ArrayBuffer」「JSON」ファイルのような「フェッチ」「XHR」要求でアクセスされるリソース。
font	フォントファイル
image	画像ファイル
object	「object」要素の中に埋め込まれるリソース
script	JavaScriptファイル
style	CSSスタイルシート
track	WebVTT ファイル
worker	「JavaScript」ウェブワーカーまたは共有ワーカー。
video	「video」で使用される動画ファイル。

など。

Back