タグ

css3とresponsiveに関するbleu-bleutのブックマーク (4)

  • Viewport [iPhone生活]

    *device-widthはiPhone横持ちの場合でも必ず320px、device-heightはiPhone縦持ちの場合でも必ず480pxとなります 例えば以下は、Viewportの横幅がiPhoneのディスプレイのサイズで、倍率は1、2倍まで拡大可能、という内容です。 描写のプロセスを検証するに当たっての条件 以下の説明では複雑な状況を説明する場合もあるため、特定の語句を特定の意味でのみ使用しています。特定の語句は以下です。 viewport Viewportのメタタグで指定した値または後にSafariが計算した値。initial-scale/width/heightの3つ。 コンテンツ(サイズ) HTMLに設置したコンテンツのサイズ ドキュメント(サイズ) 余白を含めたHTML全体のサイズ。ウィンドウよりも大きい場合は、スクロールすることで見ることが出来る全体のサイズ。 ウィンドウ

  • 日記 | ヨモツネット

    blog移行しました。新しいblogで更新を続けています。 XMLェ… text ja 2012-07-08 http://www.yomotsu.net/wp/?p=603 XMLェ… 日々の出来事2012年7月8日日曜日 ブログ作りなおそうかなーと思って、この Webサイト をみなおしてたら、Web ページのメタ情報としてダブリンコア (RDF) を混在させていたことを思い出した。バリデーターにかければ、グラフも取り出せて みたいな感じになる。でも結局あまり意味なかったです多分。いまは OGP とかありますしね。 Web ページは XHTML にしてたけど、ブログのコメントで参照先のない数値参照とか混ぜられると XML パースエラーになるし、XML だから他の語彙混在できるけど、RDF くらいしか混ぜてなかったし、XHTML 意味なかったです多分。いまは HTMLSVG 混在でき

  • ベーシック且つシンプルなレスポンシブWebデザイン対応CSSフレームワーク・Exegesis-Framework

    シンプルでベーシックなレスポンシブ Webデザイン対応のCSSフレームワーク をご紹介。シンプルなのでフレーム ワークとしてとても使いやすいイメージ でした。これはこれで覚えておくと いいかも。 シンプルなレスポンシブWebデザイン対応のCSSフレームワークです。 2~4カラムのグリッドや、2カラム構成のベーシックなレイアウトで、メインカラム内での4カラムにも対応しています。 CSSはリセットが1KB、Media Queriesと一般レイアウト用CSSの3KB。ブレークポイントは480pxと940pxが用意されています。 スクリーンショット iPhoneでのスクショです。 ChromeエクステンションのIETabでIE7の表示を確認しましたが問題はありませんでした。 とにかくシンプルなのが気に入りました。多少の手入れは必要ですが、細かい部分は個人によって好みが分かれますのでフレームワークと

    ベーシック且つシンプルなレスポンシブWebデザイン対応CSSフレームワーク・Exegesis-Framework
  • レスポンシブWebデザイン設計用のシンプルなテンプレート・The Goldilocks Approach

    もういくつも出回ってますので今更感 もありますが、個人的にはいくつあって も困らないのでご紹介。レスポンシブ Webデザイン設計用のシンプルなテンプ レート・The Goldilocks Approachです。 殆ど何もない状態なので使いやすい。 いろいろと便利なフレームワ-クはありましたけど、結局フレームワーク自体を自分で作らないとならなくなってくるのでその候補としてメモ。 シンプルなテンプレート。中身が無く、記述だけしていけばいい、みたいなやつです。IEに対応できるようにmodernizrが含まれています。 ケーススタディです。シンプルで1カラム。ちょっとしたプロダクトサイトなんかこういう感じですよね。 ブレークポイントも1つしか設定されてません。 @media screen and (min-width: 30em) and (max-width: 63.236em)そのため、複数グ

    レスポンシブWebデザイン設計用のシンプルなテンプレート・The Goldilocks Approach
  • 1