HTML-CSS入門講座

濱屋太郎

WebParts-1
写真・動画パーツ

目次

P1.1 はじめに

P1.1.1 概要

  • 「写真・動画パーツ」は、写真や動画などを使用したスライダーやギャラリーなどの写真・動画パーツを説明します。
  • 「写真・動画パーツ」で説明している機能は、以下の通りです。
(1) スライドショー
複数の写真を使って画像切り替えを行います。
(2) ギャラリー
複数の写真を確認しやすく表示します。

P1.2 スライダー

P1.2.1 スライダー(bxSlider)

(1) 説明

  • bxSliderスライダー用ライブラリィを使用したコンテンツスライダーです。
  • bxSliderは、ファイル容量が小さく軽量設計になっています。

(2) 表示形式

  • 写真のスライダー表示を確認してください。

リロード  別画面で表示

(3) 使用機能

JavaScript
  • 使用します。
jQuery
個別ライブラリィ
  • コンテンツスライダー(bxSlider)
    公式サイト:bxSlider(https://bxslider.com/)
    CDN(JS):https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.15/jquery.bxslider.min.js
    CDN(CSS):https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.15/jquery.bxslider.css
    CDN(GIF):https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.15/images/bx_loader.gif
    CDN(PNG):https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.15/images/controls.png

(4) ソースコード

ソースコード表示
■ ファイル配置
  • image-slider-01
    • index.html
    • css
      • jquery.bxslider.css
    • images
      • bx_loader.gif
      • controls.png
      • sample-01.jpg
      • sample-02.jpg
      • sample-03.jpg
      • sample-04.jpg
      • sample-05.jpg
    • js
      • jquery.bxslider.min.js
      • jquery-3.6.0.min.js

HTML(index.html)


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>スライダー(bxslider)のサンプル</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,viewport-fit=cover">
<!-- ▼▼▼ CSS(ここから) ▼▼▼ -->
<link rel="stylesheet" href="css/jquery.bxslider.css" type="text/css">
<!-- ▲▲▲ CSS(ここまで) ▲▲▲ -->
<style>
body,div,h1,h2,h3,h4,h5,h6,pre,p,a,select,header,nav,main,section,footer,ul,li {
	padding: 0;
	margin: 0;
	font-size: 16px;
	line-height: 1.6;
	word-wrap: break-word;
	box-sizing: border-box;
}
body {
	font-family: "Hiragino Sans W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", "Meiryo", "MS Pゴシック", "MS PGothic", sans-serif;
}
.container {
	padding: 10px 10px 30px 10px;
	border: #fff 1px solid;
}

/* ▼▼▼ CSS(ここから) ▼▼▼ */
/* スライダー(bxslider)の設定 */
.bx-wrapper {							/* スライダー領域の設定 */
	max-width: 960px;
	margin: 0 auto;
}
/* ▲▲▲ CSS(ここまで) ▲▲▲ */
</style>
</head>

<body>

<div class="container">
	<!-- スライダー(bxslider)の定義 -->
	<div class="bx-wrapper">
<!-- ▼▼▼ HTML(ここから) ▼▼▼ -->
		<ul class="bxslider">
			<li><img src="images/sample-01.jpg" alt="サンプル01"></li>
			<li><img src="images/sample-02.jpg" alt="サンプル02"></li>
			<li><img src="images/sample-03.jpg" alt="サンプル03"></li>
			<li><img src="images/sample-04.jpg" alt="サンプル04"></li>
			<li><img src="images/sample-05.jpg" alt="サンプル05"></li>
		</ul>
<!-- ▲▲▲ HTML(ここまで) ▲▲▲ -->
	</div>
</div>

<!-- ▼▼▼ SCRIPT(ここから) ▼▼▼ -->
<!-- スライダー(bxslider)の制御 -->
<script src="js/jquery-3.6.0.min.js" type="text/javascript"></script>
<script src="js/jquery.bxslider.min.js" type="text/javascript"></script>
<script>
$(function(){
	 $('.bxslider').bxSlider({			/* スライダーの開始指示 */
		auto: true,
		slideWidth: 960,
	});
});
</script>
<!-- ▲▲▲ SCRIPT(ここまで) ▲▲▲ -->

</body>
</html>

P1.2.2 スライダー(slick その1)

(1) 説明

  • slickスライダー用ライブラリィを使用したコンテンツスライダーです。
  • slickは、豊富なオプション設定を持っています。

(2) 表示形式

  • 写真のスライダー表示を確認してください。

リロード  別画面で表示

(3) 使用機能

JavaScript
  • 使用します。
jQuery
個別ライブラリィ
  • コンテンツスライダー(slick)
    公式サイト:slick(http://kenwheeler.github.io/slick/)
    CDN(JS):https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js
    CDN(CSS):https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css

(4) ソースコード

ソースコード表示
■ ファイル配置
  • image-slider-02
    • index.html
    • css
      • slick.css
      • slick-theme.css
    • fonts
      • slick.eot
      • slick.svg
      • slick.ttf
      • slick.woff
    • images
      • ajax-loader.gif
      • sample-01.jpg
      • sample-02.jpg
      • sample-03.jpg
      • sample-04.jpg
      • sample-05.jpg
    • js
      • jquery-3.6.0.min.js
      • slick.min.js

HTML(index.html)


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>スライダー(slick)のサンプル</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,viewport-fit=cover">
<!-- ▼▼▼ CSS(ここから) ▼▼▼ -->
<link href="css/slick-theme.css" rel="stylesheet" type="text/css">
<link href="css/slick.css" rel="stylesheet" type="text/css">
<!-- ▲▲▲ CSS(ここまで) ▲▲▲ -->
<style>
body,div,h1,h2,h3,h4,h5,h6,pre,p,a,select,header,nav,main,section,footer,ul,li {
	padding: 0;
	margin: 0;
	font-size: 16px;
	line-height: 1.6;
	word-wrap: break-word;
	box-sizing: border-box;
}
body {
	font-family: "Hiragino Sans W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", "Meiryo", "MS Pゴシック", "MS PGothic", sans-serif;
}
.container {
	padding: 10px 40px;
	border: #fff 1px solid;
}

/* ▼▼▼ CSS(ここから) ▼▼▼ */
/* スライダー(slick)の設定 */
.slick-slider {
	max-width: 900px;
	margin: 0 auto;
}
.slider img{
	height: auto;
	width: 100%;
	margin: 0 auto;
}
.slick-prev:before, .slick-next:before {
	color: #000;
}
.slick-loading .slick-list {
    background: #fff url('images/ajax-loader.gif') center center no-repeat;
}
@font-face {
    font-family: 'slick';
    font-weight: normal;
    font-style: normal;
    src: url('fonts/slick.eot');
    src: url('fonts/slick.eot?#iefix') format('embedded-opentype'), url('fonts/slick.woff') format('woff'), url('fonts/slick.ttf') format('truetype'), url('fonts/slick.svg#slick') format('svg');
}
/* ▲▲▲ CSS(ここまで) ▲▲▲ */
</style>
</head>

<body>

<div class="container">
<!-- ▼▼▼ HTML(ここから) ▼▼▼ -->
	<!-- スライダー(slick)の定義 -->
	<ul class="slider slick-slider">
		<li><img src="images/sample-01.jpg" alt="サンプル01"></li>
		<li><img src="images/sample-02.jpg" alt="サンプル02"></li>
		<li><img src="images/sample-03.jpg" alt="サンプル03"></li>
		<li><img src="images/sample-04.jpg" alt="サンプル04"></li>
		<li><img src="images/sample-05.jpg" alt="サンプル05"></li>
	</ul>
<!-- ▲▲▲ HTML(ここまで) ▲▲▲ -->
</div>

<!-- ▼▼▼ SCRIPT(ここから) ▼▼▼ -->
<!-- スライダー(slick)制御 -->
<script src="js/jquery-3.6.0.min.js" type="text/javascript"></script>
<script src="js/slick.min.js" type="text/javascript"></script>
<script>
$('.slider').slick({					/* スライダー開始指示 */
	autoplay: true,
	autoplaySpeed: 2000,
	dots: true,
});
</script>
<!-- ▲▲▲ SCRIPT(ここまで) ▲▲▲ -->

</body>
</html>

P1.2.3 スライダー(slick その2)

(1) 説明

  • slickスライダー用ライブラリィを使用したコンテンツスライダーです。
  • 前後のコンテンツの一部表示と中心コンテンツの拡大表示オプションを使用しました。

(2) 表示形式

  • 写真のスライダー表示を確認してください。

リロード  別画面で表示

(3) 使用機能

JavaScript
  • 使用します。
jQuery
個別ライブラリィ
  • コンテンツスライダー(slick)
    公式サイト:slick(http://kenwheeler.github.io/slick/)
    CDN(JS):https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js
    CDN(CSS):https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css

(4) ソースコード

ソースコード表示
■ ファイル配置
  • image-slider-03
    • index.html
    • css
      • slick.css
      • slick-theme.css
    • fonts
      • slick.eot
      • slick.svg
      • slick.ttf
      • slick.woff
    • images
      • ajax-loader.gif
      • sample-01.jpg
      • sample-02.jpg
      • sample-03.jpg
      • sample-04.jpg
      • sample-05.jpg
    • js
      • jquery-3.6.0.min.js
      • slick.min.js

HTML(index.html)


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>スライダー(slick)のサンプル</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,viewport-fit=cover">
<!-- ▼▼▼ CSS(ここから) ▼▼▼ -->
<link href="css/slick-theme.css" rel="stylesheet" type="text/css">
<link href="css/slick.css" rel="stylesheet" type="text/css">
<!-- ▲▲▲ CSS(ここまで) ▲▲▲ -->
<style>
body,div,h1,h2,h3,h4,h5,h6,pre,p,a,select,header,nav,main,section,footer,ul,li {
	padding: 0;
	margin: 0;
	font-size: 16px;
	line-height: 1.6;
	word-wrap: break-word;
	box-sizing: border-box;
}
body {
	font-family: "Hiragino Sans W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", "Meiryo", "MS Pゴシック", "MS PGothic", sans-serif;
}
.container {
	padding: 10px;
	border: #fff 1px solid;
}

/* ▼▼▼ CSS(ここから) ▼▼▼ */
/* スライダー(slick)の設定 */
.slider img{
	height: auto;
	width: 100%;
	margin: 0 auto;
}
.slick-slide img {
	width: 100%;
}
.slick-slide {
	transition: 0.3s ease-in-out;
	transform: scale(0.75);
}
.is--active {
	transform: scale(1);
}
.slick-prev:before, .slick-next:before {
	color: #000;
}
.slick-loading .slick-list {
    background: #fff url('images/ajax-loader.gif') center center no-repeat;
}
@font-face {
    font-family: 'slick';
    font-weight: normal;
    font-style: normal;
    src: url('fonts/slick.eot');
    src: url('fonts/slick.eot?#iefix') format('embedded-opentype'), url('fonts/slick.woff') format('woff'), url('fonts/slick.ttf') format('truetype'), url('fonts/slick.svg#slick') format('svg');
}
/* ▲▲▲ CSS(ここまで) ▲▲▲ */
</style>
</head>

<body>

<div class="container">
<!-- ▼▼▼ HTML(ここから) ▼▼▼ -->
	<!-- スライダー(slick)の定義 -->
	<ul class="slider slick-slider">
		<li><img src="images/sample-01.jpg" alt="サンプル01"></li>
		<li><img src="images/sample-02.jpg" alt="サンプル02"></li>
		<li><img src="images/sample-03.jpg" alt="サンプル03"></li>
		<li><img src="images/sample-04.jpg" alt="サンプル04"></li>
		<li><img src="images/sample-05.jpg" alt="サンプル05"></li>
	</ul>
<!-- ▲▲▲ HTML(ここまで) ▲▲▲ -->
</div>

<!-- ▼▼▼ SCRIPT(ここから) ▼▼▼ -->
<!-- スライダー(slick)制御 -->
<script src="js/jquery-3.6.0.min.js" type="text/javascript"></script>
<script src="js/slick.min.js" type="text/javascript"></script>
<script>
$('.slider').slick({
	autoplay: true,
	dots: true,
	arrows: false,
	centerMode: true,
	centerPadding: '25%',
});
$('.slider').on('beforeChange', function(){
	$('.slick-current').removeClass('is--active');
});
$('.slick-current').addClass('is--active');
$('.slider').on('afterChange', function(){
	$('.slick-current').addClass('is--active');
});
</script>
<!-- ▲▲▲ SCRIPT(ここまで) ▲▲▲ -->

</body>
</html>

P1.2.4 スライダー(クロスフェード)

(1) 説明

  • jQueryを使用したクロスフェードのコンテンツスライダーです。

(2) 表示形式

  • 写真のクロスフェード表示を確認してください。

リロード  別画面で表示

(3) 使用機能

JavaScript
  • 使用します。
jQuery
個別ライブラリィ
  • 使用しません。

(4) ソースコード

ソースコード表示
■ ファイル配置
  • image-slider-04
    • index.html
    • images
      • sample-01.jpg
      • sample-02.jpg
      • sample-03.jpg
      • sample-04.jpg
      • sample-05.jpg
    • js
      • jquery-3.6.0.min.js

HTML(index.html)


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>スライダー(crossfade)のサンプル</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,viewport-fit=cover">
<style>
body,div,h1,h2,h3,h4,h5,h6,pre,p,a,select,header,nav,main,section,footer,ul,li {
	padding: 0;
	margin: 0;
	font-size: 16px;
	line-height: 1.6;
	word-wrap: break-word;
	box-sizing: border-box;
}
body {
	font-family: "Hiragino Sans W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", "Meiryo", "MS Pゴシック", "MS PGothic", sans-serif;
}
.container {
	padding: 10px;
	border: #fff 1px solid;
}
img {
	width: 100%;
	vertical-align: middle;
}

/* ▼▼▼ CSS(ここから) ▼▼▼ */
/* スライダー(crossfade)の設定 */
#slide {
	width: 100%;
	margin: 0 auto;
	list-style-type: none;
}
#slide ul {
	position: relative;
	width: 100%;
	list-style-type: none;
}
#slide ul li {
	width: 100%;
	position: absolute;
	left: 0;
	top: 0;
}
#slide ul li img {
	width: 100%;
}
/* ▲▲▲ CSS(ここまで) ▲▲▲ */
</style>
</head>

