mania-ku

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

【スマホ】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】Androidの文字を太字にする方法2種

これはadvent calendar8日目の記事です。
7日目の昨日はブログを更新する便利ツールでした。

Android2系では日本語が太字にできないのですが、それの解決法2種です。

text-shadowで太字風にする

たぶんいろんなサイトでよく使われている方法です。
でも若干にじんじゃうんです・・・

text-shadow:1px 0 1px 色

font-familyをmonospaceにする

これは今回調べていて見つけた方法です。
太字にしたいところだけ太字指定と一緒にfont-familyを指定するだけです。

font-family: monospace;
font-weight: bold;

これだと太文字していできなかった機種もできました。理由は不明です・・・
ただし、iPhoneでHelveticaを使いたいなら、振り分けが必要です。
参考:Android スマートフォンの文字を太字にする場合|栃木県宇都宮市のWEBデザイナーの備忘録

9日目の明日はカンマ区切りの金額の正規表現です。
へばのー;)

【Android】ギャラクシー3Sを回転すると、画面が白くなることがある

ギャラクシー3Sを回転すると、画面が白くなることがあります。
更新すると直るんですが。。。

(たぶん)原因

metaにwidthとinitial-scaleを同時指定しているのが悪いっぽい。

修正方法

下記のように修正したら、起こらなくなりました。

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

【スマホ】画面を回転しても、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);
    });
}

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

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

このバグですが、現象としては下記のときに起きるみたい

  • ・Android4系のみ(4系でもGALAXY S III SC-06D起きないっぽい)
  • ・pタグでテキストのみ

対処法としては、二種類あります

  • ・バグが起きた要素に背景色・背景画像を指定
    (ただし、display:tableやdisplay:table-cellなんかだと効かない)
  • ・viewportの指定でなんとかする(PCサイト用だと下記コードの要な感じで)
(function(){
var agent = navigator.userAgent;
if (agent.search(/Android 4/) !== -1) {//Android4系のみ。下位バージョンで効くとバグが起きる
$("head").append($('<meta name="viewport" content="width=device-width,user-scalable=yes,target-densitydpi=device-dpi,initial-scale='+(screen.width/***)+'">'));
//***のところは、コンテンツのサイズを入れる
}
});

なぜかこのバグぐぐってもあんまり対処法が見つからない・・・気づいている人が少ないのか、それとも4系まだ少ないから?いろんなサイトで起きているみたいですが・・・

参考:
[Android][css] 「ページの自動調整」でデザインが崩れる
Android4.0端末で右側に空白ができちゃう系トラブル
Android 4で改行位置が狂う | count0.org