07design.blog

RSS
Home » codetips, topics

スマホサイトでよく見るパーツのコードサンプル集

2011年 8月 18日 木曜日

最近スマートフォンサイトの案件が増えてきました。
そこで、個人的によく使いそうなコードをEvernoteにまとめたりしていたのですが、
まだまだスマフォサイト構築のノウハウ記事も少ないですし、共有しておこうと思います。

(!)2012.5.15
一部のコードを修正しました。2012/5/15以前にダウンロードした方は新しいものをお使いください。

すべてのデモ(chromeなどのwebkit系ブラウザまたはスマートフォン実機でご覧ください)

download

ヘッダーの右にメニュー

<h3>ヘッダーの右にメニュー</h3>
<!--ヘッダーの右にメニュー-->
   <header class="header1">
	<h1><a href="#"><img src="title.png" alt="SITE TITLE"></a></h1>
	<nav>
	  <ul>
	  <li><a href="#">PC</a></li>
	  <li><a href="#">ログイン</a></li>
	  </ul>
	</nav>
   </header>
<!--/ヘッダーの右にメニュー-->
/* ヘッダーの右にメニュー */
.header1{
 background: -webkit-gradient(linear, left top, left bottom, from(#ececec),to(#fff)); 
 background: linear-gradient(#ececec, #fff);
 background-size: 100% 100%;
 height: 50px;
 border-bottom: 1px solid #dadada;
}
 .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;
 }

ヘッダーの右にメニュー2

<h3>ヘッダーの右にメニュー2</h3>
<!--ヘッダーの右にメニュー2-->
   <header class="header2">
	<h1><a href="#"><img src="title.png" alt="SITE TITLE"></a></h1>
	<nav>
	  <ul>
	  <li><a href="#"><img src="icon1.png" alt="カートを見る"></a></li>
	  <li><a href="#"><img src="icon2.png" alt="検索"></a></li>
	  </ul>
	</nav>
   </header>
<!--/ヘッダーの右にメニュー2-->
/* ヘッダーの右にメニュー2 */
.header2{
 background: -webkit-gradient(linear, left top, left bottom, from(#ececec),to(#fff)); 
 background: linear-gradient(#ececec, #fff);
 background-size: 100% 100%;
 height: 50px;
 border-bottom: 1px solid #dadada;
 }
 .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 #fff;
 }
 .header2 nav li{
 float: left;
 }
 .header2 nav li>a{
 text-align: center;
 display: block;
 width: 50px;
 height: 50px;
 }
 .header2 nav li:first-child>a{
 border-right: 1px solid #fff;
 border-left: 1px solid #dadada;
 }
 .header2 nav li:last-child>a{
 border-left: 1px solid #dadada;
 }

スワイプでスライドするメニュー

<h3>スワイプでスライドするメニュー(flipsnap.jsと連動)</h3>
<!--スワイプでスライドするメニュー-->
   <section class="slide">
    <div class="flipsnap" id="flipsnap5">
        <div class="item"><a href="#"><img src="banner.png" alt="バナー"></a></div>
        <div class="item"><a href="#"><img src="banner.png" alt="バナー"></a></div>
        <div class="item"><a href="#"><img src="banner.png" alt="バナー"></a></div>
        <div class="item"><a href="#"><img src="banner.png" alt="バナー"></a></div>
        <div class="item"><a href="#"><img src="banner.png" alt="バナー"></a></div>
    </div>
    <div class="pointer">
        <span class="current"></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
    </div>
   </section>
<!--/スワイプでスライドするメニュー-->
/* スワイプでスライドするメニュー */
.slide {
 width: 320px;
 overflow: hidden;
 background: #fff;
 margin: 0 auto;
 padding-bottom: 20px;
 }
 .flipsnap {
 display: -webkit-box;
 margin: 10px 0;
 }
 .item {
 width: 310px;
 }
 .pointer {
 text-align: center;
 }
 .pointer span {
 display: inline-block;
 width: 7px;
 height: 7px;
 border-radius: 5px;
 border: 1px solid #000;
 }
 .pointer span.current {
 background: #fc0;
 }
スワイプでスライドするjavascriptはいくつかありますが、今回はflipsnap.jsというスクリプトを使用させて頂いてます。

矢印つきリスト

<h3>矢印つきリスト</h3>
<!--矢印つきリスト-->
   <section class="list1">
          <ul>
          <li><a href="#">メニュー1</a></li>
          <li><a href="#">メニュー2</a></li>
          </ul>
   </section>
<!--/矢印つきリスト-->
/* 矢印つきリスト */
.list1 ul{
 border-bottom: 1px solid #ccc;
 }
 .list1 ul li{
 background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#f0f0f0));
 background: linear-gradient(#fff, #f0f0f0);
 border-bottom: 1px solid white;
 border-top: 1px solid #ccc;
 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(list_mark1.png);
 float: right;
 }

矢印つきリスト2

<h3>矢印つきリスト2</h3>
<!--矢印つきリスト2-->
   <section class="list2">
          <ul>
          <li><a href="#">メニュー1</a></li>
          <li><a href="#">メニュー2</a></li>
          <li><a href="#">メニュー3</a></li>
          </ul>
   </section>
<!--/矢印つきリスト2-->
/* 矢印つきリスト2 */
.list2 ul{
 margin: 10px;
 }
 .list2 ul li{
 overflow: hidden;
 margin: 0;
 width: 100%;
 text-align: left;
 padding: 0;
 border: 1px #ccc solid;
 border-bottom: 0;
 background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#f0f0f0));
 background: linear-gradient(#fff, #f0f0f0);
 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;
 border-bottom:1px #ccc solid;
 }
 .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(list_mark1.png);
 float: right;
 }

サムネイルつき矢印リスト

<h3>サムネイルつき矢印リスト</h3>
<!--サムネイルつき矢印リスト-->
   <section class="list3">
          <ul>
          <li><a href="#"><img src="thumbs.png"><strong>メニュー1</strong>テキストテキストテキスト</a></li>
          <li><a href="#"><img src="thumbs.png"><strong>メニュー2</strong>テキストテキストテキスト</a></li>
          </ul>
   </section>
<!--/サムネイルつき矢印リスト-->
/* サムネイルつき矢印リスト */
.list3 ul{
 border-bottom: 1px solid #ccc;
 }
 .list3 ul li{
 background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fff), to(#f0f0f0));
 background: linear-gradient(#fff, #f0f0f0);
 border-top: 1px solid #ccc;
 height: 70px;
 margin: 0px;
 }
 .list3 ul li a{
 background: url(list_mark1.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;
 }

サムネイルつき矢印リスト2

<h3>サムネイルつき矢印リスト2</h3>
<!--サムネイルつき矢印リスト2-->
   <section class="list4">
          <ul>
          <li><a href="#"><img src="thumbs.png"><strong>MENU1</strong>texttexttext</a></li>
          <li><a href="#"><img src="thumbs.png"><strong>MENU2</strong>texttexttext</a></li>
          <li><a href="#"><img src="thumbs.png"><strong>MENU3</strong>texttexttext</a></li>
          </ul>
   </section>
<!--/サムネイルつき矢印リスト2-->
/* サムネイルつき矢印リスト2 */
.list4 ul{
 border-bottom: 1px solid #ccc;
 margin-left: 10px;
 margin-right: 10px;
 }
 .list4 ul li{
 background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fff), to(#f0f0f0));
 background: linear-gradient(#fff, #f0f0f0);
 border-top: 1px solid #ccc;
 border-left: 1px solid #ccc;
 border-right: 1px solid #ccc;
 height: 45px;
 margin: 0px;
 }
 .list4 ul li a{
 background: url(list_mark1.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;
 }

サムネイルつき矢印リスト2列

<h3>サムネイルつき矢印リスト2列</h3>
<!--サムネイルつきリスト2列-->
   <section class="list5">
          <ul>
          <li><a href="#"><img src="thumbs.png"><strong>MENU1</strong>texttexttext</a></li>
          <li><a href="#"><img src="thumbs.png"><strong>MENU2</strong>texttexttext</a></li>
          <li><a href="#"><img src="thumbs.png"><strong>MENU3</strong>texttexttext</a></li>
          <li><a href="#"><img src="thumbs.png"><strong>MENU4</strong>texttexttext</a></li>
          <li><a href="#"><img src="thumbs.png"><strong>MENU5</strong>texttexttext</a></li>
          <li><a href="#"><img src="thumbs.png"><strong>MENU6</strong>texttexttext</a></li>
          </ul>
   </section>
<!--/サムネイルつきリスト2列-->
/* サムネイルつき矢印リスト2列 */
.list5 {
 margin: 10px;
 }
 .list5:after {
 content: ".";
 display: block;
 height: 0;
 clear: both;
 visibility: hidden;
 }
 .list5 ul{
 border-top: 1px solid #ccc;
 }
 .list5 ul li{
 background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fff), to(#f0f0f0));
 background: linear-gradient(#fff, #f0f0f0);
 border-top: none;
 border-bottom: 1px solid #ccc;
 border-left: 1px solid #ccc;
 border-right: 1px solid #ccc;
 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;
 }

アコーディオン

<h3>アコーディオン(acordion.jsと連動)</h3>
<!--アコーディオン-->
   <section class="list6">
          <dl class="acordion">
          <dt class="trigger">タップで開閉<span class="open-close">open</span></dt>
          <dd class="acordion_tree">
		<p>テキストテキストテキストテキスト<br>
		テキストテキストテキストテキスト</p>
	  </dd>
          </dl>
   </section>
<!--/アコーディオン-->
/* アコーディオン */
.list6 dl.acordion{
 margin: 0 10px 0 10px;
 }
 .list6 dt.trigger {
 background: #9bd8ff -webkit-gradient(linear, 0% 0%, 0% 100%, from(#b9e4ff), to(#62b5ea));
 background: #9bd8ff linear-gradient(#b9e4ff, #62b5ea);
 border-radius: 10px;
 text-align: left;
 border: 1px solid #ccc;
 color: #000;
 margin-bottom: 0;
 padding: 10px;
 }
 .list6 dt.active{
 border-radius: 10px 10px 0 0;
 }
 .list6 dt.trigger span.open-close {
 background: url(point_plus.png) no-repeat right top;
 float: right;
 width: 20px;
 height: 20px;
 text-indent: -9999em;
 }
 .list6 dt.active span.open-close {
 background: url(point_none.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;
 }
$(document).ready(function(){
  //acordion_treeを一旦非表示に
  $(".acordion_tree").css("display","none");
  //triggerをクリックすると以下を実行
  $(".trigger").click(function(){
    //もしもクリックしたtriggerの直後の.acordion_treeが非表示なら
    if($("+.acordion_tree",this).css("display")=="none"){
         //classにactiveを追加
         $(this).addClass("active");
         //直後のacordion_treeをスライドダウン
         $("+.acordion_tree",this).slideDown("normal");
  }else{
    //classからactiveを削除
    $(this).removeClass("active");
    //クリックしたtriggerの直後の.acordion_treeが表示されていればスライドアップ
    $("+.acordion_tree",this).slideUp("normal");
  }
  });
});

CSS3ボタンいろいろ

<h3>CSS3ボタンいろいろ</h3>
<!--ボタンいろいろ-->
   <section class="button">
        <a href="#" class="btn1">ボタン1</a>
        <a href="#" class="btn2">ボタン2</a>
        <a href="#" class="btn3">ボタン3</a>
        <a href="#" class="btn4">ボタン4</a>
        <a href="#" class="btn5">ボタン5</a>
   </section>
<!--/ボタンいろいろ-->
/* ボタン */
a.btn1{
width: 100px;
text-align: center;
display: block;
padding: 8px;
margin: 10px;
color: #000;
text-decoration: none;
text-shadow: 1px 1px 1px rgba(0,0,0,0.4);
border-radius: 10px;
border: 1px solid #63b7ec;
font-weight: bold;
background: #9bd8ff -webkit-gradient(linear, 0% 0%, 0% 100%, from(#b9e4ff), to(#62b5ea));
background: #9bd8ff linear-gradient(#b9e4ff, #62b5ea);
}
a.btn2{
width: 100px;
text-align: center;
display: block;
padding: 8px;
margin: 10px;
color: #fff;
text-decoration: none;
text-shadow: 0 -1px 1px #666;
border-radius: 10px;
font-weight: bold;
background: #e22092 -webkit-gradient(linear, 0% 0%, 0% 100%, from(#f45cb5), to(#e22092));
background: #e22092 linear-gradient(#f45cb5, #e22092);
-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{
width: 100px;
text-align: center;
display: block;
padding: 8px;
margin: 10px;
color: #666;
text-decoration: none;
text-shadow: 1px 1px 1px rgba(0,0,0,0.25);
border-radius: 3px;
border-top: 1px solid #ccc;
border-right: 1px solid #999;
border-bottom: 1px solid #999;
border-left: 1px solid #ccc;
font-weight: bold;
-webkit-box-shadow: 1px 1px 2px #e7e7e7;
box-shadow: 1px 1px 2px #e7e7e7;
background: -webkit-gradient(linear, left top, left bottom, from(#fff),         color-stop(0.01, #f1f1f1),
color-stop(0.5, #f1f1f1),
color-stop(0.99, #dfdfdf),
to(#ccc));
background: linear-gradient(#fff, #f1f1f1 1% , #f1f1f1 50% , #dfdfdf 99%, #ccc);
}
a.btn4{
width: 100px;
text-align: center;
display: block;
padding: 8px;
margin: 10px;
color: #fff;
text-decoration: none;
text-shadow: 1px 1px 1px rgba(0,0,0,0.25);
border-radius: 5px;
border-top: 1px solid #d25f11;
border-right: 1px solid #d25f11;
border-bottom: 1px solid #b85511;
border-left: 1px solid #d25f11;
font-weight: bold;
-webkit-box-shadow:inset 0 1px 0px #ffc290;
box-shadow:inset 0 1px 0px #ffc290;
background: -webkit-gradient(linear, left top, left bottom, from(#fe923b), to(#e26411));
background: linear-gradient(#fe923b #e26411);
}
a.btn5{
width: 100px;
text-align: center;
display: block;
padding: 8px;
margin: 10px;
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);
}

追記

あくまで自分用なので、適宜書き換えて使用してくださいー。

20 Comments »

  1. […] ■ スマフォサイトでよく見るパーツのコードサンプル集 | 07design.blog […]

  2. […] Shared スマフォサイトでよく見るパーツのコードサンプル集 | 07design.blog. […]

  3. […] 1) スマフォサイトでよく見るパーツのコードサンプル集 ↑ これはすごく便利でした。スマホで使うであろうスワイプなどのソースコードがそのままコピペで使えます。 […]

  4. はじめて書き込みをさせて頂きます。
    趣味で歴史系のホームページを作成している、ひろおと申します。

    こちらのブログのアコーディオンを参考にさせて頂こうと思っておりますが、
    質問とお願いがございます。

    ・1つのアコーディオンを開くと、ほかを全て閉じる(ある時点で開いているのは1つ)
    ・全てをひらくボタンを、べつに設置する

    という2つの機能を持たせたいのですが、
    アレンジの仕方がわかりません。
    もし宜しければ、こちらのブログでご紹介頂けませんでしょうか。

    また上記の2つの条件は、矛盾しているようにも見えますので、
    不可能であれば、上の条件だけでも教えて頂けませんか。
    ご多忙な中かとは存じますが、宜しければお願いいたします。

  5. >ひろおさん

    コメントありがとうございます。返信が遅れまして申し訳ありません。
    アコーディオンの実際の実装方法ですが、
    jQueryのリファレンスサイトなどを参考にしてくださいませ。

    >1つのアコーディオンを開くと、ほかを全て閉じる(ある時点で開いているのは1つ)
    これは、トリガーとなる「ここをクリックする」というイベントに
    ・対象のアコーディオンを開く
    ・他を閉じる
    という処理を加えることになります。

    >全てをひらくボタンを、べつに設置する
    これも「ここをクリックする」というイベントに
    ・すべてのアコーディオンを開く
    という処理をつけてあげればよいです。

    基本は「イベント(IDをクリックしたら、とかページが読み込まれたら、とか)」
    「処理(スタイルを変える、とかスライドアップしたりとか)」
    の組み合わせです。
    jQueryのメソッドで検索してみてください。

  6. […] 7.スマフォサイトでよく見るパーツのコードサンプル集 | 07design.blog (08/18 18:32) 最近スマートフォンサイトの案件が増えてきました。そこで、個人的によく使いそうなコードをEvernoteにまとめたりしていたのですが、 まだまだスマフォサイト構築のノウハウ記事も少ないですし、共有しておこうと思います。…最近スマートフォンサイトの案件が増えてきました。 そこで、個人的によく使いそうなコードをEvernoteにまとめたりしていたのですが、 まだまだスマフォサイト構築のノウハウ記事も少な… […]

  7. […] 7.スマフォサイトでよく見るパーツのコードサンプル集 | 07design.blog (08/18 18:32) 最近スマートフォンサイトの案件が増えてきました。そこで、個人的によく使いそうなコードをEvernoteにまとめたりしていたのですが、 まだまだスマフォサイト構築のノウハウ記事も少ないですし、共有しておこうと思います。…最近スマートフォンサイトの案件が増えてきました。 そこで、個人的によく使いそうなコードをEvernoteにまとめたりしていたのですが、 まだまだスマフォサイト構築のノウハウ記事も少な… […]

  8. […] スマホサイトでよく見るパーツのコードサンプル集 スマホサイトに入れると使いやすくなる!おすすめjQuery4選! […]

  9. 今、別サイトのスマホサイトを作っているのですが、こういうの凄く助かります!
    ブクマもしたので参考にさせて頂きます♪

  10. 参考にさせて頂いてます。
    すみませんソースをコピーするだけでは
    パーツをサイトで表示出来ないのでしょうか?

    どうすればいいのか分からなくて
    よろしければ教えて下さい

  11. >あらじんさん

    参考にして頂きありがとうございます。
    HTMLとCSSをコピーして、CSS3対応のブラウザで閲覧すれば見られるはずですよ。
    上部にあるデモは正常に表示されましたか?

  12. お忙しい中ご連絡して頂けて感謝しています
    ありがとうございます。

    私の携帯はドコモギャラクシーS3というスマホで
    はい 上記のデモは正常に表示されています

    ホームページビルダーというソフトを使い
    上記のHTML CSSのソースをコピーさせて頂き
    ソースを書いてアップロードしましたが

    私の携帯からは
    矢印付リストが

    周りの枠は表示されず

    メニュー1
    メニュー2
    メニュー3

    と 通常のリンク表示になってしまいます

    よろしければご教授下さい。。
    すみません説明不足ですが。。

  13. すみません追記です

    HTMLはここにHTMLのソース

    CSSはここにcssのソース

    で記述しています。

    CSSのソースが全てサイト上に出てしまっている状態です。。

  14. すみません↑反映されませんでした
    HTMLはボディーに

    Cssはヘッダーに

    です。。

  15. >あらじんさん

    CSSのソースが出てしまっているなら多分以下の方法でなおると思います。

    ヘッダーのCSSを<style></style>で囲んでください。
    詳しくはCSSのリファレンスサイトなどを参考にしてくださいね。

  16. ありがとうございます

    凄い・・出来ました
    HP作成してて思いますうまく表示出来た時の嬉しさは
    言葉になりません。。

    これからも色々と参考にさせて頂きます。

    まだ超が付くほどの初心者ですが
    頑張っていきます

  17. 度々申し訳ないです
    スマホからも表示されたのですが

    スマホの表示viewportの設定もしているのですが
    枠が全体的に右側へ寄ってしまうのは何が原因でしょうか?
    色々今まで調べたのですがどうすれば真ん中にいってくれるのか
    分からない状態です。
    すみません何度も調べてはみたのですが・・
    デモでは 正常に真ん中にいっています

  18. 初めまして!

    めちゃめちゃ参考になります!
    とても助かりました。
    ありがとうございます。

    これからも頑張ってください!

  19. […] スマホサイトでよく見るパーツのコードサンプル集 […]

Comments

Add your comment below, or trackback from your own site. You can also subscribe to these comments via RSS.

Be nice. Keep it clean. Stay on topic. No spam.