レスポンシブ対応について

月曜日眠たいです..(定期)

codelike.infoのドメインが切れてるのに気づいて すぐにクレカで支払いを行いました。。。 いやーびびる(ーー;)

1年たったということで、HPを更新しようと思いまして (1年に1回 codelike.infoを更新しようという試み・・)

業務でもレスポンシブ対応を少しやったので、その時のことを思い出して まとめます。

1.レスポンシブ ググると、たくさん出てくるのですが スマートフォンタブレット、PCなどで、画面サイズによって、表示する内容を 見やすいように変えることですね。 スマホ用だったらスマホタブレットならタブレットのような感じで。(たぶん・・・) →wiki

昔、CMS系の業務に携わってた時はユーザーエージェント(クライアントのブラウザ)を判断して 出す画面を変えるのが主流だったようですが、今はCSS1つのファイルでメディアクエリを使うことによって表示を分岐させるのが 主流のようです。

2.メディアクエリ グーグルの優秀そうなページを発見。。 CSSを分岐的に対応させるための記述という認識で良さそうです。

3.やってみる

mediaQueryTests デモページつくってみました。Firefoxなどで、画面サイズを変えると動作をみれると思います。 http://tools.codelike.info/test/mediaQuery/

コードをババーンと乗っけます。下記のようにCSSを定義して htmlからlinkタグでリンクします。

@media screen and (max-width: XXXpx) {
}

ここの箇所で、サイズを判定して、CSSを当てています。 デモページでは画面サイズで、表示している文字を変えるようにしてみました。 これがCSSだけで実装できるので、すごいですよねー

これを使ってcodelike.infoもスマホ対応するぞい。。。(元気のない小声)

以上!!