css だけで作るスライドショー・フォトギャラリー » » tyosbb

Google サイトにCSSでLightbox型フォトギャラリーを

tyosbb — Fri, 22 Feb 2019 11:27:16 +0000

　Google Sites のデフォルトにフォトギャラリーが装備されていないので、本サイトのLightboxタイプのフォトギャラリーをほぼそのまま表示する方法を記述する。Google サイト上に表示するため、CSSに変更を加えているが、用意した写真のサイズや表示したいサイズに合わせて、CSSの数値を調整して頂きたい。

　Google サイトでのサンプル表示と埋め込み用HTML/CSSは、以下にあります。

　https://sites.google.com/view/photogallery-on-gglsites/

Google Sites にCSSでスライダー、スライドショーを

tyosbb — Sun, 17 Feb 2019 10:59:09 +0000

　無料でサイトを公開できるGoogle サイトは、googleドライブなど他のGoogleツールとの相性が良く、また、大きな広告も入らないということで、簡単なページで構成するようなサイトには使い勝手の良いツールと言えよう。しかし、画像やテキストボックスなどいろいろな要素を簡単に挿入できるのが便利であるという反面、見た目の良いデザインのページを作るには制約がある。
　本稿では、デフォルトの要素にはない「スライドショー」と「スライダー」を、HTML埋め込み機能を使って、ページに挿入する方法に関して記述する。

　すなわち、Google Driveにアップロードした画像をスライドのソースとして、スライドショー（Slideshow）とスライダー（Slider）を作成する方法に関する投稿である。

　google drive にアップロードされた画像を、自分のサイトに埋め込むには、以下のコードを挿入したいところに記述すればよい。
　
　ここで、id=以下の文字列は、該当画像のgoogle drive の共有リンクを取得した時に得られるidである。
　（共有リンクは、https://drive.google.com/open?id=1Nvgzl_EC-MsmlR4yKLIThY2M4H_Mt-_b、となっている）

　以下のGoogleSitesのページに、スライドショーとスライダーのサンプルを、作成方法、HTML/CSSコードとともに示した。

　・スライドショー：　https://sites.google.com/view/slideshow-on-gglsites
　・スライダー　　：　https://sites.google.com/view/slider-on-gglsites

　なお、ここで使用したHTMLとCSSのコードは、それぞれ、本サイトの「フェイドイン・アウト型スライドショー（レスポンシブ）」、「スライダー/左右移動型２(レスポンシブ)」と全く同じものである。

スライダー/左右移動型２(レスポンシブ)

tyosbb — Thu, 14 Feb 2019 02:09:20 +0000

　左右にスライドする形式のスライダーを「スライダー/左右移動型(レスポンシブ)」として投稿済みであるが、このタイプは、戻るボタン（左側のスライドを登場させる）をクリックすると左方向のスライドショーに切り替わる。世の中で使われている多くのスライダーの場合は、戻るボタンで左方向に戻っても、右方向へのスライドショーが展開する。
　そこで、スライドショーは常に右方向で展開するタイプのスライダーを作成することにした。
　ただし、css animation の制約で、進行中のanimationを続けてスタートすることができないということがあり、戻るボタンをクリックして前のスライドに戻り、再びクリックしたスライドに戻った時に戻るボタンをクリックしたケースでは動作しない。こう言ったケースはまれだと思い、実用的には使えるのかなということで、ここに投稿します。このような現象を回避する方法としては、進行中のanimationをjavascriptで削除する方法がweb上で多数紹介されているので、そちらを参考にしていただきたい。

サンプル（DEMO）

こちらの別ページにあります。

本サンプル表示用HTML

本サンプル表示用CSS

/* 表示画面 */
#stage {
	position: relative;
	max-width: 600px;
	margin: 0 auto;
	overflow: hidden;
}
/*全ての写真を水平一列に格納したdiv、#photosに,
スライドショーの animation を設定*/
#photos {
	position:absolute;
	top:0;
	width:100%;
	animation: imgPassToLeft0 30s infinite;
	-webkit-animation: imgPassToLeft0 30s infinite;
}
/*各写真の並び位置を設定
#photo1, #photo2, #photo3, #photo4, #photo5 */
#photo0 { left:  0%; }
#photo1 { left:100%; } 
#photo2 { left:200%; }
#photo3 { left:300%; }
#photo4 { left:400%; }
#photo5 { left:500%; }
#photo6 { left:600%; }
.pic { position:absolute;top:0;width:100%; }
/*写真サイズを可変に*/
.pic img { width:100%; }

