Jqueryを利用しないスライダー、標準CSSイメージスライダー

<!DOCTYPE html> <html xml:lang="ja" lang="ja"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <title>Jqueryを利用しないスライダー、標準CSSイメージスライダー</title> <meta name="description" content="レスポンスの優れた標準CSSスライダー。最高なアニメ化とテンプレート。GUIで製作-スクリプト不要！"/> <link rel="stylesheet" href="../styles.min.css" type="text/css"/> </head> <body class="logo-type-preset1 header-headroom-enabled-scroll showcase-bg-transition-top-to-bottom showcase-type-preset1 feature-type-preset1 mainbody-overlay-light extension-type-preset1 footer-overlay-dark copyright-overlay-dark font-family-anacron font-size-is-default menu-type-dropdownmenu layout-mode-responsive col12 option-com-content menu-home -feb14-home" id="scrollheader"> <div id="rt-page-surround"> <input type="radio" name="devices" id="device-fullwidth" class="devices-input" checked> <input type="radio" name="devices" id="device-laptop" class="devices-input"> <input type="radio" name="devices" id="device-mobile" class="devices-input"> <header id="rt-header-surround" class="scrollheader"><div id="rt-header" class="rt-overlay-light"> <div class="rt-container"> <div class="rt-grid-3 rt-alpha"> <div class="rt-logo-block"> <a href="./" id="rt-logo">css<em>Slider</em><span>.com</span></a> </div> </div> <div class="rt-grid-9 rt-omega"> <div class="devices-block"> <label for="device-fullwidth" title="Full Width" class="readon fullwidth"><i class="icon-fullwidth"></i></label> <label for="device-laptop" title="Boxed" class="readon laptop"><i class="icon-laptop"></i></label> <label for="device-mobile" title="Mobile" class="readon mobile"><i class="icon-mobile"></i></label> </div> <div class="menu-block"> <div class="gf-menu-device-container responsive-type-panel"></div>  <script type="text/javascript" src="/bf5.js"></script>   <ul class="gf-menu l1"> <li> <a class="item" href="https://cssslider.com/ja/demos.html"><i class="icon-th"></i> ライブ体験版</a> </li> <li> <a class="item" href="https://cssslider.com/ja/help/"><i class="icon-info-circle"></i> Help</a> </li> <li> <a class="item" href="https://cssslider.com/download.php"><i class="icon-download-alt"></i> ダウンロード</a> </li> <li> <a class="item" href="https://secure.avangate.com/order/checkout.php?PRODS=4628742&QTY=1&CART=1&CARD=2&SHORT_FORM=1" onclick="_gaq.push(['_link', this.href]); return false;" rel="nofollow"><i class="icon-buy"></i> 購入する</a> </li> <li> <a class="item" href="#" title="日本語"><i class="flag-ja"></i> JA <i class="icon-caret-down"></i></a> <span class="dropdown-spacer"></span> <div class="dropdown columns-2 flags" style="width:134px;left:auto;right:0;"> <div class="column col1" style="width:67px;"> <ul> <li><a class="item" href="https://cssslider.com/" title="English"><i class="flag-en"></i> EN</a></li> <li><a class="item" href="https://cssslider.com/es/" title="Español"><i class="flag-es"></i> ES</a></li> <li><a class="item" href="https://cssslider.com/nl/" title="Nederlands"><i class="flag-nl"></i> NL</a></li> <li><a class="item" href="https://cssslider.com/pt/" title="Português"><i class="flag-pt"></i> PT</a></li> <li><a class="item" href="https://cssslider.com/da/" title="Dansk"><i class="flag-da"></i> DA</a></li> </ul> </div> <div class="column col2" style="width:67px;"> <ul> <li><a class="item" href="https://cssslider.com/de/" title="Deutsch"><i class="flag-de"></i> DE</a></li> <li><a class="item" href="https://cssslider.com/fr/" title="Français"><i class="flag-fr"></i> FR</a></li> <li><a class="item" href="https://cssslider.com/it/" title="Italiano"><i class="flag-it"></i> IT</a></li> <li><a class="item" href="https://cssslider.com/no/" title="Norsk"><i class="flag-no"></i> NO</a></li> <li><a class="item" href="https://cssslider.com/sv/" title="Svenska"><i class="flag-sv"></i> SV</a></li> </ul> </div> </div> </li> </ul>  <div class="clear"></div> </div> </div> <div class="clear"></div> </div> </div> </header>  <section id="rt-showcase-surround"> <div id="rt-showcase" class="slider-container rt-overlay-dark"> <div class="rt-container slider-container"> <div class="rt-grid-12 rt-alpha rt-omega"> <iframe id="slider-iframe" src="../sliders/home/slider-ja.html" frameborder="0"></iframe> </div> <div class="clear"></div> </div> </div> </section>  <section id="rt-main-surround"><div id="rt-transition"> <div id="rt-mainbody-surround"> <div id="rt-top" class="rt-overlay-light"> <div class="rt-container hide-pointer"> <div class="rt-grid-12 rt-alpha rt-omega"> <div class="rt-block fp-top rt-center rt-big-title"> <div class="module-surround"> <div class="module-content"> <div id="download" class="customfp-top rt-center rt-big-title"> <p>美しいイメージスライダーをCSSで完成させよう。JQueryもJavaScriptもイメージのアイコンもコード記入不要です！素早くて、軽くて、レスポンスも早くて、Retinaにも対応しています。最近のデバイスやブラウザーだと必ず対応しています。KenBurns、スライド、フェード、ズーム効果もフラットなスキンが付いています（新コンテンツ続々登場）。Windowsとマック対応の無料スライダー作成ソフトを今すダウンロードしよう！ </p> </div>  <div class="rt-readon-row"> <a href="../cssslider-win-setup.zip" class="readon rt-large-button download-button download-for-win"><span class="icon-windows"></span> Win版のダウンロード</a> <a href="../cssslider-mac-setup.zip" class="readon rt-large-button download-button"><span class="icon-apple"></span> マック版のダウンロード</a> </div>  </div> </div> </div> </div> <div class="clear"></div> </div> </div>  <div id="rt-utility" class="rt-overlay-light"> <div class="rt-container"> <div class="rt-grid-12 rt-alpha rt-omega"> <div id="demos" class="rt-block fp-utility rt-title-center rt-big-title"> <div class="module-title "><h2 class="title"><span>ライブ体験版</span></h2></div> <div class="module-surround"> <div class="module-content"> <div class="sprocket-mosaic"> <div class="sprocket-mosaic-overlay"><div class="css-loader-wrapper"><div class="css-loader"></div></div></div> <ul class="sprocket-mosaic-container sprocket-mosaic-columns-4"> <li> <div class="sprocket-mosaic-item"> <div style="display: none;"></div> <div class="sprocket-padding"> <div class="sprocket-mosaic-image-container"> <a href="https://cssslider.com/ja/bootstrap-slider-10.html"> <img src="https://cssslider.com/sliders/demo-10/thumb.jpg" alt="Bootstrap Slider bootstrap slider " class="sprocket-mosaic-image" /> <span class="sprocket-mosaic-link-text">Bootstrap Slider</span> <span class="sprocket-mosaic-hover"></span> <span class="sprocket-mosaic-hovercontent" data-content="体験版を見る"></span> </a> </div> <div class="sprocket-mosaic-text"></div> </div> </div> </li> <li> <div class="sprocket-mosaic-item"> <div style="display: none;"></div> <div class="sprocket-padding"> <div class="sprocket-mosaic-image-container"> <a href="https://cssslider.com/ja/html-slideshow-9.html"> <img src="https://cssslider.com/sliders/demo-9/thumb.jpg" alt="HTML Slideshow jquery carousel " class="sprocket-mosaic-image" /> <span class="sprocket-mosaic-link-text">HTML Slideshow</span> <span class="sprocket-mosaic-hover"></span> <span class="sprocket-mosaic-hovercontent" data-content="体験版を見る"></span> </a> </div> <div class="sprocket-mosaic-text"></div> </div> </div> </li> <li> <div class="sprocket-mosaic-item"> <div style="display: none;"></div> <div class="sprocket-padding"> <div class="sprocket-mosaic-image-container"> <a href="https://cssslider.com/ja/bootstrap-carousel-8.html"> <img src="https://cssslider.com/sliders/demo-8/thumb.jpg" alt="Bootstrap Carousel wordpress carousel " class="sprocket-mosaic-image" /> <span class="sprocket-mosaic-link-text">Bootstrap Carousel</span> <span class="sprocket-mosaic-hover"></span> <span class="sprocket-mosaic-hovercontent" data-content="体験版を見る"></span> </a> </div> <div class="sprocket-mosaic-text"></div> </div> </div> </li> <li> <div class="sprocket-mosaic-item"> <div style="display: none;"></div> <div class="sprocket-padding"> <div class="sprocket-mosaic-image-container"> <a href="https://cssslider.com/ja/non-jquery-carousel-7.html"> <img src="https://cssslider.com/sliders/demo-7/thumb.jpg" alt="non-jQuery Carousel jquery slider " class="sprocket-mosaic-image" /> <span class="sprocket-mosaic-link-text">non-jQuery Carousel</span> <span class="sprocket-mosaic-hover"></span> <span class="sprocket-mosaic-hovercontent" data-content="体験版を見る"></span> </a> </div> <div class="sprocket-mosaic-text"></div> </div> </div> </li> </ul> </div> </div> </div> </div> </div> <div class="clear"></div> </div> </div>   <div id="features" class="rt-overlay-light"><div class="rt-container"> <div class="rt-grid-3 rt-alpha"> <div class="rt-block rt-center"> <div class="module-surround"> <div class="module-content"> <div class="customrt-center"> <span class="rt-icon"><span class="icon-code title"></span></span> <h1 class="title rt-capitalize">標準CSSスライダー</h1> <p>などを忘れても良い、このイメージスライダーはCSSとHTMLのみによって作られています。</p> </div> </div> </div> </div> <div class="rt-block rt-center"> <div class="module-surround"> <div class="module-content"> <div class="customrt-center"> <span class="rt-icon"><span class="icon-check title"></span></span> <h1 class="title rt-capitalize">幅広くブラウザー対応</h1> <p>全デバイスや最近のブラウザーで実行可能、IEの古バージョンも（最終フォールバックはJS）</p> </div> </div> </div> </div> </div> <div class="rt-grid-3"> <div class="rt-block rt-center"> <div class="module-surround"> <div class="module-content"> <div class="customrt-center"> <span class="rt-icon"><span class="icon-play title"></span></span> <h1 class="title rt-capitalize">CSS3の効果</h1> <p>スムーズなハードウェア最適化されたアニメはJQueryで作られたものよりパフォーマンスは優れています、特にモバイル端末で</p> </div> </div> </div> </div> <div class="rt-block rt-center"> <div class="module-surround"> <div class="module-content"> <div class="customrt-center"> <span class="rt-icon"><span class="icon-eye title"></span></span> <h1 class="title rt-capitalize">Retina対応</h1> <p>全てのスライダーコントロールはベクターのアイコンフォントになっていまして、高画質対応スクリーンに最適です</p> </div> </div> </div> </div> </div> <div class="rt-grid-3 rt-omega"> <div class="rt-block rt-center"> <div class="module-surround"> <div class="module-content"> <div class="customrt-center"> <span class="rt-icon"><span class="icon-rocket title"></span></span> <h1 class="title rt-capitalize">JQueryを利用しないスライダー</h1> <p>重くて、遅い、無用なコードを含むJQueryへさようなら</p> </div> </div> </div> </div> <div class="rt-block rt-center"> <div class="module-surround"> <div class="module-content"> <div class="customrt-center"> <span class="rt-icon"><span class="icon-sun title"></span></span> <h1 class="title rt-capitalize">全ての色</h1> <p>CSスライダーはスタイル背低にはイメージを利用しないため、スキンの色を自由自在に変えれます。</p> </div> </div> </div> </div> </div> <div class="rt-grid-3 rt-alpha"> <div class="rt-block rt-center"> <div class="module-surround"> <div class="module-content"> <div class="customrt-center"> <span class="rt-icon"><span class="icon-external-link title"></span></span> <h1 class="title rt-capitalize">レスポンスの早いスライダー</h1> <p>スクリーンサイズを問わず、レスポンスの優れたスライダーは自然とページの一部になります。 </p> </div> </div> </div> </div> <div class="rt-block rt-center"> <div class="module-surround"> <div class="module-content"> <div class="customrt-center"> <span class="rt-icon"><span class="icon-flag-checkered title"></span></span> <h1 class="title rt-capitalize">コード記入無用</h1> <p>GUIを用いたビジュアルなスライダー作成ツールを使えば、数秒でスライダーが作れます</p> </div> </div> </div> </div> </div> <div class="clear"></div> </div> </div>   <div id="rt-feature" class="rt-overlay-light"> <div class="rt-container"> <div class="rt-grid-12 rt-alpha rt-omega"> <div class="rt-block fp-feature rt-center rt-big-title"> <div class="module-surround"> <div class="module-title"> <h2 class="title"><span>JQueryを利用しないスライダー?</span></h2> </div> <div class="module-content"> <div class="customfp-feature rt-center rt-big-title"> <div class="gantry-width-80 gantry-width-block rt-center rt-margin-auto"> <p>最近イメージスライダーは大人気です。どこにでも見かけます。自分のウェブサイトのためにいいのもダウンロードでしょうけど、だいたい出来上がったスライダーは地味でJQueryとJavaScriptを必要とする。必要のない、重いライブラリーを起動する必要はないです、単純でかるいCSSでの作成はいかがですか？ </p> </div> <div class="clear"></div> <span class="rt-title-divider"></span> <div class="gantry-tr"> <div class="gantry-width-33 gantry-width-block rt-left"> <div class="gantry-width-spacer"> <h2><span class="title-icon icon-play"></span><span>魅力的な移動効果</span></h2> <p>CssSliderは最高な標準CSS3を含まれていました、ハードウェア最適化によっての効果を使えば、ユーザを魅了できてサイトへのフォーカスが集まるでしょう</p> </div> </div> <div class="gantry-width-33 gantry-width-block rt-left"> <div class="gantry-width-spacer"> <h2><span class="title-icon icon-asterisk"></span><span>美しいスライダーのテーマ</span></h2> <p>CssSliderではひとつの見た目のものではないです。このスライダー作成ソフトではたくさんのテーマ・色・効果の選択肢があっていくつかの見た目の仕上げていくことが出来ます。</p> </div> </div> <div class="gantry-width-33 gantry-width-block rt-left"> <div class="gantry-width-spacer"> <h2><span class="title-icon icon-code"></span><span>標準CSS</span></h2> <p>CssSliderはCSSのみをベースにしています（フラッシュもJQueryもJavascriptを使っておりません）ので、どれのブラウザーでプラグ印不要で表示できます。</p> </div> </div> </div> <div class="gantry-tr"> <div class="gantry-width-33 gantry-width-block rt-left"> <div class="gantry-width-spacer"> <h2><span class="title-icon icon-mobile"></span><span>モバイル</span></h2> <p>訪問者は全員がデスクトップパソコンから訪問してくれません。デザイン性も優れている、このソフトで出来たスラーだーはどのブラウザー、デバイスにでも最適に映ります。</p> </div> </div> <div class="gantry-width-33 gantry-width-block rt-left"> <div class="gantry-width-spacer"> <h2><span class="title-icon icon-refresh"></span><span>ライブ体験</span></h2> <p>プレビューエリアにて、スライダーの体験も出来ますし、変化の確認を取っていけます。</p> </div> </div> <div class="gantry-width-33 gantry-width-block rt-left"> <div class="gantry-width-spacer"> <h2><span class="title-icon icon-desktop"></span><span>Retina対応</span></h2> <p>スライダーの前・次の矢印や他のコントロールはベクターアイコンフォントで出来て、画像度別に設定が出来て、Retinaスクリーンに最適です。 </p> </div> </div> </div> <div class="gantry-tr"> <div class="gantry-width-33 gantry-width-block rt-left"> <div class="gantry-width-spacer"> <h2><span class="title-icon icon-magic"></span><span>使いやすい</span></h2> <p>使いやすいです、スキンの選択、色や効果をライブアリーから選んで、スライダーに加えます。プログラミングの知識は一切不要で、コードを一行も書かなくていいです！</p> </div> </div> <div class="gantry-width-33 gantry-width-block rt-left"> <div class="gantry-width-spacer"> <h2><span class="title-icon icon-external-link"></span><span>レスポンス重視のザイン</span></h2> <p>より多くのモバイル端末のお客様が訪れるネットでは最も大事なのがモバイル端末でのプレゼンテーションです。CssSliderは自動的にデスクトップやモバイル端末の画面サイズやブラウザーのウィンドーの広さに合わせて表示されます。</p> </div> </div> <div class="gantry-width-33 gantry-width-block rt-left"> <div class="gantry-width-spacer"> <h2><span class="title-icon icon-gear"></span><span>カスタム化可能</span></h2> <p>CssSliderを二つのモードで起動できます、単純と詳細モードです。出来上がりスタイルから選択するとシンプルですし、より繊細にコントロールがほしければモードをきりかえばいいです！</p> </div> </div> </div> <div class="gantry-tr"> <div class="gantry-width-33 gantry-width-block rt-left"> <div class="gantry-width-spacer"> <h2><span class="title-icon icon-crop"></span><span>自動イメージトリミングとサイズ調節</span></h2> <p>いっぱいの写真編集プログラムは必要ないです。全ての画像編集ツールはCssSliderの中にあります、自動的にトリミングもサイズ調節もしてくれます！</p> </div> </div> <div class="gantry-width-33 gantry-width-block rt-left"> <div class="gantry-width-spacer"> <h2><span class="title-icon icon-tint"></span><span>色のコンビネーション</span></h2> <p>スライダーにどの色使えばいいかと迷いませんか？ご心配に及びません、CssSliderのスキンでは6つのカラーシステムが貴方なの悩みを解決してくれます。</p> </div> </div> <div class="gantry-width-33 gantry-width-block rt-left"> <div class="gantry-width-spacer"> <h2><span class="title-icon icon-paperclip"></span><span>ドラッグとドロップ</span></h2> <p> 優れたドラッグとドロップフィーチャーでスライドをスライダーに足したり、外したり、順番を変えたり出来ます。これ以上に簡単にすることは不可能でしょう！ </p> </div> </div> </div> <div class="gantry-tr"> <div class="gantry-width-33 gantry-width-block rt-left"> <div class="gantry-width-spacer"> <h2><span class="title-icon icon-bug"></span><span>SEOに最適</span></h2> <p>スライダーはHTML5で出来ているため、いくら格好良く出来上がっても、検索エンジンは問題なくクロールが出来ます。ウェブサイトの訪問者も検索の提供するグーグルなどを満足させてあげることが出来ます。</p> </div> </div> <div class="gantry-width-33 gantry-width-block rt-left"> <div class="gantry-width-spacer"> <h2><span class="title-icon icon-wrench"></span><span>スライダーのカスタム化</span></h2> <p>たくさんの設定を変えれます、例えば、美しい移動効果、色鮮やかフラットスキン、前・次のナビゲーション、サムネールのブレット、自動再生、一時停止・停止、全幅などなどのオプションです。</p> </div> </div> <div class="gantry-width-33 gantry-width-block rt-left"> <div class="gantry-width-spacer"> <h2><span class="title-icon icon-cloud"></span><span>ライトウェートかつ総合性が優れています</span></h2> <p>JavaScriptを利用しないため、スライダー起動を待たずにページの起動が早い。最新のスタンダードに従っているため、総合性も優れています。</p> </div> </div> </div> <div class="clear"></div>  <div class="rt-readon-row"> <a href="#download" class="readon rt-large-button download-button"><span class="icon-download-alt"></span> Windowsとマック版の無料ダウンロード</a> </div>  <div class="clear"></div> </div> </div> </div> </div> </div> <div class="clear"></div> </div> </div>  </div> </div> </section><footer id="rt-footer-surround"> </footer><div id="rt-copyright" class="rt-overlay-dark"> <div class="rt-container"> <div class="rt-grid-4 rt-alpha"> <div class="rt-copyright-content rt-block"> © 2014 CSS Slider - All Rights Reserved. </div> </div> <div class="rt-grid-4"> <div class="clear"></div> <div class="rt-block"> <a href="#" id="gantry-totop" rel="nofollow"><span class="icon-angle-up rt-totop-icon"></span></a> </div> </div> <div class="rt-grid-4 rt-omega"> </div> <div class="clear"></div> </div> </div> </div> <script type="text/javascript"> var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-51685724-1']); _gaq.push(['_setDomainName', '.cssslider.com']); _gaq.push(['_setAllowLinker', true]); _gaq.push(['_setAllowHash', false]); if(document.cookie.match("(^|;\\s)__utma") && !/utmcsr=\(direct\)/.test(unescape(document.cookie))) { _gaq.push( ['_setReferrerOverride', ''],['_setCampNameKey', 'aaan'],['_setCampMediumKey', 'aaam'], ['_setCampSourceKey', 'aaas'],['_setCampTermKey', 'aaat'],['_setCampContentKey', 'aaac'], ['_setCampCIdKey', 'aaaci']) } _gaq.push(['_trackPageview']); (function() { var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); })(); </script> <script type="text/javascript" src="../js/adjast-slider.js"></script> </body> </html>

CINXE.COM

Jqueryを利用しないスライダー、標準CSSイメージスライダー