これがスマートフォン向けサイトを作るときの viewport 設定３パターンだ
スマートフォン向けの Web サイトを作るとき、viewport の設定次第で使い勝手が大幅に変わる。 最近はレスポンシブ Web デザインが流行してるけども、その大前提として viewport の設定パターンを抑えておくのは重要だろう。 この記事では、viewport の設定によって、見た目・使い勝手がどう変わるかを解説する。 パターン1: 何も考えずに HTML を書く まずは、viewport を指定せずに、単純な HTML をスマートフォンで表示してみる。 <!DOCTYPE html> <head> <meta charset="utf-8"> </head> <body> <img src="/images/logo-ja.png"> <p>色んな素材がごった煮になった様子をお椀で表現しています。 湯気が<strong>「てっく」</strong>に見えるのが隠し味になっていま
スマートフォンなどに対応したレスポンシブデザインに関するCSSスタイル（font size自動調整をきるなど） - くらげだらけ
前にも一度、同じような問題に直面して調べて解決したような気がしたのですが、今回もおそらくその時と同じくGoogleで調べて解決したので、メモって忘れないようにしておこう。 font size自動調整をきる 最近ではレスポンシブデザインでいろんなデバイスに対応したりしますが、私もそんな感じの仕事をしていたわけです。最初はPC Chromeでwindowを伸び縮みさせながら作っていたわけですが、ある程度できた所でiPhone Mobile Safariでチェックしていたのです。Portrait mode（縦向き）では問題なく閲覧していたのですが、Landscape mode（横向き）にしたときにどうも文字サイズが変になります。 最近はiPhoneもリモートでWeb inspectorで見れたりしますから、細かく調べてみても数値的には問題無さそう。おかしいなってことで調べた後に、iPhoneでは
iPhoneやAndroid等のタッチデバイス向けイメージギャラリー用JSライブラリ・PhotoSwipeなかなか良いですぞ - かちびと.net
なかなか良さ気だったので備忘録。 iPhone、AndroidやiPadなどの人気 のタッチデバイス用に作られたギャラ リー用のJSライブラリ・PhotoSwipe。 人気のプラグイン、jQueryMobileでも 利用することが出来ます。 タッチデバイス専用とあって、独自の操作でもある、ピンチイン/アウト等による拡大や回転、フリックで進むなどの操作が可能です。 PhotoSwipeはタッチデバイス専用のJSライブラリ。iOS(iPhone/iPad)は勿論、AndroidやBlackBerryにも対応出来るそうです。また、jQuery依存型も非依存型が用意されているのも自由さがあっていいかなと。 [note] jQuery Mobileは昨日、サンプル配布したので宜しければ合わせてどうぞ。[/note] PhotoSwipeサンプル with jQuery Mobile 以下、iPhon
PhotoSwipe
What’s new in v5Code quality and rewrite in ES6The script is now distributed as an ES module and does not require a build step to use. The documentation is also updated and now includes more examples. Simpler initialization and dynamic import supportPhotoSwipe now supports dynamic import and does not block page rendering. <script type="module"> import Lightbox from './photoswipe-lightbox.esm.js';
画面遷移は最小限に 〜ユーザーにストレスを与えない工夫〜 - ECサイト構築運営に役立つ情報発信｜モバイルファーストマーケティングラボ
ファーストビューで遷移することなく商品検索 サイトの訪問した最初の画面の初めに見える範囲（ファーストビュー）で、商品の絞込みを行うことができます。 しかも画面を遷移することなく、詳細の並べ替え（価格順や人気順など）を行えるので、ある程度欲しい商品が決まっている場合はそのまま商品詳細画面まで一気に進むことも可能です。 カートボタンタップでそのままカートへ 商品一覧画面のカートボタンをタップすることでそのまま商品をカートに入れることができます。（もちろん商品詳細画面へ移動することも可） さらにポップアップで ・購入情報入力 ・後で入力（買い物を続ける） ・カートの中を見る と選択することも可能です。 カテゴリごとのお勧めも遷移なしで切り替え カテゴリごとのお勧め表示も、上部のメニューをタップすることで画面を切り替えることなく表示をさせることができています。 Facebookアカウントで会員登録
スマートフォン向けサイトの作り方 | ユージック
スマートフォン向けサイトの作り方 2011年1月22日 iPhoneとAndroid両方に対応するスマートフォン向けサイトの作り方をまとめてみました。 スマートフォン向けサイト作成にあたっての基本概要 まず最初にスマートフォン向けサイトを作成する際に気になる点は画像の扱いだったりすると思います。 横幅ですが、解像度は機種によって様々ですが、縦向きで320px～640px、横向きで480px～960pxが主流となります。 標準となるものを設けるとなると、320px(横)/480px（縦）を標準として良いかなと思います。 ※iPhone4、4Sは640px/960pxの解像度ですが、内部解像度で320px/480pxと解釈してくれるため。 ですので、クライアントに見せるデザインカンプなどを作成する際も縦を標準とする際は320px（横）で作成すれば問題ないといえますが、iPhone4、4SやAn
作って学ぶスマートフォン対応サイトの基本 (2/4)
基本のHTMLを作成する 最低限の制作環境が整ったところで、さっそく簡単なスマートフォン向けWebページを作成してみましょう。エディターを起動して、次のようなHTMLを用意します。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>スマートフォンサイトテスト</title> </head> <body> </body> </html> 今回はHTML5で記述していますが、基本的にはHTML4やXHTMLなど、PC向けのHTML/XHTMLがほぼ利用できます（iモードなど携帯サイト用のHTMLは正しく表示できません）。続いて、基本的なマークアップを施していきます。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>
スマートフォンサイトをデザインする際の注意点まとめ | サイブリッジラボブログ
こんにちは、りうこです。 今日から11月ですね! といっても今日も20℃オーバーで暖かいので、寒いのが苦手な私はこのくらいの気温が続いてくれればいいのに。。と思っています。 では、早速ですがスマートフォンをデザインする際に気をつけたいことをご紹介します。 横向きで見ることを想定したデザイン これはコーディングの際にも気をつけなければならないのですが、 固定幅でデザインすると、横向きにしたときに下の画像のように余白ができてしまいます。 リキッド（可変幅）を想定してデザインするのが基本です。 フォントサイズは12px以上 文字が読みづらくなるということもありますが、 iOSのSafariでは、文字サイズが11px、10px、9pxのときは 折り返し地点の右側に余白ができるというバグがあるようです。 【参考】iOSのSafariで特定のfont-sizeのときの謎の隙間 http://webte
スマホのWeb開発に、Adobe Shadowが神ツールな件 | fladdict
スゴイ。ヤバい。 Adobe Shadowは、Adobeのラボがリリースした、スマホコンテンツの開発支援ツール。 何ができるかというと、PCのブラウザで表示したURLのコンテンツを、iPhoneやiPadで同時に表示してくれる。 PCでサイトをリロードするだけで、iPhoneやiPadでも自動でブラウザがリロードされて、表示を検証できる！！ iPhoneやiPadはURLの入力が面倒だし、PCで作業する度にデバイスを移動するのが大変だった。 Adobe Shadowを使うと、PCでリロードするだけで、全環境で表示の確認がすぐできる。これは作業がはかどる。 使い方 Mac / PC に Adobe Shadowをインストール ブラウザ（Chrome)にAdobe Shadowの拡張をインストール iPhone, iPad, android, kindleに Adobe Shadowアプリをイ
絶対見ておきたい有名企業のスマホサイトまとめ (1/5)
この記事で取り上げているスマートフォンサイトの「BEFORE & AFTER」を以下の記事で紹介しています。合わせてご覧ください。 日本のスマホサイトは2年間でこんなに変わった iPhone、Androidの普及を背景に、スマートフォンのブラウザー向けにコンテンツや表示を最適化した「スマートフォンサイト」（スマホサイト）を開設する企業が増えている。当初はiPhone（iOS）の標準UIに倣った画一的なデザインが多かったが、最近では独特のレイアウトや斬新な色使いの個性的なスマートフォンサイトも増えてきた。 ここでは、Web制作者が見ておきたいスマートフォンサイトを紹介する。実務で参考にできるように、対象を日本語の企業サイトに絞り、業種別に分類してまとめた。スマートフォンサイトの制作に入る前にチェックしておこう。
iPhoneやiPadでも綺麗なレイアウトで表示されるWebサイトを制作する為のスターターキット・Skeleton - かちびと.net
なかなかシンプルで良かったので ご紹介。人気のデバイス、iPhone やiPadで閲覧してもレイアウトを綺麗 に保てるように設計されたWebサイト のスターターキット。内容物はHTML、 CSS、JavaScriptです。 シンプルな構成ですが、欲しい部分は用意してくれている、と言った感じのスターターキット。なかなか気に入ったのでデモを作りました。 HTML+CSSのシンプルなフレームワークです。グリッドレイアウトを使った美しいレイアウトで、Media QueryによるiPhone / iPadでのアクセス時のレイアウトも最適化されており、jQueryで作るタブコンテンツのサンプルコードもあります。 デモ作ったので、宜しければお好きなデバイスでアクセスして見てください。 Sampleサイト※別窓 iPhoneでアクセス iPhoneでアクセス。 ランドスケープ iPadでアクセス iPad
スマートフォンサイトにフリック・スワイプ実装できるjQueryスライダプラグイン
※コメントにも頂いておりますが、この公開版はバグがありますので、承知の上でご利用になるか、ご自身でカスタマイズされる方がお使いください。 スマートフォンサイトにおいて、左のムービーのようなフリック動作ができる画像スライドのjQueryプラグインを作りました。（ムービーはiOSシミュレータによるデモです）iPhone・Androidでご覧の方はデモに直接アクセスしてください（ムービーは再生されません）。 【デモを見る（iPhone・Androidで見てください）】 【ダウンロード】 なぜプラグイン化したか 横向き対応がハードルを高くする ご自身でこの手のUIを組んだ経験がある方はわかると思いますが、絶対配置（position:absolute）を使ったリキッドレイアウトを組むのはなかなか手の込んだことが必要で、今後の仕事で都度ゼロからUI作成を行うのは効率が悪くなってしまうと思ったからです。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
sp-web.jp
スマートフォンサイトを10分で作成
電話占いで使われる占術をご紹介 | 当たる電話占いおすすめランキング～口コミで評判の当たる電話占いサイト紹介～
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP