[B! CSS3][Responsive Design] blanc2005のブックマーク

HTML5 UP! Responsive HTML5 and CSS3 Site Templates

blanc2005 2013/03/12

リンク

[CSS]フォントのサイズ指定はpx？ em？既存の再検討とこれからのテクニック

フォントのサイズの単位に何を使ってますか？ px？ em？それら2つのよく利用されるテクニックをおさらいし、さらに第3のテクニックも紹介します。 Font sizing with rem [ad#ad-2] 下記は各ポイントを意訳したものです。はじめに pxを使ったサイズ指定 emを使ったサイズ指定 remを使ったサイズ指定はじめにフォントのサイズの単位に何を使用するかは、未だに激しい議論の的となっています。それらのテクニックにはそれぞれ長所と短所があるのも現実です。それらの中で短所が少なく、よく利用されるテクニックは2つあります。 pxを使ったサイズ指定 emを使ったサイズ指定これら2つのテクニックを再検討し、さらにもう3つ目のテクニックを紹介します。 pxを使ったサイズ指定ウェブの初期に、私たちはテキストのサイズを定めるために「px」を使用していました。これは一貫しており

blanc2005 2012/11/14

リンク

CSS3 「rem」って何だ。

CSS3を勉強する際に大切なことは２つあります。ひとつ目は、”知っているプロパティをいかに上手に使うかということ”、二つ目は、”知らないプロパティをもっと勉強すること”だと言えます。今回は、後者のあまり知られていないであろう「rem」を紹介いたします。とは言っても「rem」はプロパティではなく単位になります。単位表示でおなじみの「em：エム」に似ていますが「em」の様に親要素の値に影響を受ける事はありません。フォントサイズの指定を考えてみましょう。「px」を利用するとフォントサイズを固定することができて制作する際には便利だったりしますが、最近ではスマートフォンなどのモバイルサイト向けに「Responsive Web Design」というデザイン手法で「em」のような相対単位を「Responsive Type Setting」として利用します。ただし、IE では「em」を利用すると

blanc2005 2012/11/14

リンク

３ステップではじめるレスポンシブWEBデザイン:phpspot開発日誌

Responsive Design in 3 Steps ３ステップではじめるレスポンシブWEBデザイン。今後新しくサイトを公開する時はスマホ対応なんていうのは当たり前になってきている時代で、デザイナーさんにとっては必須であるレスポンシブWEBデザインを３ステップで簡単に説明してくれています。 CSSが分かる人ならさほど難しいものではないのでサクッと理解しちゃえます。 METAタグを付与 IEでもMedia Queriesを使えるようにスクリプトをインクルードレイアウトを作る css3 media query を記述。ブラウザの幅によって要素を非表示にしたりしてCSSを切り替えられるというわけですね JavaScriptが不要っていうのは素晴らしいですね関連エントリ使うっきゃないレスポンシブWEBデザインなWordPressテーマ２５レスポンシブWEBデザインのサンプル26 HT

blanc2005 2011/12/24

リンク

[CSS]スマフォからデスクトップまで最適なレイアウトを提供する、emベースのフレームワーク -Goldilocks Approach

iPhoneをはじめとするスマートフォンから、iPadなどのタブレット、ノートブックやネットブック、デスクトップなど、さまざまなデバイスにMedia Queriesを使用して最適なレイアウトを提供するフレームワークを紹介します。 The Goldilocks Approach [ad#ad-2] The Goldilocks Approachの主な特徴 The Goldilocks Approachのケーススタディ The Goldilocks Approachのアプローチ The Goldilocks Approachの主な特徴 The Goldilocks Approachは、EM、Max-Width、Media Queriesを組み合わせ、3つのレイアウトを提供します。 multi column（マルチカラム）大きいサイズ用 narrow column（ナロウカラム）小さいサイズ