TailwindCSSのレスポンシブデザイン - Qiita

2023/06/21 10 users Qiita tailwindcss CSS 静的コンテンツ

背景と実施したこと TailwindCSSを使用してPCレイアウトのWebサイトのレスポンシブ対応を実装しました。 今回は静的コンテンツの配置を横並びから縦並びに変えるという内容のみ実施しています。 CSSは少し苦手意識があったのですが、TailwindCSSを使うとかなりローコストかつシンプルに記述できたので そのノウハウを主... 続きを読む

レスポンシブデザインで Tailwind CSS と CSS custom properties を併用する体験が良過ぎる

2023/05/01 11 users Tailwind CSS 実装 前提 Next.js コード

Tailwind CSS での開発体験が個人的に最高すぎて、最近はどんなWebサイトの実装でも利用しています。 CSS custom properties を併用することもあり、そのときに嬉しいことを紹介します。 Next.js を使っている前提でコード・ファイル名を例示しますが、他でも扱えると思います。 CSS custom properties 併用したい場面 ... 続きを読む

CSSの難しさが分かるようになった人にお勧めの解説書、さまざまなレイアウトを実装する再利用性を向上させるCSSの設計方法 -Every Layout

2021/11/19 170 users CSS 本書 レイアウト 実装 デベロッパー向け

CSSって面白いと思い始めた人、CSSの難しさが分かるようになった人、そしてCSSが大好物な人にお勧めの解説書を紹介します。 本書は、CSSの経験を積んでいるデベロッパー向けの解説書です。レスポンシブデザインを実現するレイアウトについて実装だけでなく、設計・管理・考え方について詳しく解説されています。 本書の... 続きを読む

レスポンシブデザインの確認に便利なツールが登場！複数のデバイスサイズで同時確認できる優れもの -Responsivize | コリス

2021/09/01 430 users Pixel デバイスサイズ コリス ワイドスクリーン アプリ

Webページのレスポンシブの確認が簡単にできる、新しい無料アプリがリリースされました！ iPhone, Android, Pixelのスマホをはじめ、タブレット、ラップトップ、ワイドスクリーンなどのサイズでWebページを表示して確認ができます。 Windows, macOS, Linux対応のアプリで、しかもオープンソースです！ Responsivize Resp... 続きを読む

CSSの進化がすごすぎる！新しいレスポンシブデザインの実装方法を解説 | コリス

2021/05/27 554 users コリス ビューポート CSS コンポーネント アニメーション

現在のレスポンシブデザインは、ビューポートにもとづいてレイアウトを最適化しています。しかし、新しいレスポンシブデザインでは、アニメーションが不要なユーザーには動きを少なくしたり（無くしたり）、親コンテナの幅にもとづいてコンポーネントを最適化したり、スコープ付きスタイルやフォームファクターなど、ユ... 続きを読む

シンプルさを追求した公式デザインテーマ「Neutral」を追加しました - はてなブログ開発ブログ

2020/07/07 10 users Neutral フォント 細部 2カラム 文字サイズ

はてなブログでは、新しい公式デザインテーマとして「Neutral」を追加しました。シンプルさを追求したデザインながらも文字サイズやフォントなど細部にこだわった2カラムのデザインテーマです。レスポンシブデザインにも対応しています。どうぞご利用ください。 新しい公式デザインテーマ「Neutral」 新しいデザインテー... 続きを読む

いまさら聞けないレスポンシブデザインとは？ | (株)ファーストネットジャパンのブログ

2020/03/12 9 users デバイス 端末 タブレット ファーストネットジャパン 概要

レスポンシブデザインの概要 レスポンシブデザインについて、まず、見え方という点でお話ししていきましょう。 WEBサイトがあり、その中のあるページをパソコンで見ているとします。 スマートフォンやタブレットなど、別のデバイス（端末）で見てもキレイに表示されていれば、そのページはレスポンシブデザインです。 な... 続きを読む

