CSSだけでスクリーンサイズやフォントサイズを取得、CSSの三角関数tan(atan2())はcalc()ではできない計算もできる

2023/10/24 84 users Calc フォントサイズ atan2 CSS フォント

CSSで便利な機能の1つがcalc()、ページのレイアウト、要素やフォントのサイズ設定に活躍します。特に異なる単位で加算減算（calc(1rem + 1px)）できることが便利ですが、乗算除算（calc(1rem / 1px)はできません。 そこでCSSの三角関数です。すべてのブラウザにサポートされているatan2()を使用すれば、異なる単位で計算... 続きを読む

CSSでfont-sizeをレスポンシブ対応にする最新テクニック！ clamp()関数の定義が簡単にできる便利ツール -Fluid Type Scale Calculator

2023/07/24 21 users CLAMP font-size フォントサイズ CSS 関数

レスポンブ対応のフォントサイズをCSSで設定するには、CSSのclamp()関数が便利です。clamp()関数は最大値と最小値の2つの値の間をクランプし、レスポンシブ対応の流体フォントサイズを設定できます。 CSSのclamp()関数を使用し、スクリーンサイズに合わせて最適化される流体フォントサイズのCSSを簡単に生成できるツール... 続きを読む

最近よく使用されているCSSの実装テクニック！ レスポンシブ対応のフォントサイズをclamp()で超簡単に定義できるツール -clamp() Calculator

2023/02/07 97 users CLAMP calculator ビューポート CSS 関数

フォントのサイズをレスポンシブ対応にする際、最近よく使用されている実装方法がclamp()関数を使用した流体タイポグラフィです。CSSのclamp()関数を使用すると、ビューポートをベースにしてフォントサイズの最小値と最大値を定義してその間の値を流動的にすることができ、デバイスのスクリーンサイズが増えた現在に欠か... 続きを読む

Flutter 3.7正式リリース。スクリーンサイズにUIレイアウトが自動対応、GPU活用による高速描画エンジン「Impeller」がプレビューに

2023/01/29 19 users プレビュー UIレイアウト 自動対応

Googleはクロスプラットフォーム対応のUIフレームワーク「Flutter」にフォーカスしたイベント「Flutter Forward 2023」を、アフリカにあるケニア共和国の首都ナイロビで開催しました。 Flutterは美しく高速なユーザーインターフェイスを、高い生産性かつクロスプラットフォーム対応として開発可能なオープンソースのフレ... 続きを読む

iPhone, iPadの最新機種まですべてを網羅、Appleデバイスのスクリーンサイズ・解像度のまとめ -Screen Sizes

2022/09/13 19 users iPhone ppi のっち Screen Sizes 解像度

Webサイト制作者・スマホアプリ開発者向けに、iPhone, iPad, Apple WatchなどのAppleデバイスのスクリーンサイズ、各サイズを採用しているモデル、ノッチのサイズ、解像度、PPI、表示タイプ、比率、セーフエリア、ウィジェットのサイズなど、実装時に役立つ情報がまとめられたScreen Sizesを紹介します。 2022年の最新モ... 続きを読む

CSSの@mediaは、スクリーンサイズだけじゃない！ 最近の実装で使用されるメディアクエリのまとめ -mediaquery.style

2022/08/30 15 users アクセシビリティ Media デバイス さま CSS

Webサイトやスマホアプリの実装でよく使用される、CSSのメディアクエリのコードを紹介します。 モバイルファースト用をはじめ、ライトモード・ダークモード用、アクセシビリティ、ホバーエフェクト用、デバイスの向き用など、さま...記事の続きを読む 続きを読む

CSSで区切り線を実装するのは、flexboxが簡単で便利！ レスポンシブ対応の区切り線を実装するテクニック

2022/03/08 75 users Flexbox CSS グラデーション レスポンシブ対応 破線

要素間の区切り線をレスポンシブ対応にする時、どのように実装していますか？ flexboxで実装すると、1つのコードでコンテンツに合わせて伸縮し、デスクトップもスマホにも対応、スクリーンサイズに合わせて垂直・水平にも切り替えるのにも対応できます。さらに、区切り線をグラデーションや破線にするのも簡単です。 CSS... 続きを読む

「Echo Show 15」を1カ月使ってみた--「Echo」シリーズユーザーなら検討の価値アリ

2022/02/09 5 users Echo YouTube Echo Show タスク 価値あり

Amazonが250ドル（約2万9000円）で提供している「Echo Show 15」は、同社史上最大のスマートディスプレイだ。ユーザーは、15.6インチのディスプレイを使って、「Echo Show」の標準的なタスクをすべて実行できるが、スクリーンサイズがこれまでよりも大きくなっている。新しいレシピの料理動画や「YouTube」「Amazon Prim... 続きを読む

全部まとめられていて便利！iPhone, iPadなど、Appleデバイスのスクリーンサイズ・解像度のまとめ -Screen Sizes | コリス

