これは簡単で便利！ レスポンシブ対応のフォントサイズをCSSのclamp()関数で定義できるツール -Type Fluidity

2024/06/13 100 users CLAMP フォントサイズ CSS 関数 デバイス

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

レスポンシブデザインにすぐ使える！すごいアイデア30個 | コリス

2016/03/04 662 users DESIGN スクロール フォント トリミング スワイプ

サイトをレスポンシブ対応にするには、デバイスごとのスクリーンサイズ、フォントや画像のサイズだけでなく、クリックとタップ、スクロールとスワイプなどの機能性、そして見た目もサイズだけでなく、配置やトリミングなど、さまざまな取り組みがあります。 レスポンシブデザインにすぐに使える制作テクニックのすごいアイデアを紹介します。 Responsive web design: What the Internet... 続きを読む

レスポンシブの確認が快適に！ブラウザやOSを問わず各デバイスをシミュレートしてWebページを表示できるオンラインサービス | コリス

2015/05/12 227 users デバイス タブレット 操作 コリス テレビ

ブラウザやOSを問わずに、デスクトップ・スマホ・タブレット・テレビなどさまざまなデバイスのスクリーンサイズをシミュレートしてWebページの表示確認ができる無料オンラインサービスを紹介します。 操作は非常に快適で、ノースト...記事の続きを読む 続きを読む

スマホ・タブレットのさまざまなデバイスの表示チェックに対応！レスポンシブの確認ができる無料オンラインツール -.resizr | コリス

2015/04/20 104 users Kindle コリス レスポンシブ Surface デバイス

iPhone 4, 5, 6, 6+をはじめ、Android各機種のスマホ、iPad, Surface, Kindleなどのタブレットのさまざまなスクリーンサイズをエミュレートし、それぞれのサイズでWebページがどのよう...記事の続きを読む 続きを読む

レスポンシブWebデザインで必要な配置の仕組みがよく分かるアニメーションを使った解説 | コリス

2015/01/26 104 users コリス fixed absolute static 配置

レスポンシブWebデザインを使用する際、Webデザインの配置がどのような仕組みになっているかを理解することは非常に重要です。PhotoshopやIllustratorなどのデザインツールに比べてそれは複雑で、スクロールやスクリーンサイズなどさまざまな要因に依存します。 さらに複雑しているのが配置の名称。 Static, Absolute, Relative, Fixed、、、スタティックとはどこが... 続きを読む

Web制作者は要ブックマーク！制作時にいろいろと役立つ便利サイトのまとめ | コリス

2014/09/12 511 users Bootstrap コリス Foundation ライセンス

Web制作時に、あれ？なんだっけな？って時に役立つ便利サイトを紹介します。 HTML5やCSS3の各ブラウザのバージョンごとのサポート状況、スクリーンサイズやデバイスごとのMedia Queriesの書き方、Bootstrap, Foundationなど各フレームワークの対応ブラウザやライセンス、ブラウザの各バージョンごとのCSS Hackなど、いざという時に役立つサイトばかりです。 Can I ... 続きを読む

レスポンシブWebデザインがユーザー体験に最適化できていない5つの実例 | SEO Japan

2013/09/12 139 users 実例 レスポンシブWebデザイン SEO Japan 5つ

スマホの普及で導入サイトも増えているレスポンシブWebデザイン。作り手からするとまだまだ目新しいですし、ブラウザサイズを変えてサクッとデザインが柔軟に変わるのはそれなりに自己満足度も高く時代の最先端を走っている気分になれる仕組みではあります。一方、デバイスやスクリーンサイズにデザインが最適化できたとしても、それがそのデバイスを使っているユーザーに本当に最適化できているかというと、全くの別問題。Go... 続きを読む

CSS Flexible Box を使ってみよう | WWW WATCH

2013/07/13 115 users WWW WATCH ウインドウサイズ CSS モジュール 通り

CSS3 のモジュールとして策定されている CSS Flexible Box は、CSS によるレイアウトを実現するための仕組み。 レイアウトのための CSS プロパティは他にもありますが、CSS Flexible Box は特にスクリーンサイズや可変するウィンドウサイズなどに柔軟に対応した、その名の通りフレキシブルなレイアウトが可能です。 現在最新の仕様書は下記。2012年 9月 18日付けで勧... 続きを読む

HTML5 × CSS3 × jQueryを真面目に勉強 – #16 レスポンシブWebデザインでテーブルを最適化するベストプラクティス ｜ Developers.IO

2013/03/17 518 users ベストプラクティス MdN Developers.IO 勉強

dislay 属性についてもっと知りたいという方は、こちらのサイトを参照ください。 display - CSS | MDN 要するに何が言いたいかというと、テーブルもまたスタイルシートの display 属性によってその形状を実現しているに過ぎず、この値を色々と操作すればスマートフォンのようなスクリーンサイズの狭い環境にも最適化された表示が出来るのではないかということです。 実際に作ってみた - ... 続きを読む