/* 全てのラジオボタンを非表示に */
#back1,#back2,#back3,#back4,#back5,#next1,#next2,#next3,#next4,#next5{
	display: none;
}
/*送りボタン文字（＜、＞）の設定*/
.b_left span, .b_right span {
	position: absolute;
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size: 40px;
	font-weight: bold;
	opacity:0;
	top: 40%;
	color:#EEE;
}
.b_left span {
	left: 5%;;	
}
.b_right span {
	left: 85%;
}
/*ボタン文字hover時の設定*/
.pic:hover > label div span {
	opacity:1;
	color:#EEE;
}
.pic label div span:hover {
	color:#f00;
	cursor:pointer;
}
/* 各送りボタンクリック時のanimation設定 */
#next1:checked ~ #photos {
	animation: imgPassToLeft1 30s infinite;	
	animation-delay: -4.8s;
	-webkit-animation: imgPassToLeft1 30s infinite;	
	-webkit-animation-delay: -4.8s;
}
#next2:checked ~ #photos {	
	animation: imgPassToLeft2 30s infinite;
	animation-delay: -10.8s;
	-webkit-animation: imgPassToLeft2 30s infinite;
	-webkit-animation-delay: -10.8s;
}
#next3:checked ~ #photos {
	animation: imgPassToLeft3 30s infinite;
	animation-delay: -16.8s;
	-webkit-animation: imgPassToLeft3 30s infinite;
	-webkit-animation-delay: -16.8s;
}
#next4:checked ~ #photos {
	animation: imgPassToLeft4 30s infinite;
	animation-delay: -22.8s;
	-webkit-animation: imgPassToLeft4 30s infinite;
	-webkit-animation-delay: -22.8s;
}
#next5:checked ~ #photos {
	animation: imgPassToLeft5 30s infinite;
	animation-delay: -28.8s;
	-webkit-animation: imgPassToLeft5 30s infinite;
	-webkit-animation-delay: -28.8s;
}
#back1:checked ~ #photos {
	animation: toRight1 6s 0s forwards, imgPassToRight1 30s 6s infinite;
}
#back2:checked ~ #photos {
	animation: toRight2 6s 0s forwards, imgPassToRight2 30s 6s infinite;
}
#back3:checked ~ #photos {
	animation: toRight3 6s 0s forwards, imgPassToRight3 30s 6s infinite;
}
#back4:checked ~ #photos {
	animation: toRight4 6s 0s forwards, imgPassToRight4 30s 6s infinite;
}
#back5:checked ~ #photos {
	animation: toRight5 6s 0s forwards, imgPassToRight5 30s 6s infinite;
}
/* animation設定 */
@keyframes imgPassToLeft0 {
	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%; }
}
@-webkit-keyframes imgPassToLeft0 {
	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 imgPassToLeft1 {
	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%; }
}
@-webkit-keyframes imgPassToLeft1 {
	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 imgPassToLeft2 {
	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 imgPassToLeft3 {
	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 imgPassToLeft4 {
	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 imgPassToLeft5 {
	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 imgPassToRight1 {
	0% { left: 0%; }
	4% { left: -100%; }
	20% { left:-100%; }
	24% { left:-200%; }
	40% { left:-200%; }
	44% { left:-300%; }
	60% { left:-300%; }
	64% { left:-400%; }
	80% { left:-400%; }
	84% { left:-500%; }
	100% { left:-500%; }
}
@keyframes imgPassToRight2 {
	0% { left: -100%; }
	4% { left: -200%; }
	20% { left:-200%; }
	24% { left:-300%; }
	40% { left:-300%; }
	44% { left:-400%; }
	60% { left:-400%; }
	64% { left:-500%; }
	80% { left:-500%; }
	83.999% { left:-600%; }
	84% { left:-100%; }
	100% { left:-100%; }
}
@keyframes imgPassToRight3 {
	0% { left: -200%; }
	4% { left: -300%; }
	20% { left:-300%; }
	24% { left:-400%; }
	40% { left:-400%; }
	44% { left:-500%; }
	60% { left:-500%; }
	63.999% { left:-600%; }
	64% { left:-100%; }
	80% { left:-100%; }
	84% { left:-200%; }
	100% { left:-200%; }
}
@keyframes imgPassToRight4 {
	0% { left: -300%; }
	4% { left: -400%; }
	20% { left:-400%; }
	24% { left:-500%; }
	40% { left:-500%; }
	43.999% { left:-600%; }
	44% { left:-100%; }
	60% { left:-100%; }
	64% { left:-200%; }
	80% { left:-200%; }
	84% { left:-300%; }
	100% { left:-300%; }
}
@keyframes imgPassToRight5 {
	0% { left: -400%; }
	4% { left: -500%; }
	20% { left:-500%; }
	23.999% { left:-600%; }
	24% { left:-100%; }
	40% { left:-100%; }
	44% { left:-200%; }
	60% { left:-200%; }
	64% { left:-300%; }
	80% { left:-300%; }
	84% { left:-400%; }
	100% { left:-400%; }
}
@keyframes toRight1 {
	0% { left:-100%; }
	19.999% { left:0%; }
	20% { left: -500%; }
	100% { left:-500%; display:none;}
}
@keyframes toRight2 {
	0% { left:-200%; }
	20% { left: -100%; }
	100% { left:-100%; display:none;}
}
@keyframes toRight3 {
	0% { left:-300%; }
	20% { left: -200%; }
	100% { left:-200%; display:none;}
}
@keyframes toRight4 {
	0% { left:-400%; }
	20% { left: -300%; }
	100% { left: -300%; display:none;}
}
@keyframes toRight5 {
	0% { left:-500%; }
	20% { left: -400%; }
	100% { left: -400%; display:none;}
}

CSSのポイント説明

・「スライダー/左右移動型(レスポンシブ)」との違いは、戻る（＜）ボタンをクリックしたときに発生するanimationで
・左のスライドを右方向スラインドインで登場させるanimation(1)と、引き続きスライドショーを展開するanimation(2)の二つのanimationを再生するようにしている
・animation(1)は、6秒（スライド切換え時間）の登場終了でそのままの状態を維持し、animation(2)は、6秒後に再生が始まるように設定している

スライス（分割画像）連続登場型スライドショー

tyosbb — Tue, 08 May 2018 02:29:46 +0000

　スライドを縦方向に分割した（ここでは8分割）画像の各々が、拡大移動しながら連続して登場し、最終的にはステージに本来の画像を表示するというタイプのスライドショーである。
　画像を分割するには、fireworksなどの定番ソフトがあるが、photoscapeのような無料ソフトの使用が便利である。

用意する画像

　600*338pxのスライド（ここでは5枚）の各々を縦に分割（ここでは8分割）し、各スライドにつき短冊状のスライス画像（幅75PX、高さ338px）8枚を作成し、imgフォルダ（ここでは　wp-images/img14）に入れておく。画像ファイルのネーミングは、1枚目：11-18.jpg、2枚目：21-28.jpg のようにする。

サンプル（DEMO）

本サンプル表示用HTML

本サンプル表示用CSS

/* 表示領域の設定 */
#stage
 { position:relative;
   max-width:600px;
   overflow:hidden;
 }
/* 表示領域の確保 */
.slide {
   width:100%;
   padding-top:12%;
 }
/* 各スライスの初期配置 */
.slice { position:absolute; top:0; left:100%; width:12.5%; }
/* 各スライスのanimationのセット */
#slide1 .slice1 { animation:appr1 30s ease 0s infinite; }
#slide1 .slice2 { animation:appr2 30s ease 0s infinite; }
#slide1 .slice3 { animation:appr3 30s ease 0s infinite; }
#slide1 .slice4 { animation:appr4 30s ease 0s infinite; }
#slide1 .slice5 { animation:appr5 30s ease 0s infinite; }
#slide1 .slice6 { animation:appr6 30s ease 0s infinite; }
#slide1 .slice7 { animation:appr7 30s ease 0s infinite; }
#slide1 .slice8 { animation:appr8 30s ease 0s infinite; }
#slide2 .slice1 { animation:appr1 30s ease 6s infinite; }
#slide2 .slice2 { animation:appr2 30s ease 6s infinite; }
#slide2 .slice3 { animation:appr3 30s ease 6s infinite; }
#slide2 .slice4 { animation:appr4 30s ease 6s infinite; }
#slide2 .slice5 { animation:appr5 30s ease 6s infinite; }
#slide2 .slice6 { animation:appr6 30s ease 6s infinite; }
#slide2 .slice7 { animation:appr7 30s ease 6s infinite; }
#slide2 .slice8 { animation:appr8 30s ease 6s infinite; }
#slide3 .slice1 { animation:appr1 30s ease 12s infinite; }
#slide3 .slice2 { animation:appr2 30s ease 12s infinite; }
#slide3 .slice3 { animation:appr3 30s ease 12s infinite; }
#slide3 .slice4 { animation:appr4 30s ease 12s infinite; }
#slide3 .slice5 { animation:appr5 30s ease 12s infinite; }
#slide3 .slice6 { animation:appr6 30s ease 12s infinite; }
#slide3 .slice7 { animation:appr7 30s ease 12s infinite; }
#slide3 .slice8 { animation:appr8 30s ease 12s infinite; }
#slide4 .slice1 { animation:appr1 30s ease 18s infinite; }
#slide4 .slice2 { animation:appr2 30s ease 18s infinite; }
#slide4 .slice3 { animation:appr3 30s ease 18s infinite; }
#slide4 .slice4 { animation:appr4 30s ease 18s infinite; }
#slide4 .slice5 { animation:appr5 30s ease 18s infinite; }
#slide4 .slice6 { animation:appr6 30s ease 18s infinite; }
#slide4 .slice7 { animation:appr7 30s ease 18s infinite; }
#slide4 .slice8 { animation:appr8 30s ease 18s infinite; }
#slide5 .slice1 { animation:appr1 30s ease 24s infinite; }
#slide5 .slice2 { animation:appr2 30s ease 24s infinite; }
#slide5 .slice3 { animation:appr3 30s ease 24s infinite; }
#slide5 .slice4 { animation:appr4 30s ease 24s infinite; }
#slide5 .slice5 { animation:appr5 30s ease 24s infinite; }
#slide5 .slice6 { animation:appr6 30s ease 24s infinite; }
#slide5 .slice7 { animation:appr7 30s ease 24s infinite; }
#slide5 .slice8 { animation:appr8 30s ease 24s infinite; }

/* 各スライスのanimation */
@keyframes appr1 {
	0% {left:100%; z-index:100; transform:scale(0,0); }
	3% { left:0%; transform:scale(1,1); }
	20% { left:0%; }
	100% { left:0%; z-index:0; }
}
@keyframes appr2 {
	0% {left:100%; z-index:100; transform:scale(0,0);}
	0.4% { left:100%; transform:scale(0,0);}
	3% { left:12.5%; transform:scale(1,1); }
	20% { left:12.5%;}
	100% { left:12.5%; z-index:0; }
}
@keyframes appr3 {
	0% {left:100%; z-index:100; transform:scale(0,0); }
	0.8% { left:100%; transform:scale(0,0); }
	3% { left:25%; transform:scale(1,1); }
	20% { left:25%;}
	100% { left:25%; z-index:0; }
}
@keyframes appr4 {
	0% {left:100%; z-index:100; transform:scale(0,0); }
	1.2% { left:100%; transform:scale(0,0); }
	3% { left:37.5%; transform:scale(1,1); }
	20% { left:37.5%;}
	100% { left:37.5%; z-index:0; }
}
@keyframes appr5 {
	0% {left:100%; z-index:100; transform:scale(0,0); }
	1.6% { left:100%; transform:scale(0,0); }
	3% { left:50%; transform:scale(1,1); }
	20% { left:50%;}
	100% { left:50%; z-index:0; }
}
@keyframes appr6 {
	0% {left:100%; z-index:100; transform:scale(0,0); }
	2.0% { left:100%; transform:scale(0,0); }
	3% { left:62.5%; transform:scale(1,1); }
	20% { left:62.5%;}
	100% { left:62.5%; z-index:0; }
}
@keyframes appr7 {
	0% {left:100%; z-index:100; transform:scale(0,0); }
	2.4% { left:100%; transform:scale(0,0); }
	3% { left:75%; transform:scale(1,1); }
	20% { left:75%;}
	100% { left:75%; z-index:0; }
}
@keyframes appr8 {
	0% {left:100%; z-index:100; transform:scale(0,0); }
	2.8% { left:100%; transform:scale(0,0);}
	3% { left:87.5%; transform:scale(1,1); }
	20% { left:87.5%;}
	100% { left:87.5%; z-index:0; }
}

スライス画像クリック型フォトギャラリー

tyosbb — Mon, 09 Apr 2018 05:52:50 +0000

　全スライド枚数で等分したスライス画像（このデモではスライド枚数が5枚なので、5等分した画像）を、一枚分のスライドになるように水平に並べ、各スライスをクリックすると該当する画像がフェイドインするタイプのフォトギャラリーである。前項の「スライス画像遷移型スライドショー」のフォトギャラリー版である。

サンプル(DEMO)

用意する画像（このサンプルの場合）

・600*400pxのスライド5枚
・120*400pxのスライス画像各1枚（各スライドの登場番手に相当するスライス）

本サンプル表示用HTML

×

本サンプル表示用CSS

/* 表示枠 */
#stage { position:relative;max-width:600px; }
/* li属性、画像下に生成するスペース除去 */
li { list-style:none; }
li img { display:block; }
/* スライドを全て同じ位置に透明で配置 */
#photos li {
	position:absolute; top:0; left:0;
	opacity:0;
	pointer-events:none;
	transition:opacity 2s ease;
}
/* スライド画像を伸縮可に */
#photos li img { width:100%; }

/* 各スライスを上付きに、幅を1/5に */
#slices label {
	position:absolute; top:0;
	width:20%;
	cursor:pointer;
}
/* スライス画像を伸縮可に */
#slices label img { width:100%; }
/* 各スライス画像の上に同じサイズで黒い矩形（表示時はopacity:0.2）を置く */
#slices label div { width:100%;height:100%;background:#000; position:absolute; top:0; opacity:0.2; }
#slices label:nth-child(1) { left:0%; }
#slices label:nth-child(2) { left:20%; }
#slices label:nth-child(3) { left:40%; }
#slices label:nth-child(4) { left:60%; }
#slices label:nth-child(5) { left:80%; }
/* スライス画像にタイミングを合わせて各矩形をanimateで透明にする */
#slices label:nth-child(1):hover > div { opacity:0; }
#slices label:nth-child(2):hover > div { opacity:0; }
#slices label:nth-child(3):hover > div { opacity:0; }
#slices label:nth-child(4):hover > div { opacity:0; }
#slices label:nth-child(5):hover > div { opacity:0; }

/* sutageの最上部に全体を覆うスクリーンを置く（初期は非表示） */
#screen { width:100%;height:100%; position:absolute; top:0; left:0;display:none;}
/* スクリーン内右上にスライド非表示ボタンを配置 */
#screen label span { position:absolute; top:2%;left:90%;font:bold 40px "ＭＳ ゴシック", "MS Gothic", "Osaka－等幅", Osaka-mono, monospace;
			   color:#FFFFFF;opacity:0; }
#screen label span:hover { color:orange; cursor:pointer; }
/* 各スライスのクリックで該当するスライドををFadeInさせる */
#r1:checked ~ #photos li:nth-child(1) { opacity:1; }
#r2:checked ~ #photos li:nth-child(2) { opacity:1; }
#r3:checked ~ #photos li:nth-child(3) { opacity:1; }
#r4:checked ~ #photos li:nth-child(4) { opacity:1; }
#r5:checked ~ #photos li:nth-child(5) { opacity:1; }
/* 各スライスクリックでスクリーンを表示、stage全体をクリック不能にする */
#r1:checked ~ #screen,#r2:checked ~ #screen,#r3:checked ~ #screen,#r4:checked ~ #screen,#r5:checked ~ #screen { display:block; }
/* 各スライスクリックでスライド非表示ボタンをFadeInさせる */
#r1:checked ~ #screen label span,#r2:checked ~ #screen span,#r3:checked ~ #screen span,#r4:checked ~ #screen span,#r5:checked ~ #screen label span{ 
	opacity:1;
	animation:show 2s ease;
}

@keyframes show{
    from{ opacity: 0; }
    to{ opacity: 1; }
}

スライス画像遷移型スライドショー

tyosbb — Mon, 02 Apr 2018 23:38:07 +0000

　全スライド枚数で等分したスライス画像（このデモではスライド枚数が5枚なので、5等分した画像）を、一枚分のスライドになるように水平に並べ、これを、スライドの切り替え時に表示するタイプのスライドショーである。文章で読むとよくわからないと思うので、サンプル（DEMO）でご覧いただきたい。なお、各スライドのスライス画像は、そのスライドが出現する番手のスライスを使うようにする。

サンプル（DEMO）

用意する画像（このサンプルの場合）

・600*400pxのスライド5枚
・120*400pxのスライス画像各1枚（各スライドの登場番手に相当するスライス）

本サンプル表示用HTML

本サンプル表示用CSS

/* 表示枠 */
#stage { position:relative;max-width:600px; }
/* li属性、画像下に生成するスペース除去 */
li { list-style:none; }
li img { display:block; }
/* スライドを全て同じ位置に */
#photos li {
	position:absolute; top:0; left:0;
}
/* スライド画像を伸縮可に */
#photos li img { width:100%; }
/* 各スライドのanimation */
#photos li:nth-child(1) { animation:switchPhotos 30s ease infinite; animation-delay:-0s; }
#photos li:nth-child(2) { animation:switchPhotos 30s ease infinite; animation-delay:-24s; }
#photos li:nth-child(3) { animation:switchPhotos 30s ease infinite; animation-delay:-18s; }
#photos li:nth-child(4) { animation:switchPhotos 30s ease infinite; animation-delay:-12s; }
#photos li:nth-child(5) { animation:switchPhotos 30s ease infinite; animation-delay:-6s; }

@keyframes switchPhotos { 
	0% { opacity:0; }
	5% { opacity:1; }
	20% { opacity:1; }
	25% { opacity:0; }
	100% { opacity:0; }
}

/* 各スライドを上付きに、幅を1/5に */
#slices li {
	position:absolute; top:0;
	width:20%;
}
/* スライス画像を伸縮可に */
#slices li img { width:100%; }
/* 各スライス画像の上に同じサイズで黒いスクリーン（表示時はopacity:0.4）を置く */
#slices li div { width:100%;height:100%;background:#000; position:absolute; top:0; }
/* 各スライス画像の位置決め */
#slices li:nth-child(1) { left:0%; }
#slices li:nth-child(2) { left:20%; }
#slices li:nth-child(3) { left:40%; }
#slices li:nth-child(4) { left:60%; }
#slices li:nth-child(5) { left:80%; }
/* 各スライス画像のanimation */
#slices li:nth-child(1) > img { animation:switchSlices 30s ease infinite; }
#slices li:nth-child(2) > img { animation:switchSlices 30s ease infinite; animation-delay:-24s; }
#slices li:nth-child(3) > img { animation:switchSlices 30s ease infinite; animation-delay:-18s; }
#slices li:nth-child(4) > img { animation:switchSlices 30s ease infinite; animation-delay:-12s; }
#slices li:nth-child(5) > img { animation:switchSlices 30s ease infinite; animation-delay:-36s; }
/* スライス画像にタイミングを合わせて各スクリーンをanimateさせる */
#slices li:nth-child(1) > div { animation:switchScreen 30s ease infinite; }
#slices li:nth-child(2) > div { animation:switchScreen 30s ease infinite; animation-delay:-24s; }
#slices li:nth-child(3) > div { animation:switchScreen 30s ease infinite; animation-delay:-18s; }
#slices li:nth-child(4) > div { animation:switchScreen 30s ease infinite; animation-delay:-12s; }
#slices li:nth-child(5) > div { animation:switchScreen 30s ease infinite; animation-delay:-36s; }

