【スマホ用ページ】低解像度、高解像度端末のどちらでもくっきり綺麗に表示しつつ、幅ぴったりにする HTML テンプレート。
こんにちは、ウェブ開発の林です。 スマートフォン向けウェブページを作る際、横幅ぴったりにしたいと思いませんか。 meta viewport というタグを使えば表示サイズを調整することができます。 ただそれを使ったとしても、Android / iPhone は端末により横幅が違うため個別に最適化するのは面倒です。 スマホ端末ごとにコードを分けることなく常に幅ぴったりにする HTML テンプレートを作りました。 こちらを参考に組んでみてはいかがでしょうか。 HTML テンプレートコード（ヒント付き） こちらの HTML コードを丸っとコピペして修正していくと楽だと思います。 追記： ライセンスフリーです。自由に使ってください。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title></title> <!--
WordPressでKtai Styleを使ってjQuery Mobileスマートフォンサイトを制作する流れ
前回のエントリーからjQueryMobileでスマートフォンサイトを制作し、その後幾つかの修正を重ねそれなりの形になってきたので作業の流れをまとめました。 WordPressのプラグインKtai Styleを使ったjQuery Mobileスマートフォンサイトを制作する流れです。 前回のエントリーからjQueryMobileでスマートフォンサイトを制作し、その後幾つかの修正を重ねそれなりの形になってきたので 作業の流れをまとめました。 やり方は人それぞれだと思いますが、 作業の参考になってくれたら幸いです。 ラフの作成 HTMLマークアップ デザイン（テーマ）のカスタマイズ WordPressテーマ作成 Tipsなど 1.ラフの作成 一般的なwebサイト制作と同様にまずラフを制作します。 また、jQuery Mobileの特徴でもある画面遷移時の効果や、 表示のされ方などもこの時点で決めて
1時間で携帯サイトをスマートフォン対応にする方法 | GREE Engineering
初めての投稿となります。エンジニアのmatsuです。 携帯向けウェブサイトを1時間でスマートフォン対応する方法を紹介します。 概要 2011年4月7日のニュースにて携帯電話の新規契約数のうち、スマートフォンが占める割合が50%を越え、スマートフォンが本格的に普及する兆しが見えてきました。 現在、スマートフォン向けサイトを新規構築するためのチュートリアルは数多く出ていますが、既存の携帯サイトをスマートフォンに最適化する方法があまり紹介されていないのでこの記事で紹介したいと思います。 このチュートリアルを行うと以下のようになります。 実装 全部で8ステップあります。 このチュートリアルではブログのトップページを例にとって説明します。 前半では文字コードの変更、HTMLの変更といった構造を変更します。後半では絵文字や文字スタイルを行い、仕上げとしてHTML5のバリデーションを行っていきます。最初
正方形のユニットで構成された、スマフォ対応のHTML5ベースのフレームワーク -Fluid Squares
表示サイズによって正方形のユニットが最適に構成される、Media Queriesを使ったフレームワークを紹介します。 IE8以下のMedia Queries非サポートブラウザにもスクリプトで対応しています。 Fluid Squares V2 [ad#ad-2] Fluid Squaresの主な特徴 正方形のユニットを使った、HTML5ベースの可変グリッドのフレームワーク。 Media Queriesで表示サイズによって、カラム数が増減、フォントサイズも調整。 モバイル ファーストで、小さいディスプレイのためにCSSを記述。 最近のモダンブラウザだけでなく、iOS, Android, BlackBerryなどにも対応。 IEなどMedia Queries非サポートブラウザには「css3-mediaqueries-js」で対応。 Fluid Squaresのデモ カラム数は1, 2, 3, 4
スマートフォン向けサイトの作り方 | ユージック
スマートフォン向けサイトの作り方 2011年1月22日 iPhoneとAndroid両方に対応するスマートフォン向けサイトの作り方をまとめてみました。 スマートフォン向けサイト作成にあたっての基本概要 まず最初にスマートフォン向けサイトを作成する際に気になる点は画像の扱いだったりすると思います。 横幅ですが、解像度は機種によって様々ですが、縦向きで320px～640px、横向きで480px～960pxが主流となります。 標準となるものを設けるとなると、320px(横)/480px（縦）を標準として良いかなと思います。 ※iPhone4、4Sは640px/960pxの解像度ですが、内部解像度で320px/480pxと解釈してくれるため。 ですので、クライアントに見せるデザインカンプなどを作成する際も縦を標準とする際は320px（横）で作成すれば問題ないといえますが、iPhone4、4SやAn
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
adakoda.com