レスポンシブデザインに見るデザインカンプと実装との溝 - シフトブレイン／スタンダードデザインユニット

2019/08/26 92 users デザインカンプ スタンダードデザインユニット 実装 解釈 仕様

デザインカンプを基に実装する難しさはあらゆる場面で語られます。私の場合は特にレスポンシブデザインに関する仕様の解釈に悩む場面が頻繁にあります。 その問題点はどこにあるのでしょうか。私の制作したツールの紹介を通して、グリッドシステムのあり方やレスポンシブデザインの意味などを考察しました。 デザインカ... 続きを読む

レスポンシブデザインのブレイクポイントの正解はこれだった[2019最新版] - webのあれこれ

2019/07/30 610 users 正解 web PDF 方向 ブレイクポイント

PDFはこちらからどうぞ[500KB] 2019年Pixel 3aやGalaxy S10など一通り新機種が発表されたので、2019年改めてブレイクポイントについて考えてみました（3年ぶり！）。 3年経ってほとんどのサイトがレスポンシブデザインになって、ブレイクポイントを少なく効率よく設定していく方向になっているのだと思います 前回、ブレ... 続きを読む

マイクロソフト、「Windows Terminal」発表／Windows上でフル互換のLinuxシステムコールを実現する「WSL 2」／Webブラウザで動作する「Visual Studio Online」発表ほか、2019年5月の人気記事 － Publickey

2019/06/04 8 users Publickey マイクロソフト レイアウト フル互換

マイクロソフト、「Windows Terminal」発表／Windows上でフル互換のLinuxシステムコールを実現する「WSL 2」／Webブラウザで動作する「Visual Studio Online」発表ほか、2019年5月の人気記事 先月、Publickeyは大幅にリニューアルしてレスポンシブデザインに対応しました。幸いなことに大きくレイアウトが崩れると言った... 続きを読む

アダプディブデザインか、レスポンシブデザインか | UX MILK

2018/08/06 50 users Codal UX MILK リソース 一員 両者

アダプティブデザインとレスポンシブデザインは、両方ともブラウザのウインドウ幅に応じてUIを調整するという点ではとてもよく似ています。しかし、その調整の仕方において両者は異なっています。 UXデザインエージェンシー「Codal」の一員である私たちは、プロジェクトや予算、リソースに関する助言をよく求められます... 続きを読む

レベル高すぎ！商用可能な無料HTMLテンプレート200+種類を配布しているサイト Colorlib - PhotoshopVIP

2018/05/25 91 users PhotoshopVIP PHOTO 商用 カスタマイズ 中心

商用プロジェクトでも利用でき、モバイル端末でのサイト表示にも対応した高品質なHTMLテンプレート素材を200種類以上公開しているサイト Colorlib を今回はご紹介します。レスポンシブデザイン対応はもちろん、 Bootstrapフレームワークを利用したものが中心 で、カスタマイズも手軽に行うことができます。 http://photoshopvip.net/108516 http://photo... 続きを読む

あらゆる画面サイズに対応できるレスポンシブデザインの現在とは？ | Webデザイン、これからどうなるの？（全10回） | Web担当者Forum

2018/04/03 117 users 手法 Web担トップ Web担当者Forum 現代 画面サイズ

Web担トップ » Webデザイン、これからどうなるの？（全10回） » あらゆる画面サイズに対応できるレスポンシブデザインの現在とは？ Webデザイン、これからどうなるの？（全10回） あらゆる画面サイズに対応できるレスポンシブデザインの現在とは？ PC／モバイル両対応の手法のひとつであったレスポンシブデザインも、現代では標準的な存在となった。そのレスポンシブデザインをおさらいします（第4回）。... 続きを読む

レスポンシブデザインとアダプティブデザイン、それぞれの長所と短所 | UX MILK

2018/02/19 73 users 短所 アダプティブデザイン 長所 モバイルデバイス デザイナー