@keyframes switchSlices {
	0% { opacity:0;  }
	5% { opacity:1; }
	15% { opacity:1; }
	20% { opacity:1; }
	25% { opacity:1; }
	30% { opacity:0; }
	40% { opacity:0; }
	45% { opacity:1; }
	50% { opacity:0; }
	60% { opacity:0; }
	65% { opacity:1; }
	70% { opacity:0; }
	80% { opacity:0; }
	85% { opacity:1; }
	90% { opacity:0; }
	100% { opacity:0; }
}

@keyframes switchScreen {
	0% { opacity:0;  }
	5% { opacity:0; }
	15% { opacity:0; }
	20% { opacity:0; }
	25% { opacity:0.4; }
	30% { opacity:0; }
	40% { opacity:0; }
	45% { opacity:0.4; }
	50% { opacity:0; }
	60% { opacity:0; }
	65% { opacity:0.4; }
	70% { opacity:0; }
	80% { opacity:0; }
	85% { opacity:0.4; }
	90% { opacity:0; }
	100% { opacity:0; }
}

ページ横移動切替え型サイト

tyosbb — Sun, 25 Mar 2018 10:55:24 +0000

　前項で、全画面のページが縦に移動して切り替えられるサイト作りを紹介したが、この項では、全画面のページが横に移動して切り替えられるサイト作りである。
　縦移動型と、ほぼ同じ作りで、水平に並べたページを、transition を使ったアニメーションで移動させている。横移動型では、ページの高さが必ずしも画面内に収まらなくてもいいので、高さ指定は外している。ただし、背景写真の高さは画面に収まる高さになるので、はみ出たコンテンツは写真の下に表示されることになる。デザイン的には、考慮が必要になるかもしれない。
　本稿では、画面の幅が800pxよりも小さい場合には、コンテンツ表示枠のレイアウトを幅広に調節して、小さいデバイスで見やすいように調節した。

