slideshow
こんにちは。まるです。クボタさんが私の癒しの場所であろう南区にある八剣山に行かれたということで…あんなおっかないとこをよく登れたなと思い、そういえば私も山を見に行ったんだったと思い出し一応写真貼りますね。
ニセコにある羊蹄山！うどん屋さんがあって食べに行ったんですがマスターにブログの許可言ってないのでそこは省きますね（ ＾ω＾）。
いい天気でした☀☀☀。
今日はwebのお話を・・・
その前のＨＴＭＬＣＳＳって何さって人の為のWikipedia貼り付けますので良かったら。↓↓
HTMLWikipedia
CSSWikipedia
HTMLとCSSのことは今まで説明しました。(多分。)
しかし動きをつけてあげるJavascript(ジャバスクリプト)のことを説明をしようかと思いました・・・・・・が！
実はCSSにも付けれるんです。なのでJavascriptのことはまだまだ先にしたいと思います。というかあるのかはたまた疑問ですが。
でも少しだけ説明しますか。→→Javascript
それを簡単に記述でwebページに様々な効果や動きを付けられるJavascriptライブラリー、いわば「jQuery」といいます。どっちみち記述が大変なのは変わりません(笑)。これをすることで画面に動きが付けれるわけです。
しかし記述しても中身の意味等が理解が出来ない！出来るだけHTMLとCSSだけで動きを付けたい。
あるのか？
・・・・・・・あるんです！( ^ω^ )
HTMLの方に「div」に「class属性」を付けて画像をいくつも並べます。画像の必要最低限の数が8枚。「img」に幅と高さを付けたい、リンク貼りたい時は付け足してください。
CSSで。(どっかのコピペソースなんですが。)
※class属性で付けた名前※{
height: ○○px; /*表示したい大きさ*/
margin: 30px auto; /*縦余白30pxは任意*/
max-width: 100%; /*幅の最大値を指定する*/
position: relative; /*相対位置への配置となります。positionプロパティでstaticを指定した場合に表示される位置が基準位置となります*/
width: ○○px; /*表示したい大きさ、height と合わせる*/
}
※class属性で付けた名前※ img {
animation: show 16s infinite; /*css3で出てきたanimationプロパティです。無限に再生を繰り返す指定をしています。*/
-webkit-animation: show 16s infinite; /*-webkit- ベンダープレフィクスを付けていますが、最新版ではいらないのでなくても構いません。*/
border-radius: 50%; /*角丸をつけるプロパティ*/
height: auto;
max-width: 100%;
opacity: 0; /*不透明度を指定するプロパティ*/
position: absolute; /*画像を全て重ねる*/
}
/*アニメーション*/
@keyframes show { /*アニメーション中に到達すべきポイントであるキーフレーム (通過点) を明示することで、CSS animation の流れの中間地点をページ作者が制御することを可能にします。これにより、ブラウザにすべてを自動的に扱わせる場合よりも、アニメーションの流れの中間地点をより明確に制御することができます。
キーフレームを使うには、アニメーションとそのキーフレームを一致させるために、animation-name プロパティで指定したものと同じ名前がついた @keyframes 規則を作成します。それぞれの @keyframes 規則は、キーフレームセレクタのスタイルリストを含んでいます。またそれらは、キーフレームのスタイル情報が含まれているブロックと、アニメーションの途中でそのキーフレームの状態になるパーセント値で構成されています。*/
0% {opacity:0}
5% {opacity:1}
10% {opacity:1}
20% {opacity:0}
}
@-webkit-keyframes show {
0% {opacity:0}
5% {opacity:1}
10% {opacity:1}
20% {opacity:0}
}
/*各画像のアニメーションの開始時間をずらす*/
※class属性で付けた名前※ img:nth-of-type(1)/*疑似クラスの一種で、 1番目のその種類の要素にスタイルを適用する際に使用します。 */ {
animation-delay: 0s;
-webkit-animation-delay: 0s;
}
※class属性で付けた名前※ img:nth-of-type(2) {
animation-delay: 2s;
-webkit-animation-delay: 2s;
}
※class属性で付けた名前※ img:nth-of-type(3) {
animation-delay: 4s;
-webkit-animation-delay: 4s;
}
※class属性で付けた名前※ img:nth-of-type(4) {
animation-delay: 6s;
-webkit-animation-delay: 6s;
}
※class属性で付けた名前※ img:nth-of-type(5) {
animation-delay: 8s;
-webkit-animation-delay: 8s
}
※class属性で付けた名前※ img:nth-of-type(6) {
animation-delay: 10s;
-webkit-animation-delay: 10s;
}
※class属性で付けた名前※ img:nth-of-type(7) {
animation-delay: 12s;
-webkit-animation-delay: 12s;
}
※class属性で付けた名前※ img:nth-of-type(8) {
animation-delay: 14s;
-webkit-animation-delay: 14s;
}
/*マウスが画像に重なった際、動きを止めて四角くする*/
※class属性で付けた名前※ img {
transition: 0.2s;
-webkit-transition: 0.2s;
}
※class属性で付けた名前※:hover img {
animation-play-state: paused;
-webkit-animation-play-state: paused;
border-radius: 0;
}
（ ＾ω＾）・・・やっぱり記述が多いのは変わらなかった・・・。
jQueryだとネットで調べても出てこないんですが、cssだとわからないセレクタを検索したら出てくるので…。
これをやることでスライドショーが出来る！！
CSS3になってからの新しいプロパティばかりなのでベンダープレフィックスを記述しないといけません。
良かったらやってみてください。。。。。要は自分でやってみれやって話なんですがｗｗ。
改めてHTMLとCSSは奥が深い…！
分かりづらかったら申し訳ないです。これで終わります。それではまた！
