レスポンシブ対応する時に、どうしても綺麗に要素が収まらない時のほぼ完璧な対処法 | セカヤサブログ

2022/08/17 271 users 装飾 レスポンシブ対応 傾向 ブレイクポイント 皆さん

皆さんは、レスポンシブ対応の時にどうしてもデザイン通りに要素が収まらなず仕方なくブレイクポイントを追加して対応したことはありませんか？僕はあります。気をつけないとすぐ要素がはみ出したり重なったりしますよね。 装飾が賑やかなほど起こりやすい傾向にあり、特にLPでよく見かけるように思います。 しかし、コ... 続きを読む

レスポンシブの確認が簡単に！ iPhone, iPad, Androidなど各モデルのサイズ、操作や動画にも対応した優れもの -モバイルシミュレーター

2022/08/04 196 users iPhone デベロッパーツール Pixel GALAXY

iPhoneをはじめ、PixelやGalaxyのAndroidスマホ、iPadやGalaxyのタブレット、ラップトップ、ワイドスクリーンなど各モデルのサイズでWebページを表示して確認ができるChromeの機能拡張を紹介します。 デベロッパーツールのデバイスモード（command+shift+M）で各デバイスの表示を確認できますが、モバイルシミュレーター... 続きを読む

レスポンシブの確認がこれで快適に！複数のスクリーンサイズで同時に確認できる無料ツール -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... 続きを読む

margin, paddingなど、レスポンシブに対応したスペースをCSSで効率的に定義する方法 | コリス

2018/11/27 234 users padding margin Calc rem コリス

Webページやスマホアプリのレイアウトに使用する、margin, paddingなどのスペースをCSSで効率的に定義する方法を紹介します。 em, remの相対的な単位を使い、calc()を効果的に活用し、拡張性やメンテナンス性にも優れたデザインシステムを構築できます。 Create your design system, part 4: Spacing by CodyHouse 下記... 続きを読む

CSSの作業をもっと楽に！無料で使える便利なWebツール40選 - PhotoshopVIP

2018/06/27 131 users PhotoshopVIP アニメーション 節約 CSS ベース

CSSを使って作業をいているときに活用したい、無料で使えるオンラインツールをまとめてご紹介します。これらのツールは、制作時間を節約、短縮できるだけでなく、CSSのちょっとややこしい問題の解決ツールを想定し作成されています。 CSSをベースとしたアニメーション、レスポンシブに対応したナビメニュー作成ツール、... 続きを読む

グーグルがMFIへの切り替えを正式に開始！ 準備ができたサイトから順次。SCへの通知も | 編集長ブログ―安田英久 | Web担当者Forum

2018/03/26 219 users MFi 安田英久 グーグル Web担 順次

Web担トップ » [コラム] Web担のなかの人――編集部ブログ » 編集長ブログ―安田英久 » グーグルがMFIへの切り替えを正式に開始！ 準備ができたサイトから順次。SCへの通知も 編集長ブログ―安田英久 グーグルがMFIへの切り替えを正式に開始！ 準備ができたサイトから順次。SCへの通知も 対象は「別URL構成」「動的構成」のみ（レスポンシブは影響なし）、MFIに切り替わってもランキング決... 続きを読む

レスポンシブの確認ツール、後発だけに便利！スマホ・タブレットの主要なデバイスでの表示確認が同時にできる -Sizzy | コリス

2017/05/08 154 users iPhone コリス 後発 Nexus GALAXY

iPhone, iPad, Nexus, Galaxyなど、主要なスマホ・タブレットの表示確認が同時にできる、レスポンシブ用の確認ツールを紹介します。 最近リリースされたばかりで、現在の対応デバイスにあった便利なツールです。 Sizzy Sizzy -GitHub Sizzyの特徴 Sizzyの使い方 Sizzyの特徴 Sizzyはオンラインツールとして利用でき、Chromeの機能拡張にも対応して... 続きを読む

CSSグリッドレイアウトで、サイズが違う複数のボックスをタイル状に配置する | Webクリエイターボックス

2017/04/13 706 users CSSグリッドレイアウト Grid display タイル状

大きさの異なる複数のボックスを隙間なく並べてタイル状に表示したい！そんな時もありますよね。モザイクレイアウト、Masonryレイアウト、Windows 8 Metroスタイルレイアウト…などなど、さまざまな呼び方のあるこのレイアウト。今回は display: grid という新しい配置方法を使ってレイアウトを組んでみますよ！もちろんレスポンシブにも対応させたいと思います！ 1. どんなレイアウトに... 続きを読む

