アダプディブデザインか、レスポンシブデザインか | UX MILK

2018/08/06 50 users Codal レスポンシブデザイン UX MILK リソース

アダプティブデザインとレスポンシブデザインは、両方ともブラウザのウインドウ幅に応じてUIを調整するという点ではとてもよく似ています。しかし、その調整の仕方において両者は異なっています。 UXデザインエージェンシー「Codal」の一員である私たちは、プロジェクトや予算、リソースに関する助言をよく求められます... 続きを読む

iframeのコンテンツに合わせてJavaScriptで自動的に高さを調整する方法 – Rriver

2017/11/19 63 users メディアクエリ Rriver 作業 iframe ページ

レスポンシブなコンテンツをiframeでページに埋め込んでスクロールさせないように表示するとウィンドウ幅によってコンテンツの高さが変わるので、親フレームで高さを調整しないとコンテンツが隠れてしまう場合があります。iframeを埋め込んでいる親フレームにメディアクエリを書けば調整できますが、かなり非効率的な作業です。 先日、JavaScriptを使った方法を見つけたのでこのブログでもシェアします。ち... 続きを読む

レスポンシブWebデザインにも使える。Facebookの「LikeButton（いいね！ボタン）」「LikeBox」を可変幅に対応する方法 « 今村だけがよくわかるブログ

2013/11/14 44 users Facebook Likebox Plugins docs

FacebookのLikeButton（いいね！ボタン）と、FacebookページのLikeBoxをウィンドウ幅に合わせて可変する方法です。お客さんのWebサイトで使うことがあったのでメモしました。 表示サンプル こちら（https://developers.facebook.com/docs/plugins/like-button/）からhtml5版で作成します。 html <div class... 続きを読む

RWDの定番チェックツールとして期待できる「Responsive Inspector」が便利かも

2013/04/28 18 users メディアクエリ スクリーンショット Chrome拡張機能

レスポンシブWebデザインで作ったサイトをチェックするための定番ツールになりそうな「Responsive Inspector」というChrome拡張機能が先日リリースされていたので、ちょっとご紹介。なんとこの拡張機能、1つのツールで以下の3つができてしまいます。 ページに設置されたメディアクエリの確認 ブラウザのウィンドウ幅の変更 ページ全体のスクリーンショット 過去にいろいろなツールを使ってきま... 続きを読む

すぐに使える！jQueryを使用してウインドウ幅一杯にメインビジュアル用のスライダーの実装工程を学ぶ！jQuery Lab第1回 | HTML5でサイトをつくろう

2012/12/10 447 users jQuery スライダー チュートリアル 紙面 プラグイン

2012年12月から雑誌Web Designingの『jQuery Lab.』にて連載をさせて頂くことになりました。ここではjQueryを使ったチュートリアルやプラグインの紹介をさせていただく予定です。 当ブログでは、紙面の関係で載りきらなかった部分やサンプルのより細かい解説をしていきたいと思います。 12月号のテーマは、 「jQueryを使用してウインドウ幅一杯にメインビジュアル用のスライダーを... 続きを読む

Flashでリキッドレイアウトを実装する （Liquid Flash Layout） - youmos

2007/06/14 190 users リキッドレイアウト Object youmos Flash

Flashコンテンツを作成する際、ウインドウ幅などにあわせて表示領域を広げるように作成する方法がtutorio.comで解説されている。単純にFlashの<object>タグのみ100％など指定すると、Flashそのものが拡大表示されてしまう。 リキッドレイアウトに対応するにはActionScript中で別途処理を記述する必要がある。onResizeイベントが呼ばれる度に、ムービークリップの位置を... 続きを読む