タグ

mobileとcss3に関するKanasansoftのブックマーク (2)

  • スマホ対応の新潮流「レスポンシブWebデザイン」とは? (1/3)

    スマートフォンの普及を背景に、「レスポンシブWebデザイン」(Responsive Web Design)という制作手法が海外で注目を集めている。レスポンシブWebデザインとはどのようなアプローチなのか? 実例で解説する。 ウィンドウサイズを基準にデザインを調整 レスポンシブWebデザインとは、デバイスごとに複数のデザインを用意するのではなく、ブラウザーのウィンドウサイズに合わせてデザインをフレキシブルに調整する制作手法だ。モバイルサイトの制作では、デバイスやスクリーンサイズごとにページを振り分ける方法が一般的だが、レスポンシブWebデザインではHTMLはそのままに、CSS3のメディアクエリーを利用してスタイルシートだけでデザインを変更する。 レスポンシブWebデザインは、2010年5月、米国のイーサン・マルコッテ氏によって提唱され、海外では企業サイトを含む多くのWebサイトで採用されてい

    スマホ対応の新潮流「レスポンシブWebデザイン」とは? (1/3)
    Kanasansoft
    Kanasansoft 2011/07/20
    レスポンシブWebデザイン(Responsive Web Design)の解説。
  • スマホサイト:Webアプリモードで意外と書かれていない落とし穴 - Kaleidoscope

    ちょっと今回はまめ知識的な内容です。 最近、「iPhoneでWebアプリを作成」といった記事をよく見かけます。 (jQuery Mobileなどを利用した開発方法は置いといて) HTML5+CSS3+JavaScriptで一から作成する方法について、意外と肝心な注意点が抜けてるように思います。 とくに、よくmetaタグを使った「Webアプリモード(フルスクリーンモード)」にする方法が書かれていたりします。 <meta name="apple-mobile-web-app-capable" content="yes" /> これをやると、URLバーとかが無くなって、サイトがネイティブアプリっぽくなってかっこいいんですよね。 これで、サイトをアプリっぽく見せられる!ってちょっと興奮しちゃいますよね。 ただ、これって意外な落とし穴があるんです( ̄▽ ̄;) 今回は、僕が知ってる大きな2つの注意点を

    スマホサイト:Webアプリモードで意外と書かれていない落とし穴 - Kaleidoscope
  • 1