BooksホームWebデザインcssやプログラミングドロップダウンメニューやスライドショーなどを取り入れたWebサイトをレスポンシブWebデザイン対応で構築する為の勉強用テンプレ・YAMBAdscssやプログラミング2011.12.07気になったので備忘録。一般的によく見かけるUIを取り入れたWebサイトをレスポンシブWebデザイン対応で構築する為の勉強用になるかと思ってメモ書き。いうわけで今日はただのメモ書きです。こんなのあったよ程度で。DESIGNだそうです。書くとMediaQuereisで対応normalize.css採用※良いリセットCSSです。解説はここドロップダウンメニュー(superfish採用)もブレイクポイントに応じて出さないようにするスライダーはFlexSliderを採用※以前書きましたグリッドレイアウトで構築できるライセンスはGPLです。ブレイクポイントは以下となっています。320px)600pxは中くらいのサイズのスマフォ向けみたいです。(って書いてあった)モバイルサイズになるとセレクトボックスが出るのはちょっといいかも。MediaQueriesでの対応なのでドロップダウンの子要素そのものはロードされています。{top:-999em;}}768px以下は子要素以下を場外にすっ飛ばしてます。見えないだけでコードは残ったままですね。この辺もレスポンシブWebデザインの課題でもあります。最適化は見た目だけでリクエストまで軽減できてない。重いサイズをわざわざロードすることになります。なにかいいアイデア出るといいんですけどね・・・・で、更に480pxでセレクトボックスを出します。これはjQueryで施工されているようです。ライセンスはGPLみたいです。中身を見てると面白いですねー、こういうの。時間できたら触って見ます。ダウンロードは以下よりどうぞ。コピーかちびと.net関連記事jQueryHTML5のvideoタグを使って背景に動画を設定するjQueryプラグイン・videoBGHTML5から使えるvideoタグで背景への動画設定を簡単に行えるというスクリプ...jQueryタブで切り替え可能な地図をGoogleMapで実装する為のjQueryコードサンプル勉強用にメモ。"http://kachibito.net/wp-content/plugins/syntaxhighlighter/syntaxhighlighter3/scripts/shCore.js-end");/*]]>*/タイトルとURLをコピーしました。