2021/05/17 225 users ppi iPhone コリス Screen Sizes 解像度

Webサイト制作者・スマホアプリ開発者向け、Appleデバイスのスクリーンサイズ、各サイズを採用しているモデル、解像度、PPI、表示タイプ、比率、最後にサポートされたOS、セーフエリア、サイズクラス、ウィジェットのサイズ情報など、実装時に役立つ情報がまとめられたScreen Sizesを紹介します。 先週ローンチされたば... 続きを読む

JavaScriptでのメディアクエリ、matchMedia()の使い方を解説 | コリス

2020/09/15 20 users matchmedia コリス match Media CSS

メディアクエリと言えば、CSSの@mediaでスクリーンサイズに合わせて最適なスタイルを適用するものを思い浮かべる人が多いと思います。JavaScriptで実装したコンポーネント、例えば、スライダーなどをレスポンシブ対応にする際にはJavaScriptでメディアクエリを扱った方が便利です。 JavaScriptでのメディアクエリ、match... 続きを読む

レスポンシブの確認がこれで快適に！複数のスクリーンサイズで同時に確認できる無料ツール -Responsively App | コリス

2020/06/24 435 users コリス レスポンシブ 本命 デバイス Windows

レスポンシブの確認ツールやサービスをいろいろ紹介してきましたが、ついに本命とも言える無料ツールの登場です！ Windows, macOS, Linux対応で、しかもオープンソース、快適にレスポンシブの確認ができるResponsively Appを紹介します。5つのデバイスを同時にすれば、制作時間は5倍速くなります。 無料とは思えないほど... 続きを読む

レスポンシブWebデザインで、スクリーンサイズが中途半端なときにデザインが崩れないようにするための実装方法 | コリス

2020/06/04 30 users 見栄え スクリーン 中間 タブレット コリス

Webページを実装する際、注意すべき点の一つは表示されるスクリーンサイズです。スマホとタブレット、そしてデスクトップの3種類を想定している人も多いと思いますが、現在ではさまざまなサイズのスクリーンが存在しています。 スクリーンサイズが中途半端な「中間のデザイン」で、デザインの見栄えが悪くなったり、崩れ... 続きを読む

レスポンシブの確認が簡単になる！複数のスクリーンサイズで同時にできるChromeの機能拡張 -ResponsiveViewer | コリス

2019/11/22 104 users コリス レスポンシブ Chrome 朗報 タブレット

レスポンシブの確認をしたい時、最近ではスマホやタブレットなどのスクリーンサイズもいろいろなものがリリースされたので、大変になってきました。複数のスクリーンサイズを同時に確認できたらいいのにと思っていた人に朗報です。 先日リリースされたばかりのResponsiveViewerを紹介します。 ResponsiveViewerはChrome... 続きを読む

CSSでブレイクポイントを定義する時の一般的なスクリーンサイズやデバイスの状況を確認できる -Screen Size Map | コリス

2019/09/29 48 users 分布 タブレット コリス デスクトップ サイズごと

スマホ・タブレット・デスクトップの一般的なスクリーンサイズをデバイスの状況、人気が高いスクリーンサイズ、サイズごとの分布がまとめられたScreen Size Mapを紹介します。 最近はスクリーンサイズもかなり増えてきま...記事の続きを読む 続きを読む

レスポンシブ用にfont-size, margin, paddingなど、プロパティの値を一元管理できるSassの超軽量ライブラリ -SSCSS | コリス

2019/03/10 218 users padding ブレークポイント margin Sass 一元

デスクトップ・タブレット・スマホなどの異なるスクリーンサイズに応じて設定したブレークポイントをベースに、font-size, margin, padding, positionなど各プロパティの値を一元管理できるSass...記事の続きを読む 続きを読む

最近のWebサイトやスマホアプリのワークフロー、モジュール型でパターン主導のデザインシステムを学べる解説書 | コリス

2018/12/25 38 users コリス ワークフロー 利点 デバイス モジュール型

ここ数年でWebサイトやスマホアプリでは、モジュール型でパターン主導のデザインが増えてきました。モジュール型の利点はデバイスやスクリーンサイズを問わず、コンテンツをより多くの人に提供することができます。 モジュール型のデザイン、デザイン原則、機能パターン、認知パターンなど、今注目されているデザインシ... 続きを読む

CSSの「calc()関数」を使うとすごく便利に！レスポンシブ対応のレイアウトで高さを最適化するテクニック | コリス

2018/11/14 326 users Calc コリス CSS 関数 デバイス

レスポンシブ対応のレイアウトを実装する際に手間なのは、ブレイクポイントの定義です。ここ1,2年でもたくさんのデバイスがリリースされ、それに伴いスクリーンサイズの種類も増えてきました。 そんな時に便利なのがCSSの「calc()関数」を使ったテクニック。 calc()を使用して、デスクトップやタブレットやスマホのそれ... 続きを読む

次世代デザインツールはどこへ向かうのか　中編 : could

