[B! レスポンシブ][JavaScript] masayoshinymのブックマーク

masayoshinym id:masayoshinym

レスポンシブとJavaScriptに関するmasayoshinymのブックマーク (5)

Pinterest風でレスポンシブWebデザイン対応のレイアウトを作れてドラッグで位置移動やソートも出来るスクリプト・「MUURI」
MUURIはPinterestライクなレイアウトを構築出来るスクリプトです。MUURIという名はフィンランドの言葉で壁を意味するそう。レスポンシブWebデザインにも対応しており、任意のキーワードでソートも可能。Hammer.js併用でコンテナをドラッグ&ドロップで移動配置出来るようにもなります。また、移動、配置時にアニメーションはVelocity.jsを使っているそう。D&Dが必要なければ両方共必要ありません。ライセンスはMIT。 MUURI
masayoshinym 2017/02/03
JavaScript

ライブラリ

レスポンシブ

webデザイン

いつか試す
リンク
レスポンシブ・ウェブ・デザインでJavaScriptとMedia Queriesのブレークポイントを揃える - Qiita
記事がだいぶ古くなってしまったので、オーバーライド。今ならmatchMediaを使ったほうがいいですね。 const mq = window.matchMedia('(min-width: 768px)'); const handleWindowChange = () => { if (mq.matches) { console.log('PC'); } else { console.log('SP'); } }; mq.addListener(handleWindowChange); handleWindowChange(mq); これなら、HTML側に余分な要素を追加しなくて良いです。以下、古い記事。レスポンシブ・ウェブ・デザインの案件で、ブレークポイントがCSSのMedia QueriesとJavaScriptでスクロールバー分ずれてしまうときの対処法メモ。 HTMLには空要素
masayoshinym 2016/10/07
レスポンシブ

JavaScript

CSS

後で読む
リンク
[JS]レスポンシブ用の複数サイズの画像をHTMLの記述で簡単に配置できる超軽量スクリプト -lazySizes
スクリプトは外部ファイルを記述するだけ、レスポンシブ用画像の配置や設定はHTMLベースで記述できるスクリプトを紹介します。超軽量（5.8KB）で、jQueryなど他のスクリプトは不要です。
masayoshinym 2016/02/22
JavaScript

ライブラリ

画像処理

レスポンシブ
リンク
GreedyNav - これは良い！レスポンシブにメニュー数を変化 MOONGIFT
スマートフォンやタブレットが増えるのに伴ってWebの世界ではレスポンシブなデザインが求められるようになってきました。単に各デバイスに向けて最適化するだけでなく、情報の整理も大事な要件になっています。今回はWebサイトをレスポンシブにする上での面白いソフトウェア、GreedyNavを紹介します。このアイディアはなかなかイケてますよ。 GreedyNavの使い方 GreedyNavを適用しているサイトです。上のメニューに注目です。幅を狭めました。さらに狭めました。縮んだ分はクリックすると出てきます。 GreedyNavは画面の幅によってメニューを出す個数を可変できるのがポイントです。つまり左側から大事なメニューを並べていくことで、スマートフォンやタブレットでも操作性を損なうことなく使えるようになります。 GreedyNavはHTML5/JavaScript製、MIT Licenseのオ
masayoshinym 2015/09/08
JavaScript

ライブラリ

レスポンシブ
リンク
[CSS]一つの要素にデスクトップ、タブレット横・縦、スマホ横・縦用の各レイアウトを実装できる簡単便利なスタイルシート -flexible.gs
一つの要素に、デスクトップ、タブレット横、タブレット縦、スマホ横、スマホ縦の5種類用のclassを定義し、レスポンシブ対応のフレキシブルなレイアウトを実装できるスタイルシートを紹介します。 flexible.gs flexible.gs -GitHub flexible.gsのデモ flexible.gsの使い方 flexible.gsのデモ対応ブラウザは、デスクトップがChrome, Safari, Opera, Firefox, IEは7+対応で、モバイルもiOS Safari, Opera Mini, Android Browser, Opera Mobile, Chrome for Android, Firefox for Android, IE Mobileと現在主流のブラウザに対応しています。デフォルトでは、デスクトップ、タブレット横、タブレット縦、スマホ横、スマホ縦の5種
masayoshinym 2014/10/22
JavaScript

ライブラリ

レスポンシブ
リンク
1