<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="alternate stylesheet" type="text/css" href="resource://gre-resources/plaintext.css"
title="長い行を折り返す">
</head>
<body>
<pre><html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="alternate stylesheet" type="text/css" href="resource://gre-resources/plaintext.css"
title="長い行を折り返す">
</head>
<body>
<pre>&lt;html&gt;
&lt;head&gt;
&lt;meta http-equiv="content-type" content="text/html; charset=UTF-8"&gt;
&lt;link rel="alternate stylesheet" type="text/css" href="resource://gre-resources/plaintext.css"
title="長い行を折り返す"&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;pre&gt;@charset "utf-8";
/*CSSスライドショー設定
---------------------------------------------------------------------------*/
/*１枚目*/
@keyframes slide1 {
0% {opacity: 0;}
10% {opacity: 1;}
30% {opacity: 1;}
40% {opacity: 0;}
100% {opacity: 0;}
}
/*２枚目*/
@keyframes slide2 {
0% {opacity: 0;}
20% {opacity: 0;}
30% {opacity: 1;}
60% {opacity: 1;}
70% {opacity: 0;}
100% {opacity: 0;}
}
/*３枚目*/
@keyframes slide3 {
0% {opacity: 0;}
50% {opacity: 0;}
60% {opacity: 1;}
85% {opacity: 1;}
95% {opacity: 0;}
100% {opacity: 0;}
}
@keyframes slide4 {
0% {opacity: 0;}
50% {opacity: 0;}
60% {opacity: 1;}
85% {opacity: 1;}
95% {opacity: 0;}
100% {opacity: 0;}
}
@keyframes slide5 {
0% {opacity: 0;}
50% {opacity: 0;}
60% {opacity: 1;}
85% {opacity: 1;}
95% {opacity: 0;}
100% {opacity: 0;}
}
/*mainimg
---------------------------------------------------------------------------*/
/*画像ブロック*/
#mainimg {
clear: left;
width: 100%;
height: 390px;
margin: 0 auto 30px;
position: relative;
text-align:center;
}
#mainimg, #mainimg img {
border-radius: 10px; /*角丸のサイズ*/
}
/*３枚画像の共通設定*/
.slide1,.slide2,.slide3,.slide4,.slide5 {
animation-duration: 15s; /*実行する時間。「s」は秒の事。*/
animation-iteration-count:infinite; /*実行する回数。「infinite」は無限に繰り返す意味。*/
position: absolute;left:0px;top:0px;width: 1000px;height: 420px;
animation-fill-mode: both;
animation-delay: 1s;
margin-left: 50%;
transform: translateX(-50%);
}
/*土台画像*/
.slide0 {
position: relative;width: 1000px;height: 420px;
text-align:center;
}
/*１枚目*/
.slide1 {
animation-name: slide1; /*上で設定しているキーフレーム（keyframes）の名前*/
}
/*２枚目*/
.slide2 {
animation-name: slide2; /*上で設定しているキーフレーム（keyframes）の名前**/
}
/*３枚目*/
.slide3 {
animation-name: slide3; /*上で設定しているキーフレーム（keyframes）の名前**/
}
.slide4 {
animation-name: slide4; /*上で設定しているキーフレーム（keyframes）の名前**/
}
.slide5 {
animation-name: slide5; /*上で設定しているキーフレーム（keyframes）の名前**/
}
/*画面幅800px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:800px){
/*mainimg
---------------------------------------------------------------------------*/
/*画像ブロック*/
#mainimg {
margin-bottom: 20px;
}
}
&lt;/pre&gt;
&lt;/body&gt;
&lt;/html&gt;
</pre>
</body>
</html>
</pre>
</body>
</html>