CSSを使ってHTMLで作ったホームページにスライドショーを追加する。(Day6)

今日は自分のホームページに少し変化を加えたいと思います。

今回使うのはズバリ

CSS

です

あまり、CSSを使ってなかったので、少し練習の意味も有って

活用しようと思います。

まずはhtmlから

<div class="slider">
  <ul>
    <li><img src="写真を貼る1.jpg"></li>
    <li><img src="写真を貼る2.jpg"></li>
    <li><img src="写真を貼る3.jpg"></li>
  </ul>
</div>

<div>というブロック要素を加えます。

また、<div class=>とはdiv同士を区別する為に、classという「名前」をつけます。

今回はsliderです。

<ul>タグでリストを作成します。

<li>で項目を作成します。

この<li>内に好きな写真を載せます。

次はcssです。

.slider{
    width:640px;
    height:480px;
    margin:0 auto;
    position:relative;
}
.slider ul{
    margin:0;
    padding:0;
    list-style:none;
}
.slider ul li{
    width:640px;
    height:480px;
    position:absolute;
    top:0;
    left:0;
    animation-iteration-count:infinite;
    animation-duration:10s;
}
.slider ul li:nth-child(1){
    animation-name:slider;
    animation-delay:-2s;
}
.slider ul li:nth-child(2){
    animation-name:slider;
    animation-delay:3s;
    opacity:0;
}
.slider ul li:nth-child(3){
    animation-name:slider;
    animation-delay:8s;
    opacity:0;
}

@keyframes slider{
    0%{
        opacity:0;
    }
    20.83%{
        opacity:1;
    }
    33.33%{
        opacity:1;
    }
    45.83%{
        opacity:0;
    }
    100%{
        opacity:0;
    }
}

CSSで写真について記述します。

詳しいことはまだ勉強中なので、今回はここまでです。

----------------------------------------------------------------------------

Youtubeやってます。

Hika chuというチャンネルを運営しています。

チャンネルでは基本的にドイツ語でドイツでの日常を紹介しています。

日本語の字幕もつけているので、興味がある方は見に来てください。

チャンネル登録もお願いします。->チャンネル登録

サポートしてださる人探してます。