レスポンシブデザインと アダプティブデザイン の違いに目を向けると、それはデザイナーにとって実に重要な選択肢があることに気付きます。インサイトを踏まえてこれらの選択をすることで、より目的に沿ったデザインを考えることができるでしょう。 モバイルデバイスの普及と多様化に伴い、デザイナーはさまざまな画面サイズに対応する必要が生まれました。これは現在、すべてのWebとアプリのデザイナーが直面している課題で... 続きを読む

【簡単】PC知識ゼロがはてなブログで行ったカスタマイズを紹介します。 - こーにゃーの結婚２年生

2017/10/25 35 users ゴー カスタマイズ 解説 スマホ デザイン

2017 - 10 - 25 【簡単】PC知識ゼロがはてなブログで行ったカスタマイズを紹介します。 ブログ運営 レスポンシブデザインに変更してからカスタマイズが楽しすぎてブログから目が離せないこーにゃーです。 関連記事 【解説あり】PCとスマホのデザインを一緒にして設定が楽に！はてなブログでレスポンシブデザインに対応しました。 - こーにゃーの結婚２年生 ここ２、３日でブログにいろいろと手を加えた... 続きを読む

【解説あり】PCとスマホのデザインを一緒にして設定が楽に！はてなブログでレスポンシブデザインに対応しました。 - こーにゃーの結婚２年生

2017/10/24 41 users CSS ゴー カスタマイズ コード 皆さん

2017 - 10 - 24 【解説あり】PCとスマホのデザインを一緒にして設定が楽に！はてなブログでレスポンシブデザインに対応しました。 ブログ運営 皆さんは、デザインのカスタマイズを行った際に、こんな経験はありませんか？ ・デザイン CSS にコードを入力したのに反映されない。 ・PCでは反映されるのに スマホ には反映されない。 私はPCの知識がなく、参考にした記事通りにカスタマイズを試して... 続きを読む

サンプルテーマ「Boilerplate」をアップデートし、レスポンシブデザインに対応しました - はてなブログ開発ブログ

2017/10/12 10 users Boilerplate less SCSS 土台 ほか

2017 - 10 - 12 サンプルテーマ「Boilerplate」をアップデートし、レスポンシブデザインに対応しました デザインテーマ news デザインCSSをカスタマイズする土台に適したサンプルテーマ「Boilerplate」のバージョンを、2.0.0にアップデートしました。レスポンシブデザインに対応したほか、スタイルシート言語をLESSからSCSSに変更し、さらに使い勝手がよくなりました... 続きを読む

【修正済み】はてなブログ開設のリンクがヘッダ・フッタの表示設定に関わらず表示される不具合がありました - はてなブログ開発ブログ

2017/09/11 185 users ブッダ ヘッダ パーマネントリンク表示 障害 はてなに

2017 - 09 - 11 【修正済み】はてなブログ開設のリンクがヘッダ・フッタの表示設定に関わらず表示される不具合がありました 障害・不具合 はてなブログでは2017年9月6日（水）、はてなブログをご利用いただいていない （はてなにログインしていない） 方が閲覧した際、PC版 （レスポンシブデザインのスマートフォン表示を含む） の記事ページ （個別記事のパーマネントリンク表示） に「はてなブロ... 続きを読む

AMP対応・SEO最適化・高機能・高速表示。そしてレスポンシブ対応の無料 WPテーマ「LION BLOG」–[FIT BLOG-フィットブログ]

2017/08/27 42 users レスポンシブ対応 WPテーマ LION BLOG 高速表示

WordPress用無料テーマ「LIONBLOG」をリリースしました。LIONBLOGテーマは、プラグインなしでAMPに対応しており、SEO最適化済みで表示速度も速い。そしてレスポンシブデザインを採用し、設定項目が豊富でありながらもカスタマイズが簡単な無料WordPressテ...トップページ FIT BLOG ワードプレス AMP対応・SEO最適化・高機能・高速表示。そしてレスポンシブ対応の無料... 続きを読む

