AndroidのハックはjavaScriptでやるのがBESTっぽい!!

masayoshi — Tue, 14 May 2013 01:12:46 +0000

タイトルに横文字ばかりで若干の「ルー語」っぽさが出てしまってますが、先日スマホサイトの構築をしていた時にiPhoneとAndroidでpaddingの数値に誤差が生じてしまい、色々調べてやってみたんですがCSSハックを使うというよりはjavaScriptでユーザーエージェントを取得して読ませるCSSを切り替える。という方法が一番しっくりきましたので、そのやり方+他のAndroidハックの紹介をしようと思います。

まずは配布元サイトからファイルをダウンロードしてきてください。解凍後の中に下記のソースコードを記述します。

準備はこれでOKです。あとはアンドロイドで別の記述をしたいセレクターに「.android」を頭につけて記述する。


p{
  text-align:right;
}

.android p{
  text-align:center;/*for-Android-*/
}

上記の様にCSSを書くとAndroidで観たときだけ

タグの中の文字列は中央揃え、それ以外のブラウザやデバイスで閲覧すると右揃えとなります。(※コメントアウトは分かりやすい様に付けているだけなので、無くても問題ありません。)

そして、このスクリプトのすごい所はブラウザの違いだけでなくOSの違いも判別出来るところです。例えばmacのIEやウインドウズのサファリなどの指定も出来てしまうんです。下記の例はウインドウズのサファリでの指定例です。

.win.safari p{
  text-align:center;/*for-Windows safari-*/
}

対応OS

・win – Microsoft Windows
・linux – Linux
・mac – Mac OS
・ipod – iPod Touch
・iphone – iPhone
・android – Android

対応ブラウザ

・ie – Internet Explorer (All versions)
・ie8 – Internet Explorer 8.x
・ie7 – Internet Explorer 7.x
・ie6 – Internet Explorer 6.x
・gecko – Mozilla, Firefox (all versions), Camino
・opera – Opera (All versions)
・safari – Safari
・chrome – Google Chrome

これさえあれば、IEだって怖くない!!(笑)。

スマホのホーム画面アイコンの作り方

masayoshi — Mon, 13 May 2013 03:32:02 +0000

ここ数年で圧倒的にユーザー数が増加したスマートフォン。僕も最初は「いやいや、別にガラケーでいいやん」というスタンスだったんですが、周囲の人のガラケー率の増加に伴いガラケーからiphoneに変えました。今はお金出してアプリを買いまくるという、りっぱな信者に成長しました。今回はそんなスマホのホーム画面にサイトオリジナルのブックマークアイコンを表示させようとういお話です。

これまでに、web制作をしたことがある方は「ああ、ファビコンでしょ??」ってなると思います。僕も調べるまでは「あれは多分ファビコンじゃない??」って感じでした。・・・が、いくらファビコンを設定しても出ない出ない(笑)。

ネットで調べるとすぐに解決策が判明、なんとファビコンじゃーないっっっ!!という落ちでした。前置きはこのくらいにしてさっそく作成していきましょう。

表示させるアイコンを作る!!

なにはともあれ、表示させるものを作らなければ話が進まないのでどのグラフィックソフトでも構わないです。(ｊｐｇ、gif、png、bmpの形式で保存出来れば)僕はフォトショップでやりました。

114px×114pxのカンバスで作成してください。正方形であればこのサイズより大きくても構わないらしいのですが、「114×114」が既定サイズらしいのでこのサイズで作成することを推奨します。そしてiphoneの場合(というか、Android持ってないのでAndroidがどうなのかわかりません・・・。ごめんなさい。)角丸にしなくちゃいけないんじゃないの!?って思うかもしれませんが、勝手に角丸に切り抜かれます。なので心配ご無用です。ってか角丸にしかならないんですよねー(笑)。

保存形式はｊｐｇ、gif、png、bmpのどれでもいいらしいんですが一番きれいなんで「png」で保存しましょう。

HTMLマークアップ

内に下記のソースコードを追加してください。

ちなみに

にするとiphoneの「キラリン☆」って感じのグラデーションを外せます。

ファイルのアップ

このホーム画面用アイコンは別にどこに配置して貰っても構わないので適宜自分のサイトの適当なところにアイコンをUPしてください。もちろんHTMLもちゃんとUPしてくださいね。