コンテナクエリ @container が全ブラウザ対応。新時代のレスポンシブ対応を完全理解する
本日（2023/2/14）、ついに Firefox でコンテナクエリ（container query）に対応しました。Chrome・Edge・Safari はすでに現行ブラウザで対応済みのため、全ブラウザにてコンテナクエリが使えることになります💐 従来、レスポンシブ対応でレイアウトを変えるには @media を使ってウインドウサイズを基準にするかありませんでした。コンテナクエリ @containerを使うと任意の要素を基準にできるので、「A要素の横幅が 500px 以下のとき、子要素のレイアウトを変える」などが手軽に実現できます。 とくにコンポーネントベース開発が主流の現在においては、コンテナクエリをマスターすることで、より柔軟でラクなレスポンシブ対応が可能になります。 本記事では、コンテナクエリの基本、メリット、デモまでをできるだけ詳しく解説し、コンテナクエリを理解することを目標としま
CSSの進化がすごすぎる！新しいレスポンシブデザインの実装方法を解説
現在のレスポンシブデザインは、ビューポートにもとづいてレイアウトを最適化しています。しかし、新しいレスポンシブデザインでは、アニメーションが不要なユーザーには動きを少なくしたり（無くしたり）、親コンテナの幅にもとづいてコンポーネントを最適化したり、スコープ付きスタイルやフォームファクターなど、ユーザーの好みや環境に合わせて最適なコンテンツを提供できるようになります。 これらの新しいレスポンシブデザインのコンセプト・実装方法を紹介します。CSSがこれまで以上に進化します。 The new responsive: Web design in a component-driven world by Una Kravets 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 レスポンシブデザインの現状 ユーザーでレスポンシブ コンテナでレス
俺流レスポンシブコーディング
俺流レスポンシブコーディングの覚書。「人には人のレスポンシブ」があるのでこれが正解だってわけではないのですが、レスポンシブコーディングで悩んでいる人にとって参考になる記事になってくれたら嬉しいです。 ブレイクポイントは特定のデバイスの画面サイズを基準にしない 以前アンケートを取った時にデバイスのサイズを意識して決める人が半数以上を占めていた。 アンケート結果を抜きにしても「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
約36時間でレスポンシブデザインを作る！効率最優先で作るため必要だったリソースや情報色々 | バンクーバーのうぇぶ屋
先日このブログをリニューアルさせて頂いた旨をご報告させて頂きましたが、今回のリニューアルの主目的だったレスポンシブデザイン化について、とにかく効率優先で作業させて頂いた時のリソース関連や情報を一度僕自身の忘備録として抜粋してまとめさせて頂こうと思います！以前別のブログを作った時もそうですが、基本僕はとにかく効率重視派です。細部に渡る美しいデザインや、ガリガリのプログラミング。標準に法ったコーディングとかはその道のスペシャリストが仲間内に居るので、今回も僕は効率化に焦点を当てています！ ご紹介させて頂くのは主にFacebookやTwitter周りで共有させて頂いてきたリソースばかりですが、実際に使ってみると見えてくる注意点や、戸惑った部分、周りのデザイナーにも知っておいて欲しい部分等が見え隠れしてきたので、まずはその辺りを中心に、作業ステップ毎に簡単にご説明させて頂こうと思います。 僕と同じ
レスポンシブデザインに見るデザインカンプと実装との溝
デザインカンプを基に実装する難しさはあらゆる場面で語られます。私の場合は特にレスポンシブデザインに関する仕様の解釈に悩む場面が頻繁にあります。 その問題点はどこにあるのでしょうか。私の制作したツールの紹介を通して、グリッドシステムのあり方やレスポンシブデザインの意味などを考察しました。 デザインカンプとワークフローの関係性 ウェブサイト制作のワークフローでは、クライアントとの上流での合意形成と開発者への指示書との役割をデザインカンプが兼ねるパターンがよくあります。デザイナーはウェブページの実装仕様を決定しながらデザインカンプを制作し、開発者はデザインカンプを通して前工程での決定を読み取りながら実装します。 デザインカンプを基に実装する難しさの一因は、それがシステムが取り得る状態のうちの一場面を切り取った単なるスナップショットでしかない構造です。 仕様を理解するためには、デザイナーが想定する
Googleモバイルファーストインデックス後はレスポンシブが唯一の選択肢か？ #inhouseseo
[レベル: 中級] レスポンシブ ウェブ デザインが選択すべき構成だ (Responsive Web Design is the way to go.) Google の Gary Illyes（ゲイリー・イリェーシュ）氏は、8月22日に開催された ISM Spin-off #2 で、このようにレスポンシブ ウェブ デザインをかつてないほどに推奨しました。 これまでは、「動的な配信」と「別々の URL」を含めた3つのモバイル構成のどれを選択しても構わないと言っていました。 しかし方針を変えて、レスポンシブ ウェブ デザイン1本に絞ったのです。 動的な配信と別々のURLが抱える問題 レスポンシブ ウェブ デザイン（以下、RWD）をゲイリーが強く推奨する最大の理由は、モバイル向けサイトと PC 向けサイトに差異がないことです。 見た目は違っていたとしても、同じ HTML を配信しているので、コ
レスポンシブWebデザイン時のメインビジュアル周りの挙動の考察
こんにちは、森山です。 最近のブログではレスポンシブWebデザインのことばかり取り上げていますが、実際に現在お受けしているお仕事もほぼ100%がレスポンシブWebデザイン対応でご依頼いただいています。 おかげさまでレスポンシブWebデザインの経験を積ませていただくことができ、制作の際もあまり悩むことは少なくなってきたのですが、そんな今でも「ここどうしよう・・」と私を悩ませることがあるのが「メインビジュアル」（あるいはスライドショー）周りの挙動についてです。 写真だけを表示している場合は単純に縮小すれば問題ないことが多いのであまり困らないのですが、難しいのはキャッチコピーなどのテキストと合わせて表示させたい場合です。実際に制作するサイトはこのパターンがとても多いのですが、写真と同じ比率で文字まで縮小すると読めないし、でもある程度可読性が保てる文字サイズを維持しようとすると今度はレイアウトを再
TOP | 保健医療2035 | 厚生労働省
急激な少子高齢化や医療技術の進歩など医療を取り巻く環境が大きく変化する中で、2035年を見据えた保健医療政策のビジョンとその道筋を示すため、国民の健康増進、保健医療システムの持続可能性の確保、保健医療分野における国際的な貢献、地域づくりなどの分野における戦略的な取組に関する検討を行うことを目的として、「保健医療2035」策定懇談会（以下、「懇談会」という。）を開催する。 Dramatic shifts in population demographics and the rapid advancement of medical technology have led to significant changes in the health care field. Within this context, Health Care 2035 Advisory Panel (hereinafte
SINAP | レスポンシブの基本をおさらい：画像の見せ方とレイアウトのパターンを把握しよう
シナップの小茅です。今回はRWDならではのデザイン表現として「よく見かける画像の見せ方」と、簡単にレイアウトパターンについてまとめました。 RWDではマルチデバイス対応を標準としており、ワンソース・マルチデバイスといった運用の効率化など良いメリットもある反面、複数デバイスを考えた設計や実装など、複雑な面も持ち合わせているため、制作前の綿密な計画は非常に重要です。それらを踏まえたまとめをご紹介します。 【 1 】 よく見かける画像の見せ方「RWDならではのデザイン表現とは?」 【 2 】レイアウトパターンのおさらい「デザイン・実装するのは、どのパターン?」 【 1 】 よく見かける画像の見せ方：RWDならではのデザイン表現とは? 最近は技術面においても開発が進み、RWDならではのデザイン表現が増えてきました。 そこで画像の表示方法をどのように考えたら良いか、4点ほど例をあげてご紹介します。
レスポンシブHTMLメールを作成する際の覚書 ｜ Tips Note by TAM
レスポンシブHTMLメールを作成することがあったので、覚書です。 おもに「テーブルレイアウトで、PCの時には横並びのカラムを、スマホの時には縦並びにする」 方法についてです。 普段、あまりHTMLメールを作成することがない方もいらっしゃるかと思いますので、 まず、HTMLメールを作成する際の大前提を。 だいたい以下のような感じです。 テーブルレイアウト Outlook（2007/2010/2013）がfloatに対応していないなど、 メーラーによって、CSSのサポート状況にばらつきがあります。 多種多様なメーラーでレイアウト崩れを起こさないためには、 テーブルレイアウトが基本です（今更感はありますが）。 ※主要メーラーのCSSサポート状況は以下で確認できます。 Guide to CSS support in email | Campaign Monitor CSSはインラインで記述 Gma
レスポンシブデザインを作るときにオススメ！cssフレームワークまとめ
Web制作者にとってレスポンシブデザインの技術は必要になっており、レスポインシブの需要も急上昇しています。 今回は、レスポンシブデザイン作成時にオススメのCSSフレームワークをご紹介します。 レスポンシブデザインとCSS レスポンシブデザインはマルチデバイスに対応するために生まれた技術です。 一般的なWebデザインの場合、PC・スマホ・タブレットと各デバイス専用のCSSが必要でしたが、レスポンシブデザインはスタイルシート1枚でPCやスマホに表示させることができます。1枚で完結できるため効率的ではありますが、一方でCSSへの理解な手法でもあります。 例えばウィンドウ幅によってスタイルシートを変更するための「@media（メディアクエリ）タグ」の記述であったり、デバイス幅の指定（max-width: ●●px、min-width: ●●pxの使用）も理解しなければうまく対応できなくなってしまい
参考になるレスポンシブデザインのサンプル集
Web制作の環境は大きく変化しています。 スマホ、タブレットなど様々なデバイスにホームページをを最適化しなければいけないため、各デバイスに対応できる支流のレスポンシブデザインのニーズが高まっています。 レスポンシブデザインをできるだけ効率的に作成するためのサンプルをストックしている方も多いのではないでしょうか。 今回はWeb制作時に役立つレスポンシブデザインのサンプル集をご紹介します。 レスポンシブデザインとは Web制作をスタートする時、デザインからワイヤー構成を考えますが、どの端末向けのサイトにするか、ということです。 PC用、スマホ用、とデバイスごとにファイル管理をしていたら更新の時間もかかり管理も大変です。 そこで単一のファイルで管理ができ、各デバイスに応じた表示をさせることが可能なのがレスポンシブデザインです。 全てのデバイスに対応したサイトを考える時、デザインをマルチメディアで
レスポンシブデザインがすべてではない：マーケターが適応するべきデザインと開発のトレンド（前編） | Moz - SEOとインバウンドマーケティングの実践情報
モバイル表示をレスポンシブデザインにするのは、今はふつうのことだ。しかし、単に「レスポンシブならOK」なのだろうか。それは、Windows 8が強烈にdisられたのと同じ轍を踏むことになる。 最近友人から、“サイト推奨事項”を確認して説明してほしいと頼まれた。SEOからスタートした著名なデジタルマーケティングの代理店が送ってきたものだという。 その「サイト推奨事項」のドキュメントには、コンテンツや検索の最適化に関する記述があり、おおかたは優れている内容だったのだが、検討していくうちに、次の付記に目が留まった。 ※モバイルは貴社のトラフィックの53%を占めています。モバイルフレンドリーなレスポンシブサイトを構築することをお勧めします。 グーグルは、あらゆるデバイス上でサイトを適切に表示するレスポンシブデザインの採用を推奨しており、レスポンシブデザインはモバイルでの検索順位を引き上げる助けにな
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Learn Images | web.dev
複数のモバイルレイアウトを一度に確認出来るツール「Sizzy」
画像を自動リサイズする際に拡大縮小しすぎを防ぐCSS [ホームページ作成] All About![画像を自動リサイズする際に拡大縮小しすぎを防ぐCSS [ホームページ作成] All About](https://cdn-ak-scissors.b.st-hatena.com/image/square/2c2e2c7c35a60f0280bc5790964fb0b51fee040a/height=288;version=1;width=512/https%3A%2F%2Fimgcp.aacdn.jp%2Fimg-a%2F1200%2F900%2Faa%2Fgm%2Farticle%2F4%2F5%2F4%2F4%2F9%2F2%2F201804051009%2Ftopimg_original.jpg)
Web Fundamentals — Google Developers
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
株式会社アイムービック