もう、レスポンシブでいいんじゃない？ – Rriver

2016/11/17 466 users ワークフロー Rriver レスポンシブWebデザイン 視点

先月末、 藤井さん の働く 株式会社ザッパラスさん にお邪魔して、レスポンシブWebデザインの基本のキ的なお話しをさせていただきました。 題して「もう、レスポンシブでいいんじゃない？」 いま、改めてレスポンシブWebデザインについて考えるきっかけになれば、という視点で内容をまとめてみました。 4年前に「 レスポンシブWebデザイン 制作の実践的ワークフローとテクニック 」という本を執筆したんですけ... 続きを読む

CSS3 Flexbox UIパターン集「Flexbox Patterns」 | DesignDevelop

2016/06/06 165 users DesignDevelop Flexbox CSS ユー 現状

CSS3で利用できるようになったFlexbox。WEBアプリやレスポンシブを想定して開発されたものですが、まだまだ現場ではそれほど普及していないのが現状です。今日紹介するのはそんなFlexboxを理解・利用するための様々なUIを簡単に利用できるCSSのFlexbox UIパターン集「Flexbox Patterns」です。 「Flexbox Patterns」は利用しやすくなるようにそれぞれのユー... 続きを読む

CSSで縦横比を維持しながら横幅いっぱいに背景画像を表示させる方法 | NxWorld

2016/05/14 132 users NxWorld ウインドウサイズ auto 横幅 img

特にレスポンシブやスマホサイトで見かけることが多い、どんなウィンドウサイズでも縦横比を維持しつつ横幅いっぱいに画像を表示している見栄えですが、imgであれば画像を配置して width:100%; と height:auto; を指定しておけば簡単に表示させることができても、その見栄えを背景画像を利用してとなると先述した方法では実装できません。背景画像でも同じように縦横比を維持しつつ横幅いっぱいに画... 続きを読む

[CSS]ビューポート(vw, vh)とパーセント(%)、レスポンシブに適した単位の賢い使い分け方法 | コリス

2015/07/22 394 users ビューポート vmin vmax コリス フォントサイズ

先日の記事「フォントサイズの指定方法（翻訳版）」で、CSSの比較的新しい単位「ビューポートの単位(Viewport Units)」について触れました。この単位「vw, vh, vmin, vmax」はブラウザのビューポートのサイズに基づくもので、これらの単位で指定した実際の大きさはビューポートの大きさによって変化するため、レスポンシブデザインにあった単位と言えるでしょう。 これらの単位を使うことは... 続きを読む

テーブルをレスポンシブに対応させるのに便利なjQueryプラグインまとめ | BlackFlag

2015/07/21 170 users BASIC CSS BlackFlag レイアウト 表組み

レスポンシブWebデザインのサイトでテーブル（表組み）を組み込む際に 要素量の多いテーブルの場合、CSSでレイアウトを無理やり調整したり、 スマホレイアウト時はテーブル全体を横スクロールさせるようにしたりと レイアウトに苦労することがよくあります。 そんなテーブルをレスポンシブ対応させる際に いろいろと便利に使えそうなjQueryプラグインを まとめて自分用メモとして紹介してみます。 Basic ... 続きを読む

[CSS]フォントサイズの指定方法の基礎知識からレスポンシブに適した指定方法までやさしく解説 | コリス

2015/06/05 386 users コリス フォントサイズ 相違 CSS 単位

CSSでのフォントサイズの指定方法をその単位とそれぞれの相違から、レスポンシブに適したフォントサイズの指定方法までをやさしく解説します。 CSS Font Sizing 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 CSSでのフォントサイズの指定方法 各指定方法の特徴 レスポンシブに適したフォントサイズの指定方法 CSSでのフォントサイズの... 続きを読む

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

2015/05/12 227 users デバイス タブレット スクリーンサイズ 操作 コリス

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

レスポンシブのうまいアイデア満載！RWD対応のナビゲーションを実装するスクリプトのまとめ | コリス

2015/05/07 105 users コリス jQuery RWD対応 スクリプト ナビゲーション

Off Canvas, On Canvas, On the Flyなど、レスポンシブのさまざまなアイデアを備えたナビゲーションを簡単に実装できるスクリプトを紹介します。 ※各キャプチャはAm I Responsiveを使用して作成しました。 Slidebars (jQueryのプラグイン) Slidebars -GitHub デモページ Off Canvasタイプのナビゲーション、左右どちらからで... 続きを読む

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

2015/04/20 104 users Kindle コリス Surface デバイス iPad

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

