【スマホ用ページ】低解像度、高解像度端末のどちらでもくっきり綺麗に表示しつつ、幅ぴったりにする 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
スマホサイトの作り方で、あんまり書かれてないことを書いてみた - Kaleidoscope
【スマホ対応サイト制作のより詳しい記事はこちら】 1.メニュー編 2.HTMLとCSSで画像を操る編（前編） 2.HTMLとCSSで画像を操る編（後編） スマホサイトの作り方関連のブログとかを見てて、viewport周りの基本的な設定は書かれているのですが、 個人的に重要だと思うポイントが、なかなかどなたも書いてらっしゃらないような気がするので、まとめてみました。 それは、 とにかく内側のHTML要素をハミ出さないように作る どうしてか？ ふつうは、スマホサイトというのは縦スクロールしかさせたくないですよね。 例えば、iPhoneで言うPortrait（縦）表示のとき、横幅320pxを超えたページ構成になると、 おかしな横スクロールが発生してしまいます。 viewportで拡大とかの禁止をおこなっていても、そうなります。 （まぁ、拡大とは意味が違うので当然なのですが。。。） 具体的にどうい
スマートフォン向けサイトの作り方 | ユージック
スマートフォン向けサイトの作り方 更新日：2011年1月22日｜公開日：2011年1月22日 iPhoneとAndroid両方に対応するスマートフォン向けサイトの作り方をまとめてみました。 スマートフォン向けサイト作成にあたっての基本概要 まず最初にスマートフォン向けサイトを作成する際に気になる点は画像の扱いだったりすると思います。 横幅ですが、解像度は機種によって様々ですが、縦向きで320px～640px、横向きで480px～960pxが主流となります。 標準となるものを設けるとなると、320px(横)/480px（縦）を標準として良いかなと思います。 ※iPhone4、4Sは640px/960pxの解像度ですが、内部解像度で320px/480pxと解釈してくれるため。 ですので、クライアントに見せるデザインカンプなどを作成する際も縦を標準とする際は320px（横）で作成すれば問題ないと
スマートフォン関連の基礎勉強法 : LINE Corporation ディレクターブログ
こんにちは、ブロググループの飯田 (@iishun) です。 2011 年はさらにスマートフォン市場の拡大が加速すると云われています。弊社でも 2010 年 10 月にライブドア全体のスマートフォン関連事業を推進していくスマートフォングループが設立されました。 が、各コンテンツのスマートフォンサイト・アプリは各グループのコンテンツ担当が運用するのでスマートフォン関連の知識は必須になります。 そこで今回は僕がここ最近実践しているスマートフォンに関する勉強法を、実際に使用した参考書籍と共に紹介してみます。これから「スマートフォンの事を勉強しなきゃ！」と思った人に役に立ってもらえればなと思います。 1. HTML5/CSS3 の特徴を知る HTML5/CSS3 がスマートフォン用のマークアップ言語というわけじゃありませんが、スマートフォンのウェブサイト (Webkit 系) は HTML5/CS
楽してiPhone対応サイトを仕立てる方法 | ライフハッカー・ジャパン
お祭り騒ぎだったiPhoneの発売日ですが、PC、ケータイに加えてもう1サイトつくるのかよ！ とお怒りの方に朗報です。 アップルストア銀座で行われた『誰でも出来るiPhoneのウェブサイト』のセミナーにて、CSSによってPCサイトをiPhone（とiPod Touch）に対応させる方法が解説されました。 User-Agentでの表示分けを覚悟していた身としては、mediaタイプでCSSを切り替えるという方法は目からウロコの簡単さです。 徹夜行列して買ったiPhoneで見たサイトが、こうやって対応してくれていると嬉しいですよね。 [SwapSkill公式サイト via Kawa.netブログ（川崎有亮）] （まきの）
Travellers Tales : ウェブサイトを iPhone/iPod touch 対応にする最も簡単な方法
ウェブサイトを iPhone/iPod touch 対応にする最も簡単な方法 viewport を設定して iPhone/iPod touch に対応しよう ぼちぼち iPod touch が届き始めましたね。 Safari on iPhone/iPod touch のために用意された meta 要素の viewport 属性1を使って、あなたのサイトをなんちゃって iPhone/iPod touch 対応にする方法を説明してみたいと思います。 方法は簡単です。 <meta name="viewport" content="width=1024" /> head 要素に上記のようなタグを入れるだけです。ただ、ここで width に指定する横幅を自分のサイトに合わせて最適化する必要があります。 ちなみに、上記の width=1024 となっている viewport の設定は Apple のホ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
