スマホサイト：Webアプリモードで意外と書かれていない落とし穴 - Kaleidoscope
ちょっと今回はまめ知識的な内容です。 最近、「iPhoneでWebアプリを作成」といった記事をよく見かけます。 （jQuery Mobileなどを利用した開発方法は置いといて） HTML5+CSS3+JavaScriptで一から作成する方法について、意外と肝心な注意点が抜けてるように思います。 とくに、よくmetaタグを使った「Webアプリモード（フルスクリーンモード）」にする方法が書かれていたりします。 <meta name="apple-mobile-web-app-capable" content="yes" /> これをやると、URLバーとかが無くなって、サイトがネイティブアプリっぽくなってかっこいいんですよね。 これで、サイトをアプリっぽく見せられる！ってちょっと興奮しちゃいますよね。 ただ、これって意外な落とし穴があるんです(￣▽￣;) 今回は、僕が知ってる大きな２つの注意点を
「スマホ対応サイト制作 初心者向け」 -2.画像をCSSで操る編（前編）- - Kaleidoscope
【目次】 1.メニュー編 2.HTMLとCSSで画像を操る編（前編） 2.HTMLとCSSで画像を操る編（後編） さて、前回はCSSでスマホ向けにする超基本の紹介でした。 が…実際のところ、あんな超シンプルなサイトは無い訳で… 実践となると、もう少し工夫が必要になってくると思います。 そこで、今回はサンプルをもう少し現実的な形にして、 スマホ化してみたいと思います。 今回のサンプルファイルです。 smart_sample02.zip ＜今回のポイント＞ 1．要素の取捨選択 → 要らない要素はdisplay:none; 2．HTMLとCSSだけで画像を振り分ける → HTMLソースにPC用とスマホ用の両画像を配置。idやclass指定で、CSSでdisplay:none; 3．CSS3グラデーションの活用＆疑似要素を使ったカスタマイズ 今回のサンプルとなるサイトはこんな感じです。 前回よりも
「スマホ対応サイト制作 初心者向け」-2.画像をCSSで操る編（後編）- - Kaleidoscope
【目次】 1.メニュー編 2.HTMLとCSSで画像を操る編（前編） 前編の続きです。（前編はこちら） 3．CSS3グラデーションの活用 ヘッダはできあがりましたが、まだメニューの画像がヘンです。 こちらも、ヘッダでおこなったような方法が取れなくもないのですが、 さすがにメニューは５個もあるし、その分HTMLソースに記述するのは、なんだか気が引けます。。。 幸い画像がただのグラデーションなので、どうにかCSSを使って対応できるかもしれません。 CSS3には、グラデーションを描く機能があるため、それを活用してみたいと思います。 ★まず、メニュー画像は全てdisplay:none; この手法はもうおなじみ。 imain.cssに追記 #globalNav li>a>img{ display:none; } すると… 当然なのですが、メニューが無くなった。。。 メニュー画像を消してしまったので、
「スマホ対応サイト制作 初心者向け」みたいな感じで書いてみた -1.メニュー編-（※iPhone寄り） - Kaleidoscope
【目次】 1.メニュー編 2.HTMLとCSSで画像を操る編（前編） 2.HTMLとCSSで画像を操る編（後編） 今持ってるPCサイトをスマホ対応したいなぁ…と思ってるものの、 「どこから手を付けていいのやら、わからん！！」って方も多いのではないでしょうか？ ということで、記事でも書いてみっかぁ！と、なぜかやる気になったので、連載形式で書いてみることにしました。 ただ、途中で飽きたり、やる気が無くなったら、予告無く終了する可能性大です(￣▽￣;) 僕自身、人に教えられるほどのスマホサイト制作の熟練者というわけでは無いので、もっと良い手段や方法があるかもしれません。 「ここはこうしたらいい」など、ご意見ありましたら、逆に教えてください(^-^; 【まずはじめに】 スマホサイトと言っちゃったものの、とりあえずはiPhone向けのサイトを基準とします。 Androidの「ブラウザ」も、iPhon
スマホサイトの作り方で、あんまり書かれてないことを書いてみた - Kaleidoscope
【スマホ対応サイト制作のより詳しい記事はこちら】 1.メニュー編 2.HTMLとCSSで画像を操る編（前編） 2.HTMLとCSSで画像を操る編（後編） スマホサイトの作り方関連のブログとかを見てて、viewport周りの基本的な設定は書かれているのですが、 個人的に重要だと思うポイントが、なかなかどなたも書いてらっしゃらないような気がするので、まとめてみました。 それは、 とにかく内側のHTML要素をハミ出さないように作る どうしてか？ ふつうは、スマホサイトというのは縦スクロールしかさせたくないですよね。 例えば、iPhoneで言うPortrait（縦）表示のとき、横幅320pxを超えたページ構成になると、 おかしな横スクロールが発生してしまいます。 viewportで拡大とかの禁止をおこなっていても、そうなります。 （まぁ、拡大とは意味が違うので当然なのですが。。。） 具体的にどうい
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
