ConneCre

connelog

RSS
ConneCre (2011.02.25)

iPhoneサイト向けCSSサンプル（CSS3）

使いまわしがききそうなものをまとめた個人的なサンプルです。随時更新致します。

HTML側のviewportの設定

  1. <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">

[iPhone生活] - Viewport

初期設定

  1. * {
  2.     word-break: break-all;
  3.     -webkit-touch-callout:none;
  4.     -webkit-tap-highlight-color:rgba(255,255,0,0.4);
  5.     -webkit-text-size-adjust:none;
  6. }

word-break: break-all;
URLなどの文字列の強制改行。ただし句読点なども先頭にくるため要検討。

-webkit-touch-callout:none;
長押しした際のとび先URL非表示。ただし画像リンクをタップした際のハイライトがおかしくなる。aタグ要素にdisplay: block ;を指定すると直る。

-webkit-tap-highlight-color:rgba(255,255,0,0.4);
リンクをタッチした際のカラー。

-webkit-text-size-adjust:none;
横画面にした際フォントサイズの自動調整を無効。
※フォントサイズを%指定している場合。

  1. body {
  2.     color: #ffffff;
  3.     font-size: 15px;
  4.     line-height: 1.3;
  5.     font-family: ArialMT, "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3"; /* iPhoneバンドル */
  6.      -webkit-text-size-adjust: none; /* 文字の拡大縮小を防ぐ */
  7. }

  8.  

  9. /* ---------------

  10. EXAMPLES FONT-SIZE
  11. ------------------
  12. 10px = 66.7%
  13. 11px = 73.3%
  14. 12px = 80%
  15. 13px = 86.7%
  16. 14px = 93.3%
  17. 15px = 100%
  18. 16px = 106.7%
  19. 17px = 113.3%
  20. 18px = 120%
  21. 19px = 126.7%
  22. 20px = 133.3%
  23. 21px = 140%
  24. 22px = 146.7%
  25. 23px = 153.3%
  26. 24px = 160%
  27. 25px = 166.7%
  28. 26px = 173.3%
  29. --------------- */


BASE

  1. /* clearfix */
  2. *:after { display:block; clear:both; }

  3.  

  4. /* はみ出し対策 */

  5. /* body { width:100%; overflow:hidden; } */
  6. ※Androidでスクロールできなくなる機種があるので指定しないことにする

  7.  

  8. /* HTMLに対応していないOS対策 */

  9. article, aside, figure, footer, header,hgroup, nav, section { display:block; }

  10.  

  11. /* ↓以下通常CSSを記載していく */

  12.  

  13. a, a:link, a:visited, a:hover, a:active {

  14.     color: #103092;
  15.     text-decoration: underline;
  16. }

  17.  

  18. em{ color: #db0000;}

  19.  

  20. p { margin: 0 0 10px 0 ; padding: 0 ; }

  21.  

  22. strong {font-weight: bold;}

  23.  

  24. b {font-weight: normal ;}

  25.  

  26. input[type="checkbox"],

  27. input[type="radio"],
  28. select { display:inline; vertical-align: baseline ;margin-right: 5px ;}

  29.  

  30. input::-webkit-input-placeholder,

  31. textarea::-webkit-input-placeholder {
  32.     color: #999 ;
  33. }

  34.  

  35. textarea {

  36.     width: 100% ;
  37.     height: 100px ;
  38.     margin-bottom: 10px ;
  39. }

  40.  

  41. input[type="text"],textarea,select {

  42.     color: #5a5c63;
  43.     font-size: 100% ;
  44.     width: 100% ;
  45.     padding: 3px ;
  46.     border: 1px solid #999999 ;
  47.      -webkit-box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2) inset ;
  48.      -webkit-box-sizing: border-box;
  49. }
  50. select { width: 40% ; }

input[type="checkbox"],
input[type="radio"],
select { display:inline; vertical-align: baseline ;}

テキストとフォームの位置を揃える。vertical-align: middle ; 等試したがbaselineが一番揃ってるように見える。


画像をきれいに見せる

※2倍にした分もちろん容量は大きくなるのでボタンなど汎用的なものは可能な限りスタイルシートで作成。

○imgタグ

画像を2倍サイズで作成し、imgタグのwidth、heightを半分で指定。

○背景

