シンプルで使いやすい！レスポンシブ対応のさまざまなページを実装できる超軽量フレームワーク -TukTuk
BootstrapやFoundationは高性能だけど機能が豊富すぎる、またグリッドだけのフレームワークでは物足りない、そんな人にぴったりのレスポンシブ対応のOOCSS（オブジェクト指向CSS）で設計された超軽量（9KB）のフレームワークを紹介します。 TukTuk TukTuk -GitHub TukTukは、レスポンシブ対応の実用的なさまざまなページを軽量のスタイルシートで実装することを目的としたもので、OOCSS（オブジェクト指向CSS）ベースの効率的なスタイルシートが使用されています。 ライセンスはGPLv3で、オープンソースライセンスとして配布されています。 デモでは、4種類のページがオンラインで確認できます。
jQueryでレスポンシブ対応の際にウィンドウサイズによって読み込む画像を切り替える実験｜BLACKFLAG
最近ではWebサイトを構築する際にレスポンシブ対応として、PCでの表示のみならずスマートフォンやタブレットでの表示を考慮して構成する必要があります。 レスポンシブ対応でレイアウトに関してはCSSのMediaQueriesを使ったりすることで、ウィンドウサイズによって画面上のレイアウトを調整させたりすることが可能ですが、大きな画像を使用する画面デザインなどの場合ではスマートフォンで表示する際のレンダリング負荷が問題になったりします。 そんな際に使えるようにMediaQueriesと同様の方法で、ウィンドウサイズによって読み込む画像を切り替える動作をjQueryを使って実験的に作ってみたので紹介してみます。 【2016/05/22】 ウィンドウサイズを取得して画像を切り替える部分のスクリプト動作を一部改修しました。 ウィンドウサイズによって切り替える画像については、PCで表示させる為の大きな画
レスポンシブWebデザインは臨機応変に使うのが良い
「レスポンシブWebデザイン」が題に入る本を書いてはいますが、レスポンシブWebデザイン（RWD）という手法を選択しなければならない、絶対にRWDでなければならないという理由はないと考えています。なぜなら、プロジェクトごとに向き不向きはありますし、そもそも発注側の企業文化や制作会社との相性、信頼関係の深度などによっては、RWDという制作の手法が向いていない可能性もあります。 そう考えると、なんでもかんでも安易にRWDで良いかというと、そうでもないように思います。長期的な視野で考えるとRWDのような手法が良いと考えていますが、だからといって現段階でそれが唯一の方法だとは考えていません。ゼロか百かの選択肢だけじゃなく、必要な場合は、ちょっとレスポンシブという臨機応変な対応もありですし、プロジェクトによっては個別スマホサイトを作ったほうが良いケースもあるかもしれません。 では、ウェブサイトの制作
レスポンシブWebデザインに無意味なアニメーションを付けるのはやめろ
最近ホットエントリー入りした http://coliss.com/articles/build-websites/operation/javascript/jquery-plugin-dylay.html とか（あと何個かホットエントリー入りした同系列のものあったと思うけど探すのメンドイ） 1000ブックマーク以上集めた http://b.hatena.ne.jp/entry/gori.me/it/21341 とか ブラウザのサイズ変えたら中身がアニメーションするよーってやつだけど。 アニメーションする必要全くないですよね。 意味ないどころか無駄蛇足ゴミクズボケカス ブラウザの大きさ変えたフィードバック？ 普段ブラウザの大きさ変えねーだろ。 一番ありうるのはスマートフォンやタブレットの向き変える時とかぐらいか。 「バッテリーすぐなくなる死ね」 言われるデバイス上でわざわざ負荷増やすな。 意
アイデア満載！レスポンシブ対応のナビゲーションを実装するチュートリアルのまとめ
デスクトップ、タブレット、スマートフォン、それぞれに適した表示にするナビゲーションを実装するチュートリアルを紹介します。 CSSで、JavaScript併用、jQueryのプラグインで簡単実装など、いろいろあります。
レスポンシブWebデザインのモックアップを簡単に作成できる「Adobe Edge Reflow」の使い方
このように@mediaを使用して出力先や解像度、サイズなどで条件分岐をしていき、必要のない要素を非表示にしたりして、見栄えを切り分けて製作していきます。 レスポンシブWebデザインのメリット・デメリット 前述のとおり、RWDでは同じCSSファイルで各デバイスのスタイルを共有します。そのため、共有しているスタイル変更の影響を受けやすく、制作をデスクトップとモバイルで分担している場合などは細かいレギュレーションを最初に決める必要があります。 とはいえ、モバイルとデスクトップをHTMLから切り分けた場合、完成後の更新の手間も二重にかかってしまいます。CSSで分岐して必要なプロパティのみ上書きしてデバイスに最適化するだけで同じ素材を共有できることは、サイト運営者にとって非常に魅力的です。 RWDのメリット デバイスごとに切り分けず1つのHTMLファイルで管理可能 スタイルを共有してテイストの統一性
スマートフォンなどに対応したレスポンシブデザインに関するCSSスタイル（font size自動調整をきるなど） - くらげだらけ
前にも一度、同じような問題に直面して調べて解決したような気がしたのですが、今回もおそらくその時と同じくGoogleで調べて解決したので、メモって忘れないようにしておこう。 font size自動調整をきる 最近ではレスポンシブデザインでいろんなデバイスに対応したりしますが、私もそんな感じの仕事をしていたわけです。最初はPC Chromeでwindowを伸び縮みさせながら作っていたわけですが、ある程度できた所でiPhone Mobile Safariでチェックしていたのです。Portrait mode（縦向き）では問題なく閲覧していたのですが、Landscape mode（横向き）にしたときにどうも文字サイズが変になります。 最近はiPhoneもリモートでWeb inspectorで見れたりしますから、細かく調べてみても数値的には問題無さそう。おかしいなってことで調べた後に、iPhoneでは
レスポンシブ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にはメディアクエリを読ませないよ
たった１行で完成？凄まじくレスポンシブデザインなサイトの作り方 | DECONCEPTER
簡単に作れる！みんな大好き可変グリッド 先日話題になっていた「なんだこれ！！「NHKスタジオパーク」のレスポンシブ・ウェブデザインが凄まじくレスポンシブ！！」で紹介されていたNHKスタジオパークのレスポンシブデザイン。 こちらのサイト、プラグインを使ってとてもシンプルに作られています。キレイ。このシンプルさを伝えたくてうずうずしてきました。せっかくうずうずしたのでどんな作り方をしているのかサンプルを交えて紹介します。 まずはこちらのデモを御覧ください。 凄まじくレスポンシブデザインなサイトデモ 使われているのはjQuery Masonryというプラグインだ！ @planetofgoriさんのブログで紹介されているように、jQuery Masonryというプラグインが使われています。このプラグインたった数行でNHKのサイトのような可変グリッドレイアウトが作れてしまいます。可変グリッドのレイア
[CSS]高性能すぎてビックリしました、レスポンシブデザイン用の超軽量フレームワーク -Kube Framework
[CSS]高性能すぎてビックリしました、レスポンシブデザイン用の超軽量フレームワーク -Kube Framework
[CSS]Responsiveデザイン対応のページ制作に役立つ5つのスタイルシートのテクニック
Responsiveデザイン対応ページを制作する際に役立つ、max-width, min-width, overflowなどの役立つ5つのテクニックを紹介します。 5 Useful CSS Tricks for Responsive Design [ad#ad-2] 下記は各ポイントを意訳したものです。 動画コンテンツの配置 max-width, min-widthの小技 値を相対値に overflow: hiddenを使ったテクニック 長いテキストは折り返す 動画コンテンツの配置 Responsiveデザインに対応した動画コンテンツの配置方法です。 デモページ CSS: 動画コンテンツの配置 .video { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; } .video iframe,
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Adobe製のレスポンシブ対応UIライブラリ・「Topcoat」
Responsive Grid Systemの仕様が変更となり、僕のレスポンシブデザインの作り方もちょっと変わりそうなので共有 | バンクーバーのうぇぶ屋