スライドイン3　写真5枚レスポンシブWebデザイン

• 制作Tips
• HTML+CSSデザイン
• スライドショー

Demo

HTML&CSS

HTMLindex.htmldownload

<div class="slide_show_slide_in3_5">

	<input type="radio" id="back1" name="radio">

	<input type="radio" id="back2" name="radio">

	<input type="radio" id="back3" name="radio">

	<input type="radio" id="back4" name="radio">

	<input type="radio" id="back5" name="radio">

	<input type="radio" id="next1" name="radio">

	<input type="radio" id="next2" name="radio">

	<input type="radio" id="next3" name="radio">

	<input type="radio" id="next4" name="radio">

	<input type="radio" id="next5" name="radio">

	<div class="slide_show_slide_in3_5_1">

		<div class="slide_show_slide_in3_5_2">

			<img src="photo/5.jpg"><!-- ◆写真5 -->
		</div>

		<div class="slide_show_slide_in3_5_2">
		
			<img src="photo/1.jpg"><!-- 写真1 -->

			<label for="back1"><div class="left"><span class="arrow arrow-left"></span></div></label>

			<label for="next1"><div class="right"><span class="arrow arrow-right"></span></div></label>
		</div>

		<div class="slide_show_slide_in3_5_2">

			<img src="photo/2.jpg"><!-- 写真2 -->

			<label for="back2"><div class="left"><span class="arrow arrow-left"></span></div></label>

			<label for="next2"><div class="right"><span class="arrow arrow-right"></span></div></label>
		</div>

		<div class="slide_show_slide_in3_5_2">

			<img src="photo/3.jpg"><!-- 写真3 -->

			<label for="back3"><div class="left"><span class="arrow arrow-left"></span></div></label>

			<label for="next3"><div class="right"><span class="arrow arrow-right"></span></div></label>
		</div>

		<div class="slide_show_slide_in3_5_2">

			<img src="photo/4.jpg"><!-- 写真4 -->

			<label for="back4"><div class="left"><span class="arrow arrow-left"></span></div></label>

			<label for="next4"><div class="right"><span class="arrow arrow-right"></span></div></label>
		</div>

		<div class="slide_show_slide_in3_5_2">

			<img src="photo/5.jpg"><!-- 写真5 -->

			<label for="back5"><div class="left"><span class="arrow arrow-left"></span></div></label>

			<label for="next5"><div class="right"><span class="arrow arrow-right"></span></div></label>
		</div>

		<div class="slide_show_slide_in3_5_2">

			<img src="photo/1.jpg"><!-- ◆写真1 -->
		</div>
	</div>
</div>

CSSstyle.cssdownload