<body>

<div class="container">
<!-- ▼▼▼ HTML(ここから) ▼▼▼ -->
	<!-- スライダー(crossfade)の定義 -->
	<div id="slide">
		<ul>
			<li><img src="images/sample-01.jpg" alt="サンプル01"></li>
			<li><img src="images/sample-02.jpg" alt="サンプル02"></li>
			<li><img src="images/sample-03.jpg" alt="サンプル03"></li>
			<li><img src="images/sample-04.jpg" alt="サンプル04"></li>
			<li><img src="images/sample-05.jpg" alt="サンプル05"></li>
		</ul>
	</div>
<!-- ▲▲▲ HTML(ここまで) ▲▲▲ -->
	<!-- body枠を確保するためにダミーで記述 -->
	<div>
		<img src="images/sample-01.jpg" alt="サンプル01">
	</div>
</div>

<!-- ▼▼▼ SCRIPT(ここから) ▼▼▼ -->
<!-- スライダー(crossfade)制御 -->
<script src="js/jquery-3.6.0.min.js" type="text/javascript"></script>
<script>
$(function() {
	var $interval = 3000;				/* 切り替わりの間隔(ミリ秒) */
	var $fade_speed = 2000;				/* フェード処理の早さ(ミリ秒) */
	$("#slide ul li").css({"position":"relative"});
	$("#slide ul li").hide().css({"position":"absolute", "top":0, "left":0});
	$("#slide ul li:first").addClass("active").show();
	setInterval(function() {
		var $active = $("#slide ul li.active");
		var $next = $active.next("li").length?$active.next("li") : $("#slide ul li:first");
		$active.fadeOut($fade_speed).removeClass("active");
		$next.fadeIn($fade_speed).addClass("active");
	},$interval);
});
</script>
<!-- ▲▲▲ SCRIPT(ここまで) ▲▲▲ -->