画像を2倍サイズで作成し、background-sizeを半分で指定。

  1. -webkit-background-size: 12px 12px ;


h1サンプル

  1. h1 {
  2.     height: 44px ;
  3.     background: #103092 url(/img/bgHeader.png) repeat-x ;
  4.     font-family: HiraKakuProN-W6 ;
  5.     font-size: 20px ;
  6.     color: #fff ;
  7.     font-weight:bold;
  8.     text-align: center ;
  9.     line-height: 44px ;
  10.     text-shadow: rgba(0, 0, 0, 0.4) 0 -1px 0 ;
  11.     overflow: hidden ;
  12.     white-space: nowrap ; /* セル内で自動改行させない */
  13.     text-overflow: ellipsis ; /* 領域からはみ出た場合に「...」を表示する */
  14. }


ボタンサンプル

  1. .btn_base {
  2.     color: #fff ;
  3.     font-size: 113.3% ;
  4.     font-weight: bold ;
  5.     text-decoration: none ;
  6.     text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3) ;
  7.     text-align: center ;
  8.     background-image: -webkit-gradient(linear, left top, left bottom, from(#ffbe00), to(#ff5600));
  9.     -webkit-box-sizing: border-box;
  10.     -webkit-box-shadow: 0 -2px 0 rgba(0, 0, 0, 1) inset, 0 2px 0 rgba(0, 0, 0, 1) inset, -2px 0 0 rgba(0, 0, 0, 1) inset, 2px 0 0 rgba(0, 0, 0, 1) inset;
  11.     -webkit-border-radius: 20px;
  12.     width: 180px ;
  13.     height: 40px ;
  14.     display: block ;
  15.     overflow: hidden ;
  16.     padding: 7px 0 0 5px ;
  17.     margin: 0 auto ;
  18.     border: 2px solid #fff ;
  19. }

  20.  

  21. .bullet_box {

  22.     font-size: 80% ;
  23.     font-weight: bold ;
  24.     text-decoration: none ;
  25.     text-align: left ;
  26.     text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3) ;
  27.     letter-spacing: 2px ;
  28.     background-image: url(/img/bullet.png), -webkit-gradient(linear, left top, left bottom, from(#ffba00), color-stop(0.5, #ff7700), color-stop(0.5, #ff4200), to(#ff7700));
  29.     background-repeat: no-repeat, repeat-x ;
  30.     background-position: 2px 2px, 0 0 ;
  31.     -webkit-background-size: 12px 12px, auto;
  32.     -webkit-box-sizing: border-box;
  33.     -webkit-border-radius: 2px;
  34.     display: inline-block ;
  35.     overflow: hidden ;
  36.     width: 60px ;
  37.     height: 18px ;
  38.     border: 1px solid #ff7700 ;
  39.     padding: 1px 0 0 20px ;
  40.     margin-left: 5px ;
  41. }


タブサンプル

  1. ul.tab {
  2.     padding: 0 5px ;
  3.     margin: 0 auto ;
  4. }

  5.  

  6. ul.tab li {

  7.     width: 50% ;
  8.     float: left ;
  9. }

  10.  

  11. ul.tab li a {

  12.     color: #fff ;
  13.     font-size: 93.3% ;
  14.     font-weight: bold ;
  15.     text-shadow: 0 -1px 1px #000 ;
  16.     text-align: center ;
  17.     text-decoration: none ;
  18.     width: 100% ;
  19.     display: block ;
  20.     margin: 0 auto ;
  21.     -webkit-border-top-left-radius: 5px;
  22.     -webkit-border-top-right-radius: 5px;
  23.     -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset;
  24.     -webkit-box-sizing: border-box;
  25.     padding: 3px 0 ;
  26. }

  27.  

  28. ul.tab li.tab_a a {

  29.     background-image: -webkit-gradient(linear, left top, left bottom, from(#0084ff), color-stop(0.5, #0027ba), color-stop(0.5, #001873), to(#0061ce));
  30. }

  31.  

  32. ul.tab li.tab_b a {

  33.     color: #95d2ff ;
  34.     background-image: -webkit-gradient(linear, left top, left bottom, from(#005fb8), color-stop(0.5, #001a79), color-stop(0.5, #000c3a), to(#001a79));
  35.     -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 -2px 2px rgba(0, 0, 0, 0.5) inset;
  36. }


テキストにドロップシャドウ（text-shadow）

  1. text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.5) ;

  2.  

  3. text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3) ;


ボックスにドロップシャドウ（box-shadow）

  1. -webkit-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5) ;

  2.  

  3. -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset, 0 -1px 0 rgba(0, 0, 0, 0.5) inset, 0 1px 1px rgba(255, 255, 255, 0.6), 1px 0 1px rgba(255, 255, 255, 0.3), -1px 0 1px rgba(255, 255, 255, 0.3);

  4. ※insetで内側指定

○内側2pxに黒の境界線

  1. -webkit-box-shadow: 0 -2px 0 rgba(0, 0, 0, 1) inset, 0 2px 0 rgba(0, 0, 0, 1) inset, -2px 0 0 rgba(0, 0, 0, 1) inset, 2px 0 0 rgba(0, 0, 0, 1) inset;


グラデーション（text-gradient）

○オレンジ（通常）

  1. background-image: -webkit-gradient(linear, left top, left bottom, from(#ffbe00), to(#ff5600));

○オレンジ（ラスター）

  1. background-image: -webkit-gradient(linear, left top, left bottom, from(#ffba00), color-stop(0.5, #ff7700), color-stop(0.5, #ff4200), to(#ff7700));

○赤（ラスター）

  1. background-image: -webkit-gradient(linear, left top, left bottom, from(#f33529), color-stop(0.5, #8a0d05), color-stop(0.5, #6a0b05), to(#9e1209));

○青（ラスター）

  1. background-image: url(/img/bullet.png), -webkit-gradient(linear, left top, left bottom, from(#006ed3), color-stop(0.5, #004380), color-stop(0.5, #002a4f), to(#004380));

○緑（ラスター）

  1. background-image: url(/img/bullet.png), -webkit-gradient(linear, left top, left bottom, from(#92dd00), color-stop(0.5, #51ab00), color-stop(0.5, #118d00), to(#92dd00));

○黒（ラスター）

  1. background-image: -webkit-gradient(linear, left top, left bottom, from(#6e7588), color-stop(0.5, #464b5a), color-stop(0.5, #000), to(#464b5a));


背景の複数指定（multiple backgrounds）

○オレンジ（ラスター+画像）

  1. background-image: url(/img/bullet.png), -webkit-gradient(linear, left top, left bottom, from(#ffba00), color-stop(0.5, #ff7700), color-stop(0.5, #ff4200), to(#ff7700));
  2. background-repeat: no-repeat, repeat-x ;
  3. background-position: 2px 2px, 0 0 ;
  4. -webkit-background-size: 12px 12px, auto;


角丸（border-radius）

○四隅全て

  1. -webkit-border-radius: 20px;

○上右

  1. -webkit-border-top-right-radius: 20px;

○上左

  1. -webkit-border-top-left-radius: 20px;

○下右

  1. -webkit-border-bottom-right-radius: 20px;

○下左

  1. -webkit-border-bottom-left-radius: 20px;


ボックスサイズの算出指定（box-sizing）

○通常

  1. box-sizing: content-box;

○widthからborderとpaddingを引いた指定

  1. box-sizing: border-box;

透過（rgba）

  1. background:rgba(255, 255, 255, 0.2) ;
  2. border-bottom: 1px solid rgba(255, 255, 255, 0.2) ;


フォームガイド（placeholder）

○css

  1. input::-webkit-input-placeholder,
  2. textarea::-webkit-input-placeholder {
  3.     color: #999 ;
  4. }

○html

  1. <input type="text" name="～" placeholder="～" />
  2. <textarea name="～" placeholder="～"></textarea>


フォームフォーカス（autofocus）

○html

  1. <input type="text" name="～" autofocus />


その他

・iPhone 3G/OS4.0.1のSafariでcssで背景にjpg画像を指定し、その上に< img src="～.png"> とpng画像を載せたところ透過されない事例が発生。一旦横画面にすると透過された。またpngもしくはgifで指定すると問題なく表示された。このOSのバージョンのみで発生し、OS4.2.1の3Gでは問題なく透過され、また、条件に全く一致するiPhoneが他になかったため、OSが問題なのかこのiPhone自体の問題なのかは不明。

next page ソーシャルブックマークの設定方法へのリンク
previous page MovableTypeコンテスト2010

PAGE TOP