自分で組み立てるテンプレート

parts_slide_css1

画像を直接htmlに配置したタイプのcssスライドショーです。

htmlをコピー

/*opa1のキーフレーム設定
---------------------------------------------------------------------------*/
@keyframes opa1 {
	0% {opacity: 0;}
	100% {opacity: 1;}
}

/*スライドショーのキーフレーム設定
---------------------------------------------------------------------------*/
@keyframes slide1 {
	0% {opacity: 1;}
	25%{opacity: 1;}
	35%{opacity: 0;}
	90% {opacity: 0;}
	100% {opacity: 1;}
}
@keyframes slide2 {
	0% {opacity: 0;}
	25% {opacity: 0;}
	35% {opacity: 1;}
	60% {opacity: 1;}
	70% {opacity: 0;}
	100% {opacity: 0;}
}
@keyframes slide3 {
	0% {opacity: 0;}
	60% {opacity: 0;}
	70% {opacity: 1;}
	90% {opacity: 1;}
	100% {opacity: 0;}
}

/*スライドショーの設定
---------------------------------------------------------------------------*/
/*スライドショー画像を囲むブロック*/
.mainimg-css {
	position: relative;
}

/*画像１枚あたりの共通設定*/
.mainimg-css .slide1, .mainimg-css .slide2, .mainimg-css .slide3 {
	width: 100%;height: auto;
	position: absolute;right: 0px;top: 0px;
}

/*slide1への追加設定。
slide1とmaskとopa1の３つのアニメーションを指定しています。
sとついている数字は時間(秒)になります。お好みで調整して下さい。*/
.mainimg-css .slide1 {
	animation: slide1 15s linear infinite,opa1 1s linear;
}

/*slide2への追加設定
slide2とmaskの２つのアニメーションを指定しています。
sとついている数字は時間(秒)になります。お好みで調整して下さい。*/
.mainimg-css .slide2 {
	animation: slide2 15s linear infinite;
}

/*slide3への追加設定
slide3とmaskの２つのアニメーションを指定しています。
sとついている数字は時間(秒)になります。お好みで調整して下さい。*/
.mainimg-css .slide3 {
	animation: slide3 15s linear infinite;
}

cssをコピー

parts_slide_css_bg1

cssのbackground(背景画像)を使ったスライドショーです。

htmlをコピー

/*opa1のキーフレーム設定
---------------------------------------------------------------------------*/
@keyframes opa1 {
	0% {opacity: 0;}
	100% {opacity: 1;}
}

/*スライドショーのキーフレーム設定
---------------------------------------------------------------------------*/
@keyframes slide1 {
	0% {opacity: 1;}
	25%{opacity: 1;}
	35%{opacity: 0;}
	90% {opacity: 0;}
	100% {opacity: 1;}
}
@keyframes slide2 {
	0% {opacity: 0;}
	25% {opacity: 0;}
	35% {opacity: 1;}
	60% {opacity: 1;}
	70% {opacity: 0;}
	100% {opacity: 0;}
}
@keyframes slide3 {
	0% {opacity: 0;}
	60% {opacity: 0;}
	70% {opacity: 1;}
	90% {opacity: 1;}
	100% {opacity: 0;}
}

/*スライドショー（cssでのbackground使用）
ここでは、16:9の画像比率（9÷16=0.5625）を読み込む指定を行なっています。
異なる画像比率にしたい場合、.mainimgのpadding-topの数字を変更します。2:1にするなら50%です。
---------------------------------------------------------------------------*/
/*3枚の画像を囲むブロック*/
.mainimg-css-bg {
	width: 100%;
	height: 0;
	padding-top: 56.25%;
	position: relative;
}

/*３枚の画像の共通設定*/
.mainimg-css-bg .slide1, .mainimg-css-bg .slide2, .mainimg-css-bg .slide3 {
	width: 100%;height: 100%;
	position: absolute;right: 0px;top: 0px;z-index: -1;
	text-indent: -9999px;
}

/*１枚目画像*/
.mainimg-css-bg .slide1 {
	animation: slide1 15s linear infinite, opa1 1s linear;
	background: url(../images/1.jpg) no-repeat center center/cover;
}

/*２枚目画像*/
.mainimg-css-bg .slide2 {
	animation: slide2 15s linear infinite;
	background: url(../images/2.jpg) no-repeat center center/cover;
}

/*３枚目画像*/
.mainimg-css-bg .slide3 {
	animation: slide3 15s linear infinite;
	background: url(../images/3.jpg) no-repeat center center/cover;
}

cssをコピー

parts_slide_slick1

slick(解説)を使ったスライドショーです。

htmlをコピー

cssをコピー

parts_slide_vegas1

vegas(解説)を使ったスライドショーです。
１行だけhead内に入れる必要があります。htmlを貼り付けた段階でコメントを読んで下さい。

htmlをコピー

cssをコピー

