mania-ku

何か作りたいプログラマ未満。

【iPhone】background-sizeがiOS7以降効いていない場合

background-sizeを使っている場所でiOS7以降で効いていないのは、backgroundのショートハンドがCSS3仕様対応したためです。
background-sizeプロパティを先に書いて、backgroudプロパティを後に書いているときなどに起こります。

参考:CSS3適合UA(iOS7等)に伴うbackground-sizeの指定順に注意|Web制作 W3G

【スマホ】selectのテキストは左右中央にできるのか?

できるのかな?とtext-align: center;を試しましたが、動かず。

ぐぐったらtext-align: -webkit-center;で左右中央にできるというのでやってみたけれど、iOS7・iOS8で効きませんでした。

bugfix

試行錯誤したら動きました!
※iPhoneと同じCSSだとAndroidで動かない(labelクリックしてもselectが開かない?)みたいです。

//HTML
<label>
    <select>
        <option>選択1だよ〜</option>
        <option>選択2だよ〜</option>
        <option>選択3だよ〜</option>
    </select>
</label>


//CSS
select { //Android
    text-align: center;
}

@media screen and (max-device-width: 480px) { //iPhone
    label {
        display: -webkit-box;
        display: box;
        box-pack:center;
        -webkit-box-pack:center;
        background-color: #fff;
        border: 1px solid #CCC;
        border-radius: 6px;
        cursor: pointer;
    }

    select {
        border: none;
    }
}

スマホサイトコーディングの覚え書き:TIPや(多分)仕様

TIP

:beforeや:afterのcontent内で実体参照(HTMLでは&〜のもの)を使いたい

こちらの変換スクリプトを使うと便利です。

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

  • ・iPhone/Android:Shift(↑キー)を連続でタップする
  • ・Xperia:Shift(↑キー)を1度タップする

※ただしiPhoneだと、キーボード設定で「Caps Lockの使用」をONにしないとダメなようです。

(多分)仕様

input[type=file]のサポート

iOSでは6以上、Androidでは3以上です。
File APIを使えば、サポート外でも大丈夫なようです。

Youtubeのサポート

アプリにとばす

アプリを入れていないとnot foundと表示されます。
アプリの有無はjsなどで確認できないので、お勧めしません。

埋め込み動画

大体の機種でクリックしたら、自動で全画面になりますし、一部の機種では全画面ボタンクリックで全画面になります。
ただし、FlashPlayerのバージョンが低い一部の機種では見ることができません。

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

たぶんフォントの問題だと思います。

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

これは地味にイライラしますよね・・・
docomoのガラケーもそうだった気がします。

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

つまり壁紙コンテンツなどが保存ができません。

参照:Android の標準ブラウザで、ファイルがダウンロードできない(Basic認証、POST、not found) – PC・通信メモ

スマホサイトコーディングの覚え書き:コードやCSS編

box-sizing

paddingとborderを幅や高さに含めるかどうかのプロパティ。
border-boxだと含めるになります。
%を使うスマホサイトやリキッドデザインの際はとても便利です!

background-origin

背景の基準位置のプロパティ。
border-boxだと、borderの下まで背景を引くことができます。
content-boxだと、paddingの内側で背景にアイコンを表示したいときに便利です!

background-size

背景画像のサイズを指定するプロパティ。
retina対策で2倍サイズで作った画像を半分で表示させたりすることができます。

display:boxで横並びした要素の片方だけ幅を可変にする

例えばテキストとinput[type=text]を横並びするときに、input[type=text]のほうだけ幅を可変にするときに使います。

<p class="name">
	<span>名</span>
	<input type="text">
</p>
p.name {/* 親 */
    display: -webkit-box;
    display: box;
    -webkit-box-align: center;
    box-align: center;
}
p.name input {/* 子の幅を可変にしたいほう */
    display: -webkit-box;
    display: box;
    -webkit-box-flex: 1;
    box-flex: 1;
}

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

p.btn 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は画像,グラデの順番で個別に指定する。

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

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

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

参考サイト:
iPhoneで特定のフォントサイズでできる謎の余白の対処法 | NxWorld

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

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

スマホサイトコーディングの覚え書き:ツール編

Can I use

