最新!!国内・国外の投資・技術的な情報

最新の国内・国外の投資・技術的・ビックリするような情報をご紹介します.

レスポンシブルデザインで超気をつけたいこと

f:id:sinsinchang:20180626024600p:plain

エンジニアが.デザインのことをあまり気にせずに色々と修正を入れる機会は意外と多いと思います.

しかし,ここで少し気をつけたいことがあります.

今回は,レスポンシブルデザインのパターンをご紹介します.

レスポンシブルデザイン

以下のメタタグをまず入れると思います.

<meta name="viewport" content="width=device-width,initial-scale=1">

端末とかブラウザに合わせて倍率1にしてviewportを表示するというもはやおまじないのようなものですね.


メディアクエリ

次に,スマフォにCSSで書くのが,実際の端末サイズによる分岐ですね.

@media screen and (max-width: 300px) {
 /* ゴニョゴニョ */
}

つまり,ウィンドウのサイズが300px以内だったら,このスタイルでよろしく的なあれです.

HTML/CSSのチェックが面倒

こういうときにHTML/CSSのチェックが面倒だからといってちゃんと確認しないとたいへんなことが起きるかもしれません.

h1 {
  color: 00ff45; // 蛍光グリーン
}
@media screen and (max-width: 300px) {
  h1 {
    color: 0038ff; // 濃いブルー
  }
}

例えば,この場合サイズが小さくなると濃いブルーになる仕様ではありますが,サイズが大きいブラウザでだけテストしていると文字色が変わる事に気づかないかもしれません.

実際のサービスは,色が変わるだけではないと思いますが,このようなことを未然に防ぐためにもレスポンシブルなデザインの場合コードが画面サイズで変化しないかどうかはCSSもチェックしたほうがよいでしょう.

 

 基礎的なことは以下の本に乗っています▼

Web制作者のためのCSS設計の教科書 モダンWeb開発に欠かせない「修正しやすいCSS」の設計手法

Web制作者のためのCSS設計の教科書 モダンWeb開発に欠かせない「修正しやすいCSS」の設計手法