レスポンシブに対応したHTMLメールのつくり方 | 技術コラム | つみきブログ

2015/04/07 302 users つみき メーラー 高松 フォーマット フロントエンドエンジニア

つみきのフロントエンドエンジニア、高松です。 最近、HTMLメール形式で配信するメールマガジンのフォーマットを作る機会があり、今回はその際に学んだレスポンシブなHTMLメールのつくり方を書いてみたいと思います。 HTMLメール作成時に注意しなければならないこと ユーザーがメールを受信するために使うメーラーは多種多様で、各メーラーによってHTMLメールへの対応状況も大きく異なります。 そのため、HT... 続きを読む

レスポンシブでcssとjsのブレイクポイントがズレて困るときの対処 : code14

2015/03/20 251 users スレ CSS 対処 ブレイクポイント レスポンシブデザイン

2月10 レスポンシブでcssとjsのブレイクポイントがズレて困るときの対処 カテゴリ:javascriptiphone/ipadサイト ツイート レスポンシブデザインのサイトを作っていて、 ブレイクポイントの設定はcssのmedia-queryでやることが多いと思う。 でも動的な処理がからむ部分で変更があるときはjsでも切り替えを行う。 window.resize() とかで。 んで、今回、cs... 続きを読む

Re: レスポンシブデザインって本当に使える？レスポンシブを避けるべき3つの理由 | 覚え書き | @kazuhito

2015/02/28 112 users 下火 末尾 kazuhito 覚え書き 冒頭

レスポンシブデザインって本当に使える？レスポンシブを避けるべき3つの理由という記事を読みました。冒頭の最近では、新規にウェブサイトを構築する場合、避けた方が良い＝PCとスマホのページは分けて作った方が良いと考えられていますというくだりにしろ、末尾にある手間もコストもかかるわりに表示の不具合が多発するレスポンシブデザインは、導入を検討される企業はまだまだ多いものの、現在は下火になってきていますという... 続きを読む

横並びの要素の高さを揃えるjQueryプラグイン「matchHeight」がレスポンシブでもバッチリ動いて素敵 | OZPAの表4

2015/02/23 168 users OZPA プラグイン jQueryプラグイン 要素 全て

高さが異なる要素を横並びにした時に、その高さを揃えたい–生きとし生けるもの全ての夢。 でまぁ今までとあるプラグインを利用していたのですが、レスポンシブで上手く動かないということでなんかいいやつ無いんかい、と探していたところjquery.matchHeight.jsというのを見つけました。 jquery.matchHeight.js – a more robust equal heights plu... 続きを読む

Materialize - マテリアルデザインのためのCSSフレームワーク MOONGIFT

2014/11/29 252 users Materialize フラットUI アニメーション 時代

レスポンシブでWebデザインを組むのは当たり前、今のトレンドはマテリアルデザインにあるという時代になってきました。フラットUIを踏襲しつつ、アニメーションを効果的に使うことでさらにユーザビリティ高いデザインを可能にします。 主にモバイルアプリ用に使われていますが、Webデザインにおいても十分利用が可能です。今回はマテリアルデザインを実現するスタイルシートフレームワーク、Materializeを紹介... 続きを読む

なんでもかんでも<picture>要素を使えばいいわけじゃない！レスポンシブ・イメージ実装の際の注意点 – Rriver

2014/10/06 407 users Rriver picture cloud CSS HTML

なんでもかんでも<picture>要素を使えばいいわけじゃない！レスポンシブ・イメージ実装の際の注意点 画像表示のマルチデバイス対応をHTMLとCSSのみで実現できる「レスポンシブ・イメージ」ですが、効果的な使い方をするには、いくつか注意点があります。プロダクション・サイトで使えるようになるまでにはもう少し時間がかかりそうですが、基礎と注意点くらいは今から覚えておいても良さそうです。 Cloud ... 続きを読む

Webデザイナーのスキルアップに役立つ便利なチートシートのまとめ | コリス

2014/08/21 406 users コリス Ado グリッドシステム スキルアップ チートシート

先月は「Web制作時に備えておくと便利なチートシートのまとめ」でデベロッパ向けのチートシートを紹介しました、今回はデザイナー向けのチートシートをまとめました。 Photoshopの各バージョンに対応したショートカット、ブラシやペンツールの使い方、初期設定をはじめ、デザインの要素と原則、カラーセオリー、タイポグラフィ、グリッドシステム、レスポンシブなど、デザインの現場で役立つものばかりです。 Ado... 続きを読む