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 コンポーネント アニメーション

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

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

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

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

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

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

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

アダプディブデザインか、レスポンシブデザインか | 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とアプリのデザイナーが直面している課題で... 続きを読む

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

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

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

「次のモバイルファースト」がやってくる！UIと機能設計をIonic 2を使って学んでみよう | HTML5Experts.jp

2017/03/29 113 users 普及 モバイル モバイルファースト 開発 スマートフォン

レスポンシブデザインが生まれたばかりの2009年には、はやくも「モバイルファースト」という言葉が使われ始めていました。 WebサイトはPCから見るものだったのは今や昔。今ではスマートフォンの普及により、多くのWebサイトではPCとモバイルからのアクセス数が逆転してるWebサイトも多く、「モバイルファースト」な開発も当たり前になりました。 しかし、2009年の「モバイルファースト」と、今の「モバイル... 続きを読む

妻のパン屋のWebサイトを4年ぶりにレスポンシブデザインに作り替えた話 - give IT a try

2017/01/05 146 users give IT a try パン屋 Webサイト 4年ぶり

2017 - 01 - 05 妻のパン屋のWebサイトを4年ぶりにレスポンシブデザインに作り替えた話 Coupe Baguette デザイン Ruby はじめに このブログを以前から読んでいる方はご存知かもしれませんが、僕の妻は兵庫県西脇市で「Coupé Baguette（クープ バゲット）」という小さなパン屋をやっています。 この店のWebサイトは僕が作っているのですが、作ったのが4年前（201... 続きを読む

[CSS]レスポンシブデザインでよく使うメディアクエリの書き方、ブレイクポイントの最適な値のまとめ | コリス

2016/09/12 472 users コリス プレー CSS メディアクエリ リソース

スマホやタブレット、ラップトップ、デスクトップ、最近はWebページを表示するデバイスは多様化しています。レスポンシブデザインでよく使われているMedia Queries（メディアクエリ）の書き方、ブレイクポイントの最適な値など、制作に役立つリソースやツールを紹介します。 各デバイスのブレイクポイントに合わせたメディアクエリの書き方 複数のブレイクポイントを使ったメディアクエリの書き方 人気のフレー... 続きを読む

Webデザインのアイデアに困ったら覗きたいサイト10選 | UX MILK

2016/07/18 306 users UX MILK インスピレーション webデザイン バナー

この記事では、インスピレーションを与えてくれる、Webデザインの参考になるサイトを紹介します。 サイト全体のデザインやレスポンシブデザインに特化したサイト、サイトパーツ、ロゴ、アイコン、バナーなどを収集して紹介しているサイトなど10サイト厳選しました。あなたのWeb制作の刺激になること間違いなしです。 1.  MUUUUU.ORG クオリティが高く、縦に長いサイトを収集しているギャラリーサイトです... 続きを読む

ブロガー・Web関係者必見！モバイルとPC同時に閲覧できる超便利ブラウザ「Blisk」の存在を君はまだ知らない - Brian'z Imagination

2016/07/06 381 users bookmark Brian'z Imagination

2016 - 07 - 07 ブロガー・Web関係者必見！モバイルとPC同時に閲覧できる超便利ブラウザ「Blisk」の存在を君はまだ知らない デザイン シェアする Bookmark! Facebook Twitter Google+ Pocket Feedly レスポンシブデザインが流行してきているとはいえ、 こんなこと をしているはてなブロガーさんやWebデザイナーさんは後を絶たない。 PCで ... 続きを読む

レスポンシブデザインにすぐ使える！すごいアイデア30個 | コリス

2016/03/04 662 users DESIGN スクロール フォント トリミング スワイプ

サイトをレスポンシブ対応にするには、デバイスごとのスクリーンサイズ、フォントや画像のサイズだけでなく、クリックとタップ、スクロールとスワイプなどの機能性、そして見た目もサイズだけでなく、配置やトリミングなど、さまざまな取り組みがあります。 レスポンシブデザインにすぐに使える制作テクニックのすごいアイデアを紹介します。 Responsive web design: What the Internet... 続きを読む

