タグ

CSS3とmobileに関するblanc2005のブックマーク (3)

  • WebページをRetina対応させるテクニック~実践編

    WebページをRetina対応させるテクニック~実践編:jQuery×HTMLCSS3を真面目に勉強(5)(1/3 ページ) 前回のWebにおけるピクセルの基的な話を踏まえ、今回はRetinaディスプレイをはじめとした高精細ディスプレイにWebページを対応させるテクニックを紹介する。 前回(WebページをRetina対応させるテクニック~基礎知識編)はWebにおけるピクセルの基的な話をしました。今回はそれを踏まえた上で、Retinaディスプレイをはじめとした高精細ディスプレイにWebページを対応させるテクニックを紹介します。 CSS Spriteで複数の解像度に対応 最も原始的な対応方法です。一般的なPCディスプレイと同じ要領で作成した画像をRetinaディスプレイに使用すると、にじんだように表示されてしまいます。デバイス上では同じサイズでも、使われているピクセル数のタテ・ヨコが2

    WebページをRetina対応させるテクニック~実践編
  • Fireworks CSS3 Mobile Packを使ってみよう | デベロッパーセンター

    Fireworksの拡張機能である「Fireworks CSS3 Mobile Pack」が、Adobe Labsにて公開されています。この拡張機能を使えば、Web標準に沿ったWeb/モバイル/タブレット向けデザインの制作をより効率的に行うことができます。Fireworks CSS3 Mobile Packをインストールすると、下記2つの機能が追加されます。 [CSS3 Property]パネル: デザイン要素からシームレスにCSS3プロパティを抽出することができます。 [jQuery Mobile Theme Skinning]ツール: 独自のjQuery Mobile用スプライト画像とテーマ用CSSを作成することができます。 記事では、これらの機能の使い方を解説します。 Fireworks CSS3 Mobile PackはFireworks CS5/CS5.1用の拡張機能です。Ad

  • HTML5+CSS3の導入時に役立つ7つの設定

    こんにちは、鴨田です。 個人的に仕事の大半はスマートフォン関連なので、 最近のマークアップはほとんど全てHTML5+CSS3で行っています。 とはいえ、PC向けのサイトではまだまだHTML4.01、XHTML1.0、CSS2.1を使用している場合が多いと思います。 ですので、今回はHTML5+CSS3を導入するにあたって、役立つと思う7つの設定について、書きたいと思います。 1.HTML5の初期テンプレート案 <!DOCTYPE html> <html> <head> <meta charset=utf-8 /> <title>HTML5 初期テンプレート</title> <!-- reset.cssの設定 --> <link rel="stylesheet" media="screen" href="reset.css" /> <!-- Viewportの設定 --> <meta nam

    HTML5+CSS3の導入時に役立つ7つの設定
  • 1