背景と実施したこと TailwindCSSを使用してPCレイアウトのWebサイトのレスポンシブ対応を実装しました。 今回は静的コンテンツの配置を横並びから縦並びに変えるという内容のみ実施しています。 CSSは少し苦手意識があったのですが、TailwindCSSを使うとかなりローコストかつシンプルに記述できたので そのノウハウを主に初心者の方向けに記述していきたいと思います。 目次 概要 前提とやりたいことの整理 考え方の整理 実際のコード例 補足とまとめ 概要 TailwindCSSを使ったレスポンシブ対応の実際のコード例と考え方を初心者向けに記載するよ。 画面表示上、横並びだったものをスマホレイアウトにすると縦並びにする、という例で説明するよ。 メディアクエリの使い方とはもちろんだけど、HTMLタグの記載の順番を意識することがポイントだよ。 前提とやりたいことの整理 【前提】 + Tai
デジタルプロダクション「factory4」でアプリやさまざまなIoTプロジェクトのUIUXデザインを手がける新谷友樹さんが、UIやUXにまつわるトピックについて解説する本連載。今回は、「レスポンシブデザインとブレイクポイント」についてです。 こんにちは！株式会社Cosmowayが組織するデジタルプロダクション「factory4」のUIUXデザイナー新谷です。 今回はウェブサイトのレスポンシブデザインと、そのうえで重要なブレイクポイントについてです。レスポンシブやブレイクポイントは、デザイナーやエンジニアの皆さんにとっては当たり前の手法として用いていると思いますが、PCやタブレット、スマホなどさまざまなデバイスが登場し、多種多様な閲覧・活用方法があるため、改めて整理してみたいと思います。 各デバイスは解像度が大きくなり数年前とはサイズが大小さまざま違います。そんな中で現在の主流となったデバイ
ステマ対策の文言を入れるためにヘッダの画像に文字を書き込んでみた。レスポンシブデザイン対応していないのでスマホはどうするのが正解なのか。 - 自己満足な日記or備忘録 akayamaqueen
また変わった？って数日の間にコロコロと ブログのデザイン迷走してました・・・。 デザインテーマを変えたけど、どうも気にくわなくて 全く愛着がわかず、なんかイヤー。 デザインなんかどうでもいいじゃん、 とは思えなくてね。 こだわりが強いみたい。 アップデート なんでこうなったか 紆余曲折 さいごに スマホ表示のヘッダ画像変更～スマホでやる アップデート もうもとに戻すぞ！！！ 実は、いろいろ変えているうちに もともとのデザインってどれだった？ってわからなくなっちゃったの。 おバカよね。 たぶん、コレだった？？か分からないけど 覚えてる人もいないよね。 一応、元に戻したつ・も・り。笑。 ていうか、アップデートしたんだよ。 デザインは元に戻して（たぶん） 背景とヘッダ画像を変更して終了 なんでこうなったか ステマ規制対策のためにデザインをかえたという 数日前のブログがこちら ⇩ fatbotto
この記事ではパソコン、タブレット、スマートフォンに最適なレスポンシブデザインサイズを紹介します。 関連記事：レスポンシブ対応とは？ 5つの対応方法や注意点をWeb制作会社が解説 各デバイスの最適なブレイクポイントを知り、自社のWebサイト制作にお役立てください。 レスポンシブデザインとは？レスポンシブデザインとは、パソコンやスマートフォンなどユーザーが使用するデバイスに合わせて、Webサイトの画面サイズを最適化したデザインを指します。 レスポンシブデザインが主流となる前は、パソコンとスマートフォンで別々のサイトを用意していました。しかしこれではWebサイトを更新する際にコストが2倍となるため、定期的な運用が難しいという問題がありました。 そこでレスポンシブデザインが2010年に発表され2015年にはGoogleが「モバイル・ファースト・インデックス（MFI）をページの評価対象にする」と発表
【はてなブログ】スマホから見た時のデザインを変更する方法（レスポンシブデザインの設定） - yunico's fluffy life
はてなブログをスマホから利用されている方も多いと思いますが、デフォルトデザインのままではブログオーナーさんの個性や好みを反映させることができません。 そこで、この記事でははてなブログのスマホ版デザインをカスタマイズする方法を詳しく解説します。 【比較】デフォルトとカスタマイズ 見た目 特徴 スマホ版デザインの変更方法 パソコンから変更する スマホから変更する レスポンシブデザインについて はてなブログでの注意点 【比較】デフォルトとカスタマイズ 見た目 まずは、はてなブログのデフォルトデザインと、カスタマイズした状態を比較してみます。クリック・タップで画像を拡大できます。 デフォルトカスタマイズ印象がガラリと変わりますね。 特徴 デフォルト カスタマイズ シンプルで基本的なレイアウトがあらかじめ設定されている。 独自のレイアウトやデザインを設定できる。 カスタマイズは制限されているが何かを
【JS】window.matchMediaで画面横幅に対応した処理をする。resizeイベント、observerと比較 | JavaScriptでのレスポンシブデザイン - IT the Best
Photo by Claudio Schwarz on Unsplash resizeイベント 画面幅に応じた処理の例 メリット デメリット observer(ResizeObserver) 画面幅（要素の横幅）に応じた処理の例 メリット デメリット matchMedia 画面幅に応じた処理の例 メリット デメリット 今回は画面横幅に応じた要素の表示の切り替えなどの処理「JavaScriptによるレスポンシブ対応」の実現方法を以下３点で紹介したいと思います。 resizeイベント observer matchMedia resizeイベント 言わずと知れたブラウザのウィンドウサイズの変更時に発生するイベントです。簡単な使用例は以下です。 window.addEventListener('resize', function () { // リサイズ時の処理 console.log('resi
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
TailwindCSSのレスポンシブデザイン - Qiita
レスポンシブデザインとブレイクポイントについて改めて整理してみた
【2024年】デバイス別レスポンシブデザインのブレイクポイントまとめ|Webサイト制作・CMS開発｜LeadGrid