完成イメージCSSのみのスライドショーです。自動再生する上に選択ボタンも付いています。htmlのラジオボタンとCSSを駆使して作成しました。以下の「選択ボタン付きスライドショー」と「自動再生スライドショー」を組み合わせて作成しています。複雑なのでこれらを理解してから手をかけてください。自動でスライド中央下部に選択ボタンを表示し、クリックすると画像が切り替わる。</div></div>2行目のimgは高さ確保のためです。高さが決まっていればdivに高さ指定することでこのimgはいらなくなります。inputとlabelはidとforで一致させます。上から順に一致させましょう。aタグはあってもなくても、どっちでもOKです。*/}CSSやhtmlの基本をしっかり理解すると、この記事の内容もより理解できるようになりますよ。↓CSSやhtmlを楽しく学べるようにマンガを描きましたのでゼヒご覧ください↓htmlやCSSをマンガで楽しく学ぼう【180ページ単行本1冊相当量】htmlから収益化までホームページ作成の基本をひととおり、マンガでクスっと笑いながら学べます。9年間ホームページを作ってきた作者の実績に基づき作られた確かな内容です。自動スライドはCSSだけで自動スライドショーの仕組みそのままです。ボタンをクリックしたときにスライドが切り替わるのはCSSだけで選択スライドショーの仕組みそのままです。ここで工夫が必要なのは、ボタンをクリックしたときに自動スライドをストップさせることです。ボタンがクリックされたとき、すべてのスライドアニメーションをストップさせます。inputがlabelの中にあると他の画像やボタンに影響を与えることができないので、すべてのlabelより前に記述します。画像を増やすとき自動スライドの計算方法はCSSだけで自動スライドショーを参照してください。htmlではinputとlabelの行を追加し、idとforを一致させます。CSSでは以下を追加します。追加するとき「,」をつけるのをお忘れなく。imgxには5や6といった半角数字を順番に入れます。減らすときは上記の部分を削除です。自動スライド時間の調整も必要です。「:nth-of-type」や「:checked」がなんぞや?というかたは以下の記事をご覧ください。セレクタについて説明しています。主要ブラウザで使えるセレクタ等の一覧です。主要ブラウザで使えるセレクタ等の一覧です。CSSの記述例と実行例もあります。この記事を読むまとめ今回は自動再生かつ選択ボタンつきということで実用性は高いかと思います。数値が変わると再計算やCSS、html調整が大変なので、数や時間を固定させて運用するほうが楽だと思います。以上、CSSだけで選択ボタン付き自動スライドショーを作る方法でした。「この記事の内容がよくわからなかった...」「なんかうまくいかなかった...」というかたは下記記事↓でhtmlとCSSの基本を学びましょう。わからないまま突き進むより基本を学ぶのが結局近道です。htmlやCSSをマンガで楽しく学ぼう【180ページ単行本1冊相当量】htmlから収益化までホームページ作成の基本をひととおり、マンガでクスっと笑いながら学べます。9年間ホームページを作ってきた作者の実績に基づき作られた確かな内容です。マンガでわかるホームページ。