2012仮(2)2012年8月17日金曜日MediaQueriesのサイトを1年間運営してみての備忘録MediaQueriesサイトの自分なりの作り方を、複数作ってみた知見からまとめてみたいと思います。●よくある要望スマートフォンで縦持ち、横持ちどちらでも横幅ぴったりに合わせるタブレットの縦持ちは専用ビュー、横持ちはPCと同じスタイルにMediaQueriesについて説明すると、これらが期待されます。一見するとかんたんですが、デザイナーがCSSを理解していない場合や、MediaQueriesに対応していないIE678にもある程度対応させる必要がある場合、特に1が意外と大変な作業になってくると思います。スマートフォン専用サイトであれば、横幅を100%などリキッドなデザインで組む事で、いわゆる「横幅ぴったり」が実現できると思いますが、PCにも対応となると、ある程度横幅を制限しないと1行あたりの文字数が大幅に間延びしてしまい、結果として非常に読みづらい段落スタイルが出来上がってしまいます。●汎用的なMediaQueriesを使ったソースコードこれらの問題を解決するために使える汎用的なMediaQueriesのデバイス用の区切りを備忘録として残しておきます。}/*ここにモバイル用に使う汎用的なスタイルを書きます。*//*なぜこんな指定をするかというと、横用は別に記載するからです。*//*最大横幅は320pxです。}/*ここに横持ち専用の限定的なスタイルを書きます。*//*最大横幅は480pxです。それ以上は左右にbodyの余白が出ます。}/*ここにタブレット縦持ちの限定的なスタイルを書きます。*//*指定する最大横幅は768pxです。それ以上は左右にbodyの余白が出ます。縦px;を指定します。*/}これらはiPhone3~iPhone4Sまでを考慮した指定ですが、Androidでも余白が出る程度で、大きな問題にはならずにきれいに収まるはずです。Width:ビューエリアの最大幅。このサイズより小さい場合に適用。{~~}などと書きます。andでつなぐと「~から~まで」という事になります。Width:ビューエリアの最小幅。このサイズより大きい場合に適用。Width:デバイスサイズの最大幅。このサイズより小さい場合に適用。Width:デバイスサイズの最小幅。このサイズより大きい場合に適用。-webkit-device-pixel-ratio:1.5などと書きます指定された値より大きいRatioの時に適用されます。カンマで区切って複数指定もできます。"portrait"の2値Resolution:解像度をDPIで定義します。240dpiなどと書きます。この場合は240dpi以上のデバイス、という意味になります。Orientationを使えば?と考えるかもしれませんが、意外と実機で検証するというのは大変なものですし、JavaScriptなどで組まなくても端末をロテートさせればビューエリアも変わりますから、特段Orientationを使う理由もないと言えます。●その他気をつけたい事その他デザインやコーディングに気をつけたい点としては以下の事があるでしょう。デザイナーにはあらかじめベクターデータでデザインしてもらうか、横持ち時の2倍の横幅でデザインしてもらう事(上記例だと横幅960pxでモバイル用のデザインをする)ここで、Illustratorでデザインをしておけば、Web用に書き出しの時に画像サイズタブで、200%で書き出す事で、きれいに2倍サイズでラスタライズされた素材を切り出す事ができます。注意したいのは2分の1サイズの画像も必要だという事です。960pxでモバイル用のデザインをする際は、どのオブジェクトも縦横偶数でなければなりません。エンハンスメントでデザインすることを意識し、極力CSS3で再現できる範囲の表現にとどめる。最近はツールも充実しているので、グラデーションやドロップシャドウなどは余裕です。三角形は再現できると言えばできますが、クロスブラウザ対応が難しいので避けるべきです。やるなら画像にしましょう。box-sizing:border-boxlを使わないIE67対策のため、box-sizingはやめましょう。凄く便利なので、モバイル向けサイトの構築には積極的に使っていきましょう。意外と難しいと考えられがちなMediaQueriesですが、プログレッシブエンハンスメントを考慮してCSS3でデザインすれば、実はそこそこ楽に作る事ができます。皆さんもトライしてみてください。(6)人気の投稿Windows7でUltraVNCのセットアップメインPCを入れ替えまして、会社から家のマシンにアクセスするために、リモートデスクトップ接続を試みたところ、うまくいきました。そのため以下駄文です。ルーターを買ってはみたものの...Windows7を導入し、ついでにルータも購入しました。WZR-HP-G301NHシリーズというバッファローのルーターで、アマゾンで6400円で購入できました。最近凄い寒くなってますが、普通のエアコンだけだとなかなか加湿しながら暖房するのは難しいですよね。ハロゲンヒーターは乾燥を防いで暖房できますが、やはり空気は乾燥しがちです。今日は市役所に行き、住基カードを新規発行した。納期の承認に関する申請書確定申告などで利用できる、e-taxサービスを利用するためだ。これには印鑑カードが必要となる。2をWindowsに導入してみているご無沙汰しております。寒中お見舞い申し上げます。最近は変数が使えるCSS管理コードと呼べば良いんでしょうか、そんな感じの言語が結構前からあります。64bitインストールメモPCを新調したので、WindowsXPからWindows7にメインマシンを移行したときのメモを書きます。マシン構成は、旧マシンについていたHDD3台(C:プログラム系、D:データ系、E:キャッシュ系)のうち、DとEを新マシンにつなげました。iT...iPhoneを縦にして読むときに最適な文字数について今年1月にiPhone3GSを購入し、iPhoneを使ってテキストを読む機会が増えてきました。スマートフォン向けのサイトを作る機会もありますが、その際に気をつける必要があるのが、スクリーン上の文字のサイズです。今回某スマホ案件でSublimeText2(以下ST2)とSCSSでサイトを構築しようと思っております。チャレンジする内容は下記の通り。