デスクトップ、タブレット、スマートフォン、それぞれに適した表示にするナビゲーションを実装するチュートリアルを紹介します。 CSSで、JavaScript併用、jQueryのプラグインで簡単実装など、いろいろあります。
アイデア満載！レスポンシブ対応のナビゲーションを実装するチュートリアルのまとめ
デスクトップ、タブレット、スマートフォン、それぞれに適した表示にするナビゲーションを実装するチュートリアルを紹介します。 CSSで、JavaScript併用、jQueryのプラグインで簡単実装など、いろいろあります。
約36時間でレスポンシブデザインを作る！効率最優先で作るため必要だったリソースや情報色々 | バンクーバーのうぇぶ屋
先日このブログをリニューアルさせて頂いた旨をご報告させて頂きましたが、今回のリニューアルの主目的だったレスポンシブデザイン化について、とにかく効率優先で作業させて頂いた時のリソース関連や情報を一度僕自身の忘備録として抜粋してまとめさせて頂こうと思います！以前別のブログを作った時もそうですが、基本僕はとにかく効率重視派です。細部に渡る美しいデザインや、ガリガリのプログラミング。標準に法ったコーディングとかはその道のスペシャリストが仲間内に居るので、今回も僕は効率化に焦点を当てています！ ご紹介させて頂くのは主にFacebookやTwitter周りで共有させて頂いてきたリソースばかりですが、実際に使ってみると見えてくる注意点や、戸惑った部分、周りのデザイナーにも知っておいて欲しい部分等が見え隠れしてきたので、まずはその辺りを中心に、作業ステップ毎に簡単にご説明させて頂こうと思います。 僕と同じ
Android 4 に存在する device-width/height のバグ - メモ用紙
Android 4 では、メディアクエリで用いられる device-width/height の値が、通常の CSS ピクセルではなく、デバイスピクセルとして与えられるバグがある。そのため Xperia Z など高解像度のディスプレイを持つ端末で、広い画面のために設計されたスタイルシートが適用されるといった問題が発生する。 CSSピクセル 高解像度のディスプレイの登場により、CSS で指定したピクセル数をそのままディスプレイのピクセルに当てはめると、物理的なサイズが小さくなりすぎてしまう。たとえば 72 ppi のディスプレイでは、16 px の文字は 16 pt の大きさとして表示されるが、264 ppi の解像度を持つ iPhone 4/5 のディスプレイではわずか 4.36 pt と、ルビ程度の大きさになってしまう。 そこで「CSS ピクセル」という仮想的な値が考えられた。実際のピク
レスポンシブwebデザインに関する自分用メモ « ThinkChip
レスポンシブwebデザインについて勉強してみました。 勉強がてら簡単なテンプレートをつくってみたものの、いろんなところで躓きまくったので、制作過程で得た情報や注意点などを忘れないうちに全部まとめておこうと思います。 レスポンシブwebデザインとは １つのソース（html）をもとに、ウインドウサイズに応じてページのレイアウトを変化させる手法。 CSS3のMedia Queryでレイアウトを制御する。 基本的にはリキッドデザインだが、デバイスごとにレイアウトを変化させるため、ページ内の要素や配置、画像、フォントサイズなどを、設定したブレークポイントごとに調整する必要がある。 勉強したり参考にさせていただいたサイト →レスポンシブwebデザインで制作する時のポイント →CSS3 Media Queries を使って、Webサイトをスマートフォンに対応させるときの注意書き →レス
レスポンシブウェブデザイン制作で悩むブレイクポイントのまとめ - ECサイト構築運営に役立つ情報発信｜モバイルファーストマーケティングラボ
ブレイクポイントの考え方 レスポンシブウェブデザインを実現するのによく使われる手法がメディアクエリを使った画面サイズ別スタイリングです。レスポンシブウェブデザインの場合、ある画面サイズを境目として適用させるスタイルを切替えますが、この境目を『ブレイクポイント』といいます。 この『ブレイクポイント』ですが、特に「こうするべき」というものが今のところありません。この境目をどの値にするかもそうですし、何分割させるのかというのも制作者がいろいろ試行錯誤しています。 これまでのウェブ制作では、デスクトップの場合はアクセス解析からよく見られている画面サイズを分析、モバイルは横幅240pxが主流、などの明確な指針があったのでそれに合わせたデザインを行えば問題ありませんでした。 しかし多様なデバイスが次から次へと出てくるようになり、PCやタブレット、スマートフォンだけでなく、テレビやウェアラブルタイプのデ
レスポンシブWebデザインはブームではない
スマホ表示がFC2のデフォルトテンプレート使ってるような私にいわれたかないでしょうが、あくまでも使ってるユーザー側の視点として考えてもらえると嬉しいなと。 決して軽くするのが目的ではない 基本的にCSSでもじょもじょしているわけですから、例えばPC表示でサイドバーに画像があり、その領域をスマホに最適化する為に全て排除したとしても、見えないだけで読み込んでは居るわけですね。 Ethan Marcotte（イーサン・マルコッテ）氏が考案したレスポンシブWebデザインが生まれたのは2010年の5月。読み込みサイズに関してはやはり海外でも色々と議論されているわけでして、なかなかどうして大変ですねと。 そこから1年くらいたったあたりから日本にも広がりつつあります。 広がった理由はとてつもなく単純でして、PC表示、小型のスマホ、タブレットなど、様々なデバイスサイズに対応するために、全て1からCSSを書
レスポンシブWebデザインのウェブサイトを半年運営してみて思ったこと
昨年2011年10月に仕事で運営に携わっている大学ウェブサイトでレスポンシブWebデザイン (しかもフル可変グリッドレイアウト) を導入して、はや半年。約6ヶ月間、レスポンシブWebデザイン（RWD）で制作したウェブサイトを運営してみて思ったことをまとめてみました。これからレスポンシブWebデザインを導入したいと考えている方の参考になれば幸いです。 プロジェクトの概要 大学のウェブサイトをリニューアルするにあたり、さまざまな状況や制限などを考慮、また、今後3〜5年を見据えて、レスポンシブWebデザインを取り入れた制作を行いました。大学公式ブログでもリニューアルについて紹介しているので、ぜひそちらもご覧ください。そこで書いたように、以下のような思いもあり、このリニューアルを行いました： 今回、新しい試みを行った背景には、このウェブサイトが「大学のウェブサイト」であることが大きな要因の一つとし
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