.slide_show_slide_in3_5{
	position: relative;
	overflow: hidden;
	width: 100%;
}
.slide_show_slide_in3_5:before{
	content: "";
	display: block;
	padding-top: 66%;
}
.slide_show_slide_in3_5 #back1,
.slide_show_slide_in3_5 #back2,
.slide_show_slide_in3_5 #back3,
.slide_show_slide_in3_5 #back4,
.slide_show_slide_in3_5 #back5,
.slide_show_slide_in3_5 #next1,
.slide_show_slide_in3_5 #next2,
.slide_show_slide_in3_5 #next3,
.slide_show_slide_in3_5 #next4,
.slide_show_slide_in3_5 #next5{
	display: none;
}
.slide_show_slide_in3_5_1{
	position: absolute;
	top: 0;
	width: 100%;
	animation: slide_show_slide_in3_5 30s infinite;
}
.slide_show_slide_in3_5_2{
	position: absolute;
	top: 0;
	width: 100%;
}
.slide_show_slide_in3_5_2:nth-of-type(1){
	left: 0%;
}
.slide_show_slide_in3_5_2:nth-of-type(2){
	left: 100%;
}
.slide_show_slide_in3_5_2:nth-of-type(3){
	left: 200%;
}
.slide_show_slide_in3_5_2:nth-of-type(4){
	left: 300%;
}
.slide_show_slide_in3_5_2:nth-of-type(5){
	left: 400%;
}
.slide_show_slide_in3_5_2:nth-of-type(6){
	left: 500%;
}
.slide_show_slide_in3_5_2:nth-of-type(7){
	left: 600%;
}
.slide_show_slide_in3_5_2 img{
	width: 100%;
}
.slide_show_slide_in3_5_2 .left,
.slide_show_slide_in3_5_2 .right{
	position: absolute;
	opacity: 0.5;
	top: 40%;
}
.slide_show_slide_in3_5_2 .left{
	left: 15px;
}
.slide_show_slide_in3_5_2 .right{
	right: 50px;
}
.slide_show_slide_in3_5_2 label div.left:hover{
	opacity: 1;
	transition-duration: 0.3s;
}
.slide_show_slide_in3_5_2 label div.right:hover{
	opacity: 1;
	transition-duration: 0.3s;
}
.slide_show_slide_in3_5_2 label div:hover{
	cursor: pointer;
}
.slide_show_slide_in3_5_2 .arrow{
	position: relative;
	display: inline-block;
	vertical-align: middle;
}
.slide_show_slide_in3_5_2 .arrow::before,
.slide_show_slide_in3_5_2 .arrow::after{
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	margin: auto;
	content: "";
	vertical-align: middle;
}
.slide_show_slide_in3_5_2 .arrow-right::before{
	box-sizing: border-box;
	width: 36px;
	height: 36px;
	border: 0px solid #000;
	background: rgba( 0, 0, 0, 0.5);
	border-radius: 50%;
}
.slide_show_slide_in3_5_2 .arrow-right::after{
	left: 9px;
	width: 9px;
	height: 9px;
	border-top: 4px solid rgba( 255, 255, 255, 0.5);
	border-right: 4px solid rgba( 255, 255, 255, 0.5);
	transform: rotate(45deg);
}
.slide_show_slide_in3_5_2 .arrow-left::before{
	box-sizing: border-box;
	width: 36px;
	height: 36px;
	border: 0px solid #000;
	background: rgba( 0, 0, 0, 0.5);
	border-radius: 50%;
}
.slide_show_slide_in3_5_2 .arrow-left::after{
	left: 13px;
	width: 9px;
	height: 9px;
	border-top: 4px solid rgba( 255, 255, 255, 0.5);
	border-right: 4px solid rgba( 255, 255, 255, 0.5);
	transform: rotate(-135deg);
}
.slide_show_slide_in3_5 #back1:checked ~ .slide_show_slide_in3_5_1{
	animation: slide_show_slide_in3_5_right1 30s infinite;
	animation-delay: -28.8s;
}
.slide_show_slide_in3_5 #back2:checked ~ .slide_show_slide_in3_5_1{
	animation: slide_show_slide_in3_5_right2 30s infinite;
	animation-delay: -22.8s;
}
.slide_show_slide_in3_5 #back3:checked ~ .slide_show_slide_in3_5_1{
	animation: slide_show_slide_in3_5_right3 30s infinite;
	animation-delay: -16.8s;
}
.slide_show_slide_in3_5 #back4:checked ~ .slide_show_slide_in3_5_1{
	animation: slide_show_slide_in3_5_right4 30s infinite;
	animation-delay: -10.8s;
}
.slide_show_slide_in3_5 #back5:checked ~ .slide_show_slide_in3_5_1{
	animation: slide_show_slide_in3_5_right5 30s infinite;
	animation-delay: -4.8s;
}
.slide_show_slide_in3_5 #next1:checked ~ .slide_show_slide_in3_5_1{
	animation: slide_show_slide_in3_5_left1 30s infinite;	
	animation-delay: -4.8s;
}
.slide_show_slide_in3_5 #next2:checked ~ .slide_show_slide_in3_5_1{
	animation: slide_show_slide_in3_5_left2 30s infinite;
	animation-delay: -10.8s;
}
.slide_show_slide_in3_5 #next3:checked ~ .slide_show_slide_in3_5_1{
	animation: slide_show_slide_in3_5_left3 30s infinite;
	animation-delay: -16.8s;
}
.slide_show_slide_in3_5 #next4:checked ~ .slide_show_slide_in3_5_1{
	animation: slide_show_slide_in3_5_left4 30s infinite;
	animation-delay: -22.8s;
}
.slide_show_slide_in3_5 #next5:checked ~ .slide_show_slide_in3_5_1{
	animation: slide_show_slide_in3_5_left5 30s infinite;
	animation-delay: -28.8s;
}
@keyframes slide_show_slide_in3_5{
	0%{
		left: -100%;
	}

	16%{
		left: -100%;
	}

	20%{
		left: -200%;
	}

	36%{
		left: -200%;
	}

	40%{
		left: -300%;
	}

	56%{
		left: -300%;
	}

	60%{
		left: -400%;
	}

	76%{
		left: -400%;
	}

	80%{
		left: -500%;
	}

	96%{
		left: -500%;
	}

	100%{
		left: -600%;
	}
}
@keyframes slide_show_slide_in3_5_left1{
	0%{
		left: -100%;
	}

	16%{
		left: -100%;
	}

	20%{
		left: -200%;
	}

	36%{
		left: -200%;
	}

	40%{
		left: -300%;
	}

	56%{
		left: -300%;
	}

	60%{
		left: -400%;
	}

	76%{
		left: -400%;
	}

	80%{
		left: -500%;
	}

	96%{
		left: -500%;
	}

	100%{
		left: -600%;
	}
}
@keyframes slide_show_slide_in3_5_left2{
	0%{
		left: -100%;
	}

	16%{
		left: -100%;
	}

	20%{
		left: -200%;
	}

	36%{
		left: -200%;
	}

	40%{
		left: -300%;
	}

	56%{
		left: -300%;
	}

	60%{
		left: -400%;
	}

	76%{
		left: -400%;
	}

	80%{
		left: -500%;
	}

	96%{
		left: -500%;
	}

	100%{
		left: -600%;
	}
}
@keyframes slide_show_slide_in3_5_left3{
	0%{
		left: -100%;
	}

	16%{
		left: -100%;
	}

	20%{
		left: -200%;
	}

	36%{
		left: -200%;
	}

	40%{
		left: -300%;
	}

	56%{
		left: -300%;
	}

	60%{
		left: -400%;
	}

	76%{
		left: -400%;
	}

	80%{
		left: -500%;
	}

	96%{
		left: -500%;
	}

	100%{
		left: -600%;
	}
}
@keyframes slide_show_slide_in3_5_left4{
	0%{
		left: -100%;
	}

	16%{
		left: -100%;
	}

	20%{
		left: -200%;
	}

	36%{
		left: -200%;
	}

	40%{
		left: -300%;
	}

	56%{
		left: -300%;
	}

	60%{
		left: -400%;
	}

	76%{
		left: -400%;
	}

	80%{
		left: -500%;
	}

	96%{
		left: -500%;
	}

	100%{
		left: -600%;
	}
}
@keyframes slide_show_slide_in3_5_left5{
	0%{
		left: -100%;
	}

	16%{
		left: -100%;
	}

	20%{
		left: -200%;
	}

	36%{
		left: -200%;
	}

	40%{
		left: -300%;
	}

	56%{
		left: -300%;
	}

	60%{
		left: -400%;
	}

	76%{
		left: -400%;
	}

	80%{
		left: -500%;
	}

	96%{
		left: -500%;
	}

	100%{
		left: -600%;
	}
}
@keyframes slide_show_slide_in3_5_right1{
	0%{
		left: -500%;
	}

	16%{
		left: -500%;
	}

	20%{
		left: -400%;
	}

	36%{
		left: -400%;
	}

	40%{
		left: -300%;
	}

	56%{
		left: -300%;
	}

	60%{
		left: -200%;
	}

	76%{
		left: -200%;
	}

	80%{
		left: -100%;
	}

	96%{
		left: -100%;
	}

	100%{
		left: 0%;
	}
}
@keyframes slide_show_slide_in3_5_right2{
	0%{
		left: -500%;
	}

	16%{
		left: -500%;
	}

	20%{
		left: -400%;
	}

	36%{
		left: -400%;
	}

	40%{
		left: -300%;
	}

	56%{
		left: -300%;
	}

	60%{
		left: -200%;
	}

	76%{
		left: -200%;
	}

	80%{
		left: -100%;
	}

	96%{
		left: -100%;
	}

	100%{
		left: 0%;
	}
}
@keyframes slide_show_slide_in3_5_right3{
	0%{
		left: -500%;
	}

	16%{
		left: -500%;
	}

	20%{
		left: -400%;
	}

	36%{
		left: -400%;
	}

	40%{
		left: -300%;
	}

	56%{
		left: -300%;
	}

	60%{
		left: -200%;
	}

	76%{
		left: -200%;
	}

	80%{
		left: -100%;
	}

	96%{
		left: -100%;
	}

	100%{
		left: 0%;
	}
}
@keyframes slide_show_slide_in3_5_right4{
	0%{
		left: -500%;
	}

	16%{
		left: -500%;
	}

	20%{
		left: -400%;
	}

	36%{
		left: -400%;
	}

	40%{
		left: -300%;
	}

	56%{
		left: -300%;
	}

	60%{
		left: -200%;
	}

	76%{
		left: -200%;
	}

	80%{
		left: -100%;
	}

	96%{
		left: -100%;
	}

	100%{
		left: 0%;
	}
}
@keyframes slide_show_slide_in3_5_right5{
	0%{
		left: -500%;
	}

	16%{
		left: -500%;
	}

	20%{
		left: -400%;
	}

	36%{
		left: -400%;
	}

	40%{
		left: -300%;
	}

	56%{
		left: -300%;
	}

	60%{
		left: -200%;
	}

	76%{
		left: -200%;
	}

	80%{
		left: -100%;
	}

	96%{
		left: -100%;
	}

	100%{
		left: 0%;
	}
}
/*  PC向けのスタイル：1024px以上 */
@media only screen and (min-width: 1024px){
.slide_show_slide_in3_5_2 .left,
.slide_show_slide_in3_5_2 .right{
	top: 45%;
}
}