2018/05/28 48 users web 道具 従来 実装 プラットフォーム

ツール デザイン 次世代デザインツールはどこへ向かうのか　中編 手に馴染む道具であるべきですが、デザインと実装との溝を埋めていきたいと考えるのであれば、プラットフォームのような振る舞いをするツールを選んだほうが良いでしょう。 実装を考えながら作れなかった従来のツール 6年前になりますが、 web のデザインは枠のない世界である と説明したことがあります。様々なスクリーンサイズのことを考慮して作らな... 続きを読む

便利すぎる！さまざまなデバイスのサイズを同時に確認しながら作業できる、Web制作の連携支援ツール -Solis | コリス

2018/04/23 97 users Photoshop CSS エディタ Illustrator

最近のWeb制作では、異なるスクリーンサイズでの確認が欠かせません。 スマホ、タブレット、デスクトップ、それぞれに異なるスクリーンサイズが多数あり、これらを一つ一つ確認するのはなかなか大変です。 そこで作業しながら、同時に確認できるツールの登場です。 HTML, CSS, JavaScriptで使用しているエディタ、Photoshop, Illustratorなどの画像編集ソフトで作業しながら、異... 続きを読む

現在主流のすべてのデバイス用のグリッドが収録されたPhotoshopとSketch対応の無料テンプレート素材 | コリス

2018/04/16 17 users コリス iOS グリッド Photoshop 主流

さまざまなスクリーンサイズに対応したiOS、Android、Bootstrap用のグリッドが収録された、PhotoshopとSketch対応の無料テンプレート素材を紹介します。 デスクトップのワイドスクリーンから、通常のデスクトップ、タブレット、スマホ、Apple Watchまで、現在主流のものがすべて揃っています。 Grid System Library 対応しているデバイスは、15種類。 De... 続きを読む

「スクリーンサイズ（画面解像度）＝ブラウザサイズ」と同一視するのは間違いだということがよくわかる解析レポート｜SeleQt【セレキュト】

2017/06/29 5 users ブラウザサイズ SeleQt セレキュト データベース 方法

現在レスポンシブデザインへの対応が重要になる中、ユーザーの平均的な「ブラウザサイズ」を考えることはほとんどなくなりましたが、「画面解像度」を「ブラウザサイズ」と同一視できない面白いデータを取得する方法があります。 2011年にユーザーのスクリーンサイズとブラウザサイズを取得するJavaScriptを書き、データベースの1レコードに保存しました。そこで、モニターと同じくらい大きなブラウザサイズだった... 続きを読む

[CSS]多様化したデバイスに対応！CSSで使いやすいブレイクポイントを的確に定義する方法 | コリス

2017/02/23 224 users ワイドスクリーン レスポンシブ用 タブレット コリス 傾向

スマホは年々大型化し、スクリーンサイズは多様化しています。また、タブレットは小型化の傾向ですがさまざまなスクリーンサイズのものが流通しています。デスクトップもワイドスクリーンなど、わたし達が使用しているデバイスは非常に多様化しています。 スマホ、タブレット、デスクトップ、ワイドスクリーンの異なるスクリーンサイズのレスポンシブ用に、CSSで使いやすいブレイクポイントを的確に定義する方法を紹介します。... 続きを読む

アップルやグーグルの折りたたみ式スマホ、2018年に登場か - CNET Japan

2016/12/19 24 users Microsoft グーグル アップル Apple 供給

2018年にはApple、Google、Microsoftのスマートフォンに折りたたみ可能なディスプレイが搭載される可能性があると報じられている。 LG Electronicsが2018年に折りたたみ可能なディスプレイの大量生産と供給を開始する予定だと、 Electronic Timesは伝えている 。 折りたたみ可能なスマートフォンは、ポケットから取り出した後にスクリーンサイズを劇的に拡大できる... 続きを読む

UI・UXデザインツール「Adobe XD」にWindows版--ペン入力にも対応予定 - CNET Japan

2016/12/14 7 users Adobe XD CNET Japan ペン入力 デザイ 設計

アドビシステムズは12月13日、UI・UXデザインツール「Adobe Experience Design（Adobe XD）」のWindows向けベータ版を公開した。利用には、Windows 10 Anniversary Updateを適用する必要がある。 Adobe XDは、ウェブサイトやモバイルアプリなど、UIやUXの設計・共有ができるプロトタイピングツール。さまざまなスクリーンサイズのデザイ... 続きを読む

最近のレスポンシブ対応サイトで見かけるナビゲーションのアイデア・実装方法のまとめ | コリス

2016/10/20 547 users 階層構造 レスポンシブ対応 ハンバーガーメニュー 去年 コリス

去年ぐらいはレスポンシブ対応のナビゲーションというとハンバーガーメニューばかりでしたが、最近ではスクリーンサイズに合わせるだけでなく、コンテンツや階層構造に合わせたナビゲーションが増えてきました。 Webページやスマホペ ...記事の続きを読む 続きを読む