</body>
</html>

P1.3 ギャラリー

P1.3.1 ギャラリー(Colorbox)

(1) 説明

  • Colorboxプラグインを使用した写真ギャラリーです。
  • Colorboxプラグインは、モーダルウィンドウプラグインでポップアップウィンドウを表示することができます。

(2) 表示形式

  • 写真をクリックしてポップアップウィンドプが表示されることを確認してください。

別画面で表示

(3) 使用機能

JavaScript
  • 使用します。
    ポップアップウィンドウ(ギャラリー)の表示を指示します。
jQuery
個別ライブラリィ

(4) ソースコード

ソースコード表示
■ ファイル配置
  • image-gallery-01
    • index.html
    • css
      • colorbox.css
    • images
      • border.png
      • controls.png
      • loading.gif
      • loading_background.png
      • overlay.png
      • sample-01.jpg
      • sample-02.jpg
      • sample-03.jpg
      • sample-04.jpg
      • sample-05.jpg
    • js
      • jquery.colorbox-ja.js
      • jquery.colorbox-min.js
      • jquery-3.6.0.min.js

HTML(index.html)


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>写真ギャラリー(colorbox)のサンプル</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,viewport-fit=cover">
<!-- ▼▼▼ CSS(ここから)▼▼▼ -->
<link rel="stylesheet" href="css/colorbox.css" type="text/css">
<!-- ▲▲▲ CSS(ここまで) ▲▲▲ -->
<style>
body,div,h1,h2,h3,h4,h5,h6,pre,p,a,select,header,nav,main,section,footer,ul,li {
	padding: 0;
	margin: 0;
	font-size: 16px;
	line-height: 1.6;
	word-wrap: break-word;
	box-sizing: border-box;
}
body {
	font-family: "Hiragino Sans W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", "Meiryo", "MS Pゴシック", "MS PGothic", sans-serif;
}
.container {
	padding: 10px;
	border: #fff 1px solid;
}