Webサイト制作Tips

Webレイアウト

• 1カラム
• 1カラムヘッダー
• 1カラムフッター
• 1カラムヘッダー＆フッター
• 2カラム
• 2カラムヘッダー
• 2カラムフッダー
• 2カラムヘッダー＆フッター
• 3カラム
• 3カラムヘッダー
• 3カラムフッター
• 3カラムヘッダー＆フッター

HTML+CSSデザイン

• テキスト
• スライドショー
• スライドショー用タイマー
• モーダルウィンドウ
• 入力フォーム
• inputタグ
• selectタグ
• ラジオボタン
• ボタン

グローバルナビゲーション

• シンプル1
• シンプル1右からスライドイン
• シンプル1左からスライドイン
• シンプル1上からスライドイン
• シンプル1下からスライドイン
• シンプル1フェードイン
• シンプル1右からスライドイン､スライドアウト
• シンプル1左からスライドイン､スライドアウト
• シンプル1上からスライドイン､スライドアウト
• シンプル1下からスライドイン､スライドアウト

JavaScript

• inputタグ
• selectタグ
• videoタグ

PHP

• カレンダー
• 生年月日選択フォーム
• アクセスログ管理
• PDF出力
• Excel出力
• Word出力
• Composer

CakePHP

• Cakephp3

正規表現

• アルファベット
• ひらがな
• カタカナ
• 整数
• 携帯電話番号
• 郵便番号
• メタ文字｜基礎
• メタ文字｜応用
• 最短マッチ
• キャプチャ

Webサイトスコア改善

• 準備中