CSSでレスポンスデザイン?その基本や考え方のいろいろを覚書!

SPONSORED LINK

ウェブサイトをレスポンシブなデザインにするには、いくつかの方法があります。

その中で最もオーソドックスなのが、cssのviewportを利用したデザインと言えます。これはターゲットとする画面幅に対して、それ専用のcssを用意して対応させる方法です。

今日はその方法について、自分へのメモを含めて説明していきます。

cssのレスポンシブ・デザイン

code-1797778_1280

まずはViewportを設定します。これはターゲットとする画面幅を指定して、別のcssを用意する方法です。

対応させたいcssは入れ子にして表示させます。そのため、全てに適応させたいスタイルシートは入れ子の外に書くようになります。

まずは簡単な例を見ていきましょう。

 

上記のように書くことで700pxまでの画面幅をもつデバイスには、文字の色を赤に、それ以外に対しては文字色を青で表示するように設定することができます。

 

注意

これはあくまでも特定の画面幅の時に行う、スタイルシートの上書きにすぎません。注意しなければならないのはスタイルシートを記述する順番です。

これらのことは、あくまでも本元のスタイルシートが基準となっているという前提のもとで成り立っています。つまりviewportの設定の順序を間違えると、うまく適用されないということになります。

下の例のように書いてしまうと、うまくcssが適用されないので注意しましょう。

 

 

このように最初の例と逆の順序で記述した場合、先に記述したcolor: red;の方が優先的に適応されます。気をつけましょう。こうした現象を取り除くためにも、まずはデスクトップ用のスタイルシートを完成させ、続いて携帯端末やタブレット端末用のスタイルシートを完成させるのが王道です。

またそれ以外にも、Bootstrapを利用してレスポンシブ・デザインにするという手もありますが、これはまた別の記事で紹介しています。

 

まとめ

以上、自分に向けたメモとして、また様々な画面幅に対応させるデザインに悩む人々に向けた覚書きでした。

近年は様々なデバイスの普及により、より細かいcssの設定が必要になってきました。

基本となる本記事の内容を理解して、ぜひ、仕事や趣味に使ってみてはどうでしょうか?

この記事が気に入ったら
いいね ! しよう

Twitter で
SPONSORED LINK

ABOUTこの記事をかいた人

HIRO

旅・音楽・プログラミング・ブログを愛するコンテンツ・クリエーター、ミニマリスト。ガジェット、海外ドラマ、旅行が好きで、趣味は読書。都内のIT企業でSEとして働いています。※このブログでの発言はすべて個人に帰属し、企業や団体とは一切関連がありません(PRを除く)。