Figma初心者でも大丈夫！ レスポンシブWebデザインをFigmaで作るための3つのポイント
この記事について この記事は、スマートフォン時代のWebデザインスクール や Web制作の基礎から学べる「Webコーディングスクール」 の資料制作をお手伝いして頂いているemiさんによる寄稿記事です。 最近はスマホで見ることを前提にデザインされたWebサイトも増えてきていますが、そのようなWebサイトでもPCでみた時にも違和感のないデザインになっています。 また、総務省の「通信利用動向調査」を見ると、スマートフォンでもパソコンでもインターネットが利用されている事がわかります。 利用状況 2022年のインターネット利用率（個人）は84.9％となっており（図表4-11-1-2）、端末別のインターネット利用率（個人）は、「スマートフォン」（71.2％）が「パソコン」（48.5％）を22.6ポイント上回っている。 （出典）総務省「通信利用動向調査」 このようにスマホ、PCどのデバイスでも見ることが
レスポンシブ対応の遅延画像が「sizes=auto」を使用すると簡単に実装できるようになります
朗報です！ 来年の2024年に、ブラウザはCSSから画像の実際の幅を取得し、それを画像のサイズとして使用することができるようになります。 srcsetで遅延読み込みされた画像の場合、ブラウザはsrcsetからソースURLを選択するために画像のレイアウト幅を使用できるようになります。 Add sizes=auto to lazy-loaded <img> これにより、Webデベロッパーはsizes属性を省略したり、loading=lazyを持つ<img>要素に対して明示的にsizes=autoを設定することができます。 ブラウザは、画像のレイアウト幅にsrcset属性の値を使用します（遅延画像は、レイアウトが判明するまで読み込みを開始しません）。遅延ではない画像の場合は無効で、100vwと同等になります。 sizes=autoはレスポンシブ対応の<img>に特に強力です。複数のバージョンの画
全ブラウザ対応したcontainer queryは何がスゴイのか？
全ブラウザ対応になったCSSのコンテナクエリについて、基礎から一歩踏み込んだ内容までを解説します。 デモ① SNSリアクションバー（container-type, @container） https://codepen.io/tonkotsuboy/pen/PoBMMZw デモ② 古都めぐり（cqw） https://codepen.io/tonkotsuboy/pen/jOvOqOG Zenn記事 https://zenn.dev/moneyforward/articles/css-container-query Twitter https://twitter.com/tonkotsuboy_com 3/1（水）に「TechFeed Experts Night#14 」で発表した内容です。 https://techfeed.io/events/techfeed-experts-night
レスポンシブ対応｜Webデザインツール｜Editor X
ワイヤーフレームからプロダクションまで Web デザインのプロセスをどこまでもシームレスに。洗練されたレスポンシブ CSS をドラッグ＆ドロップで実現できます。
レスポンシブの実装が今までと変わる！ CSSの新機能コンテナクエリと:has()疑似クラス、最初に理解しておきたい基礎知識を解説
CSSの新機能コンテナクエリ（@container）と:has()疑似クラスが、いよいよChrome 105（8月末、来週リリース予定）でサポートされます。 コンテナクエリとは今までのメディアクエリがビューポートに依存していたのとは異なり、親要素（コンテナ）のサイズに対してスタイルを適用できます。:has()疑似クラスは指定した要素を含んでいる場合にスタイルを適用できます。 レスポンシブの実装この2つの新機能は単独でも強力ですが、組み合わせるとさらにすごいパワーを発揮します。この2つの新機能の最初に理解しておきたい基礎知識を紹介します。 container and :has(): two powerful new responsive APIs landing in Chromium 105 by Una Kravets 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスにもと
picture要素で使うsourceタグにもwidthとheight属性を書くといいらしい
突然ですが、picture要素を使ってアスペクト比が違う画像を読み込む場合でも、imgとsourceにwidthとheightを記述すれば、レイアウトシフトが起こらなくなるって知ってました？ <picture> <source srcset="img/img-800x480px.jpg" media="(min-width: 820px)" width="800" height="480"> <img src="img/img-480x480px.jpg" width="480" height="480" alt="画像の説明"> </picture> 実は1年以上前に公開されたChrome 90からサポートされていたそうで（僕はつい先日知りました）、上のコードのようにimgとsourceの両方にwidthとheightを記述すれば、ブラウザがそれらの値を認識して画像ファイルを読み込む前か
CSSでfont-sizeをレスポンシブ対応にする最新テクニック！ clamp()関数で定義する便利ツール -Min-Max Calculator
Webサイトをレスポンシブ対応にする時、メディアクエリを使用するのも一つの方法ですが、CSSのclamp()関数を使用すると、最小値と最大値を定義してその間の値は流動的にすることができます。 たとえば、小さいスクリーンでは最小値の16px、スクリーンが大きくなるにつれ、最大値の24pxになるまで少しずつ大きくなる、という感じです。 このclamp()関数を使用して、CSSでレスポンシブ対応のフォントサイズやレイアウトを簡単に定義できるツールを紹介します。ツールはオンラインでも、ローカルでも利用できます。 Min-Max Calculator Min-Max Calculator -GitHub Min-Max Calculatorの特徴 Min-Max Calculatorの使い方 Min-Max Calculatorの特徴 Min-Max Calculatorは、レスポンシブ対応にする時
「未満」を表現！メディアクエリの「not」キーワード | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。エンジニアのつっちーです。 以前に、「メディアクエリの書き方に注意しないと、ウインドウ幅と表示倍率によっては、スタイルの適用されない状態が発生してしまう」という内容の記事を書きました。 今回はその続編です。前回の記事では、対策として以下の2点を挙げ、基本的には1の方法を利用すべきであるとまとめました。 メディアクエリの設定をmin-widthかmax-widthに統一する（推奨） メディアクエリの設定に小数を利用する（非推奨） でも、たまにこの方法では不便なケースにも遭遇します。そんなときに便利なnotというキーワードがあったことを、最近になって知りましたので、もう一つの解決策として取り上げてみます。 こんなとき、min-widthかmax-widthに統一するのは大変…… 上に書いたとおり、メディアクエリはmin-widthかmax-widthに統一したいものです。ブレイクポ
CSSコンテナクエリの登場で、デザインのやり方も考え方も大きく変わる
現在のレスポンシブデザインは、ビューポートにもとづいてレイアウトを最適化します。そして、コンテナクエリは親要素のコンテナにもとづいてレイアウトを最適化します。コンテナクエリとは何か、デザイナーのワークフローにどのような変化をもたらすかを紹介します。 今まではビューポート（メディアクエリ）で変化するコンポーネントと影響を受けないコンポーネントの2種類でしたが、これからは親コンテナ（コンテナクエリ）で変化するコンポーネントも必要になります。 CSS Container Queries For Designers by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに レスポンシブデザインの現状 コンテナクエリとは コンテナクエリを念頭に置いたデザイン デベロッパーとのコミュニケーション方法 レスポ
ウェブサイトに演出は不要!? ユーザー設定にレスポンシブ対応できる新しいCSS - ICS MEDIA
画面サイズだけではなく、デバイスのユーザー設定に対してレスポンシブにできる新しいCSSのメディアクエリーが登場しています。スマートフォンやパソコンで、画面サイズに応じてレイアウトが変化する「レスポンシブ・ウェブ・デザイン」はほとんどのウェブサイトで実装されているでしょう。新しい世代のレスポンシブ手法は、画面サイズだけでなくユーザー設定に対して挙動やスタイルを変更させることができ、ユーザービリティーやアクセシビリティーの向上に役立ちます。 本記事では事例とあわせて最近のレスポンシブ手法を紹介します。 この記事で紹介すること ダークモード対応 モーションの無効化設定 iOSのフォントサイズ変更 ダークモード対応 OSには外観モードの設定項目があります。Windows 10やmacOS、iOS、Androidのいずれもライトモードとダークモードの切り替え機能が提供されています。ライトモード・ダー
【図解で納得】レスポンシブデザインのブレイクポイントの細かすぎる新解釈 [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)
【2020年夏】imgタグにはwidthとheight属性を書くのがいいらしい
そうなんです。 2020年夏、ページの読み込み中にレイアウトがシフトしないように、img要素にはwidthとheight属性を記述するのがいいらしいんです。 <img src="link/to/image.jpg" width="300" height="400" alt="画像の説明"> その昔、これが普通の時代もあったんですけどね。レスポンシブな時代にはwidthとheight属性を書かないのが一般的（？）になっていました。また、widthとheight属性が記述してあってもCSSでwidth: 100%; height: auto;が指定されているとレイアウトシフトが発生してしまっていました。 参考： img要素のサイズ属性の記述の有無についてのTwitterのアンケート なんでいまさら？ なぜなら、2019年の後半にブラウザにレイアウトシフトを回避するための新たな機能が実装されたか
「Webデザイナーはコーディングできるべきか」という議論に対する私の考え
Webデザイン 「Webデザイナーはコーディングできるべきか」という議論に対する私の考え Wednesday, January 15th, 2020 スマートフォン時代のWebデザインスクール ご自宅で動画受講可能、3月末まで割引&体験レッスン無料！ モダンなWebデザイン制作・Adobe XD・Photoshop・UI/UXなど基礎から学べる講座です。 WordPressでWebサイトを制作したい方のための「PHP徹底入門講座」、「WordPressカスタマイズ講座」もご自宅で受講可能です。 過去にも何度か話題になっていましたが、ここ最近TwitterのWeb制作者界隈で過去最高に「Webデザイナーがコーディングできるべきかどうか」という議論が白熱しているように思います。 かなり悩んだのですが、私なりにお話しできることもあるかと思い、この件について私の考えを記事にまとめて公開することにし
CSSで見出し固定＋レスポンシブ対応の表を作成
2019年10月17日 CSS, HTML, Webサイト制作 料金表やサービスプランの比較、タイムテーブルなどなど、使う場面が多い割には制限も多く、初心者には少しとっつきにくいと思われがちな表。今回はあると便利な表の見出し固定やレスポンシブ対応の方法を紹介します。 見出しの行を固定する 表の中の行が増えてくると、スクロールした時に表の見出しが画面から見えなくなり、なんの値だったのかがわかりづらくなります。そんな時のために、行数の多い表では一番上にくる見出しの行を固定しておくといいですね。 まずはベーシックな表を作成します。table タグに border-collapse: collapse; を指定することで、セル間のスペースがなくなってフラットな見た目になりますよ。 HTML <table> <tr class="heading"> <th>車体名</th> <th>価格</th>
次世代のロゴデザインに欠かせない！レスポンシブロゴの基本
レスポンシブデザインがWebに旋風を巻き起こしてから10年が経過し、今ではWebサイトの標準となっています。モバイル端末による閲覧は今や全トラフィックの3/4を超え、ブラウジング自体のトラフィックも全体的に増加したことで、従来のWebサイト設計に大きなユーザビリティの問題を引き起こすようになりました。 その中で注目を集めているのが、レスポンシブロゴと呼ばれる新しいロゴの考え方です。 今回は、次世代のロゴデザインに欠かせないレスポンシブロゴの基本についてご紹介します。 表示サイズに関するユーザーの要求に応えるために、ロゴについて再考することは非常に重要です。 次世代のロゴデザインに欠かせない！レスポンシブロゴの基本 レスポンシブロゴ（Responsive Logos）とは、様々な画面サイズに合わせて数段階に変化するロゴのことを指します。これまでは、スマートフォンやタブレット、デスクトップなど
レスポンシブWebデザインのブレイクポイント、何ピクセルにすればいいの？
レスポンシブWebデザインとは、画面の横幅に応じてWebサイトの表示を変化させ、最適化するデザイン手法です。 レイアウトが「シングルカラム」から「マルチカラム」に変化したり、ナビゲーションメニューが「ハンバーガーメニュー(三←こういうの)」から「横並び」に切り替わったりすることで、スマートフォンから、タブレット・PCまで、画面の横幅に合わせて、Webサイトを最も見易い形で表示します。 そして、そのデザインが変わる境目を「ブレイクポイント」と言います。 ブレイクポイントは、画面のピクセル数（CSSピクセル ※）で表されます。 ※ CSSピクセルについては記事：高解像度ディスプレイとデバイスピクセル比 さて、このブレイクポイントですが、特に、「何ピクセルにすべき」「何箇所設定すべき」といった決まりがありません。 Web制作者も「この辺りに設定すれば大体スマートフォンとタブレットの境目になるので
AMP Start、レスポンシブウェブデザインのAMPサイトを簡単に構築できるテンプレートを公開
[レベル: 中級] AMP プロジェクトは、AMP HTML で構成したウェブサイトを簡単に作成するためのテンプレートの提供を始めました。 AMP Start という名称のサイトで公開しています。 まずは2種類のテンプレートを配布 AMP Start で公開されているテンプレートを使えば、AMP に対応したサイトをゼロから構築する必要はありません。 テンプレートはデザイン的に洗練されており、たいていのサイトに必要な要素を備えています。 現在公開されているテンプレートは、次の2種類です。 記事用 ブログ用 記事もブログも大差ないように思いますが、ナビゲーションメニューやソーシャルボタンなどの要素に多少の違いがあります。 “COMING SOON”とあるので、もう1種類のテンプレートが近々公開されると思われます。 RWD + AMP HTML どちらのテンプレートも、レスポンシブ ウェブ デザ
Web制作の基礎から学べる「Webコーディングスクール」を渋谷とオンラインで開催します
他のスクールや書籍との違い 最新のWeb制作について学ぶために、今回から授業内容を大幅に書き直しています。 このスクールではHTML・CSSだけでなく、Sass、BEM、Emmet、JavaScript、AI支援技術などWeb制作の現場で必要とされる技術を一通り体験しながら学ぶことができます。 授業も「世界一わかりやすいIllustrator & Photoshop & XD Webデザインの教科書」などのWebデザイン書籍を多数執筆している講師本人による授業の動画を視聴可能です。 （授業の動画はPCやスマートフォンなどからご覧いただけます。生放送ではなく録画です） 古いHTML5ではなく、最新のHTML Living Standard 多くのWebスクールや書籍では「HTML5」という勧告に基づいたHTMLを教えていますが、HTML5は2014年に勧告された古い仕様で、現在は廃止されてい
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
レスポンシブ対応する時に、どうしても綺麗に要素が収まらない時のほぼ完璧な対処法
Breakpoints – Figma
