【UI】スマホサイト,アプリ,ソシャゲのUIパーツ集 ver1.0 kingpanda Follow 2013-04-21 23:37:20 License: MIT License Fork4 Fav11 View5831 Play Stop Reload Fullscreen Smart Phone Fork tree Readme JavaScript 61 lines HTML 1024 lines CSS 1488 lines ver1.0 スマートフォンのサイトやアプリ、ソーシャルゲームでよく使われるパーツを集めました。 cssを編集することでデザインを変更 セクション単位でマージンを10pxとっています。 セクションタグをdivに変えることで、マージンを無くすことができます。 ※webkitのみ対応 【UI】スマホサイト,アプリ,ソシャゲのUIパーツ集 ver1.0 flipsnap.js prettify jQuery v1.9.1 /*スワイプ*/ $(function() { (function() { // stop callback var $pointer = $(".pointer span"); var f5 = Flipsnap("#flipsnap5"); f5.element.addEventListener('flipsnap.moveend', function() { $pointer.filter(".current").removeClass("current"); $pointer.eq( f5.currentPoint ).addClass("current"); }, false); })(); }); /*アコーディオン*/ $(document).ready(function(){ $(".acordion_tree").css("display","none"); $(".trigger").click(function(){ if($("+.acordion_tree",this).css("display")=="none"){ $(this).addClass("active"); $("+.acordion_tree",this).slideDown("normal"); }else{ $(this).removeClass("active"); $("+.acordion_tree",this).slideUp("normal"); } }); }); /*タブ*/ $(function(){ $(".tab li").click(function(){ var index = $(this).parent("ul").children("li").index(this); $(this).siblings("li").removeClass("active"); $(this).addClass("active"); $(this).parent("ul").nextAll(".panel").hide(); $(this).parent("ul").nextAll(".panel").eq(index).show(); }); }) /*ページスクロール*/ $(function(){ $('a[href^=#]').click(function(){ var speed = 500; var href= $(this).attr("href"); var target = $(href == "#" || href == "" ? 'html' : href); var position = target.offset().top; var body = 'body'; if (navigator.userAgent.match(/MSIE/)){ body = 'html'; } $(body).animate({scrollTop:position}, speed, 'swing'); return false; }); }); /*pretty*/ prettyPrint(); <div id="container"> <h3>見出し-h1- 装飾付き</h3> <!--h1--> <section> <div class="hr1"></div> <div class="h1">テキスト</div> <div class="hr1"></div> </section> <!--/h1--> <section> <pre class="prettyprint"> <code> <!--h1ー--> <section> <div class="hr1"></div> <div class="h1">テキスト</div> <div class="hr1"></div> </section> <!--/h1--> </code> </pre> </section> <h3>見出し-h2- 背景画像入り</h3> <!--h2--> <section> <div class="hr1"></div> <div class="h2">テキスト</div> <div class="hr1"></div> </section> <!--/h2--> <section> <pre class="prettyprint"> <code> <!--h2--> <section> <div class="hr1"></div> <div class="h2">テキスト</div> <div class="hr1"></div> </section> <!--/h2--> </code> </pre> </section> <h3>見出し-h3- シンプル</h3> <!--h3--> <section> <div class="hr1"></div> <div class="h3">テキスト</div> <div class="hr1"></div> </section> <!--/h3--> <section> <pre class="prettyprint"> <code> <!--h3--> <section> <div class="hr1"></div> <div class="h3">テキスト</div> <div class="hr1"></div> </section> <!--/h3--> </code> </pre> </section> <h3>hr</h3> <!--hr--> <section> <div class="hr1"></div> </section> <!--/hr--> <section> <pre class="prettyprint"> <code> <!--hr--> <div class="hr1"></div> <!--/hr--> </code> </pre> </section> <h3>ヘッダー</h3> <!--ヘッダー--> <section class="common_menu2"> <ul> <a href="#"><li></li></a> <a href="#"><li></li></a> <a href="#"><li></li></a> </ul> </section> <!--ヘッダー--> <section> <pre class="prettyprint"> <code> <!--ヘッダー--> <div class="common_menu2"> <ul> <a href="#"><li></li></a> <a href="#"><li></li></a> <a href="#"><li></li></a> </ul> </div> <!--/ヘッダー--> </code> </pre> </section> <h3>フッター</h3> <!--フッター--> <section class="common_menu"> <ul> <a href="#"><li></li></a> <a href="#"><li></li></a> <a href="#"><li></li></a> <a href="#"><li></li></a> <a href="#"><li></li></a> </ul> </section> <!--/フッター--> <section> <pre class="prettyprint"> <code> <!--フッター--> <div class="common_menu"> <ul> <a href="#"><li></li></a> <a href="#"><li></li></a> <a href="#"><li></li></a> <a href="#"><li></li></a> <a href="#"><li></li></a> </ul> </div> <!--/フッター--> </code> </pre> </section> <h3>ヘッダー右メニュー</h3> <!--ヘッダー右メニュー--> <section> <header class="header1"> <h1><a href="#"></a></h1> <nav> <ul> <li><a href="#">TOP</a></li> <li><a href="#">マイペ</a></li> </ul> </nav> </header> </section> <!--/ヘッダー右メニュー--> <section> <pre class="prettyprint"> <code> <!--ヘッダー右メニュー--> <section> <header class="header1"> <h1> <a href="#"></a> </h1> <nav> <ul> <li> <a href="#">TOP</a> </li> <li> <a href="#">マイペ</a> </li> </ul> </nav> </header> </section> <!--/ヘッダー右メニュー2--> </code> </pre> </section> <h3>ヘッダー右メニュー2</h3> <!--ヘッダー右メニュー2--> <section> <header class="header2"> <h1><a href="#"></a></h1> <nav> <ul> <li><a href="#"></a></li> <li><a href="#"></a></li> </ul> </nav> </header> </section> <!--/ヘッダー右メニュー2--> <section> <pre class="prettyprint"> <code> <!--ヘッダー右メニュー2--> <section> <header class="header2"> <h1><a href="#"></a></h1> <nav> <ul> <li><a href="#"></a></li> <li><a href="#"></a></li> </ul> </nav> </header> </section> <!--/ヘッダー右メニュー2--> </code> </pre> </section> <h3>スワイプ（flipsnap.js）</h3> <!--スワイプでスライドするメニュー--> <section class="slide"> <div class="flipsnap" id="flipsnap5"> <div class="item"><a href="#"><span class="pic1">①</span></a></div> <div class="item"><a href="#"><span class="pic2">②</span></a></div> <div class="item"><a href="#"><span class="pic3">③</span></a></div> </div> <div class="pointer"> <span class="current"></span> <span></span> <span></span> </div> </section> <!--/スワイプでスライドするメニュー--> <section> <pre class="prettyprint"> <code> <!--スワイプ--> <section class="slide"> <div class="flipsnap" id="flipsnap5"> <div class="item"><a href="#"> <span class="pic1"> ①</span></a></div> <div class="item"><a href="#"> <span class="pic2"> ②</span></a></div> <div class="item"><a href="#"> <span class="pic3"> ③</span></a></div> </div> <div class="pointer"> <span class="current"></span> <span></span> <span></span> </div> </section> <!--/スワイプ--> </code> </pre> </section> <h3>矢印つきリスト</h3> <!--矢印つきリスト--> <section class="list1"> <ul> <li><a href="#">MENU１</a></li> <li><a href="#">MENU２</a></li> </ul> </section> <!--/矢印つきリスト--> <section> <pre class="prettyprint"> <code> <!--矢印つきリスト--> <section class="list1"> <ul> <li><a href="#">MENU１</a></li> <li><a href="#">MENU２</a></li> </ul> </section> <!--/矢印つきリスト--> </code> </pre> </section> <h3>矢印つきリスト-more</h3> <!--矢印つきリスト--> <section> <div class="list_more"> <a href="#">more</a> </div> </section> <!--/矢印つきリスト--> <section> <pre class="prettyprint"> <code> <!--矢印つきリスト-more---> <div class="list_more"> <a href="#">more</a> </div> <!--/矢印つきリスト-more---> </code> </pre> </section> <h3>矢印つきリスト２</h3> <!--矢印つきリスト2--> <section class="list2"> <ul> <li><a href="#">MENU１</a></li> <li><a href="#">MENU２</a></li> <li><a href="#">MENU３</a></li> </ul> </section> <!--/矢印つきリスト2--> <section> <pre class="prettyprint"> <code> <!--矢印つきリスト2--> <section class="list2"> <ul> <li><a href="#">MENU１</a></li> <li><a href="#">MENU２</a></li> <li><a href="#">MENU３</a></li> </ul> </section> <!--/矢印つきリスト2--> </code> </pre> </section> <h3>サムネイルつき矢印リスト</h3> <!--サムネイルつき矢印リスト--> <section class="list3"> <ul> <li><a href="#"><img name="" src="" width="70" height="70" alt="" style="background-color: #990000"><strong>MENU１</strong>texttexttext</a></li> <li><a href="#"><img name="" src="" width="70" height="70" alt="" style="background-color: #990000"><strong>MENU２</strong>texttexttext</a></li> </ul> </section> <!--/サムネイルつき矢印リスト--> <section> <pre class="prettyprint"> <code> <!--サムネイルつき矢印リスト--> <section class="list3"> <ul> <li><a href="#"> <img src="images/item_140.jpg"> <strong>MENU１</strong> texttext</a> </li> <li><a href="#"> <img src="images/item2_140.jpg"> <strong>MENU２</strong> texttext</a> </li> </ul> </section> <!--/サムネイルつき矢印リスト--> </code> </pre> </section> <h3>サムネイルつき矢印リスト２</h3> <!--サムネイルつき矢印リスト2--> <section class="list4"> <ul> <li><a href="#"><img name="" src="" width="45" height="45" alt="" style="background-color: #990000"><strong>MENU1</strong>texttexttext</a></li> <li><a href="#"><img name="" src="" width="45" height="45" alt="" style="background-color: #990000"><strong>MENU2</strong>texttexttext</a></li> <li><a href="#"><img name="" src="" width="45" height="45" alt="" style="background-color: #990000"><strong>MENU3</strong>texttexttext</a></li> </ul> </section> <!--/サムネイルつき矢印リスト2--> <section> <pre class="prettyprint"> <code> <!--サムネイルつき矢印リスト2--> <section class="list4"> <ul> <li><a href="#"> <img src="images/item_90.jpg"> <strong>MENU1</strong> texttexttext</a> </li> <li><a href="#"> <img src="images/item2_90.jpg"> <strong>MENU2</strong> texttexttext</a></li> <li><a href="#"> <img src="images/item3_90.jpg"> <strong>MENU3</strong> texttexttext</a></li> </ul> </section> <!--/サムネイルつき矢印リスト2--> </code> </pre> </section> <h3>サムネイルつき矢印リスト２列</h3> <!--サムネイルつきリスト2列--> <section class="list5"> <ul> <li><a href="#"><img name="" src="" width="45" height="45" alt="" style="background-color: #990000"><strong>MENU1</strong>texttexttext</a></li> <li><a href="#"><img name="" src="" width="45" height="45" alt="" style="background-color: #990000"><strong>MENU2</strong>texttexttext</a></li> <li><a href="#"><img name="" src="" width="45" height="45" alt="" style="background-color: #990000"><strong>MENU3</strong>texttexttext</a></li> <li><a href="#"><img name="" src="" width="45" height="45" alt="" style="background-color: #990000"><strong>MENU4</strong>texttexttext</a></li> <li><a href="#"><img name="" src="" width="45" height="45" alt="" style="background-color: #990000"><strong>MENU5</strong>texttexttext</a></li> <li><a href="#"><img name="" src="" width="45" height="45" alt="" style="background-color: #990000"><strong>MENU6</strong>texttexttext</a></li> </ul> </section> <!--/サムネイルつきリスト2列--> <section> <pre class="prettyprint"> <code> <!--サムネイルつきリスト2列--> <section class="list5"> <ul> <li> <a href="#"> <img src="images/item_90.jpg"> <strong>MENU1</strong> texttexttext</a></li> <li> <a href="#"> <img src="images/item2_90.jpg"> <strong>MENU2</strong> texttexttext</a></li> <li> <a href="#"> <img src="images/item3_90.jpg"> <strong>MENU3</strong> texttexttext</a></li> <li> <a href="#"> <img src="images/item_90.jpg"> <strong>MENU4</strong> texttexttext</a></li> <li> <a href="#"> <img src="images/item2_90.jpg"> <strong>MENU5</strong> texttexttext</a></li> <li> <a href="#"> <img src="images/item3_90.jpg"> <strong>MENU6</strong> texttexttext</a></li> </ul> </section> <!--/サムネイルつきリスト2列--> </code> </pre> </section> <h3>サムネイルつきカードリスト</h3> <!--サムネイルつきカードリスト--> <section class="list6"> <ul> <li> <a href="#"><img name="" src="" width="100" height="140" alt="" style="background-color: #990000"><strong>キャラ名</strong> <span>Lv.</span>0000<br/> <span>攻:</span>0000<span class="mrl10">防:</span>0000<br/> <span>コスト:</span>0000<br/> <span>スキル:</span>メリケンパンチ<br/> 攻撃力+100 </a> </li> <li> <a href="#"><img name="" src="" width="100" height="140" alt="" style="background-color: #990000"><strong>キャラ名</strong> <span>Lv.</span>0000<br/> <span>攻:</span>0000<span class="mrl10">防:</span>0000<br/> <span>コスト:</span>0000<br/> <span>スキル:</span>メリケンパンチ<br/> 攻撃力+100 </a> </li> </ul> </section> <!--/サムネイルつきカードリスト--> <section> <pre class="prettyprint"> <code> <!--サムネイルつきカードリスト--> <section class="list6"> <ul> <li> <a href="#"> <img src="images/m_card.jpg"> <strong>キャラ名</strong> <span>Lv.</span>0000<br/> <span>攻:</span>0000 <span class="mrl10">防:</span>0000 <br/> <span>コスト:</span>0000<br/> <span>スキル:</span>メリケンパンチ <br/> 攻撃力+100 </a> </li> <li> <a href="#"> <img src="images/m_card.jpg"> <strong>キャラ名</strong> <span>Lv.</span>0000<br/> <span>攻:</span>0000 <span class="mrl10">防:</span>0000 <br/> <span>コスト:</span>0000<br/> <span>スキル:</span>メリケンパンチ <br/> 攻撃力+100 </a> </li> </ul> </section> <!--/サムネイルつきカードリスト--> </code> </pre> </section> <h3>見出しつきリスト</h3> <!--見出しつきリスト--> <section class="list7"> <ul> <li><strong>お知らせ</strong></li> <li><a href="#">メニュー２</a></li> <li><a href="#">メニュー３</a></li> </ul> </section> <!--/見出しつきリスト--> <section> <pre class="prettyprint"> <code> <!--見出しつきリスト--> <section class="list7"> <ul> <li><strong>お知らせ</strong></li> <li><a href="#">メニュー２</a></li> <li><a href="#">メニュー３</a></li> </ul> </section> <!--/見出しつきリスト--> </code> </pre> </section> <h3>汎用レイアウト</h3> <!--汎用レイアウト--> <section class="list8"> <ul> <li><strong>タイトル</strong></li> <li> <div> コンテンツ<br>コンテンツ<br>コンテンツ </div> </li> <li><a href="#"><span>遷移</span></a></li> </ul> </section> <!--/汎用レイアウト--> <section> <pre class="prettyprint"> <code> <!--汎用レイアウト--> <section class="list8"> <ul> <li><strong>タイトル</strong></li> <li> <div> コンテンツ<br> コンテンツ<br> コンテンツ </div> </li> <li><a href="#"><span>遷移</span> </a></li> </ul> </section> <!--/汎用レイアウト--> </code> </pre> </section> <h3>ページ遷移</h3> <!--ページ遷移--> <section class="backto"> <ul> <li><a href="#"><span>ガチャとは？</span></a></li> <li><a href="#"><span>進化合成とは？</span></a></li> </ul> </section> <!--/ページ遷移--> <section> <pre class="prettyprint"> <code> <!--ページ遷移--> <section class="backto"> <ul> <li><a href="#"> <span>ガチャとは？</span></a> </li> <li><a href="#"> <span>進化合成とは？</span></a> </li> </ul> </section> <!--ページ遷移--> </code> </pre> </section> <h3>注意事項</h3> <!--注意事項--> <section class="attention"> <div> <span><strong>ATTENTION</strong></span> <span>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト </span> </div> </section> <!--/注意事項--> <section> <pre class="prettyprint"> <code> <!--注意事項--> <section class="attention"> <div> <span> <strong>注意事項</strong> </span> <span> テキストテキストテキストテキスト テキストテキストテキストテキスト テキストテキストテキストテキスト テキストテキストテキストテキスト </span> </div> </section> <!--/注意事項--> </code> </pre> </section> <h3>タブ+ソート</h3> <!--ソート--> <section class="Pcate"> <ul> <li><span class="all_on">ALL</span></li> <li><a href="#" class="a_off">A</a></li> <li><a href="#" class="b_off">B</a></li> <li><a href="#" class="c_off">C</a></li> </ul> <form action="##" method="POST" class="tx_center"> <input type="hidden" name="category" value="{{ category }}" /> ・・・ <select name="column"> <option value="iddsc">手に入った順</option> ・・・ </select> <input type="submit" name="btn" id="btn" value="並べ替え" class="btn03" /> </form> </section> <!--ソート--> <section> <pre class="prettyprint"> <code> <!--ソート--> <section class="Pcate"> <ul> <li><span class="all_on"> ALL</span></li> <li><a href="#" class=" a_off">A</a></li> <li><a href="#" class=" b_off">B</a></li> <li><a href="#" class=" c_off">C</a></li> </ul> <form action="##" method="POST" class="tx_center"> <input type="hidden" name="category" value="{{ category }}" /> ・・・ <select name="column"> <option value="iddsc"> 手に入った順</option> ・・・ </select> <input type="submit" name="btn" id="btn" value="並べ替え" class="btn03" /> </form> </section> <!--ソート--> </code> </pre> </section> <h3>タブ（２段）</h3> <!--tab--> <section> <ul class="tab style01"> <li class="active">今日</li> <li>今週</li> <li>総合</li> </ul> <section class="panel show"> <ul class="tab style02"> <li class="active">個人</li> <li>ギルド</li> </ul> <div class="panel show"> 今日個人 </div> <div class="panel"> 今日ギルド </div> </section> <section class="panel"> <ul class="tab style02"> <li class="active">個人</li> <li>ギルド</li> </ul> <div class="panel show"> 今週個人 </div> <div class="panel"> 今週ギルド </div> </section> <section class="panel"> <ul class="tab style02"> <li class="active">個人</li> <li>ギルド</li> </ul> <div class="panel show"> 総合個人 </div> <div class="panel"> 総合ギルド </div> </section> </section> <!--/tab--> <section> <pre class="prettyprint"> <code> <!--tab--> <section> <ul class="tab style01"> <li class="active">今日</li> <li>今週</li> <li>総合</li> </ul> <section class="panel show"> <ul class="tab style02"> <li class="active">個人</li> <li>ギルド</li> </ul> <div class="panel show"> 今日個人 </div> <div class="panel"> 今日ギルド </div> </section> <section class="panel"> <ul class="tab style02"> <li class="active">個人</li> <li>ギルド</li> </ul> <div class="panel show"> 今週個人 </div> <div class="panel"> 今週ギルド </div> </section> <section class="panel"> <ul class="tab style02"> <li class="active">個人</li> <li>ギルド</li> </ul> <div class="panel show"> 総合個人 </div> <div class="panel"> 総合ギルド </div> </section> </section> <!--/tab--> </code> </pre> </section> <h3>navi</h3> <!--navi--> <section class="Lnavi"> <img src="" height="80px" width="70px" style="background-color: #990000"/> <p>テキストテキストテキストテキストテキストテキストテキストテキストテキスト</p> </section> <section class="Rnavi"> <p>テキストテキストテキストテキストテキストテキストテキストテキストテキスト</p> <img src="" height="80px" width="70px" style="background-color: #990000"/> </section> <!--/navi--> <section> <pre class="prettyprint"> <code> <!--navi--> <section class="Lnavi"> <img src="#" height="80px" /> <p>テキストテキストテキストテキストテキスト テキストテキストテキストテキスト</p> </section> <section class="Rnavi"> <p>テキストテキストテキストテキストテキスト テキストテキストテキストテキスト</p> <img src="#" height="80px" /> </section> <!--/navi--> </code> </pre> </section> <h3>アコーディオン（acordion.js）</h3> <!--アコーディオン--> <section class="list6"> <dl class="acordion"> <dt class="trigger">TAP <span class="open-close">open</span></dt> <dd class="acordion_tree"> <p>テキストテキストテキストテキスト テキストテキストテキストテキスト</p> </dd> </dl> </section> <!--/アコーディオン--> <section> <pre class="prettyprint"> <code> <!--アコーディオン--> <section class="list6"> <dl class="acordion"> <dt class="trigger">タップ <span class="open-close">open</span></dt> <dd class="acordion_tree"> <p>テキストテキストテキストテキスト テキストテキストテキストテキスト</p> </dd> </dl> </section> <!--/アコーディオン--> </code> </pre> </section> <h3>前へ次へ</h3> <!--前へ次へ--> <section class="beforenext"> <a href="#" class="btn03">前へ</a> <span>[999/999]</span> <a href="#" class="btn03">次へ</a> </section> <!--前へ次へ--> <section> <pre class="prettyprint"> <code> <!--前へ次へ--> <section class="beforenext"> <a href="#" class="btn03"><<前へ</a> <span>[999/999]</span> <a href="#" class="btn03">次へ>></a> </section> <!--/前へ次へ--> </code> </pre> </section> <h3>ページャー</h3> <!--ページャー--> <section class="pager"> <ul> <li><a href="#" class="btn03">前へ</a></li> <li><span>1</span></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> <li><a href="#">5</a></li> <li><a href="#" class="btn03">次へ</a></li> </ul> </section> <!--ページャー--> <section> <pre class="prettyprint"> <code> <!--ページャー--> <section class="pager"> <ul> <li><a href="#" class="btn03"> <<前へ</a></li> <li><span>1</span></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> <li><a href="#">5</a></li> <li><a href="#" class="btn03"> 次へ>></a></li> </ul> </section> <!--/ページャー--> </code> </pre> </section> <h3>注記</h3> <!--注記--> <section> <div class="note"> <p>※テキストテキストテキストテキストテキストテキストテキストテキスト<br /> ※テキストテキストテキストテキストテキストテキストテキストテキスト</p> </div> </section> <!--/注記--> <section> <pre class="prettyprint"> <code> <!--注記--> <section class="note"> <p>※テキストテキストテキスト <br />※テキストテキストテキスト</p> </section> <!--/注記--> </code> </pre> </section> <h3>CSS3ボタンいろいろ</h3> <!--ボタンいろいろ--> <section class="button"> <a href="#" class="btn1 width30">ボタン１</a> <a href="#" class="btn1 width50">ボタン１</a> <a href="#" class="btn1 width80">ボタン１</a> <a href="#" class="btn2 width30">ボタン２</a> <a href="#" class="btn2 width50">ボタン２</a> <a href="#" class="btn2 width80">ボタン２</a> <a href="#" class="btn3 width30">ボタン３</a> <a href="#" class="btn3 width50">ボタン３</a> <a href="#" class="btn3 width80">ボタン３</a> <a href="#" class="btn4 width30">ボタン４</a> <a href="#" class="btn4 width50">ボタン４</a> <a href="#" class="btn4 width80">ボタン４</a> </section> <!--/ボタンいろいろ--> <section> <pre class="prettyprint"> <code> <!--ボタンいろいろ--> <section class="button"> <a href="#" class="btn1 width30"> ボタン１</a> <a href="#" class="btn1 width50"> ボタン１</a> <a href="#" class="btn1 width80"> ボタン１</a> <a href="#" class="btn2 width30"> ボタン２</a> <a href="#" class="btn2 width50"> ボタン２</a> <a href="#" class="btn2 width80"> ボタン２</a> <a href="#" class="btn3 width30"> ボタン３</a> <a href="#" class="btn3 width50"> ボタン３</a> <a href="#" class="btn3 width80"> ボタン３</a> <a href="#" class="btn4 width30"> ボタン４</a> <a href="#" class="btn4 width50"> ボタン４</a> <a href="#" class="btn4 width80"> ボタン４</a> </section> <!--/ボタンいろいろ--> </code> </pre> </section> <h3>PageTop</h3> <!--ページトップ--> <section class="pagetop" id="pt"> <a href="#">PageTop▲</a> </section> <!--/ページトップ--> <section> <pre class="prettyprint"> <code> <!--ページトップ--> <section class="pagetop" id="pt"> <a href="#">PageTop▲</a> </section> <!--/ページトップ--> </code> </pre> </section> </div> <footer>kingpanda</footer> 【UI】スマホサイト,アプリ,ソシャゲのUIパーツ集 ver1.0 prettify @charset "UTF-8"; /* reset */ html{color:#000;background:#000;} body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0;} table{border-collapse:collapse;border-spacing:0;} fieldset,img{border:0;} address,caption,cite,code,dfn,em,th,var{font-style:normal;font-weight:normal;} li{list-style:none;}caption,th{text-align:left;} h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;} q:before,q:after{content:'';} abbr,acronym{border:0;font-variant:normal;} sup{vertical-align:text-top;} sub{vertical-align:text-bottom;} input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;} input,textarea,select{*font-size:100%;}legend{color:#000;} /* base */ body {font:14px/1.231 "ヒラギノ角ゴ Pro W3";background-size: 100%; -webkit-text-size-adjust: none;background:#000; } a{ text-decoration:none;} section{margin-bottom:10px; clear:both;} h3{font-size:14px; font-weight:bold; color:#fff; margin-top:10px; margin-bottom:10px; background:-webkit-gradient(linear, left top, left bottom,from(rgba(95,95,95,0.5)),to(#999)); padding:5px;} pre{background:#fff; color:#FFF; padding:10px; border:inset 2px #444444;} #container{ width: 320px; margin:0 auto; } footer{ color:#FFF; font-weight:bold; text-align:center; font-size:16px; padding-top:10px; } @font-face { font-family: 'fontello'; src: url("http://jsrun.it/assets/b/b/Z/u/bbZuB"); src: url("http://jsrun.it/assets/b/b/Z/u/bbZuB") format('embedded-opentype'), url("http://jsrun.it/assets/y/W/B/K/yWBK3") format('woff'), url("http://jsrun.it/assets/k/1/u/s/k1usg") format('truetype'), url("http://jsrun.it/assets/v/f/c/k/vfckS") format('svg'); } .sprite1{ background-image:url(http://jsrun.it/assets/Z/D/h/k/ZDhkT.png); background-size:320px 240px; } /* ========================================================== 定義 ========================================================== */ /* フォントサイズ ===========================================================*/ .fs10 {font-size: 77%;} .fs11 {font-size: 85%;} .fs12 {font-size: 93%;} .fs13 {font-size: 100%;} .fs14 {font-size: 108%;} .fs15 {font-size: 116%;} .fs16 {font-size: 123.1%;} .fs17 {font-size: 131%;} .fs18 {font-size: 138.5%;} .fs19 {font-size: 146.5%;} .fs20 {font-size: 153.9%;} .fs21 {font-size: 161.6%;} .fs22 {font-size: 167%;} .fs23 {font-size: 174%;} .fs24 {font-size: 182%;} .fs25 {font-size: 189%;} .fs26 {font-size: 197%;} /* フォント太さ ===========================================================*/ .fb { font-weight: bold;} .fn { font-weight: normal;} /* フォントカラー ===========================================================*/ .red {color:#C03;} /* text-align・float ===========================================================*/ .taL { text-align:left; } .taC { text-align:center; } .taR { text-align:right; } .fL { float:left; } .fR { float:right; } /* margin ===========================================================*/ .mr0{margin:0 auto;} .mr2{margin:2px 0px;} .mr4{margin:4px 0px;} .mr6{margin:6px 0px;} .mr8{margin:8px 0px;} .mr10{margin:10px 0px;} .mr12{margin:12px 0px;} .mr14{margin:14px 0px;} .mr16{margin:16px 0px;} .mr18{margin:18px 0px;} .mr20{margin:20px 0px;} .mt05 {margin-top:5px;} .mt10 {margin-top:10px;} .mt20 {margin-top:20px;} .mt30 {margin-top:30px;} .mb0 {margin-bottom:0px !important;} .mb05 {margin-bottom:5px;} .mb10 {margin-bottom:10px;} .mb20 {margin-bottom:20px;} .mb30 {margin-bottom:30px;} .mb50 {margin-bottom:50px;} .mrl10 {margin-left:10px;} .mrr10 {margin-right:10px;} .mrl-10 {margin-right:-10px; margin-left:-10px;} .mr10 {margin-right:10px;} /* width ===========================================================*/ .width10 {width:10%;} .width20 {width:20%;} .width30 {width:30%;} .width40 {width:40%;} .width50 {width:50%;} .width60 {width:60%;} .width70 {width:70%;} .width80 {width:80%;} .width90 {width:90%;} .width100 {width:100%;} /* text-align ===========================================================*/ .tx_center{text-align:center;} .tx_left{text-align:left;} .tx_right{text-align:right;} @charset "utf-8"; /* CSS Document */ /* h1 */ .h1{ position:relative; display:inline-block; height:41px; text-align:center; text-decoration: none; color:#fff !important; line-height:41px; font-size: 16px; background: -webkit-gradient(linear, left top, left bottom, color-stop(1.00, #fff), color-stop(0.48, #b7b7b7), color-stop(0.50, #adadad), color-stop(0.00, #838383)); background: -webkit-linear-gradient(top, #838383 0%, #adadad 50%, #b7b7b7 48%, #fff 100%); background: linear-gradient(to bottom, #838383 0%, #adadad 50%, #b7b7b7 48%, #fff 100%); width:100%; text-overflow: ellipsis; font-weight:bold; } .h1:after { content: ""; position: absolute; right:0; height:40px; width:19px; background-image:url(http://jsrun.it/assets/Z/D/h/k/ZDhkT.png); background-size: 320px 240px; background-position: -22px 0px; } .h1:before{ content: ""; position: absolute; left:0; height:40px; width:19px; background-image:url(http://jsrun.it/assets/Z/D/h/k/ZDhkT.png); background-size: 320px 240px; background-position: -4px 0px; } .h1.disable{ color:#AAA !important; -webkit-text-shadow:1px 1px 1px #222, 1px -1px 1px #222, -1px 1px 1px #222, -1px -1px 1px #222; text-shadow:1px 1px 1px #222, 1px -1px 1px #222, -1px 1px 1px #222, -1px -1px 1px #222; } /* h2 */ .h2{ position:relative; display:inline-block; height:41px; text-align:center; text-decoration: none; color:#000 !important; line-height:41px; font-size: 16px; background: url(http://grad3.ecoloniq.jp/sample/img/patterns_32.png) repeat, -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 121, color-stop(1.00, #274762), color-stop(0.34, #d2e2fe)); background: url(http://grad3.ecoloniq.jp/sample/img/patterns_32.png) repeat, -webkit-radial-gradient(50% 100%, circle, #d2e2fe 34%, #274762 100%); background: url(http://grad3.ecoloniq.jp/sample/img/patterns_32.png) repeat, radial-gradient(50% 100%, circle, #d2e2fe 34%, #274762 100%); width:100%; text-overflow: ellipsis; font-weight:bold; } .h2.disable{ color:#AAA !important; -webkit-text-shadow:1px 1px 1px #222, 1px -1px 1px #222, -1px 1px 1px #222, -1px -1px 1px #222; text-shadow:1px 1px 1px #222, 1px -1px 1px #222, -1px 1px 1px #222, -1px -1px 1px #222; } /* h3 */ .h3{ position:relative; display:inline-block; height:41px; text-align:center; text-decoration: none; color:#fff !important; line-height:41px; font-size: 16px; background:#43335E; width:100%; text-overflow: ellipsis; font-weight:bold; } .h2.disable{ color:#AAA !important; -webkit-text-shadow:1px 1px 1px #222, 1px -1px 1px #222, -1px 1px 1px #222, -1px -1px 1px #222; text-shadow:1px 1px 1px #222, 1px -1px 1px #222, -1px 1px 1px #222, -1px -1px 1px #222; } /* 汎用ライン */ .hr1{ width:100%; height:1px; background:-webkit-gradient(linear, left top, right top, from(#664300), color-stop(0.4, #dec548), color-stop(0.5, #fcfab5), color-stop(0.6, #dec548), to(#664300)); } /* フッター */ .common_menu ul{ display: -webkit-box; width: 320px; height: 51px; margin:0 auto; background: -webkit-gradient(linear, left top, left bottom, color-stop(0.00, #fff), color-stop(1.00, #969696)); background: -webkit-linear-gradient(#fff, #969696); font-weight: bold; text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.4), 0 1px 1px rgba(255, 255, 255, 0.5); background: -webkit-gradient(linear, left top, left bottom, color-stop(0.00, #fff), color-stop(1.00, #969696)); background: -webkit-linear-gradient(#fff, #969696); } .common_menu ul a{ width: 62px; text-align: center; color:#FFF; font-weight:bold; padding-top:12px; display: block; border-right: 1px solid #666; border-left: 1px solid #fff; border-radius: 2px; -webkit-border-radius: 2px; } .common_menu ul a li{ display: block; width: 100%; height: 51px; border-radius: 4px; -webkit-border-radius: 4px; text-decoration: none; } .common_menu ul a:nth-child(1):before{ font-family: 'fontello'; content: 'm'; color: #ea4949; font-size:26px; } .common_menu ul a:nth-child(2):before{ font-family: 'fontello'; content: 'f'; color: #ea4949; font-size:26px; } .common_menu ul a:nth-child(3):before{ font-family: 'fontello'; content: 'r'; color: #ea4949; font-size:26px; } .common_menu ul a:nth-child(4):before{ font-family: 'fontello'; content: 'p'; color: #ea4949; font-size:26px; } .common_menu ul a:nth-child(5):before{ font-family: 'fontello'; content: 's'; color: #ea4949; font-size:26px; } /* ヘッダー */ .common_menu2 ul{ display: -webkit-box; width: 320px; height: 51px; margin:0 auto; background: -webkit-gradient(linear, left top, left bottom, color-stop(0.00, #fff), color-stop(1.00, #969696)); background: -webkit-linear-gradient(#fff, #969696); font-weight: bold; text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.4), 0 1px 1px rgba(255, 255, 255, 0.5); background: -webkit-gradient(linear, left top, left bottom, color-stop(0.00, #fff), color-stop(1.00, #969696)); background: -webkit-linear-gradient(#fff, #969696); } .common_menu2 ul a{ width: 62px; border-radius: 2px; -webkit-border-radius: 2px; text-align: center; color:#FFF; font-weight:bold; padding-top:12px; display: block; border-right: 1px solid #666; border-left: 1px solid #fff; } .common_menu2 ul a:nth-child(2){ width: 190px; border-radius: 2px; -webkit-border-radius: 2px; text-align: center; color:#FFF; font-weight:bold; padding-top:12px; display: block; border-right: 1px solid #666; border-left: 1px solid #fff; } .common_menu2 ul a li{ display: block; width: 100%; height: 51px; border-radius: 4px; -webkit-border-radius: 4px; text-decoration: none; } .common_menu2 ul a:nth-child(1):before{ font-family: 'fontello'; content: 'm'; color: #ea4949; font-size:26px; } .common_menu2 ul a:nth-child(2):before{ color: #ea4949; font-size:26px; } .common_menu2 ul a:nth-child(3):before{ font-family: 'fontello'; content: 'r'; color: #ea4949; font-size:26px; } /* ヘッダーの右にメニュー */ .header1{ background: -webkit-gradient(linear, left top, left bottom, color-stop(0.00, #fff), color-stop(1.00, #969696)); background: -webkit-linear-gradient(#fff, #969696); background-size: 100% 100%; height: 50px; } .header1 h1{ display: block; height: 50px; width: 135px; line-height: 50px; font-weight: bold; margin-left: 5px; float: left; } .header1 nav{ float: right; } .header1 nav li{ float: left; } .header1 nav li>a{ display: block; height: 33px; width: 70px; color: #fff; line-height: 30px; background: -webkit-gradient(linear, left top, left bottom, from(#fff),to(#ececec)); background: linear-gradient(#fff #ececec); text-align: center; text-decoration: none; border: 1px solid #dadada; margin-top: 7px; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.6),-1px -1px 1px rgba(255, 255, 255, 0.5); font-weight:bold; } .header1 nav li:first-child>a{ border-radius: 4px 0 0 4px; } .header1 nav li:last-child>a{ border-radius: 0 4px 4px 0; border-left: none; margin-right: 5px; } /* ヘッダーの右にメニュー２ */ .header2{ background: -webkit-gradient(linear, left top, left bottom, color-stop(0.00, #fff), color-stop(1.00, #969696)); background: -webkit-linear-gradient(#fff, #969696); background-size: 100% 100%; height: 50px; } .header2 h1{ display: block; height: 50px; width: 135px; line-height: 50px; font-weight: bold; margin-left: 5px; float: left; } .header2 nav{ float: right; border-left: 1px solid #666; } .header2 nav li{ float: left; } .header2 nav li>a{ text-align: center; display: block; width: 50px; height: 50px; line-height:50px; } .header2 nav li:first-child>a{ border-right: 1px solid #666; border-left: 1px solid #dadada; } .header2 nav li:last-child>a{ border-left: 1px solid #fff; } .header2 nav li:first-child>a:before{ font-family: 'fontello'; content: 'm'; color: #ea4949; font-size:26px; } .header2 nav li:last-child>a:before{ font-family: 'fontello'; content: 'r'; color: #ea4949; font-size:26px; } /* スワイプでスライドするメニュー */ .slide { width: 320px; overflow: hidden; padding-bottom: 10px; margin:10px auto; } .flipsnap { display: -webkit-box; margin: 10px 0; } .item { width: 320px; } .pointer { text-align: center; } .pointer span { display: inline-block; width: 7px; height: 7px; border-radius: 5px; border: 1px solid #000; background: #fff; } .pointer span.current { background: #0cf; } .pic1{ width:320px; height:96px; background:#CFF; display:block; font-size:48px; text-align:center; font-weight:bold; line-height:96px; color:#666; } .pic2{ width:320px; height:96px; background:#FCF; display:block; font-size:48px; text-align:center; font-weight:bold; line-height:96px; color:#666; } .pic3{ width:320px; height:96px; background:#FFC; display:block; font-size:48px; text-align:center; font-weight:bold; line-height:96px; color:#666; } /* 矢印つきリスト */ .list1 ul li{ background: -webkit-gradient(linear, left top, left bottom, color-stop(0.00, #fff), color-stop(1.00, #969696)); background: -webkit-linear-gradient(#fff, #969696); border-bottom: 1px solid #666; border-top: 1px solid #fff; height: 44px; margin: 0; } .list1 ul li a{ color: #333; display: block; height: 44px; margin: 0; padding: 0 0 0 10px; overflow: hidden; text-overflow: ellipsis; text-decoration: none; font-weight: bold; white-space: nowrap; line-height: 44px; } .list1 ul li a::after{ content: url(http://jsrun.it/assets/b/2/g/C/b2gCx.png); float: right; } /* 矢印つきリスト-more */ .list_more a{ position: relative; text-align: right; display: block; height: 35px; line-height: 35px; padding-right: 33px; background: -webkit-gradient(linear, left top, left bottom, color-stop(0.00, #fff), color-stop(1.00, #969696)); background: -webkit-linear-gradient(#fff, #969696); border-bottom: 1px solid #666; border-top: 1px solid #fff; text-decoration: none; font-weight: bold; color:#333; } .list_more a:after{ content: ""; display: block; position: absolute; top:2px; right: 14px; width: 10px; height: 35px; margin-top: -6px; background-image:url(http://jsrun.it/assets/b/2/g/C/b2gCx.png); } /* 矢印つきリスト２ */ .list2 ul{ margin: 10px; } .list2 ul li{ overflow: hidden; margin: 0; width: 100%; text-align: left; padding: 0; border-bottom: 1px solid #666; border-top: 1px solid #fff; background: -webkit-gradient(linear, left top, left bottom, color-stop(0.00, #fff), color-stop(1.00, #969696)); background: -webkit-linear-gradient(#fff, #969696); display:block; -webkit-box-shadow:0px 3px 3px rgba(000,000,000,0.1); box-shadow:0px 3px 3px rgba(000,000,000,0.1); } .list2 ul li:first-child{ border-radius: 8px 8px 0 0; } .list2 ul li:last-child{ border-radius: 0 0 8px 8px; } .list2 ul li a{ color: #333; display: block; height: 44px; margin: 0; padding: 0 0 0 10px; overflow: hidden; white-space: nowrap; line-height: 44px; text-overflow: ellipsis; text-decoration: none; font-weight:bold; } .list2 ul li a::after{ content: url(http://jsrun.it/assets/b/2/g/C/b2gCx.png); float: right; } /* サムネイルつき矢印リスト */ .list3 ul li{ background: -webkit-gradient(linear, left top, left bottom, color-stop(0.00, #fff), color-stop(1.00, #969696)); background: -webkit-linear-gradient(#fff, #969696); border-bottom: 1px solid #666; border-top: 1px solid #fff; height: 70px; margin: 0px; } .list3 ul li a{ background: url(http://jsrun.it/assets/b/2/g/C/b2gCx.png) no-repeat 100% 50%; color: #666; display: block; height: 70px; margin: 0; padding: 0 20px 0 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; text-decoration: none; } .list3 ul li img{ float: left; height: 70px; width: 70px; margin-right: 10px; } .list3 ul li a strong{ color: #000; display: block; font-weight: bold; padding-top: 17px; } /* サムネイルつき矢印リスト２ */ .list4 ul{ margin-left: 10px; margin-right: 10px; } .list4 ul li{ background: -webkit-gradient(linear, left top, left bottom, color-stop(0.00, #fff), color-stop(1.00, #969696)); background: -webkit-linear-gradient(#fff, #969696); border-bottom: 1px solid #666; border-top: 1px solid #fff; border-right: 1px solid #ccc; height: 45px; margin: 0px; } .list4 ul li a{ background: url(http://jsrun.it/assets/b/2/g/C/b2gCx.png) no-repeat 100% 50%; color: #666; display: block; height: 45px; margin: 0; padding: 0 20px 0 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; text-decoration: none; } .list4 ul li a strong{ color: #000; display: block; font-weight: bold; padding-top: 5px; } .list4 ul li img{ float: left; height: 45px; width: 45px; margin-right: 10px; } /* サムネイルつき矢印リスト２列 */ .list5 { margin: 10px; } .list5:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .list5 ul li{ background: -webkit-gradient(linear, left top, left bottom, color-stop(0.00, #fff), color-stop(1.00, #969696)); background: -webkit-linear-gradient(#fff, #969696); border-top: none; border-bottom: 1px solid #666; border-top: 1px solid #fff; height: 45px; margin: 0px; } .list5 ul li:nth-child(odd) { float: left; width: 50%; } .list5 ul li a{ color: #666; display: block; height: 45px; margin: 0px; padding: 0 20px 0 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; text-decoration: none; } .list5 ul li a strong{ color: #000; display: block; font-weight: bold; padding-top: 5px; } .list5 ul li img{ float: left; height: 45px; width: 45px; margin-right: 10px; } /* サムネイルつきカードリスト */ .list6 ul li{ background: -webkit-gradient(linear, left top, left bottom, color-stop(0.00, #fff), color-stop(1.00, #969696)); background: -webkit-linear-gradient(#fff, #969696); height: 140px; margin: 0px; border-bottom: 1px solid #666; border-top: 1px solid #fff; } .list6 ul li a{ background: url(http://jsrun.it/assets/b/2/g/C/b2gCx.png) no-repeat 100% 50%; color: #666; display: block; height: 140px; margin: 0; padding: 0 20px 0 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; text-decoration: none; } .list6 ul li img{ float: left; height: 140px; width: 100px; margin-right: 10px; } .list6 ul li a strong{ color: #000; display: block; font-weight: bold; padding-top: 17px; } .list6 ul li a span{ color:#009; font-weight: bold; margin-right:5px; } /* 運営からのお知らせ */ .list7 ul{ margin: 10px; } .list7 ul li{ overflow: hidden; margin: 0; width: 100%; text-align: left; padding: 0; border-bottom: 0; background: -webkit-gradient(linear, left top, left bottom, color-stop(0.00, #fff), color-stop(1.00, #969696)); background: -webkit-linear-gradient(#fff, #969696); display:block; -webkit-box-shadow:0px 3px 3px rgba(000,000,000,0.1); box-shadow:0px 3px 3px rgba(000,000,000,0.1); border-bottom: 1px solid #666; border-top: 1px solid #fff; } .list7 ul li:first-child{ border-radius: 8px 8px 0 0; } .list7 ul li:last-child{ border-radius: 0 0 8px 8px; } .list7 ul li a{ color: #333; display: block; height: 44px; margin: 0; padding: 0 0 0 10px; overflow: hidden; white-space: nowrap; line-height: 44px; text-overflow: ellipsis; text-decoration: none; font-weight:bold; } .list7 ul li strong{ color: #333; display: block; height: 44px; margin: 0; padding: 0 0 0 10px; overflow: hidden; white-space: nowrap; line-height: 44px; text-overflow: ellipsis; text-decoration: none; font-weight:bold; text-align:center; } .list7 ul li a::after{ content: url(http://jsrun.it/assets/b/2/g/C/b2gCx.png); float: right; } /* 汎用レイアウト */ .list8 ul{ margin: 10px; } .list8 ul li{ overflow: hidden; margin: 0; width: 100%; text-align: left; border-bottom: 0; background: -webkit-gradient(linear, left top, left bottom, color-stop(0.00, #fff), color-stop(1.00, #969696)); background: -webkit-linear-gradient(#fff, #969696); display:block; -webkit-box-shadow:0px 3px 3px rgba(000,000,000,0.1); box-shadow:0px 3px 3px rgba(000,000,000,0.1); border-bottom: 1px solid #666; border-top: 1px solid #fff; } .list8 ul li:first-child{ border-radius: 8px 8px 0 0; } .list8 ul li div:first-child{ padding:10px; } .list8 ul li:last-child{ border-radius: 0 0 8px 8px; text-align: right; } .list8 ul li span:last-child{ margin-right:13px; } .list8 ul li a{ color: #333; display: block; height: 44px; padding: 0 0 0 10px; overflow: hidden; white-space: nowrap; line-height: 44px; text-overflow: ellipsis; text-decoration: none; font-weight:bold; } .list8 ul li strong{ color: #333; display: block; height: 44px; margin: 0; padding: 0 0 0 10px; overflow: hidden; white-space: nowrap; line-height: 44px; text-overflow: ellipsis; text-decoration: none; font-weight:bold; text-align:center; } .list8 ul li a::after{ content: url(http://jsrun.it/assets/b/2/g/C/b2gCx.png); float: right; } /* 注意事項 */ .attention div{ margin: 10px; border-radius: 8px 8px 8px 8px; border-bottom: 1px solid #666; border-top: 1px solid #fff; } .attention div span:first-child{ text-align: center; border-radius: 8px 8px 0px 0px; display:block; padding:10px; border-bottom: 1px solid #666; border-top: 1px solid #fff; background: -webkit-gradient(linear, left top, left bottom, color-stop(0.00, #fff), color-stop(1.00, #969696)); background: -webkit-linear-gradient(#fff, #969696); } .attention div span:last-child{ font-size:12px; border-radius: 0px 0px 8px 8px; display:block; padding:10px; border-bottom: 1px solid #666; border-top: 1px solid #fff; background: -webkit-gradient(linear, left top, left bottom, color-stop(0.00, #fff), color-stop(1.00, #969696)); background: -webkit-linear-gradient(#fff, #969696); } .attention div strong:before { font-family: 'fontello'; content: 'a'; color: #900; margin:0 3px; } .attention div strong:after { font-family: 'fontello'; content: 'a'; color: #900; margin:0 3px; } /* タブ+ソート */ .Pcate{ text-align: center; margin: 6px 0; } .Pcate ul li{ float:left; width: 25%; text-align: center; color:rgba(0,0,0,0)!important; margin: 10px 0; } .Pcate ul li span, .Pcate ul li a{ display: block; width: 74px; height: 39px; margin: 0 auto; border-radius: 10px; -webkit-border-radius:10px; color:#FFF !important; border:solid 1px #999; font:16px; line-height:39px; font-weight:bold; } .all_on{ background: -webkit-gradient(linear, left top, left bottom, color-stop(1.00, #333), color-stop(0.51, #000), color-stop(0.50, #333), color-stop(0.00, #000)); background: -webkit-linear-gradient(top, #000 0%, #333 50%, #000 51%, #333 100%); background: linear-gradient(to bottom, #000 0%, #333 50%, #000 51%, #333 100%); box-shadow: inset 0 0 30px gold; } .all_off{ background: -webkit-gradient(linear, left top, left bottom, color-stop(1.00, #808080), color-stop(0.51, #000), color-stop(0.50, #333), color-stop(0.00, #000)); background: -webkit-linear-gradient(top, #000 0%, #333 50%, #000 51%, #808080 100%); background: linear-gradient(to bottom, #000 0%, #333 50%, #000 51%, #808080 100%); } .a_on{ background: -webkit-gradient(linear, left top, left bottom, color-stop(1.00, #2476ff), color-stop(0.51, #001ca8), color-stop(0.50, #2476ff), color-stop(0.00, #001ca8)); background: -webkit-linear-gradient(top, #001ca8 0%, #2476ff 50%, #001ca8 51%, #2476ff 100%); background: linear-gradient(to bottom, #001ca8 0%, #2476ff 50%, #001ca8 51%, #2476ff 100%); box-shadow: inset 0 0 30px gold; } .a_off{ background: -webkit-gradient(linear, left top, left bottom, color-stop(1.00, #2476ff), color-stop(0.51, #001ca8), color-stop(0.50, #2476ff), color-stop(0.00, #001ca8)); background: -webkit-linear-gradient(top, #001ca8 0%, #2476ff 50%, #001ca8 51%, #2476ff 100%); background: linear-gradient(to bottom, #001ca8 0%, #2476ff 50%, #001ca8 51%, #2476ff 100%); } .b_on{ background: -webkit-gradient(linear, left top, left bottom, color-stop(1.00, #09c300), color-stop(0.51, #004c15), color-stop(0.50, #09c300), color-stop(0.00, #004c15)); background: -webkit-linear-gradient(top, #004c15 0%, #09c300 50%, #004c15 51%, #09c300 100%); background: linear-gradient(to bottom, #004c15 0%, #09c300 50%, #004c15 51%, #09c300 100%); box-shadow: inset 0 0 30px gold; } .b_off{ background: -webkit-gradient(linear, left top, left bottom, color-stop(1.00, #09c300), color-stop(0.51, #004c15), color-stop(0.50, #09c300), color-stop(0.00, #004c15)); background: -webkit-linear-gradient(top, #004c15 0%, #09c300 50%, #004c15 51%, #09c300 100%); background: linear-gradient(to bottom, #004c15 0%, #09c300 50%, #004c15 51%, #09c300 100%); } .c_on{ background: -webkit-gradient(linear, left top, left bottom, color-stop(1.00, #ff0002), color-stop(0.51, #5c0909), color-stop(0.50, #f02), color-stop(0.00, #5c0909)); background: -webkit-linear-gradient(top, #5c0909 0%, #f02 50%, #5c0909 51%, #ff0002 100%); background: linear-gradient(to bottom, #5c0909 0%, #f02 50%, #5c0909 51%, #ff0002 100%); box-shadow: inset 0 0 30px gold; } .c_off{ background: -webkit-gradient(linear, left top, left bottom, color-stop(1.00, #ff0002), color-stop(0.51, #5c0909), color-stop(0.50, #f02), color-stop(0.00, #5c0909)); background: -webkit-linear-gradient(top, #5c0909 0%, #f02 50%, #5c0909 51%, #ff0002 100%); background: linear-gradient(to bottom, #5c0909 0%, #f02 50%, #5c0909 51%, #ff0002 100%); } select { font-size: 16px; } input.btn03{ display: inline-block; height:39px; padding: 2px 6px; border:solid 1px #000000; -webkit-border-radius: 4px; border-radius: 4px; text-align:center; text-decoration: none; line-height: 22px; font-size:16px; } input.btn03{ background:-webkit-gradient(linear, left top, left bottom, from(#d0d0d0), to(#a0a0a0)); -webkit-box-shadow: inset 0 1px 1px #fff; box-shadow: inset 0 1px 1px #fff; color:#fff; -webkit-text-shadow:1px 1px 1px #000, 1px -1px 1px #000, -1px 1px 1px #000, -1px -1px 1px #000; text-shadow:1px 1px 1px #000, 1px -1px 1px #000, -1px 1px 1px #000, -1px -1px 1px #000; } /* アコーディオン */ .list6 dl.acordion{ margin: 0 10px 0 10px; } .list6 dt.trigger { background: -webkit-gradient(linear, left top, left bottom, color-stop(0.00, #fff), color-stop(1.00, #969696)); background: -webkit-linear-gradient(#fff, #969696); border-radius: 10px; text-align: left; color: #000; margin-bottom: 0; padding: 10px; } .list6 dt.active{ border-radius: 10px 10px 0 0; } .list6 dt.trigger span.open-close { background: url(http://jsrun.it/assets/q/C/d/k/qCdkP.png) no-repeat right top; float: right; width: 20px; height: 20px; text-indent: -9999em; } .list6 dt.active span.open-close { background: url(http://jsrun.it/assets/7/q/U/Z/7qUZR.png) no-repeat right top; float: right; width: 20px; height: 20px; } .list6 dd.acordion_tree{ padding: 10px; background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fff), to(#f0f0f0)); background: #9bd8ff linear-gradient(#fff, #f0f0f0); border: 1px solid #ccc; border-top: none; } /* 他ページ遷移 */ .backto ul{ margin: 10px; } .backto ul li{ overflow: hidden; margin: 0px; width: 100%; text-align: right; padding: 0px; background: -webkit-gradient(linear, left top, left bottom, color-stop(0.00, #fff), color-stop(1.00, #969696)); background: -webkit-linear-gradient(#fff, #969696); display:block; -webkit-box-shadow:0px 3px 3px rgba(000,000,000,0.1); box-shadow:0px 3px 3px rgba(000,000,000,0.1); border-bottom: 1px solid #666; border-top: 1px solid #fff; } .backto ul li:first-child{ border-radius: 8px 8px 0 0; } .backto ul li:last-child{ border-radius: 0 0 8px 8px; } .backto ul li a{ color: #333; display: block; height: 44px; margin: 0; padding: 0 0 0 10px; overflow: hidden; white-space: nowrap; line-height: 44px; text-overflow: ellipsis; text-decoration: none; font-weight:bold; } .backto ul li a::after{ content: url(http://jsrun.it/assets/b/2/g/C/b2gCx.png); float: right; } .backto ul li a span{ margin-right:10px; } /* tab */ ul.style01 {text-align:center; border-bottom:7px solid #969696; color:#fff; font-weight:bold;} ul.style01 li { display:inline-block; width:30%; height:38px margin:0 1%; line-height:38px; border:1px solid #888; border-radius:10px 10px 0 0; background: -webkit-gradient(linear, left top, left bottom, color-stop(0.00, #fff), color-stop(1.00, #969696)); background: -webkit-linear-gradient(#fff, #969696); } ul.style01 li.active {border:1px solid #333; border-radius:10px 10px 0 0; background: -webkit-gradient(linear, left top, left bottom, color-stop(0.00, #969696), color-stop(1.00, #fff)); background: -webkit-linear-gradient(#969696, #fff); box-shadow: inset 0 0 30px #000; } ul.style02 {text-align:center; color:#FFF; font-weight:bold;} ul.style02 li {display:inline-block; width:47%; height:38px margin:0 1%; line-height:38px; border:1px solid #888; border-radius:10px; background: -webkit-gradient(linear, left top, left bottom, color-stop(0.00, #fff), color-stop(1.00, #969696)); background: -webkit-linear-gradient(#fff, #969696); } ul.style02 li.active {border:1px solid #333; background: -webkit-gradient(linear, left top, left bottom, color-stop(0.00, #969696), color-stop(1.00, #fff)); background: -webkit-linear-gradient(#969696, #fff); box-shadow: inset 0 0 30px #000; } .panel {display:none;} .show {display:block;} section.panel {padding:10px;} div.panel {padding:10px; color:#FFF;} /* ナビ */ .Lnavi, .Rnavi{ display: table; padding: 6px; line-height: 1.4; } .Lnavi img, .Rnavi img{ display: table-cell; vertical-align: middle; } .Lnavi img { margin-right: 6px; } .Rnavi img { margin-left: 6px; } .Lnavi p, .Rnavi p { display: table-cell; width: 100%; vertical-align: middle; line-height: 1.4; color:#FFF; } /* 前へ次へ */ .beforenext{ text-align: center; margin: 6px 0; color:#FFF; } .beforenext .btn03{ background:-webkit-gradient(linear, left top, left bottom, from(#d0d0d0), to(#a0a0a0)); -webkit-box-shadow: inset 0 1px 1px #fff; box-shadow: inset 0 1px 1px #fff; color:#fff; -webkit-text-shadow:1px 1px 1px #000, 1px -1px 1px #000, -1px 1px 1px #000, -1px -1px 1px #000; text-shadow:1px 1px 1px #000, 1px -1px 1px #000, -1px 1px 1px #000, -1px -1px 1px #000; display: inline-block; height:39px; border:solid 1px #000000; -webkit-border-radius: 4px; border-radius: 4px; text-align:center; text-decoration: none; font-size:16px; line-height:39px; width:20%; } /* ページャー */ .pager { margin: 10px auto; text-align: center; color:#FFF; } .pager ul li{ display: inline-block; width: 24px; height: 24px; line-height: 24px; border: 1px solid #fff; border-radius: 4px; -webkit-border-radius:4px; text-align: center; font-size:12px; margin:0 2px; } .pager ul li a{ display: block; border-radius: 4px; -webkit-border-radius:4px; background:#000; text-decoration:none; color:#F60; } .pager ul li span{ background:transparent!important; } .pager ul li:first-child{ background:-webkit-gradient(linear, left top, left bottom, from(#d0d0d0), to(#a0a0a0)); -webkit-box-shadow: inset 0 1px 1px #fff; box-shadow: inset 0 1px 1px #fff; color:#fff !important; -webkit-text-shadow:1px 1px 1px #000, 1px -1px 1px #000, -1px 1px 1px #000, -1px -1px 1px #000; text-shadow:1px 1px 1px #000, 1px -1px 1px #000, -1px 1px 1px #000, -1px -1px 1px #000; display: inline-block; height:39px; border:solid 1px #000000; -webkit-border-radius: 4px; border-radius: 4px; text-align:center; text-decoration: none; font-size:16px; line-height:39px; width:20%; } .pager ul li:first-child a{ height: 26px; background: transparent; color:#FFF; } .pager ul li:last-child{ width: 56px; border: none; } .pager ul li:last-child{ background:-webkit-gradient(linear, left top, left bottom, from(#d0d0d0), to(#a0a0a0)); -webkit-box-shadow: inset 0 1px 1px #fff; box-shadow: inset 0 1px 1px #fff; color:#fff; -webkit-text-shadow:1px 1px 1px #000, 1px -1px 1px #000, -1px 1px 1px #000, -1px -1px 1px #000; text-shadow:1px 1px 1px #000, 1px -1px 1px #000, -1px 1px 1px #000, -1px -1px 1px #000; display: inline-block; height:39px; border:solid 1px #000000; -webkit-border-radius: 4px; border-radius: 4px; text-align:center; text-decoration: none; font-size:16px; line-height:39px; width:20%; } .pager ul li:last-child a{ height: 26px; background: transparent; color:#FFF; } /* 注記 */ .note{ background: rgba(255,255,255,0.4); font-size: 12px; padding: 10px; margin:0 10px; -webkit-border-radius:10px; } /* ボタン */ a.btn1{ text-align: center; display: block; padding: 10px; margin: 10px auto; color: #fff; text-decoration: none; text-shadow: 1px 1px 1px rgba(0,0,0,0.4); border-radius: 5px; border: 1px solid #333; font-weight: bold; background: -webkit-gradient(linear, left top, left bottom, color-stop(1.00, #333), color-stop(0.51, #000), color-stop(0.50, #333), color-stop(0.00, #000)); background: -webkit-linear-gradient(top, #000 0%, #333 50%, #000 51%, #333 100%); background: linear-gradient(to bottom, #000 0%, #333 50%, #000 51%, #333 100%); } a.btn2{ text-align: center; display: block; padding: 10px; margin: 10px auto; color: #fff; text-decoration: none; text-shadow: 0 -1px 1px #666; border-radius: 5px; font-weight: bold; border: 1px solid #333; background: -webkit-gradient(linear, left top, left bottom, color-stop(1.00, #2476ff), color-stop(0.51, #001ca8), color-stop(0.50, #2476ff), color-stop(0.00, #001ca8)); background: -webkit-linear-gradient(top, #001ca8 0%, #2476ff 50%, #001ca8 51%, #2476ff 100%); background: linear-gradient(to bottom, #001ca8 0%, #2476ff 50%, #001ca8 51%, #2476ff 100%); -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.6); box-shadow: 0 1px 3px rgba(0,0,0,0.6); border-bottom: 1px solid rgba(0,0,0,0.25); } a.btn3{ text-align: center; display: block; padding: 10px; margin: 10px auto; color: #fff; text-decoration: none; text-shadow: 1px 1px 1px rgba(0,0,0,0.25); border-radius: 5px; border-top: 1px solid #333; border-right: 1px solid #333; border-bottom: 1px solid #333; border-left: 1px solid #333; font-weight: bold; background: -webkit-gradient(linear, left top, left bottom, color-stop(1.00, #09c300), color-stop(0.51, #004c15), color-stop(0.50, #09c300), color-stop(0.00, #004c15)); background: -webkit-linear-gradient(top, #004c15 0%, #09c300 50%, #004c15 51%, #09c300 100%); background: linear-gradient(to bottom, #004c15 0%, #09c300 50%, #004c15 51%, #09c300 100%); } a.btn4{ text-align: center; display: block; padding: 10px; margin: 10px auto; color: #fff; text-decoration: none; text-shadow: 1px 1px 1px rgba(0,0,0,0.25); border-radius: 5px; border-top: 1px solid #333; border-right: 1px solid #333; border-bottom: 1px solid #333; border-left: 1px solid #333; font-weight: bold; background: -webkit-gradient(linear, left top, left bottom, color-stop(1.00, #ff0002), color-stop(0.51, #5c0909), color-stop(0.50, #f02), color-stop(0.00, #5c0909)); background: -webkit-linear-gradient(top, #5c0909 0%, #f02 50%, #5c0909 51%, #ff0002 100%); background: linear-gradient(to bottom, #5c0909 0%, #f02 50%, #5c0909 51%, #ff0002 100%); } a.btn5{ text-align: center; display: block; padding: 10px; margin: 10px auto; color: #fff; text-decoration: none; text-shadow: 1px -1px 1px rgba(0,0,0,0.25); border-radius: 5px; border:1px solid #000; font-weight: bold; background: -webkit-gradient(linear, left top, left bottom, from(#4f4f4f), color-stop(0.48, #323232), color-stop(0.5, #000), to(#121212)); background: linear-gradient(#4f4f4f, #323232 48% , #000 50%, #121212); } /* PageTop */ .pagetop{ text-align: right; } .pagetop a{ color:#F60; } ver1.0 スマートフォンのサイトやアプリ、ソーシャルゲームでよく使われるパーツを集めました。 cssを編集することでデザインを変更 セクション単位でマージンを10pxとっています。 セクションタグをdivに変えることで、マージンを無くすことができます。 ※webkitのみ対応 /*スワイプ*/ $(function() { (function() { // stop callback var $pointer = $(".pointer span"); var f5 = Flipsnap("#flipsnap5"); f5.element.addEventListener('flipsnap.moveend', function() { $pointer.filter(".current").removeClass("current"); $pointer.eq( f5.currentPoint ).addClass("current"); }, false); })(); }); /*アコーディオン*/ $(document).ready(function(){ $(".acordion_tree").css("display","none"); $(".trigger").click(function(){ if($("+.acordion_tree",this).css("display")=="none"){ $(this).addClass("active"); $("+.acordion_tree",this).slideDown("normal"); }else{ $(this).removeClass("active"); $("+.acordion_tree",this).slideUp("normal"); } }); }); /*タブ*/ $(function(){ $(".tab li").click(function(){ var index = $(this).parent("ul").children("li").index(this); $(this).siblings("li").removeClass("active"); $(this).addClass("active"); $(this).parent("ul").nextAll(".panel").hide(); $(this).parent("ul").nextAll(".panel").eq(index).show(); }); }) /*ページスクロール*/ $(function(){ $('a[href^=#]').click(function(){ var speed = 500; var href= $(this).attr("href"); var target = $(href == "#" || href == "" ? 'html' : href); var position = target.offset().top; var body = 'body'; if (navigator.userAgent.match(/MSIE/)){ body = 'html'; } $(body).animate({scrollTop:position}, speed, 'swing'); return false; }); }); /*pretty*/ prettyPrint(); <div id="container"> <h3>見出し-h1- 装飾付き</h3> <!--h1--> <section> <div class="hr1"></div> <div class="h1">テキスト</div> <div class="hr1"></div> </section> <!--/h1--> <section> <pre class="prettyprint"> <code> <!--h1ー--> <section> <div class="hr1"></div> <div class="h1">テキスト</div> <div class="hr1"></div> </section> <!--/h1--> </code> </pre> </section> <h3>見出し-h2- 背景画像入り</h3> <!--h2--> <section> <div class="hr1"></div> <div class="h2">テキスト</div> <div class="hr1"></div> </section> <!--/h2--> <section> <pre class="prettyprint"> <code> <!--h2--> <section> <div class="hr1"></div> <div class="h2">テキスト</div> <div class="hr1"></div> </section> <!--/h2--> </code> </pre> </section> <h3>見出し-h3- シンプル</h3> <!--h3--> <section> <div class="hr1"></div> <div class="h3">テキスト</div> <div class="hr1"></div> </section> <!--/h3--> <section> <pre class="prettyprint"> <code> <!--h3--> <section> <div class="hr1"></div> <div class="h3">テキスト</div> <div class="hr1"></div> </section> <!--/h3--> </code> </pre> </section> <h3>hr</h3> <!--hr--> <section> <div class="hr1"></div> </section> <!--/hr--> <section> <pre class="prettyprint"> <code> <!--hr--> <div class="hr1"></div> <!--/hr--> </code> </pre> </section> <h3>ヘッダー</h3> <!--ヘッダー--> <section class="common_menu2"> <ul> <a href="#"><li></li></a> <a href="#"><li></li></a> <a href="#"><li></li></a> </ul> </section> <!--ヘッダー--> <section> <pre class="prettyprint"> <code> <!--ヘッダー--> <div class="common_menu2"> <ul> <a href="#"><li></li></a> <a href="#"><li></li></a> <a href="#"><li></li></a> </ul> </div> <!--/ヘッダー--> </code> </pre> </section> <h3>フッター</h3> <!--フッター--> <section class="common_menu"> <ul> <a href="#"><li></li></a> <a href="#"><li></li></a> <a href="#"><li></li></a> <a href="#"><li></li></a> <a href="#"><li></li></a> </ul> </section> <!--/フッター--> <section> <pre class="prettyprint"> <code> <!--フッター--> <div class="common_menu"> <ul> <a href="#"><li></li></a> <a href="#"><li></li></a> <a href="#"><li></li></a> <a href="#"><li></li></a> <a href="#"><li></li></a> </ul> </div> <!--/フッター--> </code> </pre> </section> <h3>ヘッダー右メニュー</h3> <!--ヘッダー右メニュー--> <section> <header class="header1"> <h1><a href="#"></a></h1> <nav> <ul> <li><a href="#">TOP</a></li> <li><a href="#">マイペ</a></li> </ul> </nav> </header> </section> <!--/ヘッダー右メニュー--> <section> <pre class="prettyprint"> <code> <!--ヘッダー右メニュー--> <section> <header class="header1"> <h1> <a href="#"></a> </h1> <nav> <ul> <li> <a href="#">TOP</a> </li> <li> <a href="#">マイペ</a> </li> </ul> </nav> </header> </section> <!--/ヘッダー右メニュー2--> </code> </pre> </section> <h3>ヘッダー右メニュー2</h3> <!--ヘッダー右メニュー2--> <section> <header class="header2"> <h1><a href="#"></a></h1> <nav> <ul> <li><a href="#"></a></li> <li><a href="#"></a></li> </ul> </nav> </header> </section> <!--/ヘッダー右メニュー2--> <section> <pre class="prettyprint"> <code> <!--ヘッダー右メニュー2--> <section> <header class="header2"> <h1><a href="#"></a></h1> <nav> <ul> <li><a href="#"></a></li> <li><a href="#"></a></li> </ul> </nav> </header> </section> <!--/ヘッダー右メニュー2--> </code> </pre> </section> <h3>スワイプ（flipsnap.js）</h3> <!--スワイプでスライドするメニュー--> <section class="slide"> <div class="flipsnap" id="flipsnap5"> <div class="item"><a href="#"><span class="pic1">①</span></a></div> <div class="item"><a href="#"><span class="pic2">②</span></a></div> <div class="item"><a href="#"><span class="pic3">③</span></a></div> </div> <div class="pointer"> <span class="current"></span> <span></span> <span></span> </div> </section> <!--/スワイプでスライドするメニュー--> <section> <pre class="prettyprint"> <code> <!--スワイプ--> <section class="slide"> <div class="flipsnap" id="flipsnap5"> <div class="item"><a href="#"> <span class="pic1"> ①</span></a></div> <div class="item"><a href="#"> <span class="pic2"> ②</span></a></div> <div class="item"><a href="#"> <span class="pic3"> ③</span></a></div> </div> <div class="pointer"> <span class="current"></span> <span></span> <span></span> </div> </section> <!--/スワイプ--> </code> </pre> </section> <h3>矢印つきリスト</h3> <!--矢印つきリスト--> <section class="list1"> <ul> <li><a href="#">MENU１</a></li> <li><a href="#">MENU２</a></li> </ul> </section> <!--/矢印つきリスト--> <section> <pre class="prettyprint"> <code> <!--矢印つきリスト--> <section class="list1"> <ul> <li><a href="#">MENU１</a></li> <li><a href="#">MENU２</a></li> </ul> </section> <!--/矢印つきリスト--> </code> </pre> </section> <h3>矢印つきリスト-more</h3> <!--矢印つきリスト--> <section> <div class="list_more"> <a href="#">more</a> </div> </section> <!--/矢印つきリスト--> <section> <pre class="prettyprint"> <code> <!--矢印つきリスト-more---> <div class="list_more"> <a href="#">more</a> </div> <!--/矢印つきリスト-more---> </code> </pre> </section> <h3>矢印つきリスト２</h3> <!--矢印つきリスト2--> <section class="list2"> <ul> <li><a href="#">MENU１</a></li> <li><a href="#">MENU２</a></li> <li><a href="#">MENU３</a></li> </ul> </section> <!--/矢印つきリスト2--> <section> <pre class="prettyprint"> <code> <!--矢印つきリスト2--> <section class="list2"> <ul> <li><a href="#">MENU１</a></li> <li><a href="#">MENU２</a></li> <li><a href="#">MENU３</a></li> </ul> </section> <!--/矢印つきリスト2--> </code> </pre> </section> <h3>サムネイルつき矢印リスト</h3> <!--サムネイルつき矢印リスト--> <section class="list3"> <ul> <li><a href="#"><img name="" src="" width="70" height="70" alt="" style="background-color: #990000"><strong>MENU１</strong>texttexttext</a></li> <li><a href="#"><img name="" src="" width="70" height="70" alt="" style="background-color: #990000"><strong>MENU２</strong>texttexttext</a></li> </ul> </section> <!--/サムネイルつき矢印リスト--> <section> <pre class="prettyprint"> <code> <!--サムネイルつき矢印リスト--> <section class="list3"> <ul> <li><a href="#"> <img src="images/item_140.jpg"> <strong>MENU１</strong> texttext</a> </li> <li><a href="#"> <img src="images/item2_140.jpg"> <strong>MENU２</strong> texttext</a> </li> </ul> </section> <!--/サムネイルつき矢印リスト--> </code> </pre> </section> <h3>サムネイルつき矢印リスト２</h3> <!--サムネイルつき矢印リスト2--> <section class="list4"> <ul> <li><a href="#"><img name="" src="" width="45" height="45" alt="" style="background-color: #990000"><strong>MENU1</strong>texttexttext</a></li> <li><a href="#"><img name="" src="" width="45" height="45" alt="" style="background-color: #990000"><strong>MENU2</strong>texttexttext</a></li> <li><a href="#"><img name="" src="" width="45" height="45" alt="" style="background-color: #990000"><strong>MENU3</strong>texttexttext</a></li> </ul> </section> <!--/サムネイルつき矢印リスト2--> <section> <pre class="prettyprint"> <code> <!--サムネイルつき矢印リスト2--> <section class="list4"> <ul> <li><a href="#"> <img src="images/item_90.jpg"> <strong>MENU1</strong> texttexttext</a> </li> <li><a href="#"> <img src="images/item2_90.jpg"> <strong>MENU2</strong> texttexttext</a></li> <li><a href="#"> <img src="images/item3_90.jpg"> <strong>MENU3</strong> texttexttext</a></li> </ul> </section> <!--/サムネイルつき矢印リスト2--> </code> </pre> </section> <h3>サムネイルつき矢印リスト２列</h3> <!--サムネイルつきリスト2列--> <section class="list5"> <ul> <li><a href="#"><img name="" src="" width="45" height="45" alt="" style="background-color: #990000"><strong>MENU1</strong>texttexttext</a></li> <li><a href="#"><img name="" src="" width="45" height="45" alt="" style="background-color: #990000"><strong>MENU2</strong>texttexttext</a></li> <li><a href="#"><img name="" src="" width="45" height="45" alt="" style="background-color: #990000"><strong>MENU3</strong>texttexttext</a></li> <li><a href="#"><img name="" src="" width="45" height="45" alt="" style="background-color: #990000"><strong>MENU4</strong>texttexttext</a></li> <li><a href="#"><img name="" src="" width="45" height="45" alt="" style="background-color: #990000"><strong>MENU5</strong>texttexttext</a></li> <li><a href="#"><img name="" src="" width="45" height="45" alt="" style="background-color: #990000"><strong>MENU6</strong>texttexttext</a></li> </ul> </section> <!--/サムネイルつきリスト2列--> <section> <pre class="prettyprint"> <code> <!--サムネイルつきリスト2列--> <section class="list5"> <ul> <li> <a href="#"> <img src="images/item_90.jpg"> <strong>MENU1</strong> texttexttext</a></li> <li> <a href="#"> <img src="images/item2_90.jpg"> <strong>MENU2</strong> texttexttext</a></li> <li> <a href="#"> <img src="images/item3_90.jpg"> <strong>MENU3</strong> texttexttext</a></li> <li> <a href="#"> <img src="images/item_90.jpg"> <strong>MENU4</strong> texttexttext</a></li> <li> <a href="#"> <img src="images/item2_90.jpg"> <strong>MENU5</strong> texttexttext</a></li> <li> <a href="#"> <img src="images/item3_90.jpg"> <strong>MENU6</strong> texttexttext</a></li> </ul> </section> <!--/サムネイルつきリスト2列--> </code> </pre> </section> <h3>サムネイルつきカードリスト</h3> <!--サムネイルつきカードリスト--> <section class="list6"> <ul> <li> <a href="#"><img name="" src="" width="100" height="140" alt="" style="background-color: #990000"><strong>キャラ名</strong> <span>Lv.</span>0000<br/> <span>攻:</span>0000<span class="mrl10">防:</span>0000<br/> <span>コスト:</span>0000<br/> <span>スキル:</span>メリケンパンチ<br/> 攻撃力+100 </a> </li> <li> <a href="#"><img name="" src="" width="100" height="140" alt="" style="background-color: #990000"><strong>キャラ名</strong> <span>Lv.</span>0000<br/> <span>攻:</span>0000<span class="mrl10">防:</span>0000<br/> <span>コスト:</span>0000<br/> <span>スキル:</span>メリケンパンチ<br/> 攻撃力+100 </a> </li> </ul> </section> <!--/サムネイルつきカードリスト--> <section> <pre class="prettyprint"> <code> <!--サムネイルつきカードリスト--> <section class="list6"> <ul> <li> <a href="#"> <img src="images/m_card.jpg"> <strong>キャラ名</strong> <span>Lv.</span>0000<br/> <span>攻:</span>0000 <span class="mrl10">防:</span>0000 <br/> <span>コスト:</span>0000<br/> <span>スキル:</span>メリケンパンチ <br/> 攻撃力+100 </a> </li> <li> <a href="#"> <img src="images/m_card.jpg"> <strong>キャラ名</strong> <span>Lv.</span>0000<br/> <span>攻:</span>0000 <span class="mrl10">防:</span>0000 <br/> <span>コスト:</span>0000<br/> <span>スキル:</span>メリケンパンチ <br/> 攻撃力+100 </a> </li> </ul> </section> <!--/サムネイルつきカードリスト--> </code> </pre> </section> <h3>見出しつきリスト</h3> <!--見出しつきリスト--> <section class="list7"> <ul> <li><strong>お知らせ</strong></li> <li><a href="#">メニュー２</a></li> <li><a href="#">メニュー３</a></li> </ul> </section> <!--/見出しつきリスト--> <section> <pre class="prettyprint"> <code> <!--見出しつきリスト--> <section class="list7"> <ul> <li><strong>お知らせ</strong></li> <li><a href="#">メニュー２</a></li> <li><a href="#">メニュー３</a></li> </ul> </section> <!--/見出しつきリスト--> </code> </pre> </section> <h3>汎用レイアウト</h3> <!--汎用レイアウト--> <section class="list8"> <ul> <li><strong>タイトル</strong></li> <li> <div> コンテンツ<br>コンテンツ<br>コンテンツ </div> </li> <li><a href="#"><span>遷移</span></a></li> </ul> </section> <!--/汎用レイアウト--> <section> <pre class="prettyprint"> <code> <!--汎用レイアウト--> <section class="list8"> <ul> <li><strong>タイトル</strong></li> <li> <div> コンテンツ<br> コンテンツ<br> コンテンツ </div> </li> <li><a href="#"><span>遷移</span> </a></li> </ul> </section> <!--/汎用レイアウト--> </code> </pre> </section> <h3>ページ遷移</h3> <!--ページ遷移--> <section class="backto"> <ul> <li><a href="#"><span>ガチャとは？</span></a></li> <li><a href="#"><span>進化合成とは？</span></a></li> </ul> </section> <!--/ページ遷移--> <section> <pre class="prettyprint"> <code> <!--ページ遷移--> <section class="backto"> <ul> <li><a href="#"> <span>ガチャとは？</span></a> </li> <li><a href="#"> <span>進化合成とは？</span></a> </li> </ul> </section> <!--ページ遷移--> </code> </pre> </section> <h3>注意事項</h3> <!--注意事項--> <section class="attention"> <div> <span><strong>ATTENTION</strong></span> <span>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト </span> </div> </section> <!--/注意事項--> <section> <pre class="prettyprint"> <code> <!--注意事項--> <section class="attention"> <div> <span> <strong>注意事項</strong> </span> <span> テキストテキストテキストテキスト テキストテキストテキストテキスト テキストテキストテキストテキスト テキストテキストテキストテキスト </span> </div> </section> <!--/注意事項--> </code> </pre> </section> <h3>タブ+ソート</h3> <!--ソート--> <section class="Pcate"> <ul> <li><span class="all_on">ALL</span></li> <li><a href="#" class="a_off">A</a></li> <li><a href="#" class="b_off">B</a></li> <li><a href="#" class="c_off">C</a></li> </ul> <form action="##" method="POST" class="tx_center"> <input type="hidden" name="category" value="{{ category }}" /> ・・・ <select name="column"> <option value="iddsc">手に入った順</option> ・・・ </select> <input type="submit" name="btn" id="btn" value="並べ替え" class="btn03" /> </form> </section> <!--ソート--> <section> <pre class="prettyprint"> <code> <!--ソート--> <section class="Pcate"> <ul> <li><span class="all_on"> ALL</span></li> <li><a href="#" class=" a_off">A</a></li> <li><a href="#" class=" b_off">B</a></li> <li><a href="#" class=" c_off">C</a></li> </ul> <form action="##" method="POST" class="tx_center"> <input type="hidden" name="category" value="{{ category }}" /> ・・・ <select name="column"> <option value="iddsc"> 手に入った順</option> ・・・ </select> <input type="submit" name="btn" id="btn" value="並べ替え" class="btn03" /> </form> </section> <!--ソート--> </code> </pre> </section> <h3>タブ（２段）</h3> <!--tab--> <section> <ul class="tab style01"> <li class="active">今日</li> <li>今週</li> <li>総合</li> </ul> <section class="panel show"> <ul class="tab style02"> <li class="active">個人</li> <li>ギルド</li> </ul> <div class="panel show"> 今日個人 </div> <div class="panel"> 今日ギルド </div> </section> <section class="panel"> <ul class="tab style02"> <li class="active">個人</li> <li>ギルド</li> </ul> <div class="panel show"> 今週個人 </div> <div class="panel"> 今週ギルド </div> </section> <section class="panel"> <ul class="tab style02"> <li class="active">個人</li> <li>ギルド</li> </ul> <div class="panel show"> 総合個人 </div> <div class="panel"> 総合ギルド </div> </section> </section> <!--/tab--> <section> <pre class="prettyprint"> <code> <!--tab--> <section> <ul class="tab style01"> <li class="active">今日</li> <li>今週</li> <li>総合</li> </ul> <section class="panel show"> <ul class="tab style02"> <li class="active">個人</li> <li>ギルド</li> </ul> <div class="panel show"> 今日個人 </div> <div class="panel"> 今日ギルド </div> </section> <section class="panel"> <ul class="tab style02"> <li class="active">個人</li> <li>ギルド</li> </ul> <div class="panel show"> 今週個人 </div> <div class="panel"> 今週ギルド </div> </section> <section class="panel"> <ul class="tab style02"> <li class="active">個人</li> <li>ギルド</li> </ul> <div class="panel show"> 総合個人 </div> <div class="panel"> 総合ギルド </div> </section> </section> <!--/tab--> </code> </pre> </section> <h3>navi</h3> <!--navi--> <section class="Lnavi"> <img src="" height="80px" width="70px" style="background-color: #990000"/> <p>テキストテキストテキストテキストテキストテキストテキストテキストテキスト</p> </section> <section class="Rnavi"> <p>テキストテキストテキストテキストテキストテキストテキストテキストテキスト</p> <img src="" height="80px" width="70px" style="background-color: #990000"/> </section> <!--/navi--> <section> <pre class="prettyprint"> <code> <!--navi--> <section class="Lnavi"> <img src="#" height="80px" /> <p>テキストテキストテキストテキストテキスト テキストテキストテキストテキスト</p> </section> <section class="Rnavi"> <p>テキストテキストテキストテキストテキスト テキストテキストテキストテキスト</p> <img src="#" height="80px" /> </section> <!--/navi--> </code> </pre> </section> <h3>アコーディオン（acordion.js）</h3> <!--アコーディオン--> <section class="list6"> <dl class="acordion"> <dt class="trigger">TAP <span class="open-close">open</span></dt> <dd class="acordion_tree"> <p>テキストテキストテキストテキスト テキストテキストテキストテキスト</p> </dd> </dl> </section> <!--/アコーディオン--> <section> <pre class="prettyprint"> <code> <!--アコーディオン--> <section class="list6"> <dl class="acordion"> <dt class="trigger">タップ <span class="open-close">open</span></dt> <dd class="acordion_tree"> <p>テキストテキストテキストテキスト テキストテキストテキストテキスト</p> </dd> </dl> </section> <!--/アコーディオン--> </code> </pre> </section> <h3>前へ次へ</h3> <!--前へ次へ--> <section class="beforenext"> <a href="#" class="btn03">前へ</a> <span>[999/999]</span> <a href="#" class="btn03">次へ</a> </section> <!--前へ次へ--> <section> <pre class="prettyprint"> <code> <!--前へ次へ--> <section class="beforenext"> <a href="#" class="btn03"><<前へ</a> <span>[999/999]</span> <a href="#" class="btn03">次へ>></a> </section> <!--/前へ次へ--> </code> </pre> </section> <h3>ページャー</h3> <!--ページャー--> <section class="pager"> <ul> <li><a href="#" class="btn03">前へ</a></li> <li><span>1</span></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> <li><a href="#">5</a></li> <li><a href="#" class="btn03">次へ</a></li> </ul> </section> <!--ページャー--> <section> <pre class="prettyprint"> <code> <!--ページャー--> <section class="pager"> <ul> <li><a href="#" class="btn03"> <<前へ</a></li> <li><span>1</span></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> <li><a href="#">5</a></li> <li><a href="#" class="btn03"> 次へ>></a></li> </ul> </section> <!--/ページャー--> </code> </pre> </section> <h3>注記</h3> <!--注記--> <section> <div class="note"> <p>※テキストテキストテキストテキストテキストテキストテキストテキスト<br /> ※テキストテキストテキストテキストテキストテキストテキストテキスト</p> </div> </section> <!--/注記--> <section> <pre class="prettyprint"> <code> <!--注記--> <section class="note"> <p>※テキストテキストテキスト <br />※テキストテキストテキスト</p> </section> <!--/注記--> </code> </pre> </section> <h3>CSS3ボタンいろいろ</h3> <!--ボタンいろいろ--> <section class="button"> <a href="#" class="btn1 width30">ボタン１</a> <a href="#" class="btn1 width50">ボタン１</a> <a href="#" class="btn1 width80">ボタン１</a> <a href="#" class="btn2 width30">ボタン２</a> <a href="#" class="btn2 width50">ボタン２</a> <a href="#" class="btn2 width80">ボタン２</a> <a href="#" class="btn3 width30">ボタン３</a> <a href="#" class="btn3 width50">ボタン３</a> <a href="#" class="btn3 width80">ボタン３</a> <a href="#" class="btn4 width30">ボタン４</a> <a href="#" class="btn4 width50">ボタン４</a> <a href="#" class="btn4 width80">ボタン４</a> </section> <!--/ボタンいろいろ--> <section> <pre class="prettyprint"> <code> <!--ボタンいろいろ--> <section class="button"> <a href="#" class="btn1 width30"> ボタン１</a> <a href="#" class="btn1 width50"> ボタン１</a> <a href="#" class="btn1 width80"> ボタン１</a> <a href="#" class="btn2 width30"> ボタン２</a> <a href="#" class="btn2 width50"> ボタン２</a> <a href="#" class="btn2 width80"> ボタン２</a> <a href="#" class="btn3 width30"> ボタン３</a> <a href="#" class="btn3 width50"> ボタン３</a> <a href="#" class="btn3 width80"> ボタン３</a> <a href="#" class="btn4 width30"> ボタン４</a> <a href="#" class="btn4 width50"> ボタン４</a> <a href="#" class="btn4 width80"> ボタン４</a> </section> <!--/ボタンいろいろ--> </code> </pre> </section> <h3>PageTop</h3> <!--ページトップ--> <section class="pagetop" id="pt"> <a href="#">PageTop▲</a> </section> <!--/ページトップ--> <section> <pre class="prettyprint"> <code> <!--ページトップ--> <section class="pagetop" id="pt"> <a href="#">PageTop▲</a> </section> <!--/ページトップ--> </code> </pre> </section> </div> <footer>kingpanda</footer> @charset "UTF-8"; /* reset */ html{color:#000;background:#000;} body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0;} table{border-collapse:collapse;border-spacing:0;} fieldset,img{border:0;} address,caption,cite,code,dfn,em,th,var{font-style:normal;font-weight:normal;} li{list-style:none;}caption,th{text-align:left;} h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;} q:before,q:after{content:'';} abbr,acronym{border:0;font-variant:normal;} sup{vertical-align:text-top;} sub{vertical-align:text-bottom;} input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;} input,textarea,select{*font-size:100%;}legend{color:#000;} /* base */ body {font:14px/1.231 "ヒラギノ角ゴ Pro W3";background-size: 100%; -webkit-text-size-adjust: none;background:#000; } a{ text-decoration:none;} section{margin-bottom:10px; clear:both;} h3{font-size:14px; font-weight:bold; color:#fff; margin-top:10px; margin-bottom:10px; background:-webkit-gradient(linear, left top, left bottom,from(rgba(95,95,95,0.5)),to(#999)); padding:5px;} pre{background:#fff; color:#FFF; padding:10px; border:inset 2px #444444;} #container{ width: 320px; margin:0 auto; } footer{ color:#FFF; font-weight:bold; text-align:center; font-size:16px; padding-top:10px; } @font-face { font-family: 'fontello'; src: url("http://jsrun.it/assets/b/b/Z/u/bbZuB"); src: url("http://jsrun.it/assets/b/b/Z/u/bbZuB") format('embedded-opentype'), url("http://jsrun.it/assets/y/W/B/K/yWBK3") format('woff'), url("http://jsrun.it/assets/k/1/u/s/k1usg") format('truetype'), url("http://jsrun.it/assets/v/f/c/k/vfckS") format('svg'); } .sprite1{ background-image:url(http://jsrun.it/assets/Z/D/h/k/ZDhkT.png); background-size:320px 240px; } /* ========================================================== 定義 ========================================================== */ /* フォントサイズ ===========================================================*/ .fs10 {font-size: 77%;} .fs11 {font-size: 85%;} .fs12 {font-size: 93%;} .fs13 {font-size: 100%;} .fs14 {font-size: 108%;} .fs15 {font-size: 116%;} .fs16 {font-size: 123.1%;} .fs17 {font-size: 131%;} .fs18 {font-size: 138.5%;} .fs19 {font-size: 146.5%;} .fs20 {font-size: 153.9%;} .fs21 {font-size: 161.6%;} .fs22 {font-size: 167%;} .fs23 {font-size: 174%;} .fs24 {font-size: 182%;} .fs25 {font-size: 189%;} .fs26 {font-size: 197%;} /* フォント太さ ===========================================================*/ .fb { font-weight: bold;} .fn { font-weight: normal;} /* フォントカラー ===========================================================*/ .red {color:#C03;} /* text-align・float ===========================================================*/ .taL { text-align:left; } .taC { text-align:center; } .taR { text-align:right; } .fL { float:left; } .fR { float:right; } /* margin ===========================================================*/ .mr0{margin:0 auto;} .mr2{margin:2px 0px;} .mr4{margin:4px 0px;} .mr6{margin:6px 0px;} .mr8{margin:8px 0px;} .mr10{margin:10px 0px;} .mr12{margin:12px 0px;} .mr14{margin:14px 0px;} .mr16{margin:16px 0px;} .mr18{margin:18px 0px;} .mr20{margin:20px 0px;} .mt05 {margin-top:5px;} .mt10 {margin-top:10px;} .mt20 {margin-top:20px;} .mt30 {margin-top:30px;} .mb0 {margin-bottom:0px !important;} .mb05 {margin-bottom:5px;} .mb10 {margin-bottom:10px;} .mb20 {margin-bottom:20px;} .mb30 {margin-bottom:30px;} .mb50 {margin-bottom:50px;} .mrl10 {margin-left:10px;} .mrr10 {margin-right:10px;} .mrl-10 {margin-right:-10px; margin-left:-10px;} .mr10 {margin-right:10px;} /* width ===========================================================*/ .width10 {width:10%;} .width20 {width:20%;} .width30 {width:30%;} .width40 {width:40%;} .width50 {width:50%;} .width60 {width:60%;} .width70 {width:70%;} .width80 {width:80%;} .width90 {width:90%;} .width100 {width:100%;} /* text-align ===========================================================*/ .tx_center{text-align:center;} .tx_left{text-align:left;} .tx_right{text-align:right;} @charset "utf-8"; /* CSS Document */ /* h1 */ .h1{ position:relative; display:inline-block; height:41px; text-align:center; text-decoration: none; color:#fff !important; line-height:41px; font-size: 16px; background: -webkit-gradient(linear, left top, left bottom, color-stop(1.00, #fff), color-stop(0.48, #b7b7b7), color-stop(0.50, #adadad), color-stop(0.00, #838383)); background: -webkit-linear-gradient(top, #838383 0%, #adadad 50%, #b7b7b7 48%, #fff 100%); background: linear-gradient(to bottom, #838383 0%, #adadad 50%, #b7b7b7 48%, #fff 100%); width:100%; text-overflow: ellipsis; font-weight:bold; } .h1:after { content: ""; position: absolute; right:0; height:40px; width:19px; background-image:url(http://jsrun.it/assets/Z/D/h/k/ZDhkT.png); background-size: 320px 240px; background-position: -22px 0px; } .h1:before{ content: ""; position: absolute; left:0; height:40px; width:19px; background-image:url(http://jsrun.it/assets/Z/D/h/k/ZDhkT.png); background-size: 320px 240px; background-position: -4px 0px; } .h1.disable{ color:#AAA !important; -webkit-text-shadow:1px 1px 1px #222, 1px -1px 1px #222, -1px 1px 1px #222, -1px -1px 1px #222; text-shadow:1px 1px 1px #222, 1px -1px 1px #222, -1px 1px 1px #222, -1px -1px 1px #222; } /* h2 */ .h2{ position:relative; display:inline-block; height:41px; text-align:center; text-decoration: none; color:#000 !important; line-height:41px; font-size: 16px; background: url(http://grad3.ecoloniq.jp/sample/img/patterns_32.png) repeat, -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 121, color-stop(1.00, #274762), color-stop(0.34, #d2e2fe)); background: url(http://grad3.ecoloniq.jp/sample/img/patterns_32.png) repeat, -webkit-radial-gradient(50% 100%, circle, #d2e2fe 34%, #274762 100%); background: url(http://grad3.ecoloniq.jp/sample/img/patterns_32.png) repeat, radial-gradient(50% 100%, circle, #d2e2fe 34%, #274762 100%); width:100%; text-overflow: ellipsis; font-weight:bold; } .h2.disable{ color:#AAA !important; -webkit-text-shadow:1px 1px 1px #222, 1px -1px 1px #222, -1px 1px 1px #222, -1px -1px 1px #222; text-shadow:1px 1px 1px #222, 1px -1px 1px #222, -1px 1px 1px #222, -1px -1px 1px #222; } /* h3 */ .h3{ position:relative; display:inline-block; height:41px; text-align:center; text-decoration: none; color:#fff !important; line-height:41px; font-size: 16px; background:#43335E; width:100%; text-overflow: ellipsis; font-weight:bold; } .h2.disable{ color:#AAA !important; -webkit-text-shadow:1px 1px 1px #222, 1px -1px 1px #222, -1px 1px 1px #222, -1px -1px 1px #222; text-shadow:1px 1px 1px #222, 1px -1px 1px #222, -1px 1px 1px #222, -1px -1px 1px #222; } /* 汎用ライン */ .hr1{ width:100%; height:1px; background:-webkit-gradient(linear, left top, right top, from(#664300), color-stop(0.4, #dec548), color-stop(0.5, #fcfab5), color-stop(0.6, #dec548), to(#664300)); } /* フッター */ .common_menu ul{ display: -webkit-box; width: 320px; height: 51px; margin:0 auto; background: -webkit-gradient(linear, left top, left bottom, color-stop(0.00, #fff), color-stop(1.00, #969696)); background: -webkit-linear-gradient(#fff, #969696); font-weight: bold; text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.4), 0 1px 1px rgba(255, 255, 255, 0.5); background: -webkit-gradient(linear, left top, left bottom, color-stop(0.00, #fff), color-stop(1.00, #969696)); background: -webkit-linear-gradient(#fff, #969696); } .common_menu ul a{ width: 62px; text-align: center; color:#FFF; font-weight:bold; padding-top:12px; display: block; border-right: 1px solid #666; border-left: 1px solid #fff; border-radius: 2px; -webkit-border-radius: 2px; } .common_menu ul a li{ display: block; width: 100%; height: 51px; border-radius: 4px; -webkit-border-radius: 4px; text-decoration: none; } .common_menu ul a:nth-child(1):before{ font-family: 'fontello'; content: 'm'; color: #ea4949; font-size:26px; } .common_menu ul a:nth-child(2):before{ font-family: 'fontello'; content: 'f'; color: #ea4949; font-size:26px; } .common_menu ul a:nth-child(3):before{ font-family: 'fontello'; content: 'r'; color: #ea4949; font-size:26px; } .common_menu ul a:nth-child(4):before{ font-family: 'fontello'; content: 'p'; color: #ea4949; font-size:26px; } .common_menu ul a:nth-child(5):before{ font-family: 'fontello'; content: 's'; color: #ea4949; font-size:26px; } /* ヘッダー */ .common_menu2 ul{ display: -webkit-box; width: 320px; height: 51px; margin:0 auto; background: -webkit-gradient(linear, left top, left bottom, color-stop(0.00, #fff), color-stop(1.00, #969696)); background: -webkit-linear-gradient(#fff, #969696); font-weight: bold; text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.4), 0 1px 1px rgba(255, 255, 255, 0.5); background: -webkit-gradient(linear, left top, left bottom, color-stop(0.00, #fff), color-stop(1.00, #969696)); background: -webkit-linear-gradient(#fff, #969696); } .common_menu2 ul a{ width: 62px; border-radius: 2px; -webkit-border-radius: 2px; text-align: center; color:#FFF; font-weight:bold; padding-top:12px; display: block; border-right: 1px solid #666; border-left: 1px solid #fff; } .common_menu2 ul a:nth-child(2){ width: 190px; border-radius: 2px; -webkit-border-radius: 2px; text-align: center; color:#FFF; font-weight:bold; padding-top:12px; display: block; border-right: 1px solid #666; border-left: 1px solid #fff; } .common_menu2 ul a li{ display: block; width: 100%; height: 51px; border-radius: 4px; -webkit-border-radius: 4px; text-decoration: none; } .common_menu2 ul a:nth-child(1):before{ font-family: 'fontello'; content: 'm'; color: #ea4949; font-size:26px; } .common_menu2 ul a:nth-child(2):before{ color: #ea4949; font-size:26px; } .common_menu2 ul a:nth-child(3):before{ font-family: 'fontello'; content: 'r'; color: #ea4949; font-size:26px; } /* ヘッダーの右にメニュー */ .header1{ background: -webkit-gradient(linear, left top, left bottom, color-stop(0.00, #fff), color-stop(1.00, #969696)); background: -webkit-linear-gradient(#fff, #969696); background-size: 100% 100%; height: 50px; } .header1 h1{ display: block; height: 50px; width: 135px; line-height: 50px; font-weight: bold; margin-left: 5px; float: left; } .header1 nav{ float: right; } .header1 nav li{ float: left; } .header1 nav li>a{ display: block; height: 33px; width: 70px; color: #fff; line-height: 30px; background: -webkit-gradient(linear, left top, left bottom, from(#fff),to(#ececec)); background: linear-gradient(#fff #ececec); text-align: center; text-decoration: none; border: 1px solid #dadada; margin-top: 7px; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.6),-1px -1px 1px rgba(255, 255, 255, 0.5); font-weight:bold; } .header1 nav li:first-child>a{ border-radius: 4px 0 0 4px; } .header1 nav li:last-child>a{ border-radius: 0 4px 4px 0; border-left: none; margin-right: 5px; } /* ヘッダーの右にメニュー２ */ .header2{ background: -webkit-gradient(linear, left top, left bottom, color-stop(0.00, #fff), color-stop(1.00, #969696)); background: -webkit-linear-gradient(#fff, #969696); background-size: 100% 100%; height: 50px; } .header2 h1{ display: block; height: 50px; width: 135px; line-height: 50px; font-weight: bold; margin-left: 5px; float: left; } .header2 nav{ float: right; border-left: 1px solid #666; } .header2 nav li{ float: left; } .header2 nav li>a{ text-align: center; display: block; width: 50px; height: 50px; line-height:50px; } .header2 nav li:first-child>a{ border-right: 1px solid #666; border-left: 1px solid #dadada; } .header2 nav li:last-child>a{ border-left: 1px solid #fff; } .header2 nav li:first-child>a:before{ font-family: 'fontello'; content: 'm'; color: #ea4949; font-size:26px; } .header2 nav li:last-child>a:before{ font-family: 'fontello'; content: 'r'; color: #ea4949; font-size:26px; } /* スワイプでスライドするメニュー */ .slide { width: 320px; overflow: hidden; padding-bottom: 10px; margin:10px auto; } .flipsnap { display: -webkit-box; margin: 10px 0; } .item { width: 320px; } .pointer { text-align: center; } .pointer span { display: inline-block; width: 7px; height: 7px; border-radius: 5px; border: 1px solid #000; background: #fff; } .pointer span.current { background: #0cf; } .pic1{ width:320px; height:96px; background:#CFF; display:block; font-size:48px; text-align:center; font-weight:bold; line-height:96px; color:#666; } .pic2{ width:320px; height:96px; background:#FCF; display:block; font-size:48px; text-align:center; font-weight:bold; line-height:96px; color:#666; } .pic3{ width:320px; height:96px; background:#FFC; display:block; font-size:48px; text-align:center; font-weight:bold; line-height:96px; color:#666; } /* 矢印つきリスト */ .list1 ul li{ background: -webkit-gradient(linear, left top, left bottom, color-stop(0.00, #fff), color-stop(1.00, #969696)); background: -webkit-linear-gradient(#fff, #969696); border-bottom: 1px solid #666; border-top: 1px solid #fff; height: 44px; margin: 0; } .list1 ul li a{ color: #333; display: block; height: 44px; margin: 0; padding: 0 0 0 10px; overflow: hidden; text-overflow: ellipsis; text-decoration: none; font-weight: bold; white-space: nowrap; line-height: 44px; } .list1 ul li a::after{ content: url(http://jsrun.it/assets/b/2/g/C/b2gCx.png); float: right; } /* 矢印つきリスト-more */ .list_more a{ position: relative; text-align: right; display: block; height: 35px; line-height: 35px; padding-right: 33px; background: -webkit-gradient(linear, left top, left bottom, color-stop(0.00, #fff), color-stop(1.00, #969696)); background: -webkit-linear-gradient(#fff, #969696); border-bottom: 1px solid #666; border-top: 1px solid #fff; text-decoration: none; font-weight: bold; color:#333; } .list_more a:after{ content: ""; display: block; position: absolute; top:2px; right: 14px; width: 10px; height: 35px; margin-top: -6px; background-image:url(http://jsrun.it/assets/b/2/g/C/b2gCx.png); } /* 矢印つきリスト２ */ .list2 ul{ margin: 10px; } .list2 ul li{ overflow: hidden; margin: 0; width: 100%; text-align: left; padding: 0; border-bottom: 1px solid #666; border-top: 1px solid #fff; background: -webkit-gradient(linear, left top, left bottom, color-stop(0.00, #fff), color-stop(1.00, #969696)); background: -webkit-linear-gradient(#fff, #969696); display:block; -webkit-box-shadow:0px 3px 3px rgba(000,000,000,0.1); box-shadow:0px 3px 3px rgba(000,000,000,0.1); } .list2 ul li:first-child{ border-radius: 8px 8px 0 0; } .list2 ul li:last-child{ border-radius: 0 0 8px 8px; } .list2 ul li a{ color: #333; display: block; height: 44px; margin: 0; padding: 0 0 0 10px; overflow: hidden; white-space: nowrap; line-height: 44px; text-overflow: ellipsis; text-decoration: none; font-weight:bold; } .list2 ul li a::after{ content: url(http://jsrun.it/assets/b/2/g/C/b2gCx.png); float: right; } /* サムネイルつき矢印リスト */ .list3 ul li{ background: -webkit-gradient(linear, left top, left bottom, color-stop(0.00, #fff), color-stop(1.00, #969696)); background: -webkit-linear-gradient(#fff, #969696); border-bottom: 1px solid #666; border-top: 1px solid #fff; height: 70px; margin: 0px; } .list3 ul li a{ background: url(http://jsrun.it/assets/b/2/g/C/b2gCx.png) no-repeat 100% 50%; color: #666; display: block; height: 70px; margin: 0; padding: 0 20px 0 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; text-decoration: none; } .list3 ul li img{ float: left; height: 70px; width: 70px; margin-right: 10px; } .list3 ul li a strong{ color: #000; display: block; font-weight: bold; padding-top: 17px; } /* サムネイルつき矢印リスト２ */ .list4 ul{ margin-left: 10px; margin-right: 10px; } .list4 ul li{ background: -webkit-gradient(linear, left top, left bottom, color-stop(0.00, #fff), color-stop(1.00, #969696)); background: -webkit-linear-gradient(#fff, #969696); border-bottom: 1px solid #666; border-top: 1px solid #fff; border-right: 1px solid #ccc; height: 45px; margin: 0px; } .list4 ul li a{ background: url(http://jsrun.it/assets/b/2/g/C/b2gCx.png) no-repeat 100% 50%; color: #666; display: block; height: 45px; margin: 0; padding: 0 20px 0 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; text-decoration: none; } .list4 ul li a strong{ color: #000; display: block; font-weight: bold; padding-top: 5px; } .list4 ul li img{ float: left; height: 45px; width: 45px; margin-right: 10px; } /* サムネイルつき矢印リスト２列 */ .list5 { margin: 10px; } .list5:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .list5 ul li{ background: -webkit-gradient(linear, left top, left bottom, color-stop(0.00, #fff), color-stop(1.00, #969696)); background: -webkit-linear-gradient(#fff, #969696); border-top: none; border-bottom: 1px solid #666; border-top: 1px solid #fff; height: 45px; margin: 0px; } .list5 ul li:nth-child(odd) { float: left; width: 50%; } .list5 ul li a{ color: #666; display: block; height: 45px; margin: 0px; padding: 0 20px 0 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; text-decoration: none; } .list5 ul li a strong{ color: #000; display: block; font-weight: bold; padding-top: 5px; } .list5 ul li img{ float: left; height: 45px; width: 45px; margin-right: 10px; } /* サムネイルつきカードリスト */ .list6 ul li{ background: -webkit-gradient(linear, left top, left bottom, color-stop(0.00, #fff), color-stop(1.00, #969696)); background: -webkit-linear-gradient(#fff, #969696); height: 140px; margin: 0px; border-bottom: 1px solid #666; border-top: 1px solid #fff; } .list6 ul li a{ background: url(http://jsrun.it/assets/b/2/g/C/b2gCx.png) no-repeat 100% 50%; color: #666; display: block; height: 140px; margin: 0; padding: 0 20px 0 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; text-decoration: none; } .list6 ul li img{ float: left; height: 140px; width: 100px; margin-right: 10px; } .list6 ul li a strong{ color: #000; display: block; font-weight: bold; padding-top: 17px; } .list6 ul li a span{ color:#009; font-weight: bold; margin-right:5px; } /* 運営からのお知らせ */ .list7 ul{ margin: 10px; } .list7 ul li{ overflow: hidden; margin: 0; width: 100%; text-align: left; padding: 0; border-bottom: 0; background: -webkit-gradient(linear, left top, left bottom, color-stop(0.00, #fff), color-stop(1.00, #969696)); background: -webkit-linear-gradient(#fff, #969696); display:block; -webkit-box-shadow:0px 3px 3px rgba(000,000,000,0.1); box-shadow:0px 3px 3px rgba(000,000,000,0.1); border-bottom: 1px solid #666; border-top: 1px solid #fff; } .list7 ul li:first-child{ border-radius: 8px 8px 0 0; } .list7 ul li:last-child{ border-radius: 0 0 8px 8px; } .list7 ul li a{ color: #333; display: block; height: 44px; margin: 0; padding: 0 0 0 10px; overflow: hidden; white-space: nowrap; line-height: 44px; text-overflow: ellipsis; text-decoration: none; font-weight:bold; } .list7 ul li strong{ color: #333; display: block; height: 44px; margin: 0; padding: 0 0 0 10px; overflow: hidden; white-space: nowrap; line-height: 44px; text-overflow: ellipsis; text-decoration: none; font-weight:bold; text-align:center; } .list7 ul li a::after{ content: url(http://jsrun.it/assets/b/2/g/C/b2gCx.png); float: right; } /* 汎用レイアウト */ .list8 ul{ margin: 10px; } .list8 ul li{ overflow: hidden; margin: 0; width: 100%; text-align: left; border-bottom: 0; background: -webkit-gradient(linear, left top, left bottom, color-stop(0.00, #fff), color-stop(1.00, #969696)); background: -webkit-linear-gradient(#fff, #969696); display:block; -webkit-box-shadow:0px 3px 3px rgba(000,000,000,0.1); box-shadow:0px 3px 3px rgba(000,000,000,0.1); border-bottom: 1px solid #666; border-top: 1px solid #fff; } .list8 ul li:first-child{ border-radius: 8px 8px 0 0; } .list8 ul li div:first-child{ padding:10px; } .list8 ul li:last-child{ border-radius: 0 0 8px 8px; text-align: right; } .list8 ul li span:last-child{ margin-right:13px; } .list8 ul li a{ color: #333; display: block; height: 44px; padding: 0 0 0 10px; overflow: hidden; white-space: nowrap; line-height: 44px; text-overflow: ellipsis; text-decoration: none; font-weight:bold; } .list8 ul li strong{ color: #333; display: block; height: 44px; margin: 0; padding: 0 0 0 10px; overflow: hidden; white-space: nowrap; line-height: 44px; text-overflow: ellipsis; text-decoration: none; font-weight:bold; text-align:center; } .list8 ul li a::after{ content: url(http://jsrun.it/assets/b/2/g/C/b2gCx.png); float: right; } /* 注意事項 */ .attention div{ margin: 10px; border-radius: 8px 8px 8px 8px; border-bottom: 1px solid #666; border-top: 1px solid #fff; } .attention div span:first-child{ text-align: center; border-radius: 8px 8px 0px 0px; display:block; padding:10px; border-bottom: 1px solid #666; border-top: 1px solid #fff; background: -webkit-gradient(linear, left top, left bottom, color-stop(0.00, #fff), color-stop(1.00, #969696)); background: -webkit-linear-gradient(#fff, #969696); } .attention div span:last-child{ font-size:12px; border-radius: 0px 0px 8px 8px; display:block; padding:10px; border-bottom: 1px solid #666; border-top: 1px solid #fff; background: -webkit-gradient(linear, left top, left bottom, color-stop(0.00, #fff), color-stop(1.00, #969696)); background: -webkit-linear-gradient(#fff, #969696); } .attention div strong:before { font-family: 'fontello'; content: 'a'; color: #900; margin:0 3px; } .attention div strong:after { font-family: 'fontello'; content: 'a'; color: #900; margin:0 3px; } /* タブ+ソート */ .Pcate{ text-align: center; margin: 6px 0; } .Pcate ul li{ float:left; width: 25%; text-align: center; color:rgba(0,0,0,0)!important; margin: 10px 0; } .Pcate ul li span, .Pcate ul li a{ display: block; width: 74px; height: 39px; margin: 0 auto; border-radius: 10px; -webkit-border-radius:10px; color:#FFF !important; border:solid 1px #999; font:16px; line-height:39px; font-weight:bold; } .all_on{ background: -webkit-gradient(linear, left top, left bottom, color-stop(1.00, #333), color-stop(0.51, #000), color-stop(0.50, #333), color-stop(0.00, #000)); background: -webkit-linear-gradient(top, #000 0%, #333 50%, #000 51%, #333 100%); background: linear-gradient(to bottom, #000 0%, #333 50%, #000 51%, #333 100%); box-shadow: inset 0 0 30px gold; } .all_off{ background: -webkit-gradient(linear, left top, left bottom, color-stop(1.00, #808080), color-stop(0.51, #000), color-stop(0.50, #333), color-stop(0.00, #000)); background: -webkit-linear-gradient(top, #000 0%, #333 50%, #000 51%, #808080 100%); background: linear-gradient(to bottom, #000 0%, #333 50%, #000 51%, #808080 100%); } .a_on{ background: -webkit-gradient(linear, left top, left bottom, color-stop(1.00, #2476ff), color-stop(0.51, #001ca8), color-stop(0.50, #2476ff), color-stop(0.00, #001ca8)); background: -webkit-linear-gradient(top, #001ca8 0%, #2476ff 50%, #001ca8 51%, #2476ff 100%); background: linear-gradient(to bottom, #001ca8 0%, #2476ff 50%, #001ca8 51%, #2476ff 100%); box-shadow: inset 0 0 30px gold; } .a_off{ background: -webkit-gradient(linear, left top, left bottom, color-stop(1.00, #2476ff), color-stop(0.51, #001ca8), color-stop(0.50, #2476ff), color-stop(0.00, #001ca8)); background: -webkit-linear-gradient(top, #001ca8 0%, #2476ff 50%, #001ca8 51%, #2476ff 100%); background: linear-gradient(to bottom, #001ca8 0%, #2476ff 50%, #001ca8 51%, #2476ff 100%); } .b_on{ background: -webkit-gradient(linear, left top, left bottom, color-stop(1.00, #09c300), color-stop(0.51, #004c15), color-stop(0.50, #09c300), color-stop(0.00, #004c15)); background: -webkit-linear-gradient(top, #004c15 0%, #09c300 50%, #004c15 51%, #09c300 100%); background: linear-gradient(to bottom, #004c15 0%, #09c300 50%, #004c15 51%, #09c300 100%); box-shadow: inset 0 0 30px gold; } .b_off{ background: -webkit-gradient(linear, left top, left bottom, color-stop(1.00, #09c300), color-stop(0.51, #004c15), color-stop(0.50, #09c300), color-stop(0.00, #004c15)); background: -webkit-linear-gradient(top, #004c15 0%, #09c300 50%, #004c15 51%, #09c300 100%); background: linear-gradient(to bottom, #004c15 0%, #09c300 50%, #004c15 51%, #09c300 100%); } .c_on{ background: -webkit-gradient(linear, left top, left bottom, color-stop(1.00, #ff0002), color-stop(0.51, #5c0909), color-stop(0.50, #f02), color-stop(0.00, #5c0909)); background: -webkit-linear-gradient(top, #5c0909 0%, #f02 50%, #5c0909 51%, #ff0002 100%); background: linear-gradient(to bottom, #5c0909 0%, #f02 50%, #5c0909 51%, #ff0002 100%); box-shadow: inset 0 0 30px gold; } .c_off{ background: -webkit-gradient(linear, left top, left bottom, color-stop(1.00, #ff0002), color-stop(0.51, #5c0909), color-stop(0.50, #f02), color-stop(0.00, #5c0909)); background: -webkit-linear-gradient(top, #5c0909 0%, #f02 50%, #5c0909 51%, #ff0002 100%); background: linear-gradient(to bottom, #5c0909 0%, #f02 50%, #5c0909 51%, #ff0002 100%); } select { font-size: 16px; } input.btn03{ display: inline-block; height:39px; padding: 2px 6px; border:solid 1px #000000; -webkit-border-radius: 4px; border-radius: 4px; text-align:center; text-decoration: none; line-height: 22px; font-size:16px; } input.btn03{ background:-webkit-gradient(linear, left top, left bottom, from(#d0d0d0), to(#a0a0a0)); -webkit-box-shadow: inset 0 1px 1px #fff; box-shadow: inset 0 1px 1px #fff; color:#fff; -webkit-text-shadow:1px 1px 1px #000, 1px -1px 1px #000, -1px 1px 1px #000, -1px -1px 1px #000; text-shadow:1px 1px 1px #000, 1px -1px 1px #000, -1px 1px 1px #000, -1px -1px 1px #000; } /* アコーディオン */ .list6 dl.acordion{ margin: 0 10px 0 10px; } .list6 dt.trigger { background: -webkit-gradient(linear, left top, left bottom, color-stop(0.00, #fff), color-stop(1.00, #969696)); background: -webkit-linear-gradient(#fff, #969696); border-radius: 10px; text-align: left; color: #000; margin-bottom: 0; padding: 10px; } .list6 dt.active{ border-radius: 10px 10px 0 0; } .list6 dt.trigger span.open-close { background: url(http://jsrun.it/assets/q/C/d/k/qCdkP.png) no-repeat right top; float: right; width: 20px; height: 20px; text-indent: -9999em; } .list6 dt.active span.open-close { background: url(http://jsrun.it/assets/7/q/U/Z/7qUZR.png) no-repeat right top; float: right; width: 20px; height: 20px; } .list6 dd.acordion_tree{ padding: 10px; background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fff), to(#f0f0f0)); background: #9bd8ff linear-gradient(#fff, #f0f0f0); border: 1px solid #ccc; border-top: none; } /* 他ページ遷移 */ .backto ul{ margin: 10px; } .backto ul li{ overflow: hidden; margin: 0px; width: 100%; text-align: right; padding: 0px; background: -webkit-gradient(linear, left top, left bottom, color-stop(0.00, #fff), color-stop(1.00, #969696)); background: -webkit-linear-gradient(#fff, #969696); display:block; -webkit-box-shadow:0px 3px 3px rgba(000,000,000,0.1); box-shadow:0px 3px 3px rgba(000,000,000,0.1); border-bottom: 1px solid #666; border-top: 1px solid #fff; } .backto ul li:first-child{ border-radius: 8px 8px 0 0; } .backto ul li:last-child{ border-radius: 0 0 8px 8px; } .backto ul li a{ color: #333; display: block; height: 44px; margin: 0; padding: 0 0 0 10px; overflow: hidden; white-space: nowrap; line-height: 44px; text-overflow: ellipsis; text-decoration: none; font-weight:bold; } .backto ul li a::after{ content: url(http://jsrun.it/assets/b/2/g/C/b2gCx.png); float: right; } .backto ul li a span{ margin-right:10px; } /* tab */ ul.style01 {text-align:center; border-bottom:7px solid #969696; color:#fff; font-weight:bold;} ul.style01 li { display:inline-block; width:30%; height:38px margin:0 1%; line-height:38px; border:1px solid #888; border-radius:10px 10px 0 0; background: -webkit-gradient(linear, left top, left bottom, color-stop(0.00, #fff), color-stop(1.00, #969696)); background: -webkit-linear-gradient(#fff, #969696); } ul.style01 li.active {border:1px solid #333; border-radius:10px 10px 0 0; background: -webkit-gradient(linear, left top, left bottom, color-stop(0.00, #969696), color-stop(1.00, #fff)); background: -webkit-linear-gradient(#969696, #fff); box-shadow: inset 0 0 30px #000; } ul.style02 {text-align:center; color:#FFF; font-weight:bold;} ul.style02 li {display:inline-block; width:47%; height:38px margin:0 1%; line-height:38px; border:1px solid #888; border-radius:10px; background: -webkit-gradient(linear, left top, left bottom, color-stop(0.00, #fff), color-stop(1.00, #969696)); background: -webkit-linear-gradient(#fff, #969696); } ul.style02 li.active {border:1px solid #333; background: -webkit-gradient(linear, left top, left bottom, color-stop(0.00, #969696), color-stop(1.00, #fff)); background: -webkit-linear-gradient(#969696, #fff); box-shadow: inset 0 0 30px #000; } .panel {display:none;} .show {display:block;} section.panel {padding:10px;} div.panel {padding:10px; color:#FFF;} /* ナビ */ .Lnavi, .Rnavi{ display: table; padding: 6px; line-height: 1.4; } .Lnavi img, .Rnavi img{ display: table-cell; vertical-align: middle; } .Lnavi img { margin-right: 6px; } .Rnavi img { margin-left: 6px; } .Lnavi p, .Rnavi p { display: table-cell; width: 100%; vertical-align: middle; line-height: 1.4; color:#FFF; } /* 前へ次へ */ .beforenext{ text-align: center; margin: 6px 0; color:#FFF; } .beforenext .btn03{ background:-webkit-gradient(linear, left top, left bottom, from(#d0d0d0), to(#a0a0a0)); -webkit-box-shadow: inset 0 1px 1px #fff; box-shadow: inset 0 1px 1px #fff; color:#fff; -webkit-text-shadow:1px 1px 1px #000, 1px -1px 1px #000, -1px 1px 1px #000, -1px -1px 1px #000; text-shadow:1px 1px 1px #000, 1px -1px 1px #000, -1px 1px 1px #000, -1px -1px 1px #000; display: inline-block; height:39px; border:solid 1px #000000; -webkit-border-radius: 4px; border-radius: 4px; text-align:center; text-decoration: none; font-size:16px; line-height:39px; width:20%; } /* ページャー */ .pager { margin: 10px auto; text-align: center; color:#FFF; } .pager ul li{ display: inline-block; width: 24px; height: 24px; line-height: 24px; border: 1px solid #fff; border-radius: 4px; -webkit-border-radius:4px; text-align: center; font-size:12px; margin:0 2px; } .pager ul li a{ display: block; border-radius: 4px; -webkit-border-radius:4px; background:#000; text-decoration:none; color:#F60; } .pager ul li span{ background:transparent!important; } .pager ul li:first-child{ background:-webkit-gradient(linear, left top, left bottom, from(#d0d0d0), to(#a0a0a0)); -webkit-box-shadow: inset 0 1px 1px #fff; box-shadow: inset 0 1px 1px #fff; color:#fff !important; -webkit-text-shadow:1px 1px 1px #000, 1px -1px 1px #000, -1px 1px 1px #000, -1px -1px 1px #000; text-shadow:1px 1px 1px #000, 1px -1px 1px #000, -1px 1px 1px #000, -1px -1px 1px #000; display: inline-block; height:39px; border:solid 1px #000000; -webkit-border-radius: 4px; border-radius: 4px; text-align:center; text-decoration: none; font-size:16px; line-height:39px; width:20%; } .pager ul li:first-child a{ height: 26px; background: transparent; color:#FFF; } .pager ul li:last-child{ width: 56px; border: none; } .pager ul li:last-child{ background:-webkit-gradient(linear, left top, left bottom, from(#d0d0d0), to(#a0a0a0)); -webkit-box-shadow: inset 0 1px 1px #fff; box-shadow: inset 0 1px 1px #fff; color:#fff; -webkit-text-shadow:1px 1px 1px #000, 1px -1px 1px #000, -1px 1px 1px #000, -1px -1px 1px #000; text-shadow:1px 1px 1px #000, 1px -1px 1px #000, -1px 1px 1px #000, -1px -1px 1px #000; display: inline-block; height:39px; border:solid 1px #000000; -webkit-border-radius: 4px; border-radius: 4px; text-align:center; text-decoration: none; font-size:16px; line-height:39px; width:20%; } .pager ul li:last-child a{ height: 26px; background: transparent; color:#FFF; } /* 注記 */ .note{ background: rgba(255,255,255,0.4); font-size: 12px; padding: 10px; margin:0 10px; -webkit-border-radius:10px; } /* ボタン */ a.btn1{ text-align: center; display: block; padding: 10px; margin: 10px auto; color: #fff; text-decoration: none; text-shadow: 1px 1px 1px rgba(0,0,0,0.4); border-radius: 5px; border: 1px solid #333; font-weight: bold; background: -webkit-gradient(linear, left top, left bottom, color-stop(1.00, #333), color-stop(0.51, #000), color-stop(0.50, #333), color-stop(0.00, #000)); background: -webkit-linear-gradient(top, #000 0%, #333 50%, #000 51%, #333 100%); background: linear-gradient(to bottom, #000 0%, #333 50%, #000 51%, #333 100%); } a.btn2{ text-align: center; display: block; padding: 10px; margin: 10px auto; color: #fff; text-decoration: none; text-shadow: 0 -1px 1px #666; border-radius: 5px; font-weight: bold; border: 1px solid #333; background: -webkit-gradient(linear, left top, left bottom, color-stop(1.00, #2476ff), color-stop(0.51, #001ca8), color-stop(0.50, #2476ff), color-stop(0.00, #001ca8)); background: -webkit-linear-gradient(top, #001ca8 0%, #2476ff 50%, #001ca8 51%, #2476ff 100%); background: linear-gradient(to bottom, #001ca8 0%, #2476ff 50%, #001ca8 51%, #2476ff 100%); -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.6); box-shadow: 0 1px 3px rgba(0,0,0,0.6); border-bottom: 1px solid rgba(0,0,0,0.25); } a.btn3{ text-align: center; display: block; padding: 10px; margin: 10px auto; color: #fff; text-decoration: none; text-shadow: 1px 1px 1px rgba(0,0,0,0.25); border-radius: 5px; border-top: 1px solid #333; border-right: 1px solid #333; border-bottom: 1px solid #333; border-left: 1px solid #333; font-weight: bold; background: -webkit-gradient(linear, left top, left bottom, color-stop(1.00, #09c300), color-stop(0.51, #004c15), color-stop(0.50, #09c300), color-stop(0.00, #004c15)); background: -webkit-linear-gradient(top, #004c15 0%, #09c300 50%, #004c15 51%, #09c300 100%); background: linear-gradient(to bottom, #004c15 0%, #09c300 50%, #004c15 51%, #09c300 100%); } a.btn4{ text-align: center; display: block; padding: 10px; margin: 10px auto; color: #fff; text-decoration: none; text-shadow: 1px 1px 1px rgba(0,0,0,0.25); border-radius: 5px; border-top: 1px solid #333; border-right: 1px solid #333; border-bottom: 1px solid #333; border-left: 1px solid #333; font-weight: bold; background: -webkit-gradient(linear, left top, left bottom, color-stop(1.00, #ff0002), color-stop(0.51, #5c0909), color-stop(0.50, #f02), color-stop(0.00, #5c0909)); background: -webkit-linear-gradient(top, #5c0909 0%, #f02 50%, #5c0909 51%, #ff0002 100%); background: linear-gradient(to bottom, #5c0909 0%, #f02 50%, #5c0909 51%, #ff0002 100%); } a.btn5{ text-align: center; display: block; padding: 10px; margin: 10px auto; color: #fff; text-decoration: none; text-shadow: 1px -1px 1px rgba(0,0,0,0.25); border-radius: 5px; border:1px solid #000; font-weight: bold; background: -webkit-gradient(linear, left top, left bottom, from(#4f4f4f), color-stop(0.48, #323232), color-stop(0.5, #000), to(#121212)); background: linear-gradient(#4f4f4f, #323232 48% , #000 50%, #121212); } /* PageTop */ .pagetop{ text-align: right; } .pagetop a{ color:#F60; } use an iframe compat browser, deer Play on jsdo.it games Author Share ブログに埋め込む QR Tag Download Complete! Description What kind of game? ver1.0 スマートフォンのサイトやアプリ、ソーシャルゲームでよく使われるパーツを集めました。 cssを編集することでデザインを変更 セクション単位でマージンを10pxとっています。 セクションタグをdivに変えることで、マージンを無くすことができます。 ※webkitのみ対応 Control Device Smartphone Controllerjsdo.it WebSocket Controller» Mouse Keyboard Touch Device Fullscreen Activated Inactivated jsdo.it games から削除する Submit Author kingpanda URLhttp://kingpanda.me Tweet Default Panel Auto play Screenshot Readme JavaScript HTML CSS Size Width: px Height: px code <script type="text/javascript" src="http://jsdo.it/blogparts/e6F8/js"></script> art&design css css3 html5 html5_elements&api javascript jquery library&test smartphones&tablets user_interface Discussion Questions on this code? Tags art&design css css3 html5 html5_elements&api javascript jquery library&test smartphones&tablets user_interface Favorite by ahotank DDD parco11066 kawacho Motohiro.Ish djankey sv.junic gutti hasudon7171 Buravo46 piayo Forked sort by latest page views favorite forked forked: 【UI】スマホサイト,アプリ,ソシャゲのUI bon.tai.bon 01 1073 62/1024/1488 art&design css css3 html5 html5_elements&api javascript jquery library&test smartphones&tablets user_interface forked: 【UI】スマホサイト,アプリ,ソシャゲのUI Takahiro.Nak 00 1117 62/1024/1488 art&design css css3 html5 html5_elements&api javascript jquery library&test smartphones&tablets user_interface forked: 【UI】スマホサイト,アプリ,ソシャゲのUI kyaputen.tsu 00 1075 62/1024/1488 art&design css css3 html5 html5_elements&api javascript jquery library&test smartphones&tablets user_interface forked: 【UI】スマホサイト,アプリ,ソシャゲのUI toru 00 1056 62/1024/1488 art&design css css3 html5 html5_elements&api javascript jquery library&test smartphones&tablets user_interface
