Animenu - a responsive dropdown navigation made with SASS
25 Feb 2013 Check out the Animenu GitHub repository for the updated version of this dropdown navigation concept. I’ve been pretty happy lately to see I’m still receiving a lot of positive feedback on my animated dropdown menu. I found that quite encouraging and I decided to start working on an improved version of it using SASS & Compass. The new version is responsive, has no JavaScript dependency
Slide and Push Menus | Codrops
Fixed menus that will slide out from the sides of the page and in case of the right and left side optionally move the body. A set of fixed menus that will slide out from any of the edges of the page. The two menus that slide out from the left and right side can also be used in combination with the body moving to the left or right side, respectively, hence being “pushed”. There are examples of how
レスポンシブWebデザインでテーブルを使う時の小技
tableやtr、tdなどのテーブル関連のタグのdsiplayプロパティを変更することでデザインを変更します。 tableタグのdisplayの値はデフォルトではtable、tdやthタグはtable-cellといった具合ですが、この値をblockやlist-itemなど他の値に変えます。 @media only screen and (max-width:420px){ tbody tr{ display: block; margin-bottom: 1.5em; } tbody th, tbody td{ display: list-item; border: none; } ..... } Chrome、Safari、Firefox対応。 IEではTableのdisplayを変更しても表示は変わらないようなので非対応です。 条件分岐コメントを使ってIEにはメディアクエリを読ませないよ
使えるとレスポンシブWebデザインに便利なCSS
デフォルトのボックスモデルではwidth、heightの値にはpaddingとborderの値を含みませんが、box-sizingプロパティの値にborder-boxを指定すると、widthとheightの値はpaddingとborderの幅を含むようになります。 #box-sizing{ -moz-box-sizing: border-box; box-sizing: border-box; } 特にコンテンツの幅を指定するときや、Fluid Grid Systemを作成するときに計算が簡単になります。 例えば以下の図のような4カラムのGrid Systemで2カラム分の相対幅を求めるとします。 デフォルトの場合2カラム分の幅は60px×2+20px=140px、全体の幅は320pxとなるので、140÷320×100=43.75%となります。これにmarginやpaddingでガターの幅
PCサイトではタブによる切り替え、スマフォ等ではアコーディオンで実装できるスクリプト・Easy-Responsive-Tabs-to-Accordion
必要になりそうだったのでメモ。通常のPCサイトではタブ、スマフォ等の画面の狭いデバイスではアコーディオンで実装するスクリプトのご紹介です。jQuery依存になります。 Easy-Responsive-Tabs-to-AccordionはレスポンシブWebデザイン対応のWebサイトでタブコンテンツを使いやすくするライブラリです。アコーディオンの方がみやすくタップしやすいケースもあるので覚えておくと良いかも知れません。とはいえ先発ライブラリも確かあったはずなので使いやすいほうで。 動作サンプルです。直接見に行って実装エリアをリサイズすれば確認出来ると思います。 コード<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script> <scr
レスポンシブに加えスマホ用のメニュー実装もできるjQueryプラグイン「Navobile」:phpspot開発日誌
jQuery Navobile by Made by Made レスポンシブに加えスマホ用のメニュー実装もできるjQueryプラグイン「Navobile」 レスポンシブ関連のライブラリは色々でてますが、これは便利かも、と思ったプラグイン。 通常のPCモード 幅を狭くするとナビゲーションメニューが現れます クリックでアプリ風のメニューに変身 必要最低限さっくりと入れておくと便利そうなプラグインですね 関連エントリ PCでもスマホでもスワイプで画像が遅れるスライドショー実装jQueryプラグイン「Swipeshow」 スマホ関連のリモートホストのまとめ スマホのタッチイベントを一気に実装できる13KBの軽量ライブラリ「QUOjs」 軽量のスワイプ可能なスマホ用スライダーJS「SwipeJS」 スマホ・タブレットの判別ができるPHPクラスライブラリ「PHP Mobile Detect」
モックアップが手軽に作れるサービス「FROONT」*二十歳街道まっしぐら
【ぷにぷに】今買える課金コインをまたまた全部買って引く!!【ゆっくり実況 ホロライブコラボ 妖怪ウォッチ】
HTML5 × CSS3 × jQueryを真面目に勉強 – #16 レスポンシブWebデザインでテーブルを最適化するベストプラクティス | DevelopersIO
dislay 属性についてもっと知りたいという方は、こちらのサイトを参照ください。 display - CSS | MDN 要するに何が言いたいかというと、テーブルもまたスタイルシートの display 属性によってその形状を実現しているに過ぎず、この値を色々と操作すればスマートフォンのようなスクリーンサイズの狭い環境にも最適化された表示が出来るのではないかということです。 実際に作ってみた - 下準備 今回は4パターンの表示を紹介します。まずは下準備として簡単なテーブルレイアウトと元となるスタイルを組んでいくとします。 はじめに HTML で適当なテーブルを作ります。 <table class="table table-striped table-responsive"> <thead> <tr> <th>First Name</th> <th>Last Name</th> <th>Ag
Basic jQuery Tabs
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qu
なんとWordPressプラグインまである。多彩なエフェクトでレスポンシブなフリーのjQueryスライドショー『Camera』 / Maka-Veli .com
なんだか話題になってるみたいですね？『Camera』というスライドショー。 特徴としては レスポンシブ 多機能、ハイクオリティ 多彩なエフェクト スキンも多数用意 WordPressで管理できる という感じなのですが、WordPressプラグインは本当にびっくりしました。 ウィンドウリサイズするとちゃんとレスポンシブ WordPressプラグイン。管理画面もしっかり用意されている 管理画面上でエフェクト等が細かく設定可能 他にも多数機能あり フリーなんですが、サポート（寄付）してね、というスタンスなのでもしよければ寄付して使ってみてはいかがでしょうか Camera http://www.pixedelic.com/plugins/camera/ WordPressはこちらから http://wordpress.org/extend/plugins/camera-sli
[CSS]レスポンシブ用に画像を縮小するだけではなく、クロップにも対応させるテクニック
中心箇所を選定 画像は天地左右にクロップ可能なので、中心となる箇所をグリッドから決定します。 HTML HTMLは画像を配置するimg要素の他に、クロップするためにdiv要素が二つ必要です。 <div class="focal-point"> <div><img src="guy.jpg" alt="guy"></div> </div> div要素を余計に使用することはよくないことですが、実装を簡単にするために使用しています。 クロップする箇所を指定するには、classを追加します。 <div class="focal-point right-3 up-3"> <div><img src="guy.jpg" alt=""></div> </div> 右3、上3は、上記のグリッドから算出してもので、右3上3にクロップします。 CSS まずは、ベースとなるスタイルシートです。 * { marg
WordPressテーマ（レスポンシブWebデザイン対応）
レスポンシブWebデザイン対応のWordPressテーマの配布を開始します。 １．レスポンシブWebデザイン対応 今回配布するテーマでは、レスポンシブWebデザイン対応として次の6つのレイアウトを提供します。カッコ内の英文字はカラムレイアウトを切り替える文字列になります。カラムレイアウトの変更方法については６項で解説します。 3カラム固定レイアウト（layout-three-column） 3カラム固定レイアウト・右サイドバー（layout-three-column-right） 2カラム固定レイアウト・左サイドバー（layout-two-column-left） 2カラム固定レイアウト・右サイドバー（layout-two-column-right） 3カラムリキッドレイアウト（layout-three-column-liquid） 3カラムリキッドレイアウト・右サイドバー（layout-
Responsive Web Design: 50 Examples and Best Practices - Designmodo
What is Responsive Web Design? So, what is a responsive website? What does it look and feel like? According to Wikipedia, responsive web design is an approach that ensures all the pages of the website look, work and feel perfectly on any device. Whether it is a tiny old cell phone with a screen width of 320px, a modern phablet with 7 inches screen, a big iPad, or a TV with a massive diagonal line,
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Drop-Down Navigation: Responsive and Touch-Friendly by Osvaldas Valutis
yuguri.com
okaoka.net
レスポンシブデザインのウインドウサイズの切替えについてまとめてみました
Loading...
creatorish.com
cmmntr.com