2015/12/15 (Tue) スマホサイト

おひさしぶりです。

今、とあるバイト試験の一環の研修をからこれ3ヶ月くらいしているのだけど、
そこで出された課題が、一度コーディングしたPCサイトのスマホ版を作るというもの。

スマホ版をデザインする際に、どうしてもIDやClass名を変更しないといけない事態が生じた。
それを経験し、PC版からつくる時も、常にスマホ版の事を考えて、ほぼ同じID・Class名でも書き換えが効くように作る必要性を感じたのです。

なるべくDiv毎にごそっと入れ替え出来るような構造が良いですね。
CSSだけの制御で配置換え出来るデザインを考えられるよう、日々頑張ってゆきたいところです。


そして今回、スマホページをデザインする際、よく見る三本線のアイコンにメニューが隠れている構造に挑戦しようと思い、そのようなデザインにしてみました。
アイコンそのもののデザインは、同じマークが2個重なっていて、見た目も現状おかしいので、FBのアイコンみたいに差をつける必要性がありそうですが、そこはひとまず後回しで作っています。

で、現状一つ、jqueryでみつけたsidrというもので作ってみたのですが、思ってたデザインのようにはいかなかったのです。
私のデザインでは、ヘッダーを2重にして、上のヘッダーと下のページを残してその上に横からメニューをスライドさせたデザインでした。

中々そのような動作のものが見つからず、かなり検索しまくってやっと、下のようなものを発見したしました。
↓
http://tympanus.net/Tutorials/GoogleNexusWebsiteMenu/


しかしこれってグーグルの公式なんでしょうか？
設置方法やカスタムも日本語では見当たらなかったのでボチボチ訳しつつ次回研修時に設置してみようと思います。


途中経過の日記で結果もなく、面白味のない記事で申し訳ございません…(汗；)

また、入れてみて、どういう結果になったかは今度記事にしようと思います。


それでは、午後からは未経験でもOKな派遣の登録会にいってきます。