【初心者】レスポンシブデザインにさくっと入門してみる話

【初心者】レスポンシブデザインにさくっと入門してみる話

ここへ奇跡的に辿り着いた方は、私と同じく「レスポンシブデザインって何?食べれるの?」みたいな方だと思います。私もそうです。

まだまだ未知の領域なのでこれから勉強していくので勉強に使ったサイトとかその時覚えた小ネタとかを書き残せればと思います。

 

どこから手をつけ始めるのか?

たぶんこれが一番迷います。何しろレスポンシブデザインって聞いたことあるけど実際のところは何?というものなのでぼんやりとイメージとしては「スマホで見た時とかWEBページでも画面小さくされた時にデザインが崩れなかったりウィンドウで隠れたりしないデザインでしょ?」と思っていました。

きっとこのイメージで合ってると思います。。

そのイメージが間違っていないか、「レスポンシブデザイン」とググって出てきた上位のサイトで勉強しました。

【参考リンク】

必読!5分でわかるレスポンシブWebデザインまとめ 制作編

実はそんなに難しくないことが分かった

以前はユーザエージェントでPCから参照しているのかスマホから参照しているのかを判断してそれに応じて処理を振り分けたりしていたんですが、もっと簡単に実現できる手段としてウィンドウサイズから読み込む対象のCSSを振り分ける手法が主流となっています。

たとえば、以下のCSSの様に

<link rel="stylesheet" media="(max-width: 640px)" href="style_sp.css">;
<link rel="stylesheet" media="(min-width: 641px)" href="style_pc.css">;

max-width : 640pxでは、横幅最大640pxまでは”style_sp.css”の読込を行う。

それ以上については、style_pc.cssを読み込むように設定する。
style_sp.cssには、ウィンドウサイズが小さいことを想定した上でのCSSコーディングを行うことで問題なくどのウィンドウサイズでも対応することが出来る。
ちなみに、現在一番小さいスマートフォンのiPhone3Gが横幅320pxなので最低サイズは320pxまでを対応すれば全てのスマートフォンに対応することが出来る。

 

思ってた以上に簡単

あれ?これだけ?って思ってしまいます。
でも難しいカタカナの新しい言葉もいざ使ってみるとこんなもんなのかもしれません。これはちょっと簡単に紹介し過ぎましたが。

でもやっぱり使い出すと奥深いところがたくさんあってまだまだ苦労しそうです。GoogleChromeの機能と掛けあわせた紹介とかもできればいいかな?と思いました。

 

らいか
レスポンシブデザインって考えるのは難しいけどコード自体は簡単なんだよね。
【初心者】レスポンシブデザインにさくっと入門してみる話

SNSへのシェアはこちらから!

ABOUTこの記事をかいた人

工業高等専門学校を卒業後、NTTグループのSI企業に就職。数々の炎上案件を鎮火するために日本各地を5年間転々とする。2015年に一般ユーザ向けのWebシステム開発案件のチームリーダとして業務に従事し、改めて"Webのものづくりの楽しさ"に気付きWeb制作会社に転職。Web制作やアクセス解析を使ったオウンドメディアの運用改善などを行っていく中で、もっとユーザー目線でWebをただ制作するだけではなく企画や運用まで幅広い領域で仕事がしたいと感じるようになり、Webディレクターのキャリアを目指す。日本中のビジネスホテルに詳しく、犬や猫よりも鳥派。