[JS]ブラウザとそのバージョンだけでなくOSもデバイスもスクリーンサイズも判定し、CSSのセレクタで利用できる便利なスクリプト -CSS Browser Selector+ | コリス

2013/01/09 246 users セレクタ コリス スタンドアローン iPhone Opera

IE6/7/8/9, Firefox, Chrome, Safari, Operaは当たり前、Win, Mac, LinuxなどのOS、iPhone, Android, iPod, iPadなどのデバイス、スクリーンのサイズ、言語などを判定し、それらをCSSのセレクタで利用できるスタンドアローンのスクリプトを紹介します。 CSS Browser Selector+ CSS Browser Sele... 続きを読む

レスポンシブデザインがブランドにもたらすバリューとは | DIGITAL SHIFT – ブランドサイト制作のためのデジタルマーケティングと最新事例 | FICC inc.

2012/11/13 183 users デジタルマーケティング マルチデバイス バリュー リソース

あなたのブランドサイトは無駄な労力やリソースを消費してしまっていませんか？ ここ数年、注目を集めているレスポンシブデザイン。 ご存知の通り、スクリーンサイズを基準にワンソース、同一URLでマルチデバイスに対応させる制作手法です。ワンソース・同一URLのため、SEOに強くソーシャルメディアの [...]あなたのブランドサイトは無駄な労力やリソースを消費してしまっていませんか？ ここ数年、注目を集めて... 続きを読む

iPhoneやiPadやネットブックなど、さまざまなスクリーンサイズでウェブサイトを確認できる -Screenfly | コリス

2011/07/25 133 users iPhone Screenfly コリス Desktop 通り

Screenflyの対応スクリーン 現在、対応しているスクリーンは下記の通りです。 Desktop ネットブック10インチ(1024x600) ネットブック12インチ(1024x768) ノートブック13インチ(1280x800) ノートブック15インチ(1366x768) デスクトップ19インチ(1440x900) デスクトップ20インチ(1600x900) デスクトップ22インチ(1680x1... 続きを読む

興味深いテクニックを多々取り入れているHTML5+CSS3のフレームワーク -Gridless | コリス

2011/06/26 253 users コリス フレームワーク チュートリアル クロスブラウザ対応

当サイトの記事でも取り上げている数々のテクニックを取り入れている、IE6/7にも対応したHTML5+CSS3ベースのフレームワークを紹介します。 Gridlessの主な特徴 CSSでユーザーのスクリーンサイズに最適なレイアウトを実現します。 参考：Media Queriesをしっかり身につけるチュートリアル クロスブラウザ対応（IE6/7も含む） CSS Resetには、Normalize CSS... 続きを読む

ASCII.jp：スマホ対応の新潮流「レスポンシブWebデザイン」とは？

2011/06/17 739 users レスポンシブWebデザイン 新潮流 ASCII.jp 実例

スマートフォンの普及を背景に、「レスポンシブWebデザイン」（Responsive Web Design）という制作手法が海外で注目を集めている。レスポンシブWebデザインとはどのようなアプローチなのか？　実例で解説する。 スマートフォンやタブレットの登場で多様化するスクリーンサイズ。中央の濃い青はモバイル、外側の薄い水色はテレビのサイズで、これだけのスクリーンサイズに対応するには従来の方法では難... 続きを読む

[JS]JS/CSSの管理、ユーザー環境の検出など便利な機能がつまった超軽量スクリプト -Head JS | コリス

2010/12/01 309 users コリス Usage CSS 検出 head

複数のJSファイルの管理、CSSのサポートが異なるブラウザへの対応、ブラウザとバージョンの自動検出、スクリーンサイズの自動検出など、headで制御したい便利な機能がつまった超軽量（2.3KB）スクリプトを紹介します。 下記に、Head JSでできることを簡単に説明します。 詳しい使い方は下記ページで解説されています。 Usage: Head JS 外部JSファイルの読み込み JavaScriptの... 続きを読む

このサイズだとこのサイトはどう見えるかな？が簡単に試せる『TestSize』 - 100SHIKI ～ 世界のアイデアを日替わりで

2010/02/22 242 users 100SHIKI 日替わり 矢印キー 上下 アイデア

似たようなツールは他にもあるが、シンプルで使いやすかったのでご紹介。知っておいても損はないだろう。 TestSizeでは、「このスクリーンサイズだとこのサイトはどういう風に見えるかな？」をシミュレートすることができる。 いくつかのサイズが用意されているが、矢印キーの上下で切り替えていくことができる点が便利だ。 また余計なメニューなども「f」キーでさっと消すことができる。 日本語のサイトも問題なく通... 続きを読む