parts_list_flex1

flexを使った3カラムブロック。900px未満で1カラムになります。
2023/8/20まで「parts_list_grid1」という名前で公開していました。

<div class="list">
<figure><img src="images/1.jpg" alt=""></figure>
<div class="text">
<h4><a href="#">ここにタイトルを入れます</a></h4>
<p>ここに説明を入れます。サンプルテキスト。</p>
</div>

<p class="btn"><a href="#">ボタン</a></p>
</div>

<div class="list">
<figure><img src="images/1.jpg" alt=""></figure>
<div class="text">
<h4>ここにタイトルを入れます</h4>
<p>ここに説明を入れます。サンプルテキスト。</p>
</div>

<p class="btn"><a href="#">ボタン</a></p>
</div>

<div class="list">
<figure><img src="images/1.jpg" alt=""></figure>
<div class="text">
<h4>ここにタイトルを入れます</h4>
<p>ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。</p>
</div>

<p class="btn"><a href="#">ボタン</a></p>
</div>

<div class="list">
<figure><img src="images/1.jpg" alt=""></figure>
<div class="text">
<h4><a href="#">ここにタイトルを入れます</a></h4>
<p>ここに説明を入れます。サンプルテキスト。</p>
</div>

</div>

<div class="list">
<figure><img src="images/1.jpg" alt=""></figure>
<div class="text">
<h4>ここにタイトルを入れます</h4>
<p>ここに説明を入れます。サンプルテキスト。</p>
</div>

</div>

<div class="list">
<figure><img src="images/1.jpg" alt=""></figure>
<div class="text">
<h4>ここにタイトルを入れます</h4>
<p>ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。</p>
</div>

</div>

<div class="list">
<div class="text">
<h4><a href="#">ここにタイトルを入れます</a></h4>
<p>ここに説明を入れます。サンプルテキスト。</p>
</div>

</div>

<div class="list">
<div class="text">
<h4>ここにタイトルを入れます</h4>
<p>ここに説明を入れます。サンプルテキスト。</p>
</div>

</div>

<div class="list">
<div class="text">
<h4>ここにタイトルを入れます</h4>
<p>ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。</p>
</div>

</div>

</div>

htmlをコピー

/*３列タイプのボックス（flex）
---------------------------------------------------------------------------*/
/*ボックス１個あたり*/
.list-flex .list {
	position: relative;
	margin-bottom: 1rem;	/*ボックス同士の上下間に空けるスペース*/
	padding: 20px;			/*ボックス内の余白*/
	background: #fff;		/*背景色*/
	box-shadow: 5px 5px 20px rgba(0,0,0,0.1);	/*ボックスの影。右へ、下へ、ぼかし幅、0,0,0は黒の事で0.1は色が10%出た状態。*/
	display: flex;				/*flexボックスを使う指定*/
	flex-direction: column;		/*子要素を縦並びにする*/
	justify-content: space-between;	/*並びかたの種類の指定*/
}

/*ボックス内のh4タグ*/
.list-flex .list h4 {
	margin: 0;
	color: #333;	/*文字色*/
}
.list-flex .list h4 a {
	color: inherit;
}

/*ボックス内のpタグ*/
.list-flex .list .text p {
	margin: 0;
	font-size: 0.8em;	/*文字サイズを80%に*/
	line-height: 1.5;	/*行間を少し狭く*/
}

/*ボックス内のfigure画像*/
.list-flex .list figure {
	margin-bottom: 1rem;	/*下に空けるスペース*/
}

/*ボタン*/
.list-flex .btn a {
	display: block;text-decoration: none;
	text-align: center;		/*テキストをセンタリング*/
	background: #eee;		/*背景色*/
	border: 1px solid #999;	/*枠線の幅、線種、色*/
	padding: 5px 10px;		/*ボタン内の余白*/
	margin-top: 1rem;		/*ボタンの上に空けるスペース*/
}

/*画面幅900px以上の追加指定*/
	@media screen and (min-width:900px) {

/*listブロック全体を囲むブロック*/
	.list-flex {
		display: flex;		/*flexボックスを使う指定*/
		flex-wrap: wrap;	/*折り返す指定*/
	}

/*１個あたりのボックス設定*/
	.list-flex .list {
		width: 32%;			/*幅。３列になります。*/
		margin-right: 2%;	/*右側へのマージン。ボックス同士の左右の余白です。*/
	}
	
	/*3の倍数目のボックスの右側のマージンをなくす*/
	.list-flex .list:nth-of-type(3n) {
		margin-right: 0;
	}

/*ボックス内のtextブロックだけ伸ばす*/
	.list-flex .list .text {
		flex: 1;
	}

}/*追加指定ここまで*/

cssをコピー

parts_list_grid1

gridを使った3カラムブロック。900px未満で1カラムになります。状況によりカラム数を変更したい場合はflexよりこちらの方が使いやすいです。