スマートフォン版のカテゴリー別記事一覧でも、カテゴリー名をタイトルや説明文に表示するようにしました - はてなブログ開発ブログ

2017/07/21 10 users タイトル 説明文 カテゴリー名 スマートフォン版 スマー

2017 - 07 - 21 スマートフォン版のカテゴリー別記事一覧でも、カテゴリー名をタイトルや説明文に表示するようにしました news 機能修正・改善 はてなブログPro はてなブログでは、デフォルトのスマートフォン表示の カテゴリー別記事一覧ページ でも、PC版 （レスポンシブデザインのスマートフォン表示を含む） と同じように、カテゴリー名をタイトルや説明文に表示するようにしました。 スマー... 続きを読む

「スクリーンサイズ（画面解像度）＝ブラウザサイズ」と同一視するのは間違いだということがよくわかる解析レポート｜SeleQt【セレキュト】

2017/06/29 5 users ブラウザサイズ SeleQt セレキュト データベース 方法

現在レスポンシブデザインへの対応が重要になる中、ユーザーの平均的な「ブラウザサイズ」を考えることはほとんどなくなりましたが、「画面解像度」を「ブラウザサイズ」と同一視できない面白いデータを取得する方法があります。 2011年にユーザーのスクリーンサイズとブラウザサイズを取得するJavaScriptを書き、データベースの1レコードに保存しました。そこで、モニターと同じくらい大きなブラウザサイズだった... 続きを読む

別々のURLからレスポンシブデザインに変更するならGoogleのMFI導入前に | 海外SEO情報ブログ

2017/06/19 21 users Google URL 海外SEO情報ブログ MFi 中級

[レベル: 中級] モバイルサイトの構成において、「別々のURL」から「レスポンシブ ウェブ デザイン」への移行を計画しているなら、モバイル ファースト インデックスが導入される前に完了させたほうがいいと、Google の John Mueller（ジョン・ミューラー）氏は推奨しました。 MFI 後は正規 URL の移行になってしまう モバイル ファースト インデックス（以下、MFI）導入前に移行... 続きを読む

レスポンシブ対応！幅が比率指定のサイドバーを下端で追従させる方法－WordPress（Twenty Seventeen） – 妻と僕。

2017/06/05 13 users 下端 jQuery CSS レスポンシブ対応 実例

僕の使用しているテーマ「Twenty Seventeen」は画面サイズに応じて表示が変わるレスポンシブデザインです。このレスポンシブ機能を維持したまま、記事を下へスクロールしたときにサイドバーが下端で追従し、フッター手前で止まるように設定します。 これから、前半でHTMLやCSS、jQueryの解説を行い、後半は「Twenty Seventeen」でのカスタマイズの実例を紹介します。このテーマをご... 続きを読む

【記録】初心者でもはてなのスマホデザインを見れるレベルにカスタマイズできた - 中国出張が好き〜アナザースカイ〜

2017/05/22 10 users 好き〜アナザースカイ 中国出張 記録 はてな スマホデザイン

2017 - 05 - 23 【記録】初心者でもはてなのスマホデザインを見れるレベルにカスタマイズできた ブログについて Twitter Pocket はてなブログの ”スマホデザイン” のカスタマイズにようやく着手しました。これまで「 Broollyn 」というテーマをレスポンシブデザインにしていたので、スマホ用デザインは触れていませんでした。というかスマホ用とPC用にそれぞれ設定するのが自分に... 続きを読む

Webアイコンフォント「Font Awesome」の使い方と注意点について - webproduct-lab

2017/04/24 29 users bookmark webproduct-lab さい 注意点

2017 - 04 - 25 Webアイコンフォント「Font Awesome」の使い方と注意点について css webツール・サービス Bookmark! Facebook Twitter Google+ Pocket Webアイコンフォント使ってますか？ Webフォントの中でも画像を使わずにリストマークなどにアイコンを表示することができる“アイコンフォント”は、レスポンシブデザインのようなサイ... 続きを読む