WebページをRetina対応させるテクニック～基礎知識編
WebページをRetina対応させるテクニック～基礎知識編：jQuery×HTML5×CSS3を真面目に勉強（4）（1/2 ページ） iPhoneのRetinaディスプレイは、Webページの制作フローにも大きな変化をもたらした。WebページをRetina対応させるにはどうすればいいのだろうか。 はじめに 2010年6月に登場したアップルのiPhone 4には「Retinaディスプレイ」と呼ばれる、それまでの常識を覆した高精細なディスプレイが搭載されました。それ以降、スマートフォンやタブレットといったモバイル端末のディスプレイはより解像度の高いものへと進化していき、2013年の初めにはサムスン電子のGALAXY S4やソニーモバイルのXperia Zなど、フルHD画質対応（1920×1080ピクセル）のディスプレイを搭載したスマートフォンが登場するまでになりました。 高精細ディスプレイの登場
iPhoneサイト向けCSSサンプル（CSS3）｜ConneLog｜ConneCre
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1"> * { word-break: break-all; -webkit-touch-callout:none; -webkit-tap-highlight-color:rgba(255,255,0,0.4); -webkit-text-size-adjust:none; } word-break: break-all; URLなどの文字列の強制改行。ただし句読点なども先頭にくるため要検討。 -webkit-touch-callout:none; 長押しした際のとび先URL非表示。ただし画像リンクをタップした際のハイライトがおかしくなる。aタグ要素にdisplay: block ;を指定す
HTML5で使えるスマートフォンの機能 | DevelopersIO
HTML5を使ったスマホアプリ開発に興味があったので、カメラやGPSなどスマートフォンの機能がどこまで使えるのか試してみました。 Webアプリケーションなのでブラウザに依存しますが、以下のサイトにモバイルブラウザ別対応状況が書かれています。 http://mobilehtml5.org 試したのは以下の機能です。端末はGalaxy NexusとiPod Touch 4世代を使いました。 Androidのバージョンは4.0.4でブラウザはChromeと一部Firefoxです。iOSは5.0.1、Safariで試しました。 スマートフォンで確認できるようにサンプルを作ったので試してみて下さい。 タッチイベント(Touch Events) マルチメディア(Multimedia) 位置情報の取得(Geolocation API) 加速度センサー(Motion Sensors) ファイルアクセス(F
[JS]余分なHTMLは加えずに、セマンティックに実装するスマートフォン用のナビゲーション
デスクトップ時はアイテムが水平に並び、スマートフォン時は省スペースのドロップダウン型に変わるナビゲーションを実装するチュートリアルを紹介します。 デモページ：幅480pxで表示 実装 HTML HTMLは非常にシンプルで、リスト要素を使いnav要素で内包するだけです。 <nav id="nav-wrap"> <ul id="nav"> <li><a href="#">Button</a></li> <li><a href="#">Button</a></li> </ul> </nav> JavaScript スクリプトではスマートフォン用にdiv要素で「Menu」を加え、それがクリックされるとアニメーションでスライドします。 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7
jQTouchの使い方とclass指定による挙動のまとめ - アークウェブシステム開発SandBox
概要 † iPhoneアプリのような挙動が、ウェブブラウズで提供できるJavaScriptのライブラリです。 jQueryのプラグインとして動作します。 公式： http://www.jqtouch.com/ 公式サイトの動画の最初の方で、SafariでURLにアクセスして「Add to Home Screen」をタップしたらホームに置かれるようですね。 その際のアイコンなども変更可能です。 ↑ 使い方 † 基本、jQueryのプラグインなので、jQueryのライブラリと一緒に読み込んでインスタンスを生成すればOKです。 <script src="js/jqtouch/jquery.1.3.2.min.js" type="text/javascript" charset="utf-8"></script> <script src="js/jqtouch/jqtouch.min.js" ty
1時間で携帯サイトをスマートフォン対応にする方法 | GREE Engineering
初めての投稿となります。エンジニアのmatsuです。 携帯向けウェブサイトを1時間でスマートフォン対応する方法を紹介します。 概要 2011年4月7日のニュースにて携帯電話の新規契約数のうち、スマートフォンが占める割合が50%を越え、スマートフォンが本格的に普及する兆しが見えてきました。 現在、スマートフォン向けサイトを新規構築するためのチュートリアルは数多く出ていますが、既存の携帯サイトをスマートフォンに最適化する方法があまり紹介されていないのでこの記事で紹介したいと思います。 このチュートリアルを行うと以下のようになります。 実装 全部で8ステップあります。 このチュートリアルではブログのトップページを例にとって説明します。 前半では文字コードの変更、HTMLの変更といった構造を変更します。後半では絵文字や文字スタイルを行い、仕上げとしてHTML5のバリデーションを行っていきます。最初
スマートフォン向けのJSフレームワーク・Wink Toolkitがバージョンアップしてより素敵になったよ
以前ご紹介した、スマートフォン向けの JavaScriptフレームワーク、Wink Toolkit がバージョンアップしたんだぜ、と開発者 さんからわざわざお問い合わせ頂いたの でご紹介。以前もかなり豊富なUIでとても 有意義なフレームワークだと感じましたが、 今回はUI面が特にパワーアップ。 Wink Toolkitがバージョン1.3になって機能もいくつか追加されました。3ヶ月間、UIの改善にかなり力を入れてくれたようで、スマフォにかなり合わせてくれましたよ。 jQuery Mobileライクなインターフェースになりました。もともとUIエフェクトの評価は高かったWink Toolkitですが、全体的なデザインが見直されてかなり垢抜けた感じです。 尚、以前の機能やUIは過去記事をご参照下さい。 Wink Toolkitが割と良かったので日本語サンプル作った Demo 前回はほぼ全てのデモを
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
一般社団法人 日本レコード協会｜プレスリリース | 2011年度「音楽メディアユーザー実態調査」報告書公表
2011年、スマフォ・デスクトップ用のクロスブラウザ確認ツールのまとめ