HTML5やCSS3、SVGなどブラウザの対応を調べるサイト。
必要なプリフィックスもわかります。
PCサイトをHTML5で作るときにも使えます。
菊池崇さんのセミナーで知りました。
ちなみに菊池さんのレスポンシブの本はオススメ。

Ultimate CSS Gradient Generator

グラデを作るツール。
フォトショっぽいUIなので、フォトショに慣れていたら使いやすいです。

GradientFinder

こちらは同じグラデでも、画像からグラデを作るツール。
複雑なグラデやグラデの詳細な情報が残っていないときには便利です!
ただし古いバージョンのwebkitのグラデには対応していないので補完する必要があります。

LONG SHADOWS GENERATOR

ロングシャドウを作るツール。
今回のブログデザインのときにもお世話になりました。

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

吹き出しとかに使うCSSの三角形のジェネレーター。

border-imageシュミレーター

border-imageのジェネレーター。
ただし、このプロパティはレティナ対応はしていないようなので、こちらのコードを参考にしてください。

【Advent calendar】iPhone/iPadでlabelを使う方法

アドベントカレンダーの時期に、毎日ブログ書こうかなーと思っていたら、旦那さんが掃除中にMac Book Proを割ってしまいました。
しょうがないので?旦那さんにAir与えてみて(クリスマスプレゼント)、修理中はそれを借りることにします。(英字キーボード使いにくい…)
なるべく20日間毎日更新できるように頑張ります!そのため、題材は自由です。

1日目の今日は「iPhone/iPadでlabelを使う方法」です。

私はフォームにはなるべくlabelをつけて、押しやすくしたい方です。ユーザビリティってやつです。
ただiPhone/iPadではそのままでは動きません。
ぐぐったところ、2つ解決策があるようです。

イベントを追加

labelにonclick=””を追加します。

<label for="checkbox" onclick=""></label>

CSSを追加

labelのCSSにcursor: pointer;を追加します。こちらは今回の記事を書こうとして、もう一度調べたら見つけたもの。
こちらのほうだと一箇所で解決するので、簡単で良さそうです。
普段使うreset.cssやnormalize.cssに追加しておいてもいいかもしれませんね。

label {
	cursor: pointer;
}

なお、この記事はlabelタグを設定した領域が、iPhoneでタップしても反応しない件を参考に書きました。
明日はdisplay: box内で改行する方法について書く予定です。
see you next 😉

【iPhone】4Sでアイコンと文字の間に必要以上にスペースが空く

iPhone4Sでアイコンを文字の横に置いてmarginとかpaddingを指定したとき、フォントサイズが11px以下だと文字とアイコンの間が指定以上に空く現象がありました。
フォントサイズ12px以上だと指定したとおりになります。

アイコンの設置方法としては、下記の2種類で試しました。

  • 文字の横にそのままアイコン画像を置く
  • :afterで作ったボックスの背景にアイコン画像を指定

理由はよくわかりませんが、なんでだろう・・・

【スマホ】画面を回転しても、viewportを320pxで固定したいとき

週末飲酒族です。夏だよ!ビールが(飲めないけど)うまい(らしい)!日本酒大好き!

viewportの固定はいろいろ試した結果、ギャラクシーS3とiPhoneがうまくいきませんでした。

<meta name=”viewport” content=”width=320″>のみ

<meta name="viewport" content="width=320">

ギャラクシーS3がリキッドのまま・・・

jQueryでなんとかする

to-Rさんの記事の(2種)を試したら、iPhoneがフォントサイズが小さいまま。
(もしかしたら、試しにやったやつなんか間違ってたのかも・・・)
http://blog.webcreativepark.net/2011/01/11-023827.html
http://blog.webcreativepark.net/2012/01/06-110622.html

上の2つをなんとかうまく融合する

まずviewportはiPhone向けに書く

<meta name="viewport" content="width=320">

アンドロイドのときは(ほんとはギャラクシーS3だけでいいんだけど。)、jQueryでviewport上書きつつzoomを指定。

※要jQuery

var agent = navigator.userAgent;
if (agent.search(/Android/) !== -1) {
    $('meta[name=viewport]').attr({'content': 'width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no'});
    $(window).bind('resize load', function(){
        $("html").css("zoom" , $(window).width()/320);
    });
}

これでなんとか思いどおりになったと思う。
テストした機種の数少ないので、バグあるかも・・・