仕事

ホームページをレスボンシブデザインにしました。

投稿日:2014-02-26 更新日:

モバイルファーストって大変!
以前からしようと思っていた「レスボンシブデザイン」とりあえず完成しました〜。

スマホ

タブレット

デスクトップ

やってみてわかったのが、レスボンシブデザインの「モバイルファースト」

モバイルファーストは厄介!

ほんとこれが厄介です。

開発者から言わせると、「これからはスマホの時代だから、まずはスマホから作れ!」っていうことなんでしょう。

でも、今までスマホページとPCページを分けてホームページを作っていた勇唄には、そんなことは考える由もなかったです。

レスボンシブデザインは一つのHTMLファイルで3つのデバイスに見やすいように表示しなければなりません。

その中でも迷ったのが「継承の問題」

レスボンシブデザインというのは3つのデバイスを3つのCSSで切り替えて表示します。

今までと比べると、一つのHTMLを更新するだけなのでけっこう楽です。

反面、デザインが大変。やっぱりCSSをいじくることになってくるわけです。

ここで出てくるのが「モバイルファースト」の考え方。

この画像を見るとわかりますが、モバイル用CSSが、タブレット用CSSとデスクトップ用CSSを内包しているんです。

これは、例えばモバイル用CSSで書いたコードはタブレット用、デスクトップ用にも反映されるということです。

逆に、タブレット用CSSに書いたコードはモバイル用に反映されないってことでもあります。

これが作成途中、難しくて何度もドツボにハマってしまい、何時間もコードとにらめっこをするはめになりました(笑)

主に、タブレット、デスクトップでは表示したい内容だけど、スマホでは非表示にしたい。これが迷いました。

普通、デスクトップの方が内包するだろ!と思いますが、これが「モバイルファースト」なんです。

ホームページ制作も意識を変えなければいけない時代に入ってきたのかもしれませんね。

あと、レスボンシブデザインはモバイル、タブレット、デスクトップとCSSを3個も書かなきゃいけないのも色々としんどいですね。

同じ一つのCSSファイルだと、うまくコードを整理していかないとしっちゃかめっちゃかになってしまいます^ ^

初めに入念なフレームワーク(枠組み)が大事になってくるっていうのがほんとよくわかりました。

ともあれ、なんとかできました。
これだけで正味3日間かかりました。

まだ画像がところどころ大きかったりと変な部分があるので少しづつ修正していきたいと思います^ - ^

参考になったサイト

Dwの可変グリッドレイアウトを使ってブログを構築した際に気をつけた事など

レスポンシブなサイトをつくるときに知っておきたかった7つのこと ‐ 実装編

-仕事

Copyright© 「勇唄〜ゆうた〜」 , 2017 All Rights Reserved.