iPhone
Android
CSS3

スマホサイトコーディングの覚え書き(ツール・コード・CSS・TIP等)

More than 1 year has passed since last update.

ツール

Can I use

http://caniuse.com/
HTML5やCSS3、SVGのブラウザの対応を調べるサイト。
プリフィックスもわかる。
PCサイトをHTML5で作るときにも使える。

Ultimate CSS Gradient Generator

http://www.colorzilla.com/gradient-editor/
グラデを作るツール。フォトショっぽい。

GradientFinder

http://gradientfinder.com/
画像からグラデを作るツール。フォトショのグラデ使われなかったときとか超便利!
ただし古いバージョンのwebkitのグラデには対応していないので自分でなんとかする。

LONG SHADOWS GENERATOR

http://sandbox.juan-i.com/longshadows/
ロングシャドウを作るツール。

CSSの三角形ジェネレーター

http://apps.eky.hk/css-triangle-generator/

border-imageシュミレーター

http://border-image.com/

Blend

http://colinkeany.com/blend/
カラーパレットからグラデを作れるツール。
フラットやマテリアルのパレットから選ぶこともできる。

css画像フィルタージェネレーター

http://www.cssfilters.co/
InstagramのようなCSSの画像加工ができ、コードを吐き出してくれる

補色(反対色)を作成

http://eelife.org/COLOR/hosyoku.html

コードやCSS

box-sizing

paddingとborderを幅や高さに含めるかどうか。
border-boxだと含めるになる。

background-origin

背景の基準位置。
content-boxで背景の位置を指定すると、ボタンの右側のアイコン付けるときなんかがラク。

background-size

背景画像のサイズを指定する。
retina対策で二倍サイズで作った画像を半分で表示させたりする。

display:boxで横並びした要素の片方だけ可変

p.name {/* 親 */
    display: -webkit-box;
    display: box;
    -webkit-box-align: center;
    box-align: center;
}

p.name span {/* 子の幅が固定のほう */
    display: block;
    width: 100px;
    text-align: center;
}
p.name input {/* 子の幅を可変にしたいほう */
    display: -webkit-box;
    display: box;
    -webkit-box-flex: 1;
    box-flex: 1;
}

背景画像とグラデを同じ要素に指定する

