レスポンシブwebデザインで制作する時のポイント
先日、CSS Nite in Ginza, Vol.59「DreamweaverによるレスポンシブWebデザインの実装」に出席してきました。 とても勉強になったので復習も兼ねてレスポンシブwebデザインに関して、セミナーで学んだ内容に自分の調べた点を加えてまとめます。 （一部の図はセミナーの資料を元に作成してます。） 始めに：スマートフォンサイト制作の選択肢 スマートフォンサイトを制作するには幾つかの方法があります。 アプリ 独自系 スクラッチ（0からスマートフォンサイト用に構築） jQuely mobileを使用 流用系 現在のデザインをほぼ流用、調整のみ レスポンシブ・デザイン どの方法にもメリットデメリットはあり、どれが最適かは サイトのコンセプトや規模、予算など複合的に考えて選択する必要があります。 今回のエントリーではレスポンシブ・デザインのみにふれます。 レスポンシブwebデザ
スマホサイト：Webアプリモードで意外と書かれていない落とし穴 - Kaleidoscope
ちょっと今回はまめ知識的な内容です。 最近、「iPhoneでWebアプリを作成」といった記事をよく見かけます。 （jQuery Mobileなどを利用した開発方法は置いといて） HTML5+CSS3+JavaScriptで一から作成する方法について、意外と肝心な注意点が抜けてるように思います。 とくに、よくmetaタグを使った「Webアプリモード（フルスクリーンモード）」にする方法が書かれていたりします。 <meta name="apple-mobile-web-app-capable" content="yes" /> これをやると、URLバーとかが無くなって、サイトがネイティブアプリっぽくなってかっこいいんですよね。 これで、サイトをアプリっぽく見せられる！ってちょっと興奮しちゃいますよね。 ただ、これって意外な落とし穴があるんです(￣▽￣;) 今回は、僕が知ってる大きな２つの注意点を
Android,iPhone用ページを作成するにあたっての注意点 - PHP,MySQL,Flex,JSな日々＋イラストとか
Android,iPhone用ページを作成するにあたっての注意点 ちょいとAndroidとiPhone用のページを作っているのですが、解像度もブラウザも一緒だからあまり気にしなくていいのかなぁって思ってたそんなことはなかったのでメモ。 iPhoneでのsafari Androiでのsafari レイアウトが崩れてる！！ 原因は単純でAndroidの場合は右のスクロールバーの横幅分だけ減ってます。６ピクセル。 これから両方に対応したページを作ろうかなぁって思っている方は覚えておいたほうがいい感じ。 せっかくなので表示される解像度を表にしてみました。 機種 横 高さ Android 314 429 iPhone 320 356
Webクリップアイコンを設置する- リンゴが好きでぃす♪2.0 -
iPhone/iPod touch用に自サイトのWebクリップアイコンを設置する iPhone/iPod touchのSafariでブックマークの登録先をホーム画面上にするよう指示すると、ホーム画面には「Webクリップアイコン」として登録される。これはMac OS X上で言うところのWebインターネットロケーションファイル（右図、拡張子＝webloc）と役目は同じだ。 特に何の仕組みも施されていないWebページをiPhone/iPod touch上で登録する場合、このアイコンのデザインは右図のようにWebクリップ（ページのスクリーンショット）が適用されるようになっている。これでも十分かもしれないが、できればファビコンのようなオリジナルのアイコンが表示された方がページを作っている方も利用する方も楽しいだろう。 というわけで以下、このオリジナルのWebクリップアイコンの作り方とその設置方法。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
