MediaQuery まとめ - IT戦記
Media Query とは CSS3 から導入される Media Type を大幅に拡張する仕様です。 そもそも Media Type とは Media Type とは CSS 2 系に元々ある仕様で CSS を適用するメディア（パソコンの画面、テレビ、プリンタ用紙など）を指定するときに使います。 以下の例だと、 media 属性の中に記述されている all や screen や print が Media Type です。 <link rel="stylesheet" type="text/css" href="共通の.css" media="all" /> <link rel="stylesheet" type="text/css" href="パソコンの画面の.css" media="screen" /> <link rel="stylesheet" type="text/css"
これがスマートフォン向けサイトを作るときの viewport 設定３パターンだ
スマートフォン向けの Web サイトを作るとき、viewport の設定次第で使い勝手が大幅に変わる。 最近はレスポンシブ Web デザインが流行してるけども、その大前提として viewport の設定パターンを抑えておくのは重要だろう。 この記事では、viewport の設定によって、見た目・使い勝手がどう変わるかを解説する。 パターン1: 何も考えずに HTML を書く まずは、viewport を指定せずに、単純な HTML をスマートフォンで表示してみる。 <!DOCTYPE html> <head> <meta charset="utf-8"> </head> <body> <img src="/images/logo-ja.png"> <p>色んな素材がごった煮になった様子をお椀で表現しています。 湯気が<strong>「てっく」</strong>に見えるのが隠し味になっていま
Untitled — width=device-width, initial-scale=1についてぐちゃぐちゃと
追記：「場合によって」とかが文章中に抜けてるくさい なんだか言いたいことをまとめられてないし、ちょっと書いてるうちに間違った書き方してるとこもありそうな感じでぐちゃぐちゃになっちゃったけど、なんとなく雰囲気はわかりそうなとこまではあるし、あとからもうちょっとずつまとめるってことで、これはこれで悩んだ形跡としてポストしちゃっとく。 Appleはそもそも、日本でのスマホ向けページみたいなやつは想定してないんだよ。多分。 PCのサイトふつーに表示できるのに、わざわざスマホ向けのページ別に作って管理やら運用やらをカオスにする必要ないじゃん。 っぽいもので、Appleが想定してるのは Web application page。 Webアプリならスマホ向けっての全然あり。 でもWebアプリでなくても、アプリって拡大なんてしないでしょ？ 拡大しないで幅変えるだけ 。 だから、日本でいうスマホ向けページ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
デザインに対する僕の考え方 - CHROMA
