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

#ツール

##Can I use
http://caniuse.com/
HTML5やCSS3、SVGのブラウザの対応を調べるサイト。
プリフィックスもわかる。

Can I email

https://www.caniemail.com/
メールクライアントの各タグの対応を調べるサイト。

brumm.af

https://brumm.af/shadows
滑らかな影を作成（イージング）

Easings

https://easings.co/
具体的な適用例を確認しながらcubic-bezier()の値をコピー・調整できる

box-shadow

box-shadowとborder-radiusジェネレーター

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

##CSSの三角形ジェネレーター
http://apps.eky.hk/css-triangle-generator/

##ニューモーフィズムのCSSジェネレーター
https://neumorphism.io/

##SVGパス構造をひとつずつ解説してくれるビジュアルツール
https://svg-path-visualizer.netlify.app/#M140%2020C73%2020%2020%2074%2020%20140c0%20135%20136%20170%20228%20303%2088-132%20229-173%20229-303%200-66-54-120-120-120-48%200-90%2028-109%2069-19-41-60-69-108-69z

##border-imageシュミレーター
http://border-image.com/

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

##css画像フィルタージェネレーター
http://www.cssfilters.co/
InstagramのようなCSSの画像加工ができ、コードを吐き出してくれる

##補色（反対色）を作成

border-radiusジェネレーター

簡易版：https://9elements.github.io/fancy-border-radius/
フル：https://9elements.github.io/fancy-border-radius/full-control.html

transform:matrix()ジェネレーター

SVG圧縮GUI

SVG画像の周りの余分な余白を削除

グラデ

###Ultimate CSS Gradient Generator
https://www.colorzilla.com/gradient-editor/
グラデを作るツール。フォトショっぽい。

Gradienta

https://gradienta.io/
複雑なグラデがコピペできるツール

#コードやCSS

##iOS Safariでinput要素のfocusを簡単に外す方法 - Qiita

##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/

NFD→NFC変換ツール

#TIP

##content内で実体参照を使いたい
変換スクリプト：
http://tenderfeel.xsrv.jp/css/787/
使い方：
http://qiita.com/ituki_b/items/b3627ab32a1f1c4546cf

##スマホで大文字を連続入力する方法
iPhone/Android：Shift（↑キー）を連続でタップする
Xperia：Shift（↑キー）を１度タップする
※ただし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が実装がされていない

#その他

• iPhone - スマホサイトコーディングの覚え書き（右側アイコンとborderに背景画像を指定する飾り枠） - Qiita
• スマホでselectのテキストは左右中央にできるのか - Qiita