俺流レスポンシブコーディング
俺流レスポンシブコーディングの覚書。「人には人のレスポンシブ」があるのでこれが正解だってわけではないのですが、レスポンシブコーディングで悩んでいる人にとって参考になる記事になってくれたら嬉しいです。 ブレイクポイントは特定のデバイスの画面サイズを基準にしない 以前アンケートを取った時にデバイスのサイズを意識して決める人が半数以上を占めていた。 アンケート結果を抜きにしても「2021 年のブレイクポイント決定版はこれだ！」的な記事がバズっているのを定期的に目撃し、主流のデバイスのサイズを比較するアプローチがほとんどであるが、僕はデバイスの端末のサイズを基準にブレイクポイントを決めることには否定的である。 主流のデバイスのサイズなんてものは時間が経てば変化する。 昨年 iPhone 12 が発表された時に従来の画面サイズとは違うバリエーションになることが分かるやいなやタイムラインが慌てふためい
【図解で納得】レスポンシブデザインのブレイクポイントの細かすぎる新解釈 [2022年更新版] - webのあれこれ
※前回の2020年12月からベゼルレスのiPad mini6（8.3インチ）が出たので更新しています。 記事の詳細の内容はiPad mini6が入っていない内容です。 MacBookもM1チップでProじゃなくてAirで十分みたいになっていて、大きさやスペックが大きければいいみたいな時代は終わって、自分に合ったものを選ぶ人がより増えてきたように感じています。 前回が2019年5月にレスポンシブデザインのブレイクポイントの記事を書いて、今でもたくさんのアクセスがあり、たいへん嬉しく思っています。 そこで今回2021年に向けて内容を見直しました。 最近発売されたベゼルレスのiPad AirやiPhone12 miniなど新しいサイズも増えて、より複雑になった印象です。 iPadのSplit Viewを気にしない人は、去年と同じ560px/960pxでも問題はないです。 hashimotosan
![【図解で納得】レスポンシブデザインのブレイクポイントの細かすぎる新解釈 [2022年更新版] - webのあれこれ](https://cdn-ak-scissors.b.st-hatena.com/image/square/69fd58e599edd140a8c7e26e7058d9122c7ed7a1/height=288;version=1;width=512/https%3A%2F%2Fcdn-ak.f.st-hatena.com%2Fimages%2Ffotolife%2Fh%2Fhashimotoblog%2F20201207%2F20201207184733.png)
レスポンシブな3カラム・レイアウトの変形パターンを考える
ウェブサイトで3つのアイテム（製品ラインとか製品の特長とか）をフィーチャーしたい場合、ふつうに3カラムのレイアウトを使いますよね？ですが、いくつかの条件を満たしつつレスポンシブに対応しようとすると結構難しかったりします。 2つでもなく、4つでもなく、どうしても3つのアイテムをフィーチャーしたい。 4カラムだとデスクトップサイズでも各アイテムが小さすぎるし、2カラムだとデカすぎる、みたいな。やっぱり、デスクトップサイズでは3カラムがちょうど良い場合もありますよね。 そんな時どういった対応ができるのか、ちょっと考えてみたいと思います。 レイアウトの条件 たとえば、以下のようなレイアウトの条件があったとします。 どの画面サイズでも表示を隠さない（コンテンツ・パリティ） アイテムの扱いは極力平等にしたい（コンテンツ・プライオリティ） あえて優先順位をつけるなら、左から1、2、3番の順 誘導用のキャ
テーブルをレスポンシブに対応させるのに便利なjQueryプラグインまとめ｜BLACKFLAG
レスポンシブWebデザインのサイトでテーブル（表組み）を組み込む際に 要素量の多いテーブルの場合、CSSでレイアウトを無理やり調整したり、 スマホレイアウト時はテーブル全体を横スクロールさせるようにしたりと レイアウトに苦労することがよくあります。 そんなテーブルをレスポンシブ対応させる際に いろいろと便利に使えそうなjQueryプラグインを まとめて自分用メモとして紹介してみます。 Basic Table (jQuery Responsive Tables) Basic Table (jQuery Responsive Tables) デモページはこちら まず最初は「Basic Table」。 画面幅に応じて見出し要素を複製するかたちで テーブルを項目の並びを整えて収めてくれます。 様々なレイアウトパターンが用意されていて テーブルが長くなる場合にはスクロール制御する機能もあり、 いろい
閲覧デバイスによってユーザのニーズは変わるのか？
先日「Responsive design is failing mobile UX 」という記事を読んでどうしても気になったので、ひとこと個人的な意見を書き残しておきます。 意訳すると「レスポンシブ・デザインではモバイルのユーザ体験を満たせない」という題の記事だが、この記事では「ユーザが求めているものは、閲覧しているデバイスによって変わる」と言っていて、ウェブサイトのコンテンツはデバイスによってカスタマイズすべきだと言っています。 Figure out what it is that your customer needs based on the device being used, and deliver that experience. [意訳] 閲覧デバイスによる顧客のニーズを見つけて、その体験を提供するべきだ う〜ん、それはどうかな？と。 画面サイズや入力方法（タッチ or キー
参考にしたいレスポンシブのサイト
こんにちは、工藤です。 ただいまレスポンシブの勉強中・・というか効率的な進め方を模索中です。 それぞれ1つのファイルで済む分、ソースが汚くなってしまったりUIの面で悩んでしまったり、なかなか難しいです。 そんなこんなで今回は参考にしたいレスポンシブのサイトを集めさせていただきました。 日本語サイトのみのご紹介です。 ゆい動物病院 http://yui-ah.com/ ウィンドウを小さくしてもテイストが損なわれないのがすごいです。 項目もそれぞれ見やすいです。 LIFA http://lifa-motosu-nagara.jp/ 最初メインビジュアルの文字組みが変わっているなあと思ってウィンドウを小さくしたら・・ すごく考えてつくられているなあと思いました。 TEIBOW Cosmetics http://www.teibow.co.jp/cosmetics/top.html ビジュアル部分
レスポンシブテーマでサイト制作するときに欠かせない便利な2つのツール | シンプルでおしゃれなWordPressテーマ Minimal WP
最近レスポンシブWordPressテーマが人気です。 Minimal WPのテンプレートもレスポンシブ対応テーマが人気で、 非対応のテーマで運営していた方の乗り換えもかなり多くなって来ました。 レスポンシブテーマのいい所は、パソコンでもスマホでもタブレットでも、 見る人の環境に合わせて勝手にレイアウトが最適化される所です。 スマホ専用サイトを作らなくても良いのでラクチン。 ただ、サイト作成時にはレイアウトの確認を各端末でしなくてはいけないので、 普段のサイトよりも確認作業はひと手間必要です。 そんなひと手間を劇的にラクチンにする便利ツールを2つご紹介。 各端末のレイアウト確認が簡単になる「Viewport Resizer」 いわゆるブックマークレットと言うやつです。 ブラウザのブックマークバーなんかに登録しておいて使います。 自分のサイトを開いてこのブックマークレットのボタンを押すと、 パ
レスポンシブWebデザインでハマりがちな%指定 │ Design Spice
レスポンシブWebデザインでは要素を可変にするために数値を%で指定することが多いですが、%指定の仕様を理解してないとハマることがあります。自分もそのような経験があったので備忘録としてまとめました。 要素の幅と高さの%指定 レスポンシブWebデザインのように、ある要素の幅を一定の比率を保ったまま可変するようにするには、通常、値を%で指定します。この時の値は、 求める要素の幅÷親要素のコンテンツ幅×100% の式で求められます。 例えば求める要素の幅が20px、親要素のコンテンツ幅が200pxの場合は、10%となります。 また、ここで言うコンテンツ幅とはmargin、padding、borderを含まない幅です。 同様に高さを%で指定する場合は、 求める要素の高さ÷親要素のコンテンツの高さ×100% となります。 marginとpaddingの%指定 左右のmargin、paddingを%で指
新しいGoogleマップをレスポンシブ対応で埋め込む方法 | ライフハッカー・ジャパン
Digital Inspiration：新しくなったGoogleマップでは、ウェブページに地図を埋め込むことが可能となりました。Googleマップのサイトを開き、埋め込みたいエリアをズームインします。右下の歯車アイコンをクリックして、メニューから「地図を埋め込む」オプションを選択すれば、埋め込みコードを取得できます。 埋め込みコードを使ったサンプルページがこちらです。デフォルトでは、Googleマップがレスポンシブに対応していません。スマートフォンなどでページを開くと、地図のサイズがデバイス画面にフィットせず、はみ出してしまいます。 同じGoogleマップをレスポンシブ対応で埋め込んだサンプルがこちら。ブラウザをリサイズしたり、スマートフォンからページを開いても、画面に合わせて地図のサイズを自動調整してくれます。 Googleマップをレスポンシブに埋め込む方法 以下がGoogleマップのデ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://infinityforest.net/home/archives/2780