俺流レスポンシブコーディング
俺流レスポンシブコーディングの覚書。「人には人のレスポンシブ」があるのでこれが正解だってわけではないのですが、レスポンシブコーディングで悩んでいる人にとって参考になる記事になってくれたら嬉しいです。 ブレイクポイントは特定のデバイスの画面サイズを基準にしない 以前アンケートを取った時にデバイスのサイズを意識して決める人が半数以上を占めていた。 アンケート結果を抜きにしても「2021 年のブレイクポイント決定版はこれだ！」的な記事がバズっているのを定期的に目撃し、主流のデバイスのサイズを比較するアプローチがほとんどであるが、僕はデバイスの端末のサイズを基準にブレイクポイントを決めることには否定的である。 主流のデバイスのサイズなんてものは時間が経てば変化する。 昨年 iPhone 12 が発表された時に従来の画面サイズとは違うバリエーションになることが分かるやいなやタイムラインが慌てふためい
iPhone 12系統のレスポンシブ対応のメモ書き
今朝発表されたiPhone 12系統のレスポンシブ対応についてのメモ書き。取り急ぎ。 12 Pro Max 👉 428px (3x) PlusシリーズやXR,11,11 Maxの414pxよりも14px広い。 12 / 12 Pro 👉 390px (3x) 6〜8、Xや11 Proの375pxよりも15px広い。 12 mini 👉 360px (3x) ただし、miniの場合は375pxで描写してスケーリング表示するらしい？ とは言え、Androidのデバイスの多くは360pxなのでiPhone 12 miniの描写サイズが375pxだろうが360pxだろうが関係なかったりします。 横幅360pxでしっかり表示されていることは必須条件です。 追記1：これからも4インチ(320px)を意識する必要はあるのか？ 個人的見解ですが、あります。 理由としてはiPadのSlide Over
Textblock
This page was set using Textblock. Adjust your viewport width – or device orientation – to see it in action. Textblock calculates your setting based on minimum and maximum values for font size, line height, variable grades, and container width: minimum/maximum font sizeminimum/maximum line heightminimum/maximum container widthminimum/maximum grades (variable fonts only)To Initialize, add the eleme
レスポンシブ・デザインとの違いって？アダプティブ・デザインについて考える | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
お久しぶりです、ライターのYUKIです！ モービル・ファーストやレスポンシブ・デザイン、リーンUXやアジャイルなど、デザイナーとして押さえておきたいトピックはたくさんあります。私自身がまだまだ勉強不足なこともあり、今回はここに挙げたもののうちおそらく皆さんもよくご存知のレスポンシブ・デザインと同意味で使われることがある、アダプティブ・デザインについての個人的な見解をシェアさせて頂こうと思います。 「レスポンシブ・デザインて何？」という方は、まずLIGの過去記事をどうぞ。 必読！5分でわかる流行のレスポンシブWebデザインまとめ 必読！5分でわかる流行のレスポンシブWebデザインまとめ その2 必読！5分でわかる流行のレスポンシブWebデザインまとめ 制作編 はじめに レスポンシブ・デザインとアダプティブ・デザインが混同される理由 スマートフォンやタブレット、スマートテレビなどの普及により、
ここまでできる！Bootstrapで作られた国内のレスポンシブWebデザインのサイトまとめ20個 | A40
レスポンシブWebデザインのサイトは国内でも増えてきましたが、制作するとなるとかなり手間がかかります。 そんなとき役に立つのがレスポンシブWebデザイン対応のフレームワーク。中でも「Bootstrap」は、多彩な機能を備え、その使いやすさから広く知られています。 そこで今回は、国内の秀逸なレスポンシブWebデザインを集めた「Responsive Web Design JP」から、Bootstrapを使って作られたサイトをご紹介したいと思います。 whiteSTOUT フォトクリエイティブを中心としたマネージメントオフィスのサイトです。トップに大きな画像を使い、洗練されたイメージとなっています。 AGATHA E-SHOP アクセサリーブランド「AGATHA」のECサイトです。有名ブランドの、しかもECサイトにもBootstrapが使われています。 ACTUS online こちらは有名イン
絶対見たいレスポンシブWebデザインの海外事例7選
国内でも着実に採用が進みつつあるWebサイト制作の手法「レスポンシブWebデザイン」。今年7月に刊行され、すでに2刷となっている書籍『レスポンシブWebデザイン マルチデバイス時代のコンセプトとテクニック』の著者・菊池 崇氏が、いま見ておきたいレスポンシブWebデザインの事例を紹介する。 「この業種や規模ではレスポンシブWebデザインは難しい」。そう考えているWeb制作者に見てほしいのが、海外の先行事例だ。レスポンシブWebデザインの導入で先を行く海外では、個人サイトから大規模サイトまで、業種を問わず、参考になるサイトがたくさんある。 ここで紹介するWebサイトは、筆者が日頃からさまざま々なテクニックを吸収したり、教科書として参考にしたりしているWebサイトだ。みなさんも、ぜひ一度目を通してほしい。「レスポンシブWebデザインの限界」を乗り越えるキッカケになるだろう。 1. Time.co
一歩先に進むためのレスポンシブデザインのガイドライン
ウェブサイトをデスクトップ・タブレット・スマートフォンなど、クロスデバイス対応のレスポンシブデザインにする際、サイズを小さくしたりシンプルにするだけでなく、ユーザーの使い勝手を考慮した一歩先に進むためのUIデザインのガイドラインを紹介します。 UI Design Guidelines for Responsive Design 下記は各ポイントを意訳したものです。 はじめに デスクトップ タブレット スマートフォン おわりに はじめに レスポンシブデザインが誕生した時、ウェブ制作のコミュニティではそれを解決するための方法をすぐに考えだしました。多くのウェブサイトがレスポンシブに対応した今、そこから一歩先に進む時です。コーディングに注意を払うことは簡単ですが、いくつかのスクリーンサイズのためにデザインが犠牲になることがあります。 レスポンシブデザインの多くのリソースは基本をカバーするだけで、
ニーズ急上昇中のレスポンシブウェブデザイン（RWD）。 多様化するスマートフォン、タブレット端末にマルチ対応させるポイント - ECサイト構築運営に役立つ情報発信｜モバイルファーストマーケティングラボ
ニーズ急上昇中のレスポンシブウェブデザイン（RWD）。 多様化するスマートフォン、タブレット端末にマルチ対応させるポイント 2012.11.27 2014.12.11 技術 今月初旬に発売されたiPad mini。7.9インチタブレットは、耳にあてて電話するには、少々無理がありそうなサイズですが、従来のiPad（9.7インチ）よりも一回り小さくなり、持ち運びしやすくなりました。 iPad miniの他にも今秋、7インチ型のタブレット端末は相次いで発売され、タブレット市場は盛り上がりを見せております。ひとくくりに7インチ型ディスプレイとまとめても、サイトを制作する上で考慮しなければいけないディスプレイ解像度はそれぞれで異なっています。 ▼7インチ型タブレット
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
