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

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に切り替わってもランキング決... 続きを読む

YouTube動画の埋め込みをCSSでレスポンシブ対応にする方法 - すずろぐ

2017/10/17 54 users CSS YouTube動画 レスポンシブ対応 スズログ 方法

2017 - 10 - 17 YouTube動画の埋め込みをCSSでレスポンシブ対応にする方法 カスタマイズ CSS YouTube こんばんは、すずしんです。 ちょっと質問ですが…。 あなたはブログ記事にYouTubeの動画を埋め込んだことはありますか？ 特に対策を何もしていない場合には…。 そのまま動画を埋め込むと、その動画はレスポンシブには対応していません。 なので、特にスマホで表示させたと... 続きを読む

レスポンシブに対応しててCSSでデザインを柔軟に変更できるスライダー「Slider Pro」がなかなかいい – Rriver

2017/09/07 57 users Rriver カルーセル スライダー CSS プラグイン

ウェブ制作をしてるとスライダーやカルーセルってなにかと必要になるので、レスポンシブやタッチ操作などに対応していて、CSSで柔軟にデザインをカスタマイズできるスライダーのプラグインをいつも探しています。 過去に試したものでいくつかいいのはあるんですけど「帯に長し 襷に短し」的なところが必ずあって、すべての要望を満たしてくれるやつには出会えていませんでした。自分でゼロから作るのもあれですし。利用できる... 続きを読む

Googleモバイルファーストインデックス後はレスポンシブが唯一の選択肢か？ #inhouseseo | 海外SEO情報ブログ

2017/08/24 68 users ゲイリー・イリェーシュ ISM Spin-off 中級 構成

[レベル: 中級] レスポンシブ ウェブ デザインが選択すべき構成だ (Responsive Web Design is the way to go.) Google の Gary Illyes（ゲイリー・イリェーシュ）氏は、8月22日に開催された ISM Spin-off #2 で、このようにレスポンシブ ウェブ デザインをかつてないほどに推奨しました。 これまでは、「動的な配信」と「別々の U... 続きを読む

スゴイ便利！Webページの構造を視覚化し、レスポンシブの表示サイズごとの変化を確認できるChromeの機能拡張 | コリス

2017/06/30 55 users コリス Responder コンポーネント Chrome 構造

こんな便利な機能拡張があったんですね！ レスポンシブ対応ページを作成する時に大切なのは、さまざまな表示サイズでレイアウトや要素がどのように変化するかです。 レイアウトやコンポーネントの構造を視覚化し、px, emでサイズを表示し、その変化を確認できるChromeの機能拡張「Responder」を紹介します。 ResponderはWebページの表示サイズを変更すると、ページ上の要素をブロックレベルで... 続きを読む

レスポンシブの確認ツール、後発だけに便利！スマホ・タブレットの主要なデバイスでの表示確認が同時にできる -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. どんなレイアウトに... 続きを読む

[CSS]文字の半分で異なるカラーを指定するCSSのテクニック -こういうのを思いついた時って絶対楽しい！ | コリス

2017/03/27 96 users コリス Ｖertical CSS テクニック 半分

文字の半分で異なるカラー、ブラックとホワイトにするCSSのテクニックを紹介します。もちろん、他のカラーでも利用でき、レスポンシブにも完全対応しています。 最近増えてきた2分割のレイアウトにも使えますね。 Vertical ...記事の続きを読む 続きを読む

もう、レスポンシブでいいんじゃない？ – 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; を指定しておけば簡単に表示させることができても、その見栄えを背景画像を利用してとなると先述した方法では実装できません。背景画像でも同じように縦横比を維持しつつ横幅いっぱいに画... 続きを読む

クールな画像拡大jQueryライブラリ「lity.js」、レスポンシブにも対応！ | イリテク

2015/09/03 81 users イリテク rel jQuery lightbox href

クリックで画像が拡大されるライブラリはlightboxなど数多くありますが、その中でもデザインの邪魔をせず、実装もかんたんなライブラリ、それがlity.jsです。 使い方 公式サイトから一式ダウンロード。 ダウンロードしたファイルの中で使うのはdistフォルダ内のlity.js、lity.cssのみ。 jQueryの後に読み込ませます。 <link href="lity.css" rel="sty... 続きを読む

[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... 続きを読む