スマホサイトのコーディング2013/05/19

絵やデザインが好きで入った人が一番最初にぶつかるのがコーディングです。私も全く楽しくありませんでした・・・。 だって、まず、テーブルレイアウトからはいりましたからね・・・。 以下新規スマホサイト作るときの注意点です。

• googleのクロームでコーディング。アンドロイドのブラウザがクロームに似ていること、iphoneのブラウザがsafariなので。

• ヘッドの直下に、meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1"をいれる。視領域やズームなどの設定をするmeta要素がviewport。

2013年4月にグーグルが今Chromeで使ってるレンダリングエンジンWebKitの使用をやめ、モバイルもPCも独自のBlinkに乗り換えると発表しました。 ということは、クロスブラウザがますますめんどくさくなる・・・取り合えずは今の時点では大丈夫・・・。ぎょ～～～。

FireFoxもOSを出すと言ってるし、mozira系ももちろん考える。cssのグラデーション、ボックスシャドウは記述が違うので注意。

ボックスシャドウ

-moz-box-shadow: 2px 2px 2px rgba(0,0,0,0.4);/* Firefox */
-webkit-box-shadow: 2px 2px 2px rgba(0,0,0,0.4);/* Chrome,Safari */
-o-box-shadow: 2px 2px 2px rgba(0,0,0,0.4);/* Opera */
-ms-box-shadow: 2px 2px 2px rgba(0,0,0,0.4);/* ie */

背景グラデーション

background: -webkit-linear-gradient(top, #fff 50%, #ccc);/* Chrome,Safari */
background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ccc));
andoroidでは通常のmozira系グラデが効かないことあり */
background: -moz-linear-gradient(top, #fff 50%, #ccc);/* Firefox */
background: -o-linear-gradient(top, #fff 50%, #ccc);/* Opera */
background: -ms-linear-gradient(top, #fff 50%, #ccc);/* あんまりいらないみたい */

filter: progid:DXImageTransform. Microsoft.gradient(GradientType=0,startColorstr='#ffffff', endColorstr='#cccccc');/*PCサイトie用 */

角丸さん

border-radius: 10px;        /* CSS3草案 */ 
-webkit-border-radius: 10px;    /* Safari,Google Chrome用 */ 
-moz-border-radius: 10px;   /* Firefox用 */  

あと、スマホサイトで要素がないとfooterが変な位置まで上がってしまうので、 footerFixed.js というのを使わせて頂きました。 私のコーディングに問題あったのかも・・・。 スマホサイトで、要素がないと少しbottomに隙間が空いてしまったので、マージンで調節 してあげるといいです。 head要素に、script type="text/javascript" src="footerFixed.js" を読み込んであげてください。

スマホサイトで第二階層から戻るとき、とても便利なjsの前のページに戻るボタン 戻る onClick="history.back(); return false;"

andoroidに関しては、ユーザーがまだ比較的多いver2.3.4ぐらいを買って 検証してみるのが一番いいと思います。古い方で表示されればわりとOKです。