レスポンシブ Web デザインとイメージマップ（クリッカブル・マップ）
今年も残すところあと数日。 今日が仕事納めというところも多いのではないでしょうか。 気がつけば今月は全然ブログを書いてない。 いかんなぁ〜… ということで最近気づいたことを備忘録を兼ねてメモメモ 〆(._.) レスポンシブ Web デザインでイメージマップを使うとき… このあいだ久しぶりにイメージマップ（クリッカブル・マップ）を使った。 私が関わっている仕事ではあまり使う機会がないんですけど、皆さんはよく使うのでしょうかね？ で、そのイメージマップを使う案件がちょっと前にあったのですが、その時にふと疑問が… その疑問というのは、『レスポンシブ Web デザインだと座標がズレるのでは？』という疑問。 あまりイメージマップを使う機会がないので今まで気がつかなかっただけで、皆さんにとっては周知の事実なのかも知れませんが、ちょっとお付き合いを… 🙂 イメージマップは、画像ファイルの左上を原点とし
embedresponsively.com
Great news! The embed codes offered by these services are already responsive: Scribd (select 'Autosize') SoundCloud Storify Twitter Know of more? New embed type giving you problems? Please report any issues on GitHub. embedresponsively.com helps build responsive embed codes for embedding rich third-party media into responsive web pages. The code here is based on research and work by Theirry Koblen
Sidr
SidrThe best jQuery plugin for creating side menus and the easiest way for doing your menu responsive You will be able to create multiple sidrs on both sides of your web to make responsives menus (or not, it works perfectly on desktop too). It uses CSS3 transitions (and fallbacks to $.animate with older browsers) and it supports multiple source types. Get startedLike any other plugin, you must inc
RefineSlide
Features A few transitions to play with Responsive down to mobile scale CSS transition & 3D transform support Javascript fallback fade transition Auto-formatted, responsive thumbnails Good browser support (IE7+) HTML captions Hardware acceleration on supported browsers Free to use and abuse as you like Simple, semantic markup Lightweight: ~10.7k minified Installation - Essential steps - Tuning -
inspiretrends.com
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
Pure.css
CSS with a minimal footprint.Pure is ridiculously tiny. The entire set of modules clocks in at 3.5KB* minified and gzipped. Crafted with mobile devices in mind, it was important to us to keep our file sizes small, and every line of CSS was carefully considered. If you decide to only use a subset of these modules, you'll save even more bytes. * We can add correctly :) the numbers above are individu
たった１行で完成？凄まじくレスポンシブデザインなサイトの作り方 | DECONCEPTER
簡単に作れる！みんな大好き可変グリッド 先日話題になっていた「なんだこれ！！「NHKスタジオパーク」のレスポンシブ・ウェブデザインが凄まじくレスポンシブ！！」で紹介されていたNHKスタジオパークのレスポンシブデザイン。 こちらのサイト、プラグインを使ってとてもシンプルに作られています。キレイ。このシンプルさを伝えたくてうずうずしてきました。せっかくうずうずしたのでどんな作り方をしているのかサンプルを交えて紹介します。 まずはこちらのデモを御覧ください。 凄まじくレスポンシブデザインなサイトデモ 使われているのはjQuery Masonryというプラグインだ！ @planetofgoriさんのブログで紹介されているように、jQuery Masonryというプラグインが使われています。このプラグインたった数行でNHKのサイトのような可変グリッドレイアウトが作れてしまいます。可変グリッドのレイア
レスポンシブなテーブル作りに役立つjQueryプラグイン「FooTable」:phpspot開発日誌
FooTable | Themergency レスポンシブなテーブル作りに役立つjQueryプラグイン「FooTable」 レスポンシブなWEBデザインを作る際に一番やっかいなのではというのが、テーブルですね。 折り返しが出来ないのでどうやってレイアウトしようと悩むところですが、画面が小さい時は主要な物を選んで出す、といった事ができます テーブルのth 要素で出す出さないの定義をすることができて、あとはプラグイン関数で初期化するだけというお手軽さです。 iPhone。主要な部分を見せつつ、折畳みで他の要素もみせるUI ちょっと画面の大きなタブレットでの画面。表示要素は多くなるけどまだ折畳みで他の要素をみせる状態 PCの大きなディスプレイですべて開いた状態 次のように、data-class、data-hide の属性を付けておくことで挙動をカスタマイズ可能です 関連エントリ WEBデザインす
シンプルなデザインが嬉しい、IE7もサポートしたレスポンシブデザイン用のHTML5フレームワーク -Wirefy
HTML, CSSだけでなく、jQueryやmodernizrなどJavaScriptやrobots.txtなど、ウェブサイトを構築する際の基本セットが揃ったレスポンシブデザイン用のフレームワークを紹介します。 Wirefy [ad#ad-2] Wirefyの対応ブラウザとデバイス Wirefyのデモ Wirefyの対応ブラウザとデバイス WirefyはIE7をはじめ、すべてのモダンブラウザ、スマートフォンデバイス、タッチデバイスをサポートしています。 Latest Chrome (Mac/PC) Firefox 4.0, 3.6, 3.5, 3.0 (Mac/PC) Latest Safari IE9, IE8, IE7 iPhone (Retina) Droid (Charge/Original) iPad あらかじめセットされているMedia Queriesのブレイクポイントは6つで
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
レスポンシブなイメージマップの作成 - Qiita
https://bqworks.com/slider-pro/
ゼロから始めるレスポンシブWebデザイン入門
レスポンシブデザインに対応したCSSフレームワーク
レスポンシブWebデザインで使えるjQueryプラグインいろいろ