iPhoneデザインボックスみんなが見てる人気のスマートフォン向けWebサイトデザイン
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ピクセル）のディスプレイを搭載したスマートフォンが登場するまでになりました。 高精細ディスプレイの登場
続：Androidブラウザでviewportのwidth指定
続：Androidブラウザでviewportのwidth指定 １年ほど前にAndroidブラウザでviewportのwidth指定という記事を書いたのですが、１年間いろんな端末や状況に対応しているうちに今は結構違うスクリプトを利用しています。 var portraitWidth,landscapeWidth; $(window).bind("resize", function(){ if(Math.abs(window.orientation) === 0){ if(/Android/.test(window.navigator.userAgent)){ if(!portraitWidth)portraitWidth=$(window).width(); }else{ portraitWidth=$(window).width(); } $("html").css("zoom" , por
今から始めるiPhoneコーディング｜クロノドライブ
何だか周りにiPhoneを持ってる人が増えてきたなぁと思う今日この頃です。 それにつれてiPhone用のサイトをコーディングする案件も増えて来ましたので、コーディングするときのポイントをまとめました。 iPhoneの特徴 まずは、iPhoneの特徴を見てみましょう。 一つの端末で複数の解像度を持つ iPhoneの特徴の一つとして、縦持ち・横持ちのときで横幅の解像度が変わります。 例えば、縦持ちのときは320pxで、横持ちのときは480pxとなります。 ※縦持ちのとき ※横持ちのとき そのため、320pxに最適化したコーディングをすると、横持ちのときに160px分の余白が空いてしまうため、320pxにも480pxにも対応出来るコーディングをする必要があります。 ※そのためには、デザインをしっかりと考えたものにしなければいけませんが…。 HTMLやCSSの実装状況はパソコンと同様 iPhone
スマートフォン対応でよく使うhtml、css、javascriptのまとめ
スマートフォン(ios、android)向けのウェブサイト・ウェブアプリを作る際に個人的によく使うhtml、css、javascriptの備忘録。 html関連 headタグ内での設定<!-- //デバイスサイズにあわせて表示領域を変更する --> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- //電話番号のリンクを無効化 --> <meta name="format-detection" content="telephone=no"> <!-- //ホーム画面用アイコン --> <link rel="apple-touch-icon" href="icon.png"> <!-- //ホーム画面用アイコンの光沢を無効化する --> <link rel="apple-touch-icon
はじめてスマートフォンサイトを作る人へ。制作で気をつけたいポイント５つ
スマートフォンの普及に伴い、スマートフォンサイト制作案件が増えてきている方も多いと思います。かくいう私もその一人です。 最近は一人でカバーしきれない程のご依頼をいただくようになり、新たに担当者を増やすことにもなりました。 普段私が気をつけている点、どういったことを考えてスマートフォンサイトを制作しているかを伝えることになったので、ついでに記事にしてしまいたいと思います。 私がスマートフォンサイトを制作するときのポイントは、以下のとおりです。 1.そのサイトはいつ・誰が・どんな時見るのか2.実際のサイズ感を考えて、使いやすさを確かめる3.死角と押しやすい位置を意識する4.CSS3で実現可能なデザインを5.ユーザは本当にスマホサイトを求めているのかそれでは、詳しくお話していきたいと思います。 こんなの当たり前だよ！ということばかりかもしれません。 案件やサイトのジャンルによっては当てはまらない
jQuery mobileはじめの一歩！「jQuery mobileで簡単なページを作成してみる」のまとめ | jQeryMobileでサイトをつくろう
jQuery Mobileの概要 jQuery Mobileは、jQueryをベースとした、スマートフォン向けのフレームワーク※1です。 スマートフォン向けの直観的かつ使いやすいUIを瞬時に作成できます。 ※1フレームワーク：アプリケーション制作の土台を作ってくれるソフトウェアのこと デザイナー好みの「手軽さ」と「自由さ」を兼ね備え、デベロッパーが求める「リッチなヴィジュアル」のスマートフォンUIが作成できます。 指定した形式でHTMLを書くことで、自動的にスマートフォン向けにデザインされたネイティブアプリケーションさながらのページが瞬時にしてできあがります。（jQuery Mobileが作成できるのは、ウェブアプリケーションです。） 2010年10月にアルファ版がリリースされ、2011年11月ついにjQuery Mobile1.0正式版が公開されました。現在も、jQueryの開発者で
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
html5-memo.com