今どきのウェブサイトをつくろう！差がつくHTML/CSSコードスニペット27個まとめ - PhotoshopVIP

2016/02/16 709 users ウェブデザイン PhotoshopVIP 今どき レイアウト

新しいテクニックを活用した、最先端のウェブデザインから学ぶ、今後のウェブ制作に活用したい素敵なHTML/CSSコードスニペットをまとめています。 コピー&ペーストで利用できるお手軽なCSSアニメーションやホバーリンクなどに加え、インパクトのあるレイアウトを実現できる本格的なアイテムやプラグインが揃います。スマートフォン端末ユーザーがさらに増えると予想される2016年、レスポンシブデザインやSVG形... 続きを読む

レスポンシブデザインのメリット・デメリットを解説｜ferret [フェレット]

2015/11/18 122 users 長所短所 レスポンシブ化 Ferret 自社 うえ

多くのホームページに導入されているレスポンシブデザインですが、サイトをレスポンシブ化することによってどのようなメリット、またはデメリットが発生するか、Web担当者様は把握できているでしょうか。 Googleが推奨しているから、流行しているから、という単純な理由でレスポンシブデザインを導入するのではなく、長所短所を見極めたうえで、自社のホームページに最適だと判断したうえで利用するのが良いでしょう。 ... 続きを読む

Bootstrapも標準化したDreamweaver CC 2015を使って、レスポンシブデザインを爆速で作る方法 | 株式会社LIG

2015/08/26 132 users Bootstrap 爆速 株式会社LIG 標準化 方法

こんにちは、デザイナーのぺちこです。 AdobeのCC2015がリリースされて2ヶ月ほど経ちましたね！ 恥ずかしながらPhotoshop以外はまだ2015を導入していなかったため、先日どーんとアップデートに挑みました。 とはいっても、どんなアップデートがあったのか分からないままでは宝の持ち腐れ。新機能を色々と調べていたところ、いつの間にかDreamweaverがとても便利になっているらしいというこ... 続きを読む

レスポンシブデザインは万能ではない！ターゲットによって使い分けが必要｜ferret [フェレット]

2015/08/11 122 users Ferret Googl フェレット 欠点 万能

レスポンシブデザインが持つSEOの利点を掘り下げる レスポンシブデザイン以外にGoogleがサポートする、モバイル設定の動的配信やモバイル向けURLの設置という方法があります。 Googleがレスポンシブデザインの利点とする点も含め、この3つのモバイル設定についての利点と欠点を見ていきましょう。 1. レスポンシブデザインはGoogleが推奨している Googleは、モバイルガイドにて「Googl... 続きを読む

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

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

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

Bootstrapではじめる！スマホ対応の無料HTMLテンプレート素材39個まとめ 2015年6月度 - PhotoshopVIP

2015/06/05 154 users Bootstrapフレームワーク Bootstrap 無料

スマートフォンやタブレットからのサイト閲覧ユーザーが増えたことで、レスポンシブデザインが当たり前になってきています。今回は無料ダウンロードできるスマホ対応の新作HTML／CSSテンプレート素材をまとめてご紹介します。 どれもBootstrapフレームワークを採用しているので、初心者でもソースが理解しやすく、柔軟なカスタマイズをすることが可能です。もっと手軽にウェブサイト作成をおこなってみてはいかが... 続きを読む

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

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

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

Googleがレスポンシブデザインを推奨する7つの理由 | notnil creation weblog

2015/03/02 139 users notnil creation weblog 理由 変更

Googleが、ウェブサイトがモバイルフレンドリーかどうかを、4月21日からモバイル検索でのランキング指標に使用する、と発表しました。 検索結果をもっとモバイル フレンドリーに | Google ウェブマスター向け公式ブログ ウェブサイトがモバイルフレンドリーかどうかをモバイル検索結果で表示する変更はすでに行なわれていましたが、ランキングに影響するとあってにわかに騒がしくなってきたようです。 Go... 続きを読む

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

2015/02/28 112 users 下火 末尾 kazuhito レスポンシブ 覚え書き

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