p.name a {
    background: rgb(181,189,200) url(http://jsrun.it/assets/r/7/z/X/r7zXg.png) right center no-repeat; /* Old browsers */
    background: url(http://jsrun.it/assets/r/7/z/X/r7zXg.png) right center no-repeat,  -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(181,189,200,.8)), color-stop(36%,rgba(130,140,149,.8)), color-stop(100%,rgba(40,52,59,.8))); /* Chrome,Safari4+ */
    background: url(http://jsrun.it/assets/r/7/z/X/r7zXg.png) right center no-repeat,  -webkit-linear-gradient(top,  rgba(181,189,200,.8) 0%,rgba(130,140,149,.8) 36%,rgba(40,52,59,.8) 100%); /* Chrome10+,Safari5.1+ */
    background: url(http://jsrun.it/assets/r/7/z/X/r7zXg.png) right center no-repeat,  linear-gradient(to bottom,  rgba(181,189,200,.8) 0%,rgba(130,140,149,.8) 36%,rgba(40,52,59,.8) 100%); /* W3C */
    -webkit-background-size: 20px 20px,auto auto;
    background-size:  20px 20px,auto auto;
    -webkit-background-origin: content-box, padding-box;
    background-origin: content-box, padding-box;
}

※background-sizeとbackground-originは画像,グラデの順番で個別に指定する。

サンプル:http://jsdo.it/Ituki/o21j

CSSだけで任意の間隔の破線を描く

http://12px.com/blog/2014/02/dotted/
※リンク先では要素に破線をかけてるけど、空の要素を作りたくない場合はbefore,afterでいける。

横ストライプ、縦ストライプ、斜めストライプ、ひし形のタイル上パターン、チェック状のパターンをCSS3のグラデーションで作る

http://www.html5-memo.com/css3/css3_background/

TIP

content内で実体参照を使いたい

変換スクリプト:
http://tenderfeel.xsrv.jp/css/787/
使い方:
http://qiita.com/ituki_b/items/b3627ab32a1f1c4546cf

スマホで大文字を連続入力する方法

iPhone/Android:Shift(↑キー)を連続でタップする
Xperia:Shift(↑キー)を1度タップする
※ただしiPhoneだと、キーボード設定で「Caps Lockの使用」をONにしないとダメらしい

iOS + Safari + Basic認証のサイトにアクセス出来ない

http://gatespace.jp/2014/06/11/ios-safari-basic-access/

画像は高解像度低画質で作成して、容量を減らす(見た目はほとんど変わらない)

http://tokkono.cute.coocan.jp/blog/slow/index.php/web-technology/future-of-responsive-design/

(多分)仕様

input[type=file]のサポート

iOSでは6以上、Androidでは3以上。
File APIを使えば、サポート外でも大丈夫らしい?

Youtubeのサポート

アプリにとばす

アプリを入れていないとnot foundと表示される。
アプリの有無はjsなどで確認できないので、あまりよろしくない

Android - URLスキームを利用して、アプリが入ってたらアプリ起動、入ってなかったらストアへ!を実現。 - Qiita

埋め込み動画

大体の機種でクリックしたら、自動で全画面になる。
一部の機種では全画面ボタンクリックしたら全画面になる。
ただし、FlashPlayerのバージョンが低い一部の機種では埋め込み動画も見れない

自動再生

OSの仕様上できない

●(黒丸印)が小さい機種がある

たぶんフォントの問題?

Androidはパスワード認証のID入力のときに日本語入力になる

地味にイライラする
docomoのガラケーもそうだった気がする・・・

iOS8のSafariで使えるクレジットカードのスキャン機能

HTML - [iOS8]クレジットカード読み取りに対応したフォームの作り方 - Qiita

Retinaディスプレイでは0.5pxの指定ができる

CSS - Retinaディスプレイは0.5pxを表示できるか - Qiita

bugか何か

iPhoneでは12px以下のフォントサイズは使わない

12px以下はマルチバイトの幅計算がおかしくなる(右に謎の隙間ができる)のでなるべく使わない。
使うときは下記のCSSも同時に使う。

.font_small {
    letter-spacing: -0.01px;
}

参考サイト:http://www.nxworld.net/tips/iphone-mysterious-margin.html
http://blog.webcreativepark.net/2011/06/16-103025.html

Android2.3以下では11pxのフォントサイズは使わない

11pxはマルチバイトの幅計算がおかしくなる?(右に1em程度の隙間ができる)ので使わない。
iPhoneのCSSハックも効かないようです。

iPhoneでlabelを効かせる

http://qiita.com/ituki_b/items/8a0cd4fc5021faca7210

Basic認証かかってると、Android標準ブラウザでファイルのダウンロードができない

つまり壁紙とかの保存ができない。
参照:http://god-support.blogspot.jp/2012/06/android-basic.html

Android4系で幅が効かない、空白ができる

【Android】4系で幅が効かずに空白ができることがある件について | mania-ku

iOS7でbackground-sizeが効かない

backgroundのショートハンドがCSS3仕様対応したため、上書きされているのかも。
background-sizeがiOS7だけおかしいとき - Qiita

iOS7とiOS8で:checked+label+要素が効かない

間接セレクターか疑似クラスを使おう。
ios7 - 【iPhone】:checkedに複数の隣接セレクターが効かない - Qiita

iOS8.0〜iOS8.2でaタグ内のimgにCSSのzoomが効かない

【iOS8/Safari】aタグ内のimgにCSSのzoomが効かない - Qiita

iOS8で画像に緑色の線画がはいる・画像の下4分の1くらい緑色になる

【iOS8】画像に緑色の線画がはいる・画像の下4分の1くらい緑色になる - Qiita

iPhone6 Plusでbox-shadowが効かない

iPhone6plus - 【iPhone6 Plus/iPhone6+】box-shadowが効かない - Qiita

Chromeで指定サイズよりフォントが大きくなる

【Chrome】指定サイズよりフォントが大きくなる - Qiita

iOSの8.4.1でリンクが効かない(ダブルタップすると遷移する)

主にopacityが指定されているとき。それ以外でも起こりうる。
CSS - iOS8.4.1以降でhoverにopacityを設定するとリンクがダブルタップしないと動いてくれない問題にでくわした話 - Qiita
iOS 8.4.1の:hover問題 - to-R

Android4.0系でiframeが不具合多発

使わないのが無難
Android4.0とiframe - to-R

iOS8系?でposition: fixedを指定した要素のz-indexが無視される(いるけど表示的に要素の下に隠れる?)

z-indexが効いていない要素 {
   -webkit-transform: translate3d(0,0,0);
}

iOSでposition:fixedした要素がスクロール中だけz-indexを無視して前面に表示されてしまうバグ - Qiita

Android標準ブラウザで一度overflow:hiddenつけてはずすとスクロールできなくなる?

これをbodyに追加すれば直るっぽい。

body {
   overflow: scroll;
   -webkit-overflow-scrolling: touch;
}

Android4.0.3で:checkedと間接&隣接セレクタの挙動があやしい

要素間の距離があると、:checkedの状態変化に追いつけていない。
メニューの開閉はjsのほうがよさげ。

Android4.0.3(エミュレーター)の標準ブラウザで:checkedと間接&隣接セレクタが挙動あやしい ::ハブろぐ

Android 4.4未満の標準ブラウザではflex-wrap: wrapが実装がされていない

その他