[B! レスポンシブ] iteruのブックマーク

完璧に分かる！コーディング一連の流れと知識(HTML5+レスポンシブ+WordPress)

作成：2014/01/27 更新：2015/08/07 Web制作 > 前回、Web制作の一連の流れを書きましたが、今回は少し掘り下げて「コーディング」についてのフローをまとめます(HTML5+レスポンシブ+WordPress)。会社によって違うと思いますが、ざっくりとしたコーディングの流れと気をつけておきたいことをメモしています。エンジニア速報は Twitter の@commteで配信しています。もくじコーディング前の準備１．仕様書の確認２．入稿データの確認・スケジューリング HTML5 マークアップ３．テンプレート作成４．条件付きコメント５．GCF＋キャッシュクリア６．OGP記述７．ファビコン８．アウトライン作成９．バリデーターをチェック CSS の設定１０．ノーマライズスタイルレスポンシブデザイン設計１１．モバイルファーストを基準に設計１２．プログレッ

iteru 2014/01/27

リンク

レスポンシブWebデザインのサイトにPCとスマートフォンの表示切り替えボタンをつけてみた | A40

スマートフォンサイトには、よくPCの表示とスマートフォンの表示を切り替えるボタンがついています。通常はPC用のURLとスマートフォン用のURLにリンクさせているのですが、レスポンシブWebデザインはそもそもワンソースなので、そのままでは切り替えることはできません。そこでレスポンシブWebデザインでも使える切り替えボタンをjQueryを使って実装してみました。仕様今回実装してみたのはこんな感じのやつです。このボタンを以下のような仕様で実装します。「PC」ボタンを押すとPCの表示、「SP」ボタンを押すとスマートフォンの表示に切り替える最後に表示した状態をCookieに保存し、次のアクセス時も同じ状態で表示させる実装方法基本的には、viewportにデバイスの表示幅を指定することで切り替えることができます。 PC用のviewportの記述 <meta name="viewpor

iteru 2013/08/23

レスポンシブ

リンク

www.黄片.com,久久99久久99精品免观看,久久久久国色A∨免费看

iteru 2013/08/23

レスポンシブ

リンク

スマートフォン・タブレットの振り分けをどう考える？

デバイスの振り分けをどう考えるか、ということについて書いてみたいと思います。今回は、PC/タブレット/スマートフォンと振り分ける場合の参考です。パターンは4パターン。ちなみにiPad/Garapagosが出たてくらいまでは、画面解像度とUserEgentで判定して振り分けていたみたいなんだけど、 iPadはもはや次のモデルでは2000px以上の解像度であるし、今後のモデルがどんどんと高解像度化されることを考えると、少しキリがない感もあるよね。ただ、高解像度化されても画面サイズは変わらないわけだから、フォントと画像サイズは気にかけなければいけないかもしれないねえ。 1)Media Queriesで分けるもっとも一般的なやり方。IEの対応だけ気をつけないと。 2)Javascript + UserAgentで振り分けてリダイレクト先を分岐そもそもHTML側を分けておくという考え