スマートフォン対応でよく使う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
Youtubeの動画を背景に
Introduction In the ever-evolving landscape of web browsing, staying abreast of the latest technologies is crucial. HTML5, the fifth and current version of the Hypertext Markup Language, has revolutionized the way we experience the web. With its advanced features and enhanced capabilities, HTML5 has become the cornerstone of modern web development, offering a more seamless and interactive user exp
devicePixelRatioについて調べてみた - ぺーぺーエンジニアのおぼえがき
devicePixelRatioとは 1pxの画像をそのディバイス上では何pxで表示するかを指定した設定 webkit系に存在する なぜそんな設定があるのか？ iPhone3G,3GSの解像度と、iPhone4の解像度の違いから考える 機種 解像度 iPhone3G,3GS 480 x 320 iPhone4 960 x 640 iPhone4は前のiPhoneに比べて解像度が4倍ある。 画面のサイズは3.5インチと同じな為、1pxあたりの大きさがiPhone4の方が小さく敷き詰められている このことから、同じ5 x 5 の画像を表示しても通常はiPhone4の方が1/2に小さく表示されてしまう。 そのような自体を防ぐ為、1pxあたりの大きさが小さくなったiPhone4では1pxを2pxとして表示されるようにdevicePixelRatioで制御させれている。 縦と横の両方が2倍になること
スマートフォンで解像度ごとに最適な画像サイズにするdevicePixelRatioの設定 | ユージック
スマートフォンで解像度ごとに最適な画像サイズにするdevicePixelRatioの設定 2011年8月31日 スマートフォンでは機種によって解像度がことなるのは周知のとおり。 100px×100pxの画像をiphone3で表示すると100px×100pxで表示されるが、iPhone4では解像度が2倍なので50px×50pxになってしまいます。 スマートフォンの解像度は横幅320pxを標準として480px、640px、720pxなど機種により様々な違いがあります。そこでCSSのmedia query を利用して最適なサイズに書き分けを行います。 /* devicePixelRatio=1（iPhone3～3GS、低解像度Android端末）とdevicePixelRatio未対応ブラウザ */ .className { width: 100px; height: 100px; backgr
Android対応スマートフォンサイトのレイアウト（viewport・コンテナ編）
最近いろんなスマホ最適化されたサイトを見るようになりました。 それと同時に、多様なAndroid端末が急速に普及し、iPhone3GSが全盛だった去年までの制作方法では対応が不十分になってきてまして、僕自身も試行錯誤中なこともあり、2011年5月時点でのiPhone・Androidに対応できる自分なりのレイアウト方法をちょっとまとめてみようと思います。 今回は全体編なので、主にviewportの設定と全体を囲むコンテナ要素にフォーカスを絞ります。 viewportはdevice-width、コンテナはwidth:100%などの伸縮するリキッドレイアウトに 端末の横幅を最大限に活かした方がよい 特に理由が無ければ、大抵の場合は、 viewportはdevice-width、コンテナはwidth:100%などの伸縮するリキッドレイアウトにする 自然な考え方で考えると、PCに比べるとただでさえ狭
【レビュー】自由に使えるiPhone/iPad/Android/PC向け切り分けCSSテンプレート | エンタープライズ | マイコミジャーナル
Fantastic website design in Flintshire, North Wales from Stuff and Nonsense iPhoneやAndroid携帯といったスマートフォンからiPadのようなポータブルデバイス、従来のPCやノートPCにいたるまで、ネットワークにアクセスするデバイスの種類は多様化している。こうしたディスプレイサイズも解像度密度も異なるデバイスに対してそれぞれに適したデザインを提供するというのが、最近のWebデザイナの間で取り上げられることが多いトピックになっている。 こうしたトピックで取り上げられることが多いテクニックがCSS3のMedia Queryを使う方法だ。デバイスの解像度や密度の情報を取得して、それに応じて適用するCSSを切り替えるというもの。これまで多くのブログでこのテクニックが取り上げられ、サンプルコードとともに紹介されている
スマホサイトの作り方で、あんまり書かれてないことを書いてみた - Kaleidoscope
【スマホ対応サイト制作のより詳しい記事はこちら】 1.メニュー編 2.HTMLとCSSで画像を操る編（前編） 2.HTMLとCSSで画像を操る編（後編） スマホサイトの作り方関連のブログとかを見てて、viewport周りの基本的な設定は書かれているのですが、 個人的に重要だと思うポイントが、なかなかどなたも書いてらっしゃらないような気がするので、まとめてみました。 それは、 とにかく内側のHTML要素をハミ出さないように作る どうしてか？ ふつうは、スマホサイトというのは縦スクロールしかさせたくないですよね。 例えば、iPhoneで言うPortrait（縦）表示のとき、横幅320pxを超えたページ構成になると、 おかしな横スクロールが発生してしまいます。 viewportで拡大とかの禁止をおこなっていても、そうなります。 （まぁ、拡大とは意味が違うので当然なのですが。。。） 具体的にどうい
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
HTML5とCSS3を使ってスマートフォン向けサイトを構築 － iPhone版Yahoo!JAPANトップの開発事例紹介