ITメモ
CSS
「CSS」の「Topics」
「印刷用CSS」を「コンテンツ」に適用する方法「表示サイズ別」に「CSS」を適用する方法「スマートフォン」に「CSS」を適用する方法「コンテンツ」の「縦位置」を「真ん中」に配置する方法「コンテンツ」の「横位置」を「真ん中」に配置する方法「ベージ表示」を「フワッ」とした「フェードイン」で表示する方法「CSS」で「スクロールバー」を表示・設定する方法
背景・背景画像関連
背景画像のスライドショーを作成する方法背景画像を表示場所に自動フィットさせる設定背景画像を表示位置を調整する方法「背景色」に「透明度」を加える方法 「背景色」を「グラデーション」にする方法
画像関連
画像の下にできる空白を消す方法背景や画像に透明感を加える方法画像の横に文字を回り込ませる方法「CSS」で画像を変更する方法
「CSS」の基礎知識
「CSS」のファイル書式「CSS」のヘッダー書式「CSS」のコード書式「CSS」を「HTML」ファイルに記述する方法「CSS」外部ファイルをHTMLファイルとリンクさせる方法「CSS」でコメントを使う方法「CSS」で利用する単位「CSS」でテキストを編集する方法「CSS」での「セレクタ」優先順位「CSS」の命名規則「BEM」とは
CSSプロパティ【レイアウト関連】
【 width 】「横幅」を指定する方法【 height 】「高さ」を指定する方法【 margin 】「枠線外側」の「余白」を指定する方法【 padding 】「枠線内側」の「余白」を指定する方法【 border 】「枠線(ボーダー)」を付ける方法【 outline 】「枠線(ボーダー)」を付ける方法【 border-radius 】要素の四隅に丸みを付ける【 transform 】コンテンツに「2D変形」「3D変形」を適用【 display 】「ブロック要素」「インライン要素」に変換【 position 】コンテンツの配置指定【 float 】コンテンツを片側に寄せる方法
CSSプロパティ【コンテンツ関連】
【 content 】コンテンツの追加
CSSプロパティ【背景関連】
【 background 】背景を設定する方法
CSSプロパティ【文字・テキスト関連】
【 color 】文字の色を設定する【 font 】フォントを設定を一括指定する方法【 font-size 】フォントサイズを変更する方法【 font-family 】フォントの変更をする方法【 font-style 】フォントのスタイルを指定する方法【 font-weight 】文字を太字にする方法【 font-stretch 】文字を横幅(フェイス)を指定する方法【 font-size-adjust 】小文字の大きさを設定する方法【 line-height 】テキストラインの高さを設定する【 text-indent 】テキストインデントを設定する【 text-align 】テキストの配置位置を設定する【 text-decoration 】テキストに加えるで装飾を設定する【 text-underline-position 】テキストのアンダーライン位置を設定する【 text-shadow 】テキストのシャドー位置を設定する【 text-transform 】テキストの文字形態を設定する【 white-space 】要素内のホワイトスペースを設定する【 word-break 】テキストの自動改行の設定をする【 word-spacing 】単語間の隙間を指定【 letter-spacing 】文字間の隙間を指定【 text-justify 】文章右端空白にならないように、単語間・文字間のスペースを調整【 text-autospace 】表意文字(漢字)と非表意文字(半角英数字)の隙間を指定【 word-wrap 】テキストの自動改行の設定をする【 writing-mode 】縦書きを設定【 direction 】文章の方向を設定【 unicode-bidi 】単語の並びを設定【擬似要素】「:before」 - 文字の先頭にマークを表示する方法
CSSプロパティ【カラー関連】
【linear-gradient】二色以上でグラデーションを作るカラー設定
CSSプロパティ【アニメーション関連】
【 animation 】アニメーション操作をする方法【 transition 】変化をスムーズにスムーズにする方法【 opacity 】要素の透明度を設定する





【CSS】背景画像のスライドショーを作成する方法

【CSS】
背景画像のスライドショーを作成する方法





「CSS」だけで、背景画像のスライドショーを作成することができます。
「animation」プロパティを使用することで、
簡単な背景画像のスライドショーを作ることができます。


しかし、「Javascript」で作成するような、
背景画像のスライドショーがCSSで作れるわけではないので、
望む背景画像スライドによっては、「CSS」だけで作成するものでは作成できない。
出来そうな気もするが、「Javascript」を使用する方が、
まだ簡単にコーディングできそうです。
方法が見つかったら随時更新していきます。






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


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

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

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


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


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


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

<link rel="preload" href="../Images/BackgroundImages/BG_001.jpg" as="image">
<link rel="preload" href="../Images/BackgroundImages/BG_002.jpg" as="image">

「link」タグの「rel」属性に「preload」を指定して、
画像を先読み込みすることができる。

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」タグ内に、
<head>
<link rel="preload" href="./ディレクトリ名/ファイル名.jpg" as="image" >
</head>
を追加することで、
あらかじめ画像を読み込んでおくことができる。
「preload」しておくと、画像表示のタイミングが遅れることを防げる。


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


Back