「スマートフォン向けに最適してみようと」という事でMedia Queriesを取り入れてみることしました。

Media Queriesの特徴はスクリーンのサイズによってCSSを変更する事です。

 

▼詳しくはこちら

 

使ってみての感想は

・スクリーンサイズによって簡単にCSSを変更できる。

・IEにもJSを読み込ませたら適応できる。

 

■注意点

最近のスマフォは画面サイズが大きいため(横向け)、スクリーンサイズ＝デバイスという

考えが向いていない事がわかった。その為、デバイスで分けるならJSを使って振り分けた方がよいと思いました。

また、IEでMedia Queriesを認識させるJSを入れてもlink要素では判別できないみたい。

CSSのソース内で判別をする為、ソースを編集する時に混乱をまねくおそれがある。(クラス名が同じで内容が異なるとか)

それとjQueryと連動する時は特に注意が必要に感じた。具体的にはMedia Queriesがリアルタイムに変動する

スクリーンサイズをトリガーにするのに対して、jQueryのトリガーは基本的にページを読み込んだ時。

resizeのメソッドもあるが、JS・jQueryの知識を持ってる人であれば容易いかもしれないが

CSSはわかるけどJSはちょっと・・・という人にはハードが高いかもしれない。

 

■今後の課題

・マークアップでhtml5にしてみたが、手探りなので精度、正確差を追求したい。

・jQueryをもっと使用してみたい。

・MTとマークアップ

など。

 

■まとめ

html5でのマークアップやMedia Queriesを使用は良い経験になった。

出来る事と、ちょっと工夫しないとできない事、作業前の段階で把握できている事など

今後必要となる要素に対しての感覚は分かった。

 

これからのWEBは、シンプルな正確さが求められるのでは無いかと思います。

html5がSEO的に特化した優遇は無いかもしれないがマークアップ上正しくきれいにすれば

ページを閲覧している人にも、何気なく心地よさが伝わるのでは無いかと思います。