CSSで実装する時、フロントエンドのデベロッパーは何を考え、どういうことに配慮して実装するのか

2022/11/24 25 users デベロッパー CSS フロントエンド CLAMP 定義

UIコンポーネントをCSSで実装する時に、何を考えながら実装するのか、どういうことに配慮して実装するのかを紹介します。 CSSの何を使用して配置するのかベストか、レスポンシブの対応方法をはじめ、グラデーションをより美しく実装する方法、clamp()によるフォントサイズの定義、論理プロパティの使用など、CSSの実践的... 続きを読む

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

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）で各デバイスの表示を確認できますが、モバイルシミュレーター... 続きを読む

CSSの実装はコンテナクエリで大きく変わる！ コンテナクエリをデベロッパーツールで検証およびデバッグする方法

2022/07/15 26 users コンテクスト デベロッパーツール デベロッパー CSS 実装

Webのレスポンシブは、メディアクエリによるページベースだけでなく、コンテナクエリによる親コンテナベースの実装ができるようになります。 このCSSの新機能コンテナクエリによりコンポーネントを複数のコンテクストで使用でき、コンポーネント単位の実装も簡単になります。Googleのデベロッパーによるコンテナクエリを... 続きを読む

Web制作者は要チェック！ SVGとCSSを使用したUIコンポーネントの実装テクニック

2022/02/03 47 users SVG UIコンポーネント CSS 実装 軽量

SVGを使用してUIコンポーネントを構築すると、実装がより簡単により分かりやすくなります。SVGとCSSを使用したUIコンポーネントの実装テクニックを紹介します。 SVGなのでカラーやサイズも簡単に変更でき、軽量で、レスポンシブにも完全対応です。 Building UI Components With SVG and CSS by Ahmad Shadeed 下記は各ポ... 続きを読む

ウェブサイトに演出は不要!? ユーザー設定にレスポンシブ対応できる新しいCSS - ICS MEDIA

2021/06/04 18 users メディアクエリー デバイス レイアウト レスポンシブ・ウェブ

画面サイズだけではなく、デバイスのユーザー設定に対してレスポンシブにできる新しいCSSのメディアクエリーが登場しています。スマートフォンやパソコンで、画面サイズに応じてレイアウトが変化する「レスポンシブ・ウェブ・デザイン」はほとんどのウェブサイトで実装されているでしょう。新しい世代のレスポンシブ手法... 続きを読む

フロントエンドのデベロッパーは知っておきたい！レスポンシブやレイアウトシフトで大活躍、aspect-ratioプロパティの使い方 | コリス

2021/02/16 24 users aspect-ratioプロパティ コリス デベロッパー

先月アップデートされたChrome 88でaspect-ratioプロパティがサポートされ、FirefoxとSafariでもまもなくサポートされる予定となっています。 名前の通り、アスペクト比を定義できるCSSのプロパティですが、Webページやスマホアプリで実際にどのように使用すると便利なのか、その使い方を紹介します。 New aspect-ratio ... 続きを読む

Webページやスマホアプリでよく使用される代表的な5つのレイアウトをCSS Gridで実装するテクニック | コリス

2020/12/01 21 users コリス ブッダ グリッド CSS Grid レイアウト

Webページやスマホアプリでよく使用される代表的な5つのレイアウトをCSS Gridで実装するテクニックを紹介します。 ヘッダ・コンテンツ・フッタを積み重ねたもの、12カラムのグリッド、メディアクエリなしのレスポンシブなど、実際によく使用されるレイアウトばかりです。 CSS Gridを使用すると、今まで少し複雑だったレ... 続きを読む

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

2020/06/24 435 users コリス 本命 デバイス Windows スクリーンサイズ

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

レスポンシブに対応したWebページをさまざまなデバイスのサイズで表示を同時確認できる無料ツール -everysize | コリス

2020/04/27 25 users コリス ブラウザベース デバイス 同時 サイズ

Webページをさまざまなデバイスのサイズで表示を同時確認できるブラウザベースのオンラインツールを紹介します。 完全無料で利用でき、登録など面倒なことは一切不要です。 everysize everysizeの特徴 everysizeの使い方 everysizeの特徴 everysizeは、レスポンシブに対応したWebページの表示確認をできるオンラインツー... 続きを読む

「レスポンシブにすればPCサイトと同じ工数でPCにもスマホにも両方対応できるよね?」 - エムスリーテックブログ

