レスポンシブの確認が簡単になる！複数のスクリーンサイズで同時にできるChromeの機能拡張 -ResponsiveViewer
レスポンシブの確認をしたい時、最近ではスマホやタブレットなどのスクリーンサイズもいろいろなものがリリースされたので、大変になってきました。複数のスクリーンサイズを同時に確認できたらいいのにと思っていた人に朗報です。 先日リリースされたばかりのResponsiveViewerを紹介します。 ResponsiveViewerはChromeの機能拡張で、無料で利用できます。 ResponsiveViewer -GitHub ResponsiveViewerのインストール ResponsiveViewerの使い方 ResponsiveViewerのインストール ResponsiveViewerのインストールは簡単です。 他の機能拡張と同様にChromeウェブストアにアクセスし、「Chromeに追加」ボタンをクリックするだけです。 ResponsiveViewer -Chromeウェブストア ユーザ
レスポンシブWebデザインでテーブルを使う時の小技
tableやtr、tdなどのテーブル関連のタグのdsiplayプロパティを変更することでデザインを変更します。 tableタグのdisplayの値はデフォルトではtable、tdやthタグはtable-cellといった具合ですが、この値をblockやlist-itemなど他の値に変えます。 @media only screen and (max-width:420px){ tbody tr{ display: block; margin-bottom: 1.5em; } tbody th, tbody td{ display: list-item; border: none; } ..... } Chrome、Safari、Firefox対応。 IEではTableのdisplayを変更しても表示は変わらないようなので非対応です。 条件分岐コメントを使ってIEにはメディアクエリを読ませないよ
【Sass】Sassでレスポンシブ！メディアクエリを便利に書こう。 | バシャログ。
気が付いたら8月突入してて茫然としたhakoishiです。 しかももう1/3過ぎてるとか冗談はおよし。 さて、今回はSassでメディアクエリを便利に管理できる書き方の一例をば。 まとめて書いて、コンパイルの際にブレイクポイント毎に分散させます。 最近、レスポンシブ対応でコーディングをする機会があったのですが、ブレイクポイント毎にそれぞれセレクタを書いていったら管理しきれなくなってしまいました。 まるで統一感のないソースに…！ そこで考えたのが、同じセレクタはまとめて記述し、その内部でメディアクエリごとの分岐も書く方法です。 更に、メディアクエリ毎にまとめて吐き出されるようにしました。 一度に視界に入る範囲であれば、統一感を保った記述もしやすいかと。 scssファイルの構成と記述内容 メディアクエリ分岐などの枠をstyles.scssに、スタイルは_media-query.scssに記述しま
必読！5分でわかるレスポンシブWebデザインまとめ 制作編 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
お久しぶりです。デザイナーの野田です。 まず、今回の記事を見ていただく前に、前回と前々回に書かせていただきました。 「必読！5分でわかるレスポンシブWebデザインまとめ」 「必読！5分でわかるレスポンシブWebデザインまとめ Pt.2」 を読んでいただけるとスムーズです。 今回で、【必読！5分でわかるレスポンシブWebデザインまとめ】のシリーズも最後にさせていただきますので、少しコンテンツ量が多くなります。 100％ 5分では分らないので、タイトルはスルーしてやってください。 様々なサイトでレスポンシブWebデザインについて紹介されていますが、制作方法が異なっていたり、内容が少し難しいと感じる部分がありました。 この記事は、ディレクターの方やデザイナーの方、どちらにも理解しやすいように書かせていただいてます。 また、これまでレスポンシブWebデザインについてやってきましたが、基本的な部分で
Gamma Gallery - A Responsive Image Gallery Experiment
Gamma Gallery - A Responsive Image Gallery Experiment
Pure.css
CSS with a minimal footprint.Pure is ridiculously tiny. The entire set of modules clocks in at 3.5KB* minified and gzipped. Crafted with mobile devices in mind, it was important to us to keep our file sizes small, and every line of CSS was carefully considered. If you decide to only use a subset of these modules, you'll save even more bytes. * We can add correctly :) the numbers above are individu
[CSS]レスポンシブ用に画像を縮小するだけではなく、クロップにも対応させるテクニック
中心箇所を選定 画像は天地左右にクロップ可能なので、中心となる箇所をグリッドから決定します。 HTML HTMLは画像を配置するimg要素の他に、クロップするためにdiv要素が二つ必要です。 <div class="focal-point"> <div><img src="guy.jpg" alt="guy"></div> </div> div要素を余計に使用することはよくないことですが、実装を簡単にするために使用しています。 クロップする箇所を指定するには、classを追加します。 <div class="focal-point right-3 up-3"> <div><img src="guy.jpg" alt=""></div> </div> 右3、上3は、上記のグリッドから算出してもので、右3上3にクロップします。 CSS まずは、ベースとなるスタイルシートです。 * { marg
[CSS]Responsiveデザイン対応のページ制作に役立つ5つのスタイルシートのテクニック
Responsiveデザイン対応ページを制作する際に役立つ、max-width, min-width, overflowなどの役立つ5つのテクニックを紹介します。 5 Useful CSS Tricks for Responsive Design [ad#ad-2] 下記は各ポイントを意訳したものです。 動画コンテンツの配置 max-width, min-widthの小技 値を相対値に overflow: hiddenを使ったテクニック 長いテキストは折り返す 動画コンテンツの配置 Responsiveデザインに対応した動画コンテンツの配置方法です。 デモページ CSS: 動画コンテンツの配置 .video { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; } .video iframe,
レスポンシブWebデザイン制作に便利なChromeのエクステンションまとめ | Hep Hep!
レスポンシブWebデザイン(Responsive Web Design)とは、PC、iPadなどのタブレット、iPhoneなどのスマートフォンに最適化したWebサイトの制作手法で、単一のHTMLとCSSを書き分けてレイアウトを変更することでデバイスごとにサイトを作りなおすことなくWebサイトを制作することができる。 こんな感じでサイトのイメージを保ちつつ、CSSをかき分けてレイアウトを変更するだけで様々な画面サイズのデバイスに対応できる。レスポンシブWebデザインのお勉強はこちら、問題点についてはこちらにて参考にしてもらい、今回は、レスポンシブWebデザイン制作に便利なChromeのエクステンションの紹介。レスポンシブWebデザイン制作時は、これまではブラウザの画面を拡大縮小とかでその見た目を変更して確認していたのだが、Chromeのエクステンションを使うとクリックだけで画面サイズを変更で
レスポンシブWebデザインのモックアップを簡単に作成できる「Adobe Edge Reflow」の使い方
このように@mediaを使用して出力先や解像度、サイズなどで条件分岐をしていき、必要のない要素を非表示にしたりして、見栄えを切り分けて製作していきます。 レスポンシブWebデザインのメリット・デメリット 前述のとおり、RWDでは同じCSSファイルで各デバイスのスタイルを共有します。そのため、共有しているスタイル変更の影響を受けやすく、制作をデスクトップとモバイルで分担している場合などは細かいレギュレーションを最初に決める必要があります。 とはいえ、モバイルとデスクトップをHTMLから切り分けた場合、完成後の更新の手間も二重にかかってしまいます。CSSで分岐して必要なプロパティのみ上書きしてデバイスに最適化するだけで同じ素材を共有できることは、サイト運営者にとって非常に魅力的です。 RWDのメリット デバイスごとに切り分けず1つのHTMLファイルで管理可能 スタイルを共有してテイストの統一性
Responsive Web Design用のグリッドをさくっと作成できるオンラインサービス -Gridpak
スマートフォンをはじめ、タブレット、デスクトップなど、さまざまなデバイス用に最適なウェブデザインを提供するResponsive Web Design用のグリッドを作成し、実装に利用できるスタイルシートや確認用の画像などを生成するオンラインサービスを紹介します。 Gridpak - The Responsive grid generator [ad#ad-2] Gridpakの使い方は簡単です。 グリッド生成ツールによくある、グリッド全体のサイズ、カラム数、カラムのパディング、溝のサイズを設定すると、すぐに反映されます。
シンプルなデザインが嬉しい、IE7もサポートしたレスポンシブデザイン用のHTML5フレームワーク -Wirefy
HTML, CSSだけでなく、jQueryやmodernizrなどJavaScriptやrobots.txtなど、ウェブサイトを構築する際の基本セットが揃ったレスポンシブデザイン用のフレームワークを紹介します。 Wirefy [ad#ad-2] Wirefyの対応ブラウザとデバイス Wirefyのデモ Wirefyの対応ブラウザとデバイス WirefyはIE7をはじめ、すべてのモダンブラウザ、スマートフォンデバイス、タッチデバイスをサポートしています。 Latest Chrome (Mac/PC) Firefox 4.0, 3.6, 3.5, 3.0 (Mac/PC) Latest Safari IE9, IE8, IE7 iPhone (Retina) Droid (Charge/Original) iPad あらかじめセットされているMedia Queriesのブレイクポイントは6つで
li要素で作ったナビゲーションリンクを、Media Queriesで設定したブレークポイントでselect要素にする軽量ライブラリ・TinyNav.js
シンプルで使いやすそうだったので 備忘録。Media Queriesと併用して、 ナビゲーションリンクをselect要素 に変換するjQueryのプラグインです。 圧縮版だと300バイトほどと、超軽量で、 様々なブラウザにも対応できるので 覚えておこうと思います。 ウィンドウサイズが設定したブレークポイントに達するとli要素で作ったナビゲーションがselect要素に変わってくれるので、スマフォのような幅の狭いデバイスでもスペースを取らずにナビゲーションを配置できます。 通常のナビゲーションが、スマフォでは自動でselect要素タイプのナビゲーションになってくれる、というライブラリ。 場所も取りませんし、ユーザーも使いやすいし、余計なCSSを書く必要も無くなります。圧縮版だと300KBほどと超軽量みたいです。 以下のブラウザに対応できるみたい。 IE 6,7,8,9Firefox 6,8Sa
URL指定可能なレスポンシブWebデザイン対応確認ツール・responsive.isと似たようなやつ何個か
ちょっと便利かも、と思ったのでメモ。 URL指定が出来るレスポンシブWebデザイン 対応確認ツールです。この手のツール はかなり増えているので今更感も否め 無いんですが、URL指定で直接見れるの で、人に見せるのには結構いいかも知 れないです。 というわけで、レスポンシブWebデザインの対応確認ツールです。他にいろいろ。先に紹介します。 ResponsivepxResponsive Design TestingSimple Media Queries TesterscreenflyResizer使い方の説明は多分不要です。これらは同じ目的で作られてますので使いやすいのを選ぶ感じで。 で、今日はresponsive.isっていうツールと、responsinatorっていうツールの2つをご紹介です。 ちょっとキャプチャだと分かりにくいんですけど・・・最上部にスマフォとかタブレットのアイコンがあ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
★【2018年版】レスポンシブデザインにおけるブレイクポイントの最適解はこれだ！ | nuconeco
Responsive Web Design JP（日本国内の秀逸なレスポンシブWebデザインを集めたギャラリーサイト）
http://www.responsivewebcss.com/
ふじこのプログラミング奮闘記