サンプル(DEMO)

　別ページに示した。

本サンプル表示用HTML









  
    
      HOME  
    
    
     PROFILE 
    
    
     TOPICKS 
    
    
     MEMOS 
    
    
     GALLERY 
    
    
     CONTACT 
    
  
  Takamori

      Saigo
  
    
      
      	 PROFILE


        　薩摩国薩摩藩の下級藩士・西郷吉兵衛隆盛の長男。諱は元服時に隆永（たかなが）のちに武雄・隆盛（たかもり）と変更。幼名は小吉、通称は吉之介、善兵衛、吉兵衛、吉之助と順次変更。号は南洲（なんしゅう）。隆盛は父と同名であるが、これは王政復古の章典で位階を授けられる際に親友の吉井友実が誤って父・吉兵衛の名を届けたため、それ以後は父の名を名乗ったためである。一時、西郷三助・菊池源吾・大島三右衛門、大島吉之助などの変名も名乗った。
        西郷家の初代は熊本から鹿児島に移り、鹿児島へ来てからの7代目が父・吉兵衛隆盛、8代目が吉之助隆盛である。次弟は戊辰戦争（北越戦争・新潟県長岡市）で戦死した西郷吉二郎（隆廣）、三弟は明治政府の重鎮西郷従道（通称は信吾、号は竜庵）、四弟は西南戦争で戦死した西郷小兵衛（隆雄、隆武）。大山巌（弥助）は従弟、川村純義（与十郎）も親戚である。
        （ウィキペディアより）
      
  
  
    
      
         TOPICKS
        寺田屋騒動前後
        文久元年（1861年）10月、久光は公武周旋に乗り出す決意をして要路重臣の更迭を行ったが、京都での手づるがなく、小納戸役の大久保・堀次郎らの進言で西郷に召還状を出した。西郷は11月21日に召還状を受け取ると、世話になった人々への挨拶を済ませ、愛加那の生活が立つようにしたのち、文久2年（1862年）1月14日に阿丹崎を出帆し、口永良部島・枕崎を経て2月12日に鹿児島へ着いた。2月15日、生きていることが幕府に発覚しないように西郷三助から大島三右衛門[注釈 3]と改名した。同日、久光に召されたが、久光が無官で、斉彬ほどの人望が無いことを理由に上京すべきでないと主張し、また、「御前ニハ恐レナガラ地ゴロ（地ゴロは田舎者という意味）」なので周旋は無理だと言ったので、久光の不興を買った。一旦は同行を断ったが、大久保の説得で上京を承諾し、旧役に復した。3月13日、下関で待機する命を受けて、村田新八を伴って先発した。
         
        （ウィキペディアより）

        
      
    
  
  
    
      
        NOTES

        
        なお、明治4年（1871年）11月の岩倉使節団出発から明治6年（1873年）9月の岩倉帰国までの間に西郷主導留守内閣が施行した主な政策は以下の通りである。
        
          府県の統廃合（3府72県）
          陸軍省・海軍省の設置
          学制の制定
          国立銀行条例公布
          太陽暦の採用
          徴兵令の布告
          キリスト教禁制の高札の撤廃
          地租改正条例の布告
        
        明治六年政変
         　 対朝鮮（当時は李氏朝鮮）問題は、明治元年（1868年）に李朝が維新政府の国書の受け取りを拒絶したことが発端だが、この国書受け取りと朝鮮との修好条約締結問題は留守内閣時にも一向に進展していなかった。そこで、進展しない原因とその対策を知る必要があって、西郷と板垣退助・副島種臣らは、調査のために、明治5年（1872年）8月15日に池上四郎・武市正幹・彭城中平を清国・ロシア・朝鮮探偵として満洲に派遣し[9]、27日に北村重頼・河村洋与・別府晋介（景長）を花房外務大丞随員（実際は変装しての探偵）として釜山に派遣した[10]。
        　 明治6年（1873年）の対朝鮮問題をめぐる政府首脳の軋轢は、6月に外務少記・森山茂が釜山から帰国後、李朝政府が日本の国書を拒絶したうえ、使節を侮辱し、居留民の安全が脅かされているので、朝鮮から撤退するか、武力で修好条約を締結させるかの裁決が必要であると報告し、それを外務少輔・上野景範が内閣に議案として提出したことに始まる。この議案は6月12日から7参議により審議された。
          
          議案は当初、板垣が武力による修好条約締結（征韓論）を主張したのに対し、西郷は武力を不可として、自分が旧例の服装で全権大使になる（遣韓大使論）と主張して対立した。しかし、数度に及ぶ説得で、方法・人選で反対していた板垣と外務卿の副島が8月初めに西郷案に同意した。西郷派遣については、16日に三条実美の同意を得て、17日の閣議で決定された。しかし、三条が天皇に報告したとき、「岩倉具視の帰朝を待って、岩倉と熟議して奏上せよ」との勅旨があったので、発表は岩倉帰国まで待つことになった。
        　 以上の時点までは、西郷・板垣・副島らは大使派遣の方向で事態は進行するものと考えていた。ところが、9月、岩倉が帰国すると、先に外遊から帰国していた木戸孝允・大久保利通らの内治優先論が表面化してきた。大久保らが参議に加わった9月14日の閣議では大使派遣問題は議決できず、15日の再議で西郷派遣に決定した。しかし、これに反対する木戸孝允・大久保利通・大隈重信・大木喬任らの参議が辞表を提出し、右大臣・岩倉も辞意を表明する事態に至った。これを憂慮した三条は18日夜、急病になり、岩倉が太政大臣代行になった。そこで、西郷と板垣退助・副島種臣・江藤新平らは岩倉邸を訪ねて、閣議決定の上奏裁可を求めたが、岩倉は了承しなかった。
          
          9月23日、西郷が陸軍大将兼参議・近衛都督を辞し、位階も返上すると上表したのに対し、すでに宮中工作を終えていた岩倉は、閣議の決定とは別に西郷派遣延期の意見書を天皇に提出した。翌24日に天皇が岩倉の意見を入れ、西郷派遣を無期延期するとの裁可を出したので、西郷は辞職した。このとき、西郷の参議・近衛都督辞職は許可されたが、陸軍大将辞職と位階の返上は許されなかった。
          
          翌25日になると、板垣・副島・後藤・江藤らの参議も辞職した。この一連の辞職に同調して、征韓論・遣韓大使派の林有造・桐野利秋・篠原国幹・淵辺群平・別府晋介・河野主一郎・辺見十郎太をはじめとする政治家・軍人・官僚600名余が次々に大量に辞任した。この後も辞職が続き、遅れて帰国した村田新八・池上四郎らもまた辞任した（明治六年政変）。
          
          このとき、西郷の推挙で兵部大輔・大村益次郎の後任に補されながら、能力不足と自覚して、先に下野していた前原一誠は「宜シク西郷ノ職ヲ復シテ薩長調和ノ実ヲ計ルベシ、然ラザレバ、賢ヲ失フノ議起コラント」[11]という内容の書簡を太政大臣・三条実美に送り、明治政府の前途を憂えた。 
      （ウィキペディアより）
    
  
  
  	
  
  
  	Email Address: saigo@hoge.ne.jp

