レスポンシブデザインに対応するといくつもの解像度に対応する必要があります。
Google ChromeのDevToolsなどで解像度を変えられますが複数のサイズを確認するのは結構大変です。
それらを一度に確認することができるプラグインです。
既存にあればそれを選択、なければサイズとタイプ（iPhone, iPad, Google Chromeなど）を入力して作ることもできます。
それらをまとめて確認できるので便利です。
2023年6月9日金曜日
PerfectPixel
デザインカンプを元にWebサイトを実装するわけですが、ぴったり合わせるのはなかなか難しいです。
PerfectPixelというプラグインがあります。
PerfectPixel by WellDoneCode (pixel perfect)
デザインカンプから画像として出力したファイルを読み込んでWebサイト上の上に重ね合わせることで、どれくらいズレているかはっきり分かります。
DevToolsで微調整すればリアルタイムで位置や大きさの調整が出来ます。
登録:
投稿 (Atom)
-
PostgresSQLも使っているのですが、pgAdmin4を起動すると必ずマスターパスワードを聞かれて鬱陶しいので無効にする方法を探しました。 ググったら一発でした。 データベース - pgAdmin - マスタパスワード pgAdmin 4の起動時 自己責任と書いてあ... -
ウェブ入門の続き： HTMLの基本 1.4 HTMLの基本 HTMLとは HTMLとは HyperText Markup Language、ハイパーテキスト・マークアップ・ランゲージです。 そしてどうでもいいかも知れませんがHTMLは開発言語ではなくマークアップ言語です。 【悲... -
Web技術の学習 超今更感がありますが、時間があるのでWeb技術の学習をすることにします。 HTML CSS JavaScript が学習の中心になるでしょう。 またPC版だけでなくMobile版でも適切なデザインに対応するために「レスポンスデザイン」についても学習していきます。...