• かちびと.net

    ドロップダウンメニューやスライドショーなどを取り入れたWebサイトをレスポンシブWebデザイン対応で構築する為の勉強用テンプレ・YAMBのご紹介です。暇が出来たら触ってみます・・

    Kudos for

    WordPress jQuery
  • About This

    Web制作に役立つTips、チュートリアル、、マーケティングに役立つ情報などのリソースをほぼ毎日配信しています。宜しければメモ代わりにご利用下さい。詳しい情報はAbout me またはhumans.txtをご覧下さい。

    Kachibito.net is a community-based website for web designers and developers. The site includes a popular weblog, a design gallery, a open source software, design tips, and the various web-news.

  • Links

ドロップダウンメニューやスライドショーなどを取り入れたWebサイトをレスポンシブWebデザイン対応で構築する為の勉強用テンプレ・YAMB

スポンサーリンク

気になったので備忘録。ドロップダウン
のメニューやコンテンツスライダーなど、
一般的によく見かけるUIを取り入れたWeb
サイトをレスポンシブWebデザイン対応で
構築する為の勉強用になるかと思って
メモ書き。まだちゃんと触ってません。

というわけで今日はただのメモ書きです。こんなのあったよ程度で。

YAMB


正式名称はYET ANOTHER BOILERPLATE FOR RESPONSIVE (MOBILE) WEB DESIGNだそうです。ざっくり書くと

  1. MediaQuereisで対応
  2. normalize.css採用※良いリセットCSSです。解説はここ
  3. ドロップダウンメニュー(superfish採用)もブレイクポイントに応じて出さないようにする
  4. スライダーはFlexSliderを採用※以前書きました
  5. グリッドレイアウトで構築できる

ライセンスはGPLです。

ブレイクポイントは以下となっています。

@media only screen and (min-width : 768px) and (max-width : 1024px)
@media  (max-width: 768px)
@media (max-width: 600px)
@media (max-width: 480px)
@media (max-width: 320px)

600pxは中くらいのサイズのスマフォ向けみたいです。(って書いてあった)

モバイルサイズになるとセレクトボックスが出るのはちょっといいかも。

でも、MediaQueriesでの対応なのでドロップダウンの子要素そのものはロードされています。

@media  (max-width: 768px) {
.sf-menu li.sfHover ul {top:-999em;}
}

768px以下は子要素以下を場外にすっ飛ばしてます。なので見えないだけでコードは残ったままですね。この辺もレスポンシブWebデザインの課題でもあります。あくまで最適化は見た目だけでリクエストまで軽減できてない。画像も同様ですね。重いサイズをわざわざロードすることになります。なにかいいアイデア出るといいんですけどね・・・・で、更に480pxでセレクトボックスを出します。これはjQueryで施工されているようです。

ライセンスはGPLみたいです。中身を見てると面白いですねー、こういうの。時間できたら触って見ます。

ダウンロードは以下よりどうぞ。

YAMB

URL :
TRB :

Ads

Posts

Contact

Services