2020/04/24 24 users エムスリーテックブログ 両方 工数 スマホ PCサイト

できません。 こんにちは、エムスリーエンジニアリンググループの福林 (@fukubaya) です。 中村の記事で宣言したDocpediaの技術的チャレンジの記事も今回で最後です*1。 今回は、PCページとスマートフォンページで共通的に使用できるVue.jsコンポーネントをどうやったら実現できるかを考えて実装した例を紹介します。 仙... 続きを読む

知っているとかなり便利！CSSでコンテンツに依存してサイズを決めるfit-content, min-content, max-content | コリス

2020/02/14 24 users コリス レイアウト CSS テクニック 要素

CSSで要素やレイアウトのサイズを指定する方法には、幅や高さを固定値にサイズを定義する方法とその中のコンテンツに依存してサイズを決める方法があります。 この2つの方法それぞれのメリットと使い分け方、特にレスポンシブで効果的なコンテンツに依存してサイズを決める方法を使ったテクニックについて紹介します。 I... 続きを読む

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

2019/11/22 104 users コリス Chrome 朗報 タブレット スクリーンサイズ

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

Bootstrap ナビゲーションバーのカスタマイズ方法といろいろなデザインの実装例 | コリス

2019/08/20 46 users コリス ブレークポイント ナビゲーションバー 実装例 デザイン

Bootstrap 4のナビゲーションバーのカラーを変更したり、アイテムを整列させたり、レスポンシブのブレークポイントを変更するなどのカスタマイズ方法、ナビゲーションバーのいろいろなデザインの実装例を紹介します。 Bootstrap Navbar Guide and Free Navigation Examples by Nataly Birch 下記は各ポイントを意訳した... 続きを読む

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

段組みを使って縦書きの文章をレスポンシブ対応させる方法 | Webクリエイターボックス

2018/07/10 35 users 縦書き CSS モバイル Webクリエイターボックス 文章

2018年7月10日 CSS, Webサイト制作 CSSで文章を縦書きにする表現、少しずつ目にする機会が増えてきたように思います。しかし、縦書きのコンテンツをレスポンシブ対応させるのはなかなか大変。様々なサイトを見てみましたが、文章を横にスクロールしたり、文字サイズを調整してなんとかモバイルに対応しているようです。... 続きを読む

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

SVGのイメージマップでレスポンシブにも対応。Dreamewaverで効率的なイメージマップ作成 | Adobe Creative Station

2017/11/13 24 users SVG 半田 難点 昨今 記述

SVGのイメージマップでレスポンシブにも対応。Dreamewaverで効率的なイメージマップ作成 BY 半田 惇志 2017.11.13 公開 画像内の特定の箇所をクリック可能にするイメージマップ。ユーザーとして、誰もが一度は使用したことがあるのではないでしょうか。 しかし、開発する側にとっては、イメージマップのコードは直感的に記述・理解できるものではないという難点があります。 また、昨今は、レス... 続きを読む

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

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

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

レスポンシブのテンプレートを計22個、会社・飲食・美容・LPの用途別に

2017/10/02 41 users テンプレート 飲食 用途別 コーポレートサイト ポートフォリオ

ウェブ制作を時短できるテンプレートをCSSフレームワークとHTMLテンプレートに分けて集めました。コーポレートサイト、ポートフォリオ、LPにどうぞ。レスポンシブのテンプレートを久しぶりにあちこちと探してみました。会社、飲食、美容、LPの4つの用途別に分けて合計22種類を紹介します。 目次 今回選出したレスポンシブ テンプレートの分け方 CSSフレームワーク 4つ テンプレート まとめサイト 4つ ... 続きを読む

Google ウェブマスター向け公式ブログ: モバイル専用サイトからレスポンシブ サイトに移行する方法

2017/09/15 25 users Google ウェブマスター向け公式ブログ 方法

+1 ボタン 2 AMP 10 API 2 App Indexing 8 Google プレイス 2 Merchant Center 8 Search Console 93 イベント 14 ウェブマスターガイドライン 48 ウェブマスタークイズ 2 ウェブマスターツール 83 ウェブマスターフォーラム 6 オートコンプリート 1 お知らせ 47 クロールとインデックス 67 サイトクリニック 4 ... 続きを読む

レスポンシブに対応してて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ページの表示サイズを変更すると、ページ上の要素をブロックレベルで... 続きを読む