jQueryでRetinaディスプレイを判別して処理を変える方法｜BLACKFLAG
iPhoneなどApple製品に使われているRetinaディスプレイ。 従来のディスプレイよりも高解像度（1ピクセルの幅が78ミクロン）であることから Retinaディスプレイで画像を綺麗に表示するには、表示する倍のサイズで作成する必要があったり 特別な対処をする必要がでてきたりします。 そんなRetinaディスプレイに対して、jQuery（JavaScript）を使って判別し 個別に処理させる方法があったので紹介してみます。 ※webkitブラウザのみの対応です。 Retinaディスプレイかどうかを判別するプロパティは デバイス上で画像の1pxの単位を何pxとしてレンダリングしているかを見てくれる ————————————– window.devicePixelRatio ————————————– によって判別します。 Retinaディスプレイはここで取得する値が「2」になります。 こ
CSS3 の border-image で簡単にリッチなボタンを作れる未来がいつの間にかきてた - latest log
画像を使ってリッチでフレキシブルに伸び縮みするボタンやフレームを作る時みなさんはどうしているでしょうか。 従来の方法だと デザイナーさんが画像を9分割 マークアップで頑張って再現する というハードワークを強いられていましたが、 昨今のモバイル開発環境では、それ、もう要らない苦労らしいですよ。 CSS3 の border-image を使うと、9 slice(9 patch)を CSS だけで実現可能です。 用意するものは、9つに分割する前のボタン画像です。 画像を用意したら、http://border-image.com のジェネレーターを使い border-image 用のCSSを生成します。 -webkit-border-image: url(img/btn.9.png) 27 24 30 25 round; とすると、 Android Browser 2.3.3 iPhone 4S
スマートフォンサイト構築にもHTML5用のreset.css | helog - Webに悩む人のネタ帳
reset.cssは各ブラウザでデフォルトで指定されているCSSをリセットするために読み込むスタイルシートです。 Firefox、Internet ExplorerやGoogle Chromeなど各ブラウザは、コーダーがスタイルシートを適用していない状態では、CSSの初期状態に差異があります。その差異を埋めるべく容易するスタイルシートが「reset.css」です。 少しずつ自身で調整を重ねて作り上げる「reset.css」もありますが、オープンソースとして公開されているものもあります。私はHTML4でPCページを構築する際、YUI(Yahoo! User Interface Library)のCSS Resetは重宝していました。 YUI 3: CSS Reset 今回、スマートフォンサイトを構築するために、スマートフォン用のreset.cssを探していました。そこで気がついたのですが、
【スマートフォン向け】新規でサイトを作るのに使えそうなの一式。 - CSS HappyLife
前回の更新日が見たくない程に時が流れている今日この頃・・・。 ブログを更新するモチベーションが中々上がらなかったんですが、まだ、だらだらでも良いから書いていきたいなと言う気持ちは有るんです。えぇ。 こんだけ更新が滞ってても、Twitterとかで時々ブログ読んでますって言ってもらえたり、最近なら「今日からできる定時で上がるためのWEB制作効率アップ術 | カッシーのWEBる。」で、【HTML5】新規でサイトを作るのに使えそうなの一式。Ver 1 を紹介してもらったりしてうれしい半面、更新して無いなーと、何とも言えない気持ちになったり。 なので、これからはちょろっとでもネタが有れば更新していきたいなーと。 何をモチベーションに更新するかはまだ見つかってないけど＞＜ さて、そんな訳で、今回はスマートフォン向けの新規でサイトを作るのに使えそうな感じの一式です。 【スマートフォン向け】新規でサイトを
PHPで判別 » HTML for iPhone
スマートフォン判別関数を用意し、必要箇所で呼び出して使用します。 <?php function is_smartphone () { //スマートフォンのUAをあらかじめ配列にしておく $useragents = array( 'iPhone', // Apple iPhone 'iPod', // Apple iPod touch 'Android', // Android 'dream', // Pre 1.5 Android 'CUPCAKE', // 1.5+ Android 'blackberry', // blackberry 'webOS', // Palm Pre Experimental 'incognito', // Other iPhone browser 'webmate' // Other iPhone browser ); for($a = 0; $a EX:
node.js + iPhoneのフリックでスライドをリアルタイムに切り替える - 小さい頃はエラ呼吸
はじめに 先日、node.jsとCSSSlide.jsでスライド共有するサンプルプログラムを作りました。このプログラムを少し改良して、iphoneのフリックでスライドを切り替えられるようにしました。 node.jsとCSSSlide.jsでスライド共有するサンプルプログラムを作ったよ。 - 大人になったら肺呼吸 HTML5＋CSS3で作る 魅せるiPhoneサイト iPhone/iPad/iPod touch対応posted with amazlet at 11.06.07谷拓樹 ラトルズ 売り上げランキング: 2326 Amazon.co.jp で詳細を見る iPhoneをリモコンのように使う 普通のプレゼンテーションはノートパソコンの前に立って行いますが、node.js + socket.io + CSSSlide.jsで作られたこのプレゼンツールを使えば、iPhoneをまるでリモコン
[CSS]最近のウェブ構築には欠かせない要件を備えたCSSのフレームワーク -The 1140px Grid
1280px以上の大きなモニター対応、iPhoneなどのスマホ対応、単調になりがちなグリッドのバリエーション、IE6への配慮など、最近のウェブ構築には欠かせない要件を備えたCSSのフレームワークを紹介します。 The 1140px Grid · Fluid down to mobile [ad#ad-2] 以前、Twitter(@colisscom)で紹介した時からバージョンアップしたようなので、改めてブログでご紹介。 The 1140px Gridは、1280のモニターには1140pxのグリッド、スマホなどのそれより小さいモニターにはその幅に可変したリキッドタイプのグリッドを提供するスタイルシートのフレームワークで下記にその特徴的なポイントを紹介します。 1140pxで12カラムを採用した理由 12という数字は非常に便利で、二等分、三等分、四等分、六等分して利用することができます。また、
WebサイトをiPhoneに対応させる -レスポンシブ・ウェブデザイン- - EC studio デザインブログ
このところのスマートフォンの広がりにより、デザイン部でもWebサイトのスマートフォン対応の必要性をひしひしと感じています。 実際のスマートフォン対応の取り組みとしてはこれからなのですが、その時のために従来のサイトをスマートフォンに対応させる方法、特に今回は閲覧環境に応じてページレイアウトを柔軟に切り替える、レスポンシブ・デザイン レスポンシブ・ウェブデザイン（Responsive Web Design）（ご指摘ありがとうございます。）に関していまさらながら調べてみたので、大枠的なことをふわっとまとめておこうと思います。 レスポンシブ・ウェブデザインって まず「レスポンシブ・ウェブデザインとはなんぞや」と言うところですが、 Webサイトのページレイアウトを閲覧環境（パソコン、iPhone、Android など）に応じて動的に変更させる手法で去年あたりからよく耳にするようになりました。 ブラウ
ステップで学べるCSS3ボタンのデザインチュートリアル:phpspot開発日誌
Type study: An all CSS button The Typekit Blog ステップで学べるCSS3ボタンのデザインチュートリアル。 <a>タグを利用したエレメントに徐々にスタイルを与えていってボタンを作成していくチュートリアルです。 徐々にやっていくことでどうやって実現されているかが分かりやすいです。 押した際のエフェクトも実現 関連エントリ jQueryによってカスタマイズされたCSSボタン２０ シンプルさがなんともいい感じのCSSボタン集「Super Simple CSS Buttons」 クールなメニューやボタンを実装するCSSチュートリアル５５ CSSでクールなボタンを作るまとめ
スマホサイトの作り方で、あんまり書かれてないことを書いてみた - Kaleidoscope
【スマホ対応サイト制作のより詳しい記事はこちら】 1.メニュー編 2.HTMLとCSSで画像を操る編（前編） 2.HTMLとCSSで画像を操る編（後編） スマホサイトの作り方関連のブログとかを見てて、viewport周りの基本的な設定は書かれているのですが、 個人的に重要だと思うポイントが、なかなかどなたも書いてらっしゃらないような気がするので、まとめてみました。 それは、 とにかく内側のHTML要素をハミ出さないように作る どうしてか？ ふつうは、スマホサイトというのは縦スクロールしかさせたくないですよね。 例えば、iPhoneで言うPortrait（縦）表示のとき、横幅320pxを超えたページ構成になると、 おかしな横スクロールが発生してしまいます。 viewportで拡大とかの禁止をおこなっていても、そうなります。 （まぁ、拡大とは意味が違うので当然なのですが。。。） 具体的にどうい
スマートフォン関連の基礎勉強法 : LINE Corporation ディレクターブログ
こんにちは、ブロググループの飯田 (@iishun) です。 2011 年はさらにスマートフォン市場の拡大が加速すると云われています。弊社でも 2010 年 10 月にライブドア全体のスマートフォン関連事業を推進していくスマートフォングループが設立されました。 が、各コンテンツのスマートフォンサイト・アプリは各グループのコンテンツ担当が運用するのでスマートフォン関連の知識は必須になります。 そこで今回は僕がここ最近実践しているスマートフォンに関する勉強法を、実際に使用した参考書籍と共に紹介してみます。これから「スマートフォンの事を勉強しなきゃ！」と思った人に役に立ってもらえればなと思います。 1. HTML5/CSS3 の特徴を知る HTML5/CSS3 がスマートフォン用のマークアップ言語というわけじゃありませんが、スマートフォンのウェブサイト (Webkit 系) は HTML5/CS
[CSS]モバイルデバイス用のスタイルを初期化するフレームワーク -CSS Mobile Reset
iPhoneなどのモバイルデバイスを対象とした、スタイルを初期化するCSSのフレームワークを紹介します。 CSS Mobile Reset キャプチャ：Demo 2（Demo 1もあります） [ad#ad-2] 下記は各ポイントを意訳したものです。 CSS Mobile Resetの指針 CSS Mobile Resetのスタイルシート Media Queriesを併用 CSS Mobile Resetの指針 このフレームワークは下記を指針として、現在もプロジェクトとして進行中のものです。 軽量にすること。 必要なHTML要素のみリセットすること。 必要なHTML要素のみを用意すること。 より良いタイポグラフィを提供すること。 軽量にすること モバイルデバイスでのインターネット接続はスピードが遅く、そして高価です。そのため、CSSファイルをより軽量にし、速いダウンロードを提供することが良い
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
MonodEz.com is for sale | HugeDomains
css3のMedia QueriesでスマートフォンやiPad等の様々なデバイスに対応済みのWordPressテーマいろいろ