レスポンシブWebデザインの制作現場でよくつかうjQueryスライドショーのサンプルコード | cherry-pick BLOG | 株式会社cherry-pick
以前かいたjQueryの記事「jQueryのスライドショーやカルーセルを探してるならこれ使っときんさい！」がSRE BLOG内でアクセス数ダントツ1位を記録しています！ せっかくなので、サンプルコードを掲載してもっと活用してもらおうと企みました！ 前回の記事の流れを追うかたちで、よく使うものをご紹介していきます。 エフェクト美しきNivo Slider 何回も言ってますが、エフェクトがきれいで表示切り替えのエフェクトをランダムに設定することができます。テーマもあらかじめいくつか用意されているので、サッとカッコよくしたいときには重宝します。 次の例では、defaultテーマを使用しています。 また、imgタグにdata-thumbを指定すると、サムネイル表示による切り替えもできます。かんたんです。 HTML <!-- #nivo-slider --> <div id="nivo-slider
レスポンシブに加えスマホ用のメニュー実装もできるjQueryプラグイン「Navobile」:phpspot開発日誌
jQuery Navobile by Made by Made レスポンシブに加えスマホ用のメニュー実装もできるjQueryプラグイン「Navobile」 レスポンシブ関連のライブラリは色々でてますが、これは便利かも、と思ったプラグイン。 通常のPCモード 幅を狭くするとナビゲーションメニューが現れます クリックでアプリ風のメニューに変身 必要最低限さっくりと入れておくと便利そうなプラグインですね 関連エントリ PCでもスマホでもスワイプで画像が遅れるスライドショー実装jQueryプラグイン「Swipeshow」 スマホ関連のリモートホストのまとめ スマホのタッチイベントを一気に実装できる13KBの軽量ライブラリ「QUOjs」 軽量のスワイプ可能なスマホ用スライダーJS「SwipeJS」 スマホ・タブレットの判別ができるPHPクラスライブラリ「PHP Mobile Detect」
[CSS]3ステップでマスターする、スマートフォンやデスクトップなど異なるサイズごとに最適なレイアウトを提供するResponsive Web Desingのチュートリアル
Media Queries初心者でも分かりやすく解説された、スマートフォンやタブレットやデスクトップなど異なる表示サイズごとに最適なレイアウトを提供するResponsive Web Desingのチュートリアルを紹介します。 Responsive Design in 3 Steps [ad#ad-2] 下記は各ポイントを意訳したものです。 Step 1: METAタグ Step 2: HTMLの構造 Step 3: Media Queries さらに実践的な使い方を学びたい人に Step 1: METAタグ スマートフォンなどで採用されているモバイル用ブラウザは、表示するHTMLページの大きさをビューポートの幅に（主に）縮小してフィットさせます。 まずは、この設定をMETAタグを使用して等倍で表示するようにしましょう。 HTML <head>～</head>に下記を記述します。 <meta
Response JS: mobile-first responsive design in HTML5.
Response is an experimental jQuery plugin for building websites with responsive content. It can dynamically swap content based on breakpoints and data attributes. Breakpoint Sets Response's most powerful feature is breakpoint sets. Using the sets, content for more-capable devices and/or larger viewports can be stored in HTML5 data attributes. Designers can create custom sets to make exactly the fu
Responsive Design in 3 Steps - Web Designer Wall
Responsive web design is no doubt a big thing now. If you still not familiar with responsive design, check out the list of responsive sites that I recently posted. To newbies, responsive design might sound a bit complicated, but it is actually simpler than you think. To help you quickly get started with responsive design, I’ve put together a quick tutorial. I promise you can learn about the basic
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
