RetinaサポートWebへの第一歩 | Tai... / ウェブサイトのRetina化 | drops -... / AMAITORTE - 日記 - 記事『Reti...他...全7件
![WebサイトをRetinaディスプレイに対応させる方法](https://cdn-ak-scissors.b.st-hatena.com/image/square/6e83fcc97c176133fd13f9ecf61b2f5814f3907f/height=288;version=1;width=512/http%3A%2F%2Fw3q.jp%2Fupload%2F2012%2F6%2F18%2Fl_2012-6-18_2daa37cc0fcc203867a6a649dc6e104d.png)
リスト要素で実装した水平タイプのナビゲーションのスタイルを壊すことなく、配置エリア・表示サイズに合わせて最適化するjQueryのプラグインを紹介します。 HorizontalNav [ad#ad-2] HorizontalNavのデモ HorizontalNavの使い方 HorizontalNavのデモ 水平タイプのナビゲーションの見た目は通常、成り行きや指定したサイズになりますが、HorizontalNavを使用すると配置エリアのサイズに合わせて各アイテムのサイズを均等にします。 デモ:480pxで表示 上:未適用はが成り行きで二段になってしまう幅になっても、下:適用の見た目は損なわれません。 HorizontalNavの使い方 実装は4ステップです。 Step 1: 外部ファイル 「jquery.js」と当スクリプトを外部ファイルとして記述します。 <script src="//aja
[Å] これから対応必須な「レスポンシブWebデザイン」を紹介しているサイトのまとめ
どのようなディスプレイサイズでも自動で レイアウトを調整してくれるレスポンシブな イメージスライダーを実装出来るjQueryプ ラグイン・Blueberryのご紹介です。イメージ スライダーを取り入れているサイトは多い のでこういうのは助かりますね。 iPhone等のスマートフォンにも自動でサイズを調整してくれます。痒いところに手が届く系ですね。地味にありがたい。 見た目はシンプルなイメージギャッラリーです。が、閲覧するディスプレイのサイズに依存する事無く、自動で幅を調整、最適化してくれます。MediaQueryと相性良さそうですね。 表示確認 Media Queries Testerでのキャプチャです。 Mobilizerでのキャプチャです。 コード<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery
Design Process In The Responsive Age – By Drew Clemens / SMASHING MAGAZINE 教わって読んだ記事です。レスポンシブ・ウェブデザインに取り組むプロセスについて、「従来型の制作プロセスでは、もうダメですよ」という事と、解決策として「プライオリティ・ガイド」というスタイルでワイヤーフレームをつくる方法が提案されています。 ● 以下、要約。 ”従来の制作プロセスでは、 レスポンシブ・デザインに対応できない” デザイナーはPC画面用のPhotoshopだけをつくり、モバイル用(スマホ、タッチデバイス)のレイアウトはフロントエンド・ディベロッパに「おまかせ」にされることが多いが、それでは無理がある。PC版のデザインから「推測」してスマホ向けにレイアウトを組み替えようにも、コンテンツやメニューの重要度や優先順位が見えてこなければ、レ
※先日読んだ「Responsive Web Design」という本では、Media Queriesを設定する際にレイアウト調整の起点となるサイズを「Breakpoint」と読んでいたので、ここでもその名称をそのまま使います。 各サイズでのブラウザテスト 各画面サイズでのブラウザテストはFirefoxやChromeの「Web Developer」拡張機能などを使って行うのが便利です。Chrome版「Web Developer」では、画面サイズの追加機能はありませんが、先日紹介した方法でサイズが追加可能です。 ブレイクポイント間のテスト 上記一覧はあくまでテストの目安でしかありません。たとえば、1280pxのスクリーンを利用しているユーザが必ずしもウィンドウをフルサイズにして使っているとは限りません。ウィンドウサイズをドラッグしてリサイズして、各ブレイクポイント間でも大きなレイアウトの崩れがな
Since its groundbreaking release in 2011, Responsive Web Design remains a fundamental resource for anyone working on the web. Learn how to think beyond the desktop, and craft designs that respond to your users’ needs. In the second edition, Ethan Marcotte expands on the design principles behind fluid grids, flexible images, and media queries. Through new examples and updated facts and figures, you
先日、Googleが発表した『Google がお勧めするスマートフォンに最適化されたウェブサイトの構築方法』は、Web業界に衝撃をもたらしました。 レスポンシブ・ウェブデザイン(RWD)を「推奨」すると明記してあり、いわゆる「専用サイト」を全否定するような内容にも取れました。 これで、スマートフォンのサイト対策はRWD一択のように受け取られてしまった方もいることでしょう。しかし、ここで勘違いしてはならないのは、「RWD=レイアウトが解像度でダイナミックに変化する手法」 のことではないということ。 実は、日本語版のブログでは内容の一部しか翻訳されておらず、詳しくは原文にリンクがされています。 Building Smartphone-Optimized Websites また、こちらのサイトなどが、エントリーの元になったセミナーの内容などを元に詳しく解説をされています。 スマートフォン向けサイ
+1 ボタン 2 AMP 11 API 3 App Indexing 8 CAPTCHA 1 Chrome 2 First Click Free 1 Google アシスタント 1 Google ニュース 1 Google プレイス 2 Javascript 1 Lighthouse 4 Merchant Center 8 NoHacked 4 PageSpeed Insights 1 reCAPTCHA v3 1 Search Console 101 speed 1 イベント 25 ウェブマスターガイドライン 57 ウェブマスタークイズ 2 ウェブマスターツール 83 ウェブマスターフォーラム 10 オートコンプリート 1 お知らせ 69 クロールとインデックス 75 サイトクリニック 4 サイトマップ 15 しごと検索 1 スマートフォン 11 セーフブラウジング 5 セキュリティ 1
デザイン要素を固定しないリキッドレイアウトは、未知の端末にも対応するというコンセプトのもとに実装するレスポンシブウェブデザインには必須だと考えています。そのリキッドレイアウトを実装する際に理解しておきたいのが、パーセント値で幅や高さを指定した際に小数点以下になるピクセル値(10.5pxとか9.2pxなど)に対するブラウザの挙動です。 たとえばグリッドシステムを構築する際、計算上はあっているのにブラウザでは思った通りに表示されないといったことが起こります。これは、各ブラウザのサブピクセル(小数点以下のピクセル値)の扱いの挙動差により生まれます。 まずはパーセント指定の基本から まずは前提となるパーセント指定の際の計算の基本のおさらいから。。。 CSSでパーセント値を使って幅や高さ指定をすると、指定した要素を含む親要素をベースにピクセル値が計算されます。 たとえば100pxの親要素の中にある子
iPhone 4からはじまり新しいiPadことiPad 3rd、そしてもはや確定的とも思われる次期MacBook ProのRetina化。現状でウェブサイトをRetina化する効率的な方法を考えると、 “Retina Images” を使うのが最適解な気がしている。 Retina画像を対応端末に表示させる場合、 imgタグによる設置 <img src="foo@2x.png" width="100" height="100" alt="bar"> background-imageによる設置方法 <style> #foo { width: 100px; height: 100px; background: url(bar.png) no-repeat; } @media only screen and (-webkit-min-device-pixel-ratio: 1.5) { #foo
デスクトップ/ノートPCから、iPhone、iPadといったスマートフォン、タブレットまで、Webを閲覧するデバイスは多様化しています。それぞれに最適化したWebサイトを用意する必要性が発生しており、Web制作業界ではそれをいかにクリアするかが近年の課題となっています。その解決のひとつの道筋として提唱されているのが、「レスポンシブ・ウェブデザイン」です。ワンソースで全デバイスに対応したページが表示されるコーディング方法で、今後のひとつのスタンダード技法となるのではないかと注目を集めています。本書は、レスポンシブ・ウェブデザインとは何か、どのようなメリットがあるのか、どのようにデザインするのか、レスポンシブ・ウェブデザインにまつわるあらゆる項目を総合的にまとめた標準ガイドブックです。 目次 ■CHAPTER 1 レスポンシブ・ウェブデザインの基礎知識 レスポンシブ・ウェブデザインとは? スマ
表示サイズに合わせて最適なサイズで表示する、幅が固定ではないレイアウト用の超シンプルなスライダーを実装するjQueryのプラグインを紹介します。 「Blueberry」という名前は、開発時に使った画像がブルーベリーだったからだそうです。 デモページ:幅480pxで表示 [ad#ad-2] Blueberryの使い方 実装はいたってシンプルです。 外部ファイル 「jquery.js」と当スクリプト、あと当スタイルシートを外部ファイルとして記述します。 ※スタイルシートはスライダーのベースとなるスタイルが記述されています。 <link rel="stylesheet" href="css/blueberry.css" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></scrip
こもりまさあきさんによる『レスポンシブ・ウェブデザイン』(MdN)という素晴らしい書籍も出てきて、2012年後半は、さらにレスポンシブWebデザインへの取り組みが増えそうです。 スマホを購入した理由のひとつとして「PCサイトを見たいから(PCメールをやりとりしたいから)」というものが上位に来ることがあるといった統計(リンク)がよく引き合いにだされますが、これって、その昔、「印刷用のCSSの実装」とデジャブします。つまり、ユーザーの声「えっと…. そのまま印刷したいんだけど」。 よかれと思って行う実装がかならずしも喜ばれることではないかもしれないとう想像力をキープしておかなければなりません。 さて、レスポンシブWebデザイン。これには2つの意味合いがあると考えています。 ひとつは、ワンソースでのマルチデバイス対応。デバイスごとにことなる対応を行うまでの手間はかけられない、っていうときに使う方
2012年5月30日 著 鷹野さんが「レスポンシブWebデザイン」の是非に関する考察をされていました。 よかれと思って行う実装がかならずしも喜ばれることではないかもしれないとう想像力をキープしておかなければなりません。 まったくもって御意ですね。異なるデバイスでもって同じサイト/ページを利用するユーザーを想定すればこそ、その点は注意が必要だと思います。レスポンシブWebデザインだからといって、スマートフォン程度のスクリーン幅とデスクトップPCのスクリーン幅とでレイアウトやトーン&マナーを過度に変えてしまうのは、考えものだと思うのです。ユーザーは、自身の求める情報なり機能をすぐと見つけられなかった際、見つけるための手がかりを必要とするわけでしょう。その近傍に何があったか、というような記憶を活かせるだけの配慮は必要だと思います。 さて、レスポンシブWebデザイン。これには2つの意味合いがあると
2012年5月29日 著 Responsiveの本当の意味を考えてみる必要がある。と思う今日この頃です。という記事を読んでの感想など。 この現状で、なんでもかんでもスマートフォンやタブレットのデバイスサイズに合わせるWebサイトが果たしてResponsive Web Design(レスポンシブWebデザイン)なのでしょうか? デバイスの最適化と言う観点から、現状の流れは非常に疑問に思えます。 すべてのWebサイトで闇雲にレスポンシブWebデザインを採用すべきだ、とは誰も主張していないと思うのです。少なくとも、自分の狭い観測範囲ではそう。ゆえに、なんでもかんでも......というくだりには違和感を覚えます。また、筆者の方はレスポンシブWebデザインをデバイスへの最適化として捉えているようですが、その点も違和感があります。以前、レスポンシブWebデザインと「最適化」のなかで書いたように、自分は
Responsive Web Design(レスポンシブWebデザイン)と言うと、デバイスのモニターサイズを「どうするこうする」と言う話に重点が置かれている現状に、少し嫌気がさしている毎日です。 たしかに、デバイスのサイズに合わせて、最適なコンテンツの幅や文字のサイズの調整も大事な事なのかもしれません。 ただそれは、"情報を伝える"と言う"目的"における"手段”の一つであって、必ずしも、それが答えでは無いはずです。 ましてや、デバイス事にレイアウトを変える事を、効果として制作側が面白がってやる為の理由では無いはずです。(実験的にやるのは良いですが) 利用シーンに最適化する必要がある スマーフォンやタブレットが普及した事で、これまで以上にWebの情報の活用方法は変わってきていることは説明の必要もないかと思います。 利用するシーンもこれまで以上に、日々の生活に密着しているのではないでしょうか?
iPhone、iPadを基準にした数値が目立ちます。 レイアウトをPC、タブレット、モバイルで変更すると考えた時に、 代表的なデバイスでありユーザー数も多いiPhone、iPadが基準になるのも自然な流れかも知れません。 しかし、例えばブレークポイントをiPad基準にした768pxにすると、 幾つかのAndroidタブレットは800pxなのでこれらのデバイスにはタブレット用のレイアウトが適用されません。 ブレークポイントの数 少ないサイトは1〜多いところでは十数のブレークポイントを設けてるサイトもあります。 ただし、多く設定してるサイトもその全てでレイアウトが大きく変化する訳ではなく、 ごく一部のコンテンツのみ調整するといった使い方をしています。 例えば下記のサイトでは1300pxを境に境界線(.splitter)のみスタイルが変わります。 Remodelista: Sourcebook
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く