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ピクセル）のディスプレイを搭載したスマートフォンが登場するまでになりました。 高精細ディスプレイの登場
スマートフォン対応でよく使う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
【スマホ用ページ】低解像度、高解像度端末のどちらでもくっきり綺麗に表示しつつ、幅ぴったりにする HTML テンプレート。
こんにちは、ウェブ開発の林です。 スマートフォン向けウェブページを作る際、横幅ぴったりにしたいと思いませんか。 meta viewport というタグを使えば表示サイズを調整することができます。 ただそれを使ったとしても、Android / iPhone は端末により横幅が違うため個別に最適化するのは面倒です。 スマホ端末ごとにコードを分けることなく常に幅ぴったりにする HTML テンプレートを作りました。 こちらを参考に組んでみてはいかがでしょうか。 HTML テンプレートコード（ヒント付き） こちらの HTML コードを丸っとコピペして修正していくと楽だと思います。 追記： ライセンスフリーです。自由に使ってください。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title></title> <!--
スマフォサイトでよく見るパーツのコードサンプル集 | 07design.blog
最近スマートフォンサイトの案件が増えてきました。そこで、個人的によく使いそうなコードをEvernoteにまとめたりしていたのですが、 まだまだスマフォサイト構築のノウハウ記事も少ないですし、共有しておこうと思います。…最近スマートフォンサイトの案件が増えてきました。 そこで、個人的によく使いそうなコードをEvernoteにまとめたりしていたのですが、 まだまだスマフォサイト構築のノウハウ記事も少ないですし、共有しておこうと思います。 すべてのデモ（chromeなどのwebkit系ブラウザまたはスマートフォン実機でご覧ください） download ヘッダーの右にメニュー <h3>ヘッダーの右にメニュー</h3> <!--ヘッダーの右にメニュー--> <header class="header1"> <h1><a href="#"><img src="title.png" alt="SIT
Yahoo!Japanを作る [iPhoneのある生活]
ここでは、デフォルトのブックマークである「iPhone用Yahoo!Japan」を取り上げます。 今回取り上げるiPhone用Yahoo!Japanの特徴 実際のiPhone用Yahoo!Japanは、Javascriptによるニュースのスクロールや、CSSでの画像のレイヤー構築など複雑な処理がありますが、 今回はこのうちの一部として以下を取り上げます。 iPhoneを回転させても拡大・縮小しない iPhone用Safariで文字を拡大させない iPhone回転ごとに処理を行う iPhone縦持ち・横持ち用のスタイルを使い分ける 結果とソース 上記のようにほぼ再現することが出来ました。（実際のページはこちら）ソースは以下です。 スケールで縛りを設け、回転時に拡大･縮小を防ぐ 回転時に処理を行う 回転時のイベントを設定 要点 ポイントは以下です。 initial-scale=1, minim
tDiary.org
みなさんの日記にも、iPhoneをはじめとしたスマートフォンによるアクセスが増えていると思います。たいていの場合、tDiaryによる日記はスマートフォンでも問題なく表示されますが、拡大しないと読めないなど、使い勝手が落ちる場合があります。この記事では、スマートフォン向けのカスタマイズ方法について説明します。 サイドバーを非表示にする スマートフォンは画面の横幅が狭いので、サイドバーなどを設けた2カラムデザインのサイトは見づらくなります。tDiaryでサイドバーを設けている場合には、これを表示しないようにしましょう。 tDiary 2.3系には、「@conf.iphone?」というメソッドが提供されています1。これを使って、サイドバーを生成しないようにできます。まず、設定の「ヘッダ・フッタ」にてサイドバーを生成している場所を特定します。多くの場合、フッタにて以下のような記述があるでしょう:
【ハイクオリティ】iPhone Toggle UIをCSSとjQueryで実現 ≪ JavaScirpt ≪ MOMA Labs
三度の飯よりiPhoneが好き！松本です。iPhoneがつながらないと誇張抜きでテンパリます。 かなりクリーンなソースでiPhoneのトグルスイッチを実現しているコードがあったのでご紹介します。なんてクールなんだ！ iPhone向けのサイトも多くなってきている昨今、これからガシガシ役に立つんじゃないでしょうか。 百聞は一見にしかず、まずはデモサイトをご覧ください。 ダウンロードとインストール iPhone Toggle Switches // Elijah Millerの【Download】から必要ファイルを一式落とします。 jQuery版とprototype版が用意されてるのも素晴らしいですね。私はjQueryに傾倒しているのでjQueryを選択。 HTMLの内で次のようにJavaScriptとCSSを読み込みます。 1 2 3 4 5 <head> <script type="jav
社内SNSをiPhoneで快適に見るためのCSSを書いてみた
KBMJの佐藤です。 ついにiPhoneが日本国内で発売されますね。 時間がない人のための、「WWDC 2008 基調講演」が5分でわかるハイライト アップル - iPhone 昨日はジョブズの講演に関する情報を リアルタイムで最初から最後までネットでチェックしていました。 興奮さめやらず、今日は昼食をデスクでとりながら、 社内SNS(SNS構築パッケージ「SNSエンジン」にて構築)を iPhoneのSafariに最適化する実験を行なってみました。 続きはこちら http://doruby.kbmj.com/akio0911_on_rails/20080610/_SNS_iPhone_CSS_
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
@media指定による、横幅に合わせた適切なレイアウト表示 | Blog – Gertrud
@media指定による、横幅に合わせた適切なレイアウト表示 - Blog - Gertrud
http://moto-mono.net/2009/06/04/turorial-using-iphone-like-input-delete-button.html
http://www.designwalker.com/2007/06/iphone_1.html