本サンプル表示用CSS


html,body { 
	height:100%;
	background:#555;
	overflow-x: hidden;
}
/* メニュー項目 */
#navi {
	top:6%;left:8%;
	width:100%;
	list-style:none;	
	font-size:18px;
	color:#fff;
	position:fixed;
	z-index:100;
}
#navi li {
	margin-left:1%;
	float:left;
	background-color:rgba(0,0,0,0.3);
}
#navi li:hover {
	color:#DD8586;
	cursor:pointer;
}
/* 全ページ包含コンテナー */
#container { 
	position:absolute;
	width:100%;
	height:100%;
	top:0;
	left:0;
	transition:left 1s ease;
 }
 /* 各ページ共通 */
.page { 
	position:absolute;
	top:0;
	width:100%;height:100%;
	background-size:100% 100%;
}

/* 各ページの背景、表面ページ */
#d1 { left:0; background-image:url(img/background.jpg); }
#d1 span { font-size:78px;color:#fff;position:absolute;bottom:10%;left:15%;animation:slideup 2s ease;animation-fill-mode: forwards; }
#d1 img { width:350px;height:80%;position:absolute;bottom:0;right:15%; }
#d2 { left:100%; background-image:url(img/background2.jpg); }
#d3 { left:200%; background-image:url(img/background3.jpg); }
#d4 { left:300%; background-image:url(img/background4.jpg); }
#d5 { left:400%; background-image:url(img/background5.jpg); }
#d6 { left:500%; background-image:url(img/background6.jpg); }
/* ページ内コンテンツ・テキストボックス */
.contents {
	position:absolute;
	margin:auto;top:20%;
	bottom:0;left:0;right:0;
	width: 60%;
	min-width:400px;
}
@media screen and (max-width:800px) {
  .contents {
	width:90%;
	min-width:320px;
	padding:5px;
	margin-top:1%;
	margin:0 auto;
	font-size:14px;
  }
}
.textbox {
	overflow: auto;
	font-size: 14px;
	color: #000000;
	background-color: rgba( 0, 0, 0, 0.6 );
	color:#fff;
	border:#fff 10px solid;
	padding: 0 10px 0 10px;;
}
.textbox a {
	color:#fff;
}
.textbox a:hover {
	color:orange;
}
/* ギャラリー読み込み用iframe */
#d5 iframe {
	position:absolute;
	margin:auto;
	top:0;bottom:0;left:0;right:0;
	background-color:rgba(255,255,255,0.67);
	border:0px;
	width:65%; height:80%;
}
@media screen and (max-width:800px) {
	#d5 iframe {
		width:90%;
	}
}
/* Email用テキストボックス */
.textbox_s {
	width:20%;
	height:10%;
	position:absolute;
	margin:auto;
	top:75%;right:0;bottom:0;left:0;
	color:#fff;
	font-size:20px;
}
/*ラジオボタン非表示*/
#r1,#r2,#r3,#r4,#r5 { display:none; }
/* メニューボタンクリック時のtransition */
#r1:checked ~ #container { left:0%; }
#r2:checked ~ #container { left:-100%; }
#r3:checked ~ #container { left:-200%; }
#r4:checked ~ #container { left:-300%; }
#r5:checked ~ #container { left:-400%; }
#r6:checked ~ #container { left:-500%; }

