タグ

関連タグで絞り込む (4)

タグの絞り込みを解除

レスポンシブデザインに関するcantaloupeのブックマーク (5)

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

    現在のレスポンシブデザインは、ビューポートにもとづいてレイアウトを最適化しています。しかし、新しいレスポンシブデザインでは、アニメーションが不要なユーザーには動きを少なくしたり（無くしたり）、親コンテナの幅にもとづいてコンポーネントを最適化したり、スコープ付きスタイルやフォームファクターなど、ユーザーの好みや環境に合わせて最適なコンテンツを提供できるようになります。 これらの新しいレスポンシブデザインのコンセプト・実装方法を紹介します。CSSがこれまで以上に進化します。 The new responsive: Web design in a component-driven world by Una Kravets 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 レスポンシブデザインの現状 ユーザーでレスポンシブ コンテナでレス

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

  • レスポンシブデザインに便利なcssまとめ｜webproduct-lab


    今回はレスポンシブデザインに便利なcssについてのお話です。 レスポンシブデザインに対応するためにはまず、ビューポートをヘッダーに記述して、メディアクエリのブレイクポイントによってデバイスごとにcssを切り替えます。 WordPressの場合だと、すでにテンプレートの時点でレスポンシブデザインが導入されていて、ご自分でカスタマイズする必要がないものもありますよね。 しかし、そういったCMSを使用していない静的なWebサイトの場合だと、自身でスマホ対応するためにレスポンシブデザインを導入する必要があります。︵レスポンシブデザインとは、スマホに対応する色々な手段のうちのひとつです。︶ その際、レスポンシブデザインに対応するために、特に便利なcssを個人的にまとめてご紹介したいと思います。 display:none; PCとスマホでどうしても異なる画像やコンテンツを表示したい場合に指定します。
    レスポンシブデザインに便利なcssまとめ｜webproduct-lab

  • スマートフォンなどに対応したレスポンシブデザインに関するCSSスタイル（font size自動調整をきるなど） - くらげだらけ


    前にも一度、同じような問題に直面して調べて解決したような気がしたのですが、今回もおそらくその時と同じくGoogleで調べて解決したので、メモって忘れないようにしておこう。 font size自動調整をきる 最近ではレスポンシブデザインでいろんなデバイスに対応したりしますが、私もそんな感じの仕事をしていたわけです。最初はPC Chromeでwindowを伸び縮みさせながら作っていたわけですが、ある程度できた所でiPhone Mobile Safariでチェックしていたのです。Portrait mode︵縦向き︶では問題なく閲覧していたのですが、Landscape mode︵横向き︶にしたときにどうも文字サイズが変になります。 最近はiPhoneもリモートでWeb inspectorで見れたりしますから、細かく調べてみても数値的には問題無さそう。おかしいなってことで調べた後に、iPhoneでは
    スマートフォンなどに対応したレスポンシブデザインに関するCSSスタイル（font size自動調整をきるなど） - くらげだらけ

  • たった１行で完成？凄まじくレスポンシブデザインなサイトの作り方 | DECONCEPTER


    簡単に作れる！みんな大好き可変グリッド 先日話題になっていた﹁なんだこれ！！﹁NHKスタジオパーク﹂のレスポンシブ・ウェブデザインが凄まじくレスポンシブ！！﹂で紹介されていたNHKスタジオパークのレスポンシブデザイン。 こちらのサイト、プラグインを使ってとてもシンプルに作られています。キレイ。このシンプルさを伝えたくてうずうずしてきました。せっかくうずうずしたのでどんな作り方をしているのかサンプルを交えて紹介します。 まずはこちらのデモを御覧ください。 凄まじくレスポンシブデザインなサイトデモ 使われているのはjQuery Masonryというプラグインだ！ @planetofgoriさんのブログで紹介されているように、jQuery Masonryというプラグインが使われています。このプラグインたった数行でNHKのサイトのような可変グリッドレイアウトが作れてしまいます。可変グリッドのレイア

  • 必読！5分でわかるレスポンシブWebデザインまとめ 制作編 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作


    お久しぶりです。デザイナーの野田です。 まず、今回の記事を見ていただく前に、前回と前々回に書かせていただきました。 ﹁必読！5分でわかるレスポンシブWebデザインまとめ﹂ ﹁必読！5分でわかるレスポンシブWebデザインまとめ Pt.2﹂ を読んでいただけるとスムーズです。 今回で、︻必読！5分でわかるレスポンシブWebデザインまとめ︼のシリーズも最後にさせていただきますので、少しコンテンツ量が多くなります。 100％5分では分らないので、タイトルはスルーしてやってください。 様々なサイトでレスポンシブWebデザインについて紹介されていますが、制作方法が異なっていたり、内容が少し難しいと感じる部分がありました。 この記事は、ディレクターの方やデザイナーの方、どちらにも理解しやすいように書かせていただいてます。 また、これまでレスポンシブWebデザインについてやってきましたが、基本的な部分で
    必読！5分でわかるレスポンシブWebデザインまとめ 制作編 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
  • 1

お知らせ

もっと読む

公式Twitter

  • @HatenaBookmark

    リリース、障害情報などのサービスのお知らせ

  • @hatebu

    最新の人気エントリーの配信

はてなブックマーク

公式Twitter

はてなのサービス

  • App Storeからダウンロード
  • Google Playで手に入れよう
Copyright © 2005-2024 Hatena. All Rights Reserved.