Webサイト＆WebアプリのRetina対応方法まとめ
こんにちは。 会社からMacBookPro Retinaディスプレイモデルを支給されました浅海です。 Retinaディスプレイ、非常に快適なのですが、Retinaディスプレイに最適化されていないWebページやアプリケーションでは、ビクセルベースで作られている部分がすこしぼけたように見えてしまいます。 特に文字を画像にしている場合なんかは、かなり気になります。 Retinaディスプレイは既にiPhoneで使われているほか、一部のAndroidもRetina相当の解像度を持っているモデルが登場しており、モバイルWebサイトやWebアプリがRetinaディスプレイを意識した作りになっていることはよく見られるようになりました。 これからもPCなど、Retinaディスプレイ対応のニーズは増えるだろうと思い、対応方法をまとめました。 目次 imgタグ CSS JavaScript Google Map
身につけておきたいWebサイト高速化テクニック #1｜アジェンダ編 | DevelopersIO
Webサイトの表示高速化対策していますか？ 日本は欧米諸国に比べWebサイトの表示高速化対策をしているサイトが少ないです。 特に、最近ではスマートフォンの普及によりモバイルサイトの需要も増え、高速化をしなければいけない機会も増えてるのかなと思います。 日本のモバイルデータ通信はLTEで高速になりつつあるとは言え、まだまだ「貧弱！貧弱ゥ！」です。 幸いなことに僕も最近鶴の一声によってクライアントからサーバー周りまで包括的な高速化対策を経験する機会を得ることができました。 それまでは、「手間がかかりすぎるからできればやりたくない」というのが本音でした。職務怠慢ですね（苦笑）。 でも、できるだけ楽したい！と思うのが人の常。 この連載ではできるだけ楽をしながらできる高速化手法と計測結果を1つ1つ紹介しようと思います。 基本的にはすべて受け売りの内容です。やってみた対策を羅列して、連載の中で自分で試
Putting CSS Clip to Work: Expanding Overlay Effect | Codrops
A tutorial about how to create a simple expanding overlay effect using the CSS clip property and CSS transitions. Our previous article, Understanding the CSS Clip Property by Hugo Giraudel offers a great overview of the CSS clip property and the rect() function. Today we want to explore the practical side of it a little bit more. We are going to create a neat and simple effect for revealing some e
[JS]ブラウザとそのバージョンだけでなくOSもデバイスもスクリーンサイズも判定し、CSSのセレクタで利用できる便利なスクリプト -CSS Browser Selector+
IE6/7/8/9, Firefox, Chrome, Safari, Operaは当たり前、Win, Mac, LinuxなどのOS、iPhone, Android, iPod, iPadなどのデバイス、スクリーンのサイズ、言語などを判定し、それらをCSSのセレクタで利用できるスタンドアローンのスクリプトを紹介します。 CSS Browser Selector+ CSS Browser Selector+の特徴 CSS Browser Selector+の使い方 CSS Browser Selector+の特徴 CSS Browser Selector+はハック無しで、さまざまなUAをCSSのセレクタで指定できるスクリプトです。ブラウザごとに異なるスタイルシートの適用、スマフォやタブレット用のレスポンシブなスタイルにも利用できます。 CSS Browser Selector+が判別するの
Androidでコンテンツがはみ出すときの対処法 – creamu
Androidで意味不明なことにコンテンツがはみ出すときの対処法です。 viewportを以下のように指定します。 <meta name="viewport" content="width=device-width,target-densitydpi=device-dpi,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" /> 外部のjsで、以下のように記述して制御します。 $(window).bind(‘resize load’, function(){ $("html").css("zoom" , $(window).width()/640 ); }); to-R 西畑さんのエントリーに助けてもらいました。 参考URL： Androidの「target-densitydpi」でviewport
Webデザイナーでもできる、サイトのパフォーマンスをあげる5つの方法
Webデザイナーでもできる、サイトのパフォーマンスをあげる5つの方法 2011-08-28 Webデザイナーが、Webサイトのパフォーマンスを重視する傾向はあまり無いように感じますが重要なことです。 Googleでは、0.5秒遅くなると、検索数が20%減少する amazonでは、0.1秒遅くなると、売り上げが1%減少する という報告もあるようです。Webサイトのパフォーマンスはコンバージョンにも影響する大切な部分。 今回はWebサイトのパフォーマンスを上げる方法を取り上げます。 パフォーマンスアップの前に 応答時間の限界 0.1秒までなら、結果はコンピューターではなく、ユーザーによって引き起こされたように感じる。 1秒までなら、"遅れている"と感じるが、ユーザーの思考は途切れずに、自由に動いていると感じる。 10秒までになると、ユーザーがコンピューターに振り回されている気持ちになり、ストレ
たった2行でIE5.5～IE8をモダンブラウザの挙動にする魔法のJS
開発者泣かせの問題児ブラウザ、Internet Explorerですが、IE5.5、IE6、IE7、IE8をモダンブラウザの挙動にする神JSがGoogle Codeで配布されていました。 とりま、 attripのデザイン崩れはこれで解決できました！ 使い方は簡単！下記のコードを貼り付ければOK！ まじ仏。 「IE9.js」は、IEを普通のモダンブラウザの挙動にするJSです。IE5、IE6でも透過PNGが使えるようになります。 「css3-mediaqueries.js」は、IEでCSS3 Media Queriesを使えるようにするJS。レスポンシブデザインのサイトをIEでも見れるようにします。 ちなみに、border-radiusや、box-shadow はできませんでした。 あと、IEでの見え方をチェックする方法はこちら↓↓ IE9環境でIE6/IE7/IE8/IE9表示する方法(共存
Web design and development articles and tutorials for advent
24 ways is the advent calendar for web geeks. For twenty-four days each December we publish a daily dose of web design and development goodness to bring you all a little Christmas cheer. Learn more Drew McLellan puts the chairs up on the tables, sweeps the floor, and closes off our season, and indeed the entire 24 ways project with a look back at what it’s meant to run this site as a site project,
Post by @geckotang
もう知らないでは許されない!! 「ずっとjsdo.it使ってる」という人のためのjsdo.it情報まとめ --- * [追記] * **Gistに上げたコードをロードすることも出来るけど、日本語化ける。**は修正されました！ * **エディタ画面**に追記 --- [jsdo.itで覚えておきたい10のこと | げことじ。](http://gecko.hp2.jp/2011/06/06/i-love-jsdoit/) をだいぶ前に書いたのですが、2012/11/01時点での僕が気づいた事を書いておきます。 個人的にはSass, Lessが書けるのはいいなーとおもいます。 # **目次** * ツールバー * ユーザープロフィール画面 * コードの詳細画面 * エディタ画面 * アカウント設定画面 ## **ツールバー(?)** * 右上で日本語と英語の言語切替ができるようになった ## *
『スマホブラウザサービスのボタン』
1 pixel｜サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 はじめまして。2011年入社の根岸と申します。 9月まで「あそんで♪HuggPet」というゲームのディベロッパーをしており、10月から新規ゲームのプロジェクト責任者（PS）をしております。 今回の記事では、「あそんで♪HuggPet」で使用している「ボタン」の実装方法について、少しだけお話させていただきたいと思います。 ボタンは押したらハイライトしてほしい先日、居酒屋で「すみませ～ん！」と大声で店員を呼んだのですが、反応がありませんでした。 その後、すぐに店員が来たので問題無いと言えば無いのですが、私は店員に声が届いているのか不安で、危うくもう一度大
JavaScript でタブ切り替え UI を実装する | WWW WATCH
先日、タブ切り換えタイプの UI を、JavaScript と CSS で簡単に実装する仕組みを探していて （他力本願）、ちょうど求めていたスクリプトが Arc... 先日、タブ切り換えタイプの UI を、JavaScript と CSS で簡単に実装する仕組みを探していて （他力本願）、ちょうど求めていたスクリプトが Archiva さんで紹介されていたので使わせていただきました。 時間がなかったので、できれば自分では書きたくないなぁ、なんかいいの公開している人いないかな～なんて思っていたのですが、おかげ様で助かりました。ということで、お礼を兼ねて紹介させていただきます。 タブ切替をサクッと実装 ： Archiva タブ切り換えを実装する JavaScript ライブラリやサンプルソースはいくつか存在しますが、私が求めていたのは JavaScript が OFF の時でもページ内リンクと
あなたのウェブサイトを高速化する方法 - builder by ZDNet Japan
そして同氏は、世界で最も高速なウェブサイトの1つであるGoogleのパフォーマンスにかかわる仕事をしているのである。 ウェブのパフォーマンスには2つの重要な側面、すなわち効率性と応答時間がある。効率性は、世界ランキング100位に入るようなウェブサイトを構築する際に出てくるスケーラビリティという難問に取り組むための武器である。あなたのウェブサイトが何百万人単位のユーザーと、何十億単位のページビューを擁するような規模のものである場合、バックエンドアーキテクチャ全体に対する理解を深めておくことが重要となるだろう。 ページの速度というものは、HTMLドキュメント内に記述する一連の指示によって決定されると言っても過言ではない。 iGoogleを例に挙げると、バックエンド処理に費やされる時間、すなわちデータがキャッシュされていないために毎回リクエストされることで費やされる時間は、ページ全体の処理時間の
HTML5 × CSS3 × jQueryを真面目に勉強 – #5 LESSのコンパイル（Win / Mac） | DevelopersIO
そんな訳で、CSSの拡張メタ言語であるLESSをCSSにコンパイルする手順を学んでおくとします。 前回、LESSとはなんぞやという記事を書きました。今回はそれの補足に当たる内容なので、LESSをまだご存じないという方は、こちらに目を通されておくのがよろしいかと思いますが、「そんなのめんどくせー、息をするのもめんどくせー」という横着なアナタのために簡単に説明しておきます。 LESSとはCSSに対する拡張メタ言語のことです。拡張メタ言語とは、元の言語と同じ意味（機能）をより少ないコードで表現できるようにしたもので、「あー、CSSダラダラ書くの超めんどくせー、息をするのもめんどくせー」という横着なアナタにピッタリの言語というわけです。詳しくはこちらをご覧ください。 LESSからCSSファイルを書き出す (Win) lessc.exe まずはコマンドラインツールによる手法からやっていきます。以下の
jQueryでRetinaディスプレイを判別して処理を変える方法｜BLACKFLAG
iPhoneなどApple製品に使われているRetinaディスプレイ。 従来のディスプレイよりも高解像度（1ピクセルの幅が78ミクロン）であることから Retinaディスプレイで画像を綺麗に表示するには、表示する倍のサイズで作成する必要があったり 特別な対処をする必要がでてきたりします。 そんなRetinaディスプレイに対して、jQuery（JavaScript）を使って判別し 個別に処理させる方法があったので紹介してみます。 ※webkitブラウザのみの対応です。 Retinaディスプレイかどうかを判別するプロパティは デバイス上で画像の1pxの単位を何pxとしてレンダリングしているかを見てくれる ————————————– window.devicePixelRatio ————————————– によって判別します。 Retinaディスプレイはここで取得する値が「2」になります。 こ
WordPressを高速化する9つのステップ | PLUS
福岡を拠点に活動するPLUSではWebサイト制作・iPhone/Androidアプリの開発を行っています。 WordPressはそのままだとアクセスが増えた時に、重くなりがちです。プラグインも入れすぎるとさらに重たくなることに。このブログだと表示スピードが改善前は7.7ｓかかっていましたが、見直しを行って0.4sにまで改善することができました。表示スピードは離脱率や、SEOとしても重要な要素ですので、改善する余地は大いにあります。 高速化に役立つツール まずはじめに、改善に役立つツールを2つご紹介します。 一つ目はWebWait。URLを入れると、読み込み時間を教えてくれます。まずはどのくらい時間がかかっているのか、チェックしてみましょう。 次はGoogleの「PageSpeed Insights」。URLを入れるだけで、高速化に役立つTipsを教えてくれます。もともとGoogle社内で
CSS idとclassの違い - Linux Information Exchange
スタイルシートを適用する際に、タグにidやclassを指定しますが、cssの記述に違いがあります。 #ordernumber{width:120px;} .txt12{line-height:20px;size:12px;} .red{color:red} .number{text-align:right;ime-mode:disabled;} <input id="ordernumber" type="text" name="order_number" class="txt12 red number" /> 「idセレクタ」を用いて指定するものは、CSSプロパティの前に「#」（シャープ）、 「classセレクタ」を用いて指定するものの前には「.」（ドット）をつけます。 この「id」と「class」の違いは次の通りです。 「id」は同一ページ内で同じ名前を1回しか使用できない。 「clas
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
How to Write Code That Embraces Change | Nettuts+
Site Under Maintenance
How & When to Build Website Content using Tables
Base64 vs. CSS Sprites: battle for performance