/* ▼▼▼ CSS(ここから)▼▼▼ */
/* 写真ギャラリー(colorbox)の設定 */
.colorbox a img {
	width: calc((100% - 22px;) / 5);	/* 写真の枚数 */
}
/* ▲▲▲ CSS(ここまで) ▲▲▲ */
</style>
</head>

<body>

<div class="container">
<!-- ▼▼▼ HTML(ここから)▼▼▼ -->
	<!-- 写真ギャラリー(colorbox)の定義 -->
	<div class="colorbox">
		<a class="gallery" href="images/sample-01.jpg" title="サンプル01"><img src="images/sample-01.jpg" alt="サンプル01"></a>
		<a class="gallery" href="images/sample-02.jpg" title="サンプル02"><img src="images/sample-02.jpg" alt="サンプル02"></a>
		<a class="gallery" href="images/sample-03.jpg" title="サンプル03"><img src="images/sample-03.jpg" alt="サンプル03"></a>
		<a class="gallery" href="images/sample-04.jpg" title="サンプル05"><img src="images/sample-04.jpg" alt="サンプル04"></a>
		<a class="gallery" href="images/sample-05.jpg" title="サンプル05"><img src="images/sample-05.jpg" alt="サンプル05"></a>
	</div>
<!-- ▲▲▲ HTML(ここまで) ▲▲▲ -->
</div>

<!-- ▼▼▼ SCRIPT(ここから)▼▼▼ -->
<!-- 写真ギャラリー(colorbox)の制御 -->
<script src="js/jquery-3.6.0.min.js" type="text/javascript"></script>
<script src="js/jquery.colorbox-min.js" type="text/javascript"></script>
<script src="js/jquery.colorbox-ja.js" type="text/javascript"></script>
<script>
$(function() {
	$(".gallery").colorbox({
		rel: 'slideshow',
		slideshow: true,
		slideshowSpeed: 3000,
		maxWidth: "80%",
		maxHeight: "80%",
		opacity: 0.7
	});
});
</script>
<!-- ▲▲▲ SCRIPT(ここまで) ▲▲▲ -->

</body>
</html>

ロケット本体
PAGE
TOP
ロケット炎