@keyframes slideup {
	0% { botom:10%;opacity:0; }
	100% { bottom:20%;opacity:1; }
}

ページ縦移動切換え型サイト

tyosbb — Sat, 27 Jan 2018 04:11:05 +0000

　全画面のページが縦に移動して切り替えられるサイト作りである。
　各画面は、スクロールできない設定であるので、1ページは画面内に表示されるコンテンツに限定されるので、長いコンテンツを含むサイトには不向きである。ページ内のdiv要素に overflow:auto を記述すれば、スクロールバー付きである程度の長さのコンテンツは表示できる。
　ここに記載の例を応用して、私自身のサイトをリニューアルしたので、参考に供したい。
　　=> http://tyoshioka.com/
　スマホなどの小デバイスでは、それなりに表示されるが、最適化はできていないので、応用してみたい方は、その辺の考慮をしていただければと思う。
　なお、Gallery に表示したコンテンツは、本サイト前々稿の「ギャラリー型ポートフォリオ」を iframe 内に読み込んでいる。

サンプル（DEMO）

　別ページに示した。

本サンプル表示用HTML









  
    
      HOME  
    
    
     PROFILE 
    
    
     TOPICKS 
    
    
     MEMOS 
    
    
     GALLERY 
    
    
     CONTACT 
    
  
  Takamori

      Saigo
  
    
      
      	 PROFILE


        　薩摩国薩摩藩の下級藩士・西郷吉兵衛隆盛の長男。諱は元服時に隆永（たかなが）のちに武雄・隆盛（たかもり）と変更。幼名は小吉、通称は吉之介、善兵衛、吉兵衛、吉之助と順次変更。号は南洲（なんしゅう）。隆盛は父と同名であるが、これは王政復古の章典で位階を授けられる際に親友の吉井友実が誤って父・吉兵衛の名を届けたため、それ以後は父の名を名乗ったためである。一時、西郷三助・菊池源吾・大島三右衛門、大島吉之助などの変名も名乗った。
        西郷家の初代は熊本から鹿児島に移り、鹿児島へ来てからの7代目が父・吉兵衛隆盛、8代目が吉之助隆盛である。次弟は戊辰戦争（北越戦争・新潟県長岡市）で戦死した西郷吉二郎（隆廣）、三弟は明治政府の重鎮西郷従道（通称は信吾、号は竜庵）、四弟は西南戦争で戦死した西郷小兵衛（隆雄、隆武）。大山巌（弥助）は従弟、川村純義（与十郎）も親戚である。
        （ウィキペディアより）
      
  
  
    
      
         TOPICKS
        寺田屋騒動前後
        文久元年（1861年）10月、久光は公武周旋に乗り出す決意をして要路重臣の更迭を行ったが、京都での手づるがなく、小納戸役の大久保・堀次郎らの進言で西郷に召還状を出した。西郷は11月21日に召還状を受け取ると、世話になった人々への挨拶を済ませ、愛加那の生活が立つようにしたのち、文久2年（1862年）1月14日に阿丹崎を出帆し、口永良部島・枕崎を経て2月12日に鹿児島へ着いた。2月15日、生きていることが幕府に発覚しないように西郷三助から大島三右衛門[注釈 3]と改名した。同日、久光に召されたが、久光が無官で、斉彬ほどの人望が無いことを理由に上京すべきでないと主張し、また、「御前ニハ恐レナガラ地ゴロ（地ゴロは田舎者という意味）」なので周旋は無理だと言ったので、久光の不興を買った。一旦は同行を断ったが、大久保の説得で上京を承諾し、旧役に復した。3月13日、下関で待機する命を受けて、村田新八を伴って先発した。
         
        （ウィキペディアより）

        
      
    
  
  
    
      
        NOTES

        
        なお、明治4年（1871年）11月の岩倉使節団出発から明治6年（1873年）9月の岩倉帰国までの間に西郷主導留守内閣が施行した主な政策は以下の通りである。
        
          府県の統廃合（3府72県）
          陸軍省・海軍省の設置
          学制の制定
          国立銀行条例公布
          太陽暦の採用
          徴兵令の布告
          キリスト教禁制の高札の撤廃
          地租改正条例の布告
        
      （ウィキペディアより）
    
  
  
  	
  
  
  	Email Address: saigo@hoge.ne.jp

本サンプル表示用CSS

/* 画面高さを100%、クロール不可 */
html,body { 
	height:100%;
	overflow:hidden;
}
/* メニュー項目 */
#navi {
	top:6%;left:8%;
	width:100%;
	list-style:none;	
	font-size:18px;
	color:#fff;
	position:fixed;
	z-index:100;
}
#navi li {
	margin-left:1%;
	float:left;
	background-color:rgba(0,0,0,0.3);
}
#navi li:hover {
	color:#DD8586;
	cursor:pointer;
}
/* 全ページ包含コンテナー */
#container { 
	position:absolute;
	width:100%;
	height:100%;
	top:0;
	transition:top 1s ease;
 }
 /* 各ページ共通 */
.page { 
	position:relative;
	width:100%;height:100%;
	background-repeat:no-repeat;
	background-size:100% 100%;
}
/* 各ページの背景、表面ページ */
#d1 { background-image:url(img/background.jpg); }
#d1 span { font-size:78px;color:#fff;position:absolute;bottom:20%;left:15%; }
#d1 img { width:350px;height:80%;position:absolute;bottom:0;right:15%; }
#d2 { background-image:url(img/background.jpg); }
#d3 { background-image:url(img/background.jpg); }
#d4 { background-image:url(img/background.jpg); }
#d5 { background-image:url(img/background.jpg); }
#d6 { background-image:url(img/background.jpg); }
/* ページ内コンテンツ・テキストボックス */
.contents {
	position:absolute;
	margin:auto;top:20%;
	bottom:0;left:0;right:0;
	width: 60%;
	min-width:400px;
	height: 550px;
}
.textbox {
	height: 540px;
	overflow: auto;
	font-size: 14px;
	color: #000000;
	background-color: rgba( 0, 0, 0, 0.6 );
	color:#fff;
	border:#fff 10px solid;
	padding: 0 10px 0 10px;;
}
.textbox a {
	color:#fff;
}
.textbox a:hover {
	color:orange;
}
/* ギャラリー読み込み用iframe */
#d5 iframe {
	position:absolute;
	margin:auto;
	top:0;bottom:0;left:0;right:0;
	background-color:rgba(255,255,255,0.67);
	border:0px;
}
/* Email用テキストボックス */
.textbox_s {
	width:20%;
	height:10%;
	position:absolute;
	margin:auto;
	top:75%;right:0;bottom:0;left:0;
	color:#fff;
	font-size:20px;
}
/*ラジオボタン非表示*/
#r1,#r2,#r3,#r4,#r5 { display:none; }
/* メニューボタンクリック時のtransition */
#r1:checked ~ #container { top:0%; }
#r2:checked ~ #container { top:-100%; }
#r3:checked ~ #container { top:-200%; }
#r4:checked ~ #container { top:-300%; }
#r5:checked ~ #container { top:-400%; }
#r6:checked ~ #container { top:-500%; }

縦方向移動型ポートフォリオ

tyosbb — Mon, 04 Dec 2017 00:39:37 +0000

　画面右側カラムに配置されたサムネイルのクリックで、該当する写真と説明文が縦方向にスライド移動して表示されるタイプのポートフォリオである。
　ナビゲーション画像（あるいはテキスト）のクリックで、画面が上下に移動するタイプのページ作りにも応用できるのではないかと思われる。

サンプル（DEMO）

　こちらのページに示した。

準備するもの

・幅1000px、高さ563pxの写真（ここでは15枚のjpgファイル）を、フォルダimg14に格納する
・上記写真を縮小した、幅89px、高さ50pxの写真ファイルを、フォルダimg14に格納する

本サンプル表示用HTML、CSS

上記DEMOページをブラウザで開き、ページソースでご覧ください

作成のポイント説明

・メイン表示用の写真と説明文のセット（この場合12セット）をDIV（#leftcolumn）内に、縦方向に配置する。
・上記セット写真のサムネイル写真を、画面右側のカラム（#navi_column）に縦配列で配置する。
・navi_columnは、position:fixed で画面右上に固定表示する。
・サムネイルクリックで、該当する写真・説明文がtransition設定により、上下にスライドしてヘッダーの下に表示される。
・#leftcolumnを格納しているDIV（#frame）の高さを固定（この場合900px）しておき、overflow:hidden の設定で、該当項目だけが表示されるようにする。

フォトギャラリー型ポートフォリオ

tyosbb — Sat, 28 Oct 2017 12:54:43 +0000

　グリッド状に配置された画像がナビゲーションとなり、そのクリックで、その画像が拡大され、説明文が表示される。cssアニメーションらしく、ここまでがシームレスで表示される。このまま、単なるギャラリーとしても使えると思うが、作品や商品紹介、実績紹介などのポートフォリオとして応用できるのではないかと思い作成した。

準備するもの

・幅1000px、高さ563pxの写真（ここでは15枚のjpgファイル）を、フォルダimg14に格納する
・閉じるボタンの画像（end.gif）を、フォルダimages内に置く
・本サンプル表示用のhtml、cssのコードを記載した、code.html を i-html フォルダ内に置く

サンプル（DEMO）

　こちらのページに、表示用HTML及びCSSのコードとともに示した。

作成のポイント説明

・各写真を20%の大きさで、5列3行にposution:absoluteで並べ、その小画像のクリックで、クリックされた画像を100%に拡大し、その他の小画像は非表示にする。
・小画像のマウスオーバーで、その画像に赤紫色のスクリーンをかけ、標題をフェイドイン表示させる。
・小画像のクリックで、スクリーン、標題を非表示にし、閉じるボタンを表示し、説明文を表示させる。
　（表題を非表示にするのに、pointer-events: none;を使っているので、マウスが移動するまでは表示状態になる）
・各画像の説明文は、全てHTML内に記述している。それぞれをhtmlファイルにして、iframe内に読み込む方法もあるかと思う。
・閉じるボタン、もしくは、「一覧に戻る」をクリックすると、拡大写真をもとにサイズに戻し、初期画面に戻す。
・初期画面では、小画像の一覧の下の部分に記述欄を設けることも可能。
　（ここでは、本サンプル表示用のHTML,CSSのコードをifrmae内に読み込んでいる）
　この表示は、拡大写真表示時には非表示にし、閉じるボタンのクリックで表示されるようにする。
・小画像、その他記述の表示の垂直位置は、padding-topの%数値で決めている。
　（この数値は、計算と言うよりは、最適な数値をトライアンドエラーで決めた）
・このサンプルでは、拡大写真下の説明文は、要約のみ記述し、そこからリンクで詳細ページに飛ぶようにしている。

css だけで作る スライドショー・フォトギャラリー » » tyosbb

Google サイトにCSSでLightbox型フォトギャラリーを

Google Sites にCSSでスライダー、スライドショーを

スライダー/左右移動型２(レスポンシブ)

サンプル（DEMO）

本サンプル表示用HTML

本サンプル表示用CSS

CSSのポイント説明

スライス（分割画像）連続登場型スライドショー

用意する画像

サンプル（DEMO）

本サンプル表示用HTML

本サンプル表示用CSS

スライス画像クリック型フォトギャラリー

サンプル(DEMO)

用意する画像（このサンプルの場合）

本サンプル表示用HTML

本サンプル表示用CSS

スライス画像遷移型スライドショー

サンプル（DEMO）

用意する画像（このサンプルの場合）

本サンプル表示用HTML

本サンプル表示用CSS

ページ横移動切替え型サイト

サンプル(DEMO)

本サンプル表示用HTML

寺田屋騒動前後

本サンプル表示用CSS

ページ縦移動切換え型サイト

サンプル（DEMO）

本サンプル表示用HTML

寺田屋騒動前後

本サンプル表示用CSS

縦方向移動型ポートフォリオ

サンプル（DEMO）

準備するもの

本サンプル表示用HTML、CSS

作成のポイント説明

フォトギャラリー型ポートフォリオ

準備するもの

サンプル（DEMO）

作成のポイント説明

css だけで作るスライドショー・フォトギャラリー » » tyosbb