Untitled — width=device-width, initial-scale=1についてぐちゃぐちゃと
追記：「場合によって」とかが文章中に抜けてるくさい なんだか言いたいことをまとめられてないし、ちょっと書いてるうちに間違った書き方してるとこもありそうな感じでぐちゃぐちゃになっちゃったけど、なんとなく雰囲気はわかりそうなとこまではあるし、あとからもうちょっとずつまとめるってことで、これはこれで悩んだ形跡としてポストしちゃっとく。 Appleはそもそも、日本でのスマホ向けページみたいなやつは想定してないんだよ。多分。 PCのサイトふつーに表示できるのに、わざわざスマホ向けのページ別に作って管理やら運用やらをカオスにする必要ないじゃん。 っぽいもので、Appleが想定してるのは Web application page。 Webアプリならスマホ向けっての全然あり。 でもWebアプリでなくても、アプリって拡大なんてしないでしょ？ 拡大しないで幅変えるだけ 。 だから、日本でいうスマホ向けページ
AndroidやiPhoneのHTML,CSS,JavaScriptのバグまとめ
AndroidやiPhoneのHTML,CSS,JavaScriptのバグまとめ AndroidやiPhoneなどのスマートフォンではHTML,CSS,JavaScriptにバグが多くてコーディングが大変になります。そこでバグを紹介しているサイト、記事をまとめてみました。(中にはバグではなく仕様なものもあるかもしれません) iOS 8.4.1の:hover問題 iOS 8.4.1で:hoverを指定していると1タップでページ遷移できない問題 【STINGER5】AndroidのChromeで＆nbsp;が「・」になってる気がする | ビビビッ を に変更すると直るとのこと。 Mobile Safari 8でposition: fixedした擬似要素が完全に位置が固定されない - Weblog - Hail2u.net Mobile Safari 8でposition:
HTML5/CSS3で作るスマートフォンサイトの基本 (1/5)
スマートフォンサイトのサイト設計、画面設計に続き、今回はデザインとHTML/CSSの制作です。前回作成したワイヤーフレームをもとにデザインカンプを作成し、HTML/CSSをコーディングしていきます。 Photoshopでデザインカンプを作成する 最初に、グラフィックソフトを利用してデザインカンプを作成します。今回はPhotoshop CS5を使いましたが、FireworksやIllustratorなど使い慣れたツールで構いません。 デザインにあたっては、スマートフォンのブラウザーの画面領域を定義したテンプレートを用意してからデザインパーツを作成、配置していきます。画面領域はサイズを測ってガイドを引いてもよいですが、本連載の第5回で紹介したデザインテンプレートを利用するのが手軽です。
実例でわかる！スマートフォンサイトの画面設計 (1/3)
スマートフォンサイト設計の基礎知識に続いて、今回からは実際のスマートフォンサイト制作のプロジェクトの流れに沿って、具体的なサイト設計と制作方法を解説します。ぜひ一緒に手を動かしながらスマートフォンサイトの制作の流れを学んでいきましょう。 実在するサイトが課題です！ 題材にさせていただくのは、東京都江東区で幼児向けのプリスクール（就園準備スクール）を運営する「プレイグループ木場校」さんのWebサイトです。 プレイグループ木場校のWebサイトでは、入学を検討している保護者やすでに通学中の生徒の保護者へ向けて、さまざまな情報を提供しています。カリキュラムや先生の紹介といったスクール案内に加えて、コラムなどのコンテンツも充実しており、情報量はかなり多い方だと言えます。 今回はこのWebサイトのスマートフォン対応の企画、設計について考えてみましょう。 ゴールの設定とコンテンツの選定 スマートフォンの
[CSS]iPhoneでsubmitボタンのテキストがずれた時の対応方法
submitボタンのスタイルがiPhone(Mobile Safari)で、テキストがずれたり、「border-radius」の角丸が期待より丸くなってしまった際の対応方法を紹介します。 Styling Submit Buttons for Mobile Safari デモページ キャプチャの元画像：協力（@sparrowSeven） この現象はデスクトップ用のブラウザ（Safari, Firefox）では起きませんでした。また、iPhoneのシミュレーター（iBBDemo2）でも確認できませんでした。iPhone4固有の現象のようです。 原因と思われるのはpaddingの値が正常に適用されていないような感じで、未対応時、対応時のスタイルシートは下記の通りです。 未対応時のスタイル HTML HTMLは非常にシンプルです。
【レポート】CSSクエリテクニックは悪害? 万能な解決方法はないという意見 | エンタープライズ | マイコミジャーナル
Ajaxian 2010年6月にはいったあたりからCSSメディアクエリを活用してiPhone 4を含むさまざまなデバイスへ対応可能なWebページを制作するためのテクニックが矢継ぎ早に紹介されるようになった。CSSメディアクエリを使った方法は今でも注目度の高いテクニックで、CSSメディアクエリを使ったさまざまなテクニックが日々紹介されている。 ピクセル濃度に依存しないWebページの制作方法 iPhone 4でもPCでも画像を綺麗に表示するCSSの使い方 iPhone 4に対応したWebサイトを作る方法 iPad向けWebアプリケーション開発テクニック 逆に、CSSメディアクエリによる切り分けはモバイルデバイスにとっては逆効果であり、やめたほうがいいと考える向きもある。6月あたりからはじまったこのあたりの流れがAjaxian ≫ CSS Media Queries: Bees Knees Or
【レポート】ピクセル濃度に依存しないWebページの制作方法 | エンタープライズ | マイコミジャーナル
Ext JS is now Sencha iPhone 4のようなディスプレイピクセル密度が高いデバイスの登場で、WebデザイナやWebデベロッパの関心は、異なるピクセル濃度のデバイスにどのように対応するかといった点に集まりつつある。基本となるテクニックのいくつかはすでにいくつかのブログで紹介されている。 iPhone 4でもPCでも画像を綺麗に表示するCSSの使い方 iPhone 4に対応したWebサイトを作る方法 iPad向けWebアプリケーション開発テクニック これまでマイコミジャーナルで紹介したテクニックは細部のテクニックが多い。そこでSenchaブログに掲載されたResolution Independent Mobile UIを紹介したい。モバイルデバイスにも対応したJavaScriptフレームワークSencha Touchで使われているテクニックの根本をまとめたもので、ピクセル
【Webアプリ】iPhone4 で画像をきれいに表示する色々な方法【試行錯誤編】
iPhone4 がついに届いて興奮気味のgunjiです。 2週間待ちでした！ 待ってる間に、iPhone4も対象としたWEBアプリ（ネイティブアプリのweb view を含む） のコーディングで気をつけることについておさらいしていたところ、 Retinaディスプレイに画像を最適化させるのって意外とめんどいよね！ という現実に打ちのめされたので、まとめてみます。 そもそもRetinaディスプレイってなんでしたっけ？ はいはい、iPhone4の目玉のひとつで、今までの2倍の解像度で 画面がとってもキレイに見えるんですよね！ 拡大しなくても小さな文字が読めるなんてサイコー！ ところが、今までiPhone向けに作ったサイトをこのiPhone4で見るとちょっと 不思議な状態になってることがあるのです。 iPhone4で見たらなんか画像がにじんでるように見える・・・？！ こういうイメージです。 そう、
WebサイトをiPhoneで見やすくする5つの方法
2017年6月29日 Webサイト制作, Webデザイン, 便利ツール iPhone持ってないくせにWebクリエイターボックスをiPhoneで見やすいよう改良しました。iPhoneからhttp://webcreatorbox.comにアクセスすると自動的にhttp://webcreatorbox.mobify.meにリダイレクトされます。（されてなかったら直接http://webcreatorbox.mobify.meからドウゾ…）今回は下記に説明するmobifyというサイトからiPhone用サイトを作りましたが、他にも便利な方法があったので紹介してみます。 ↑私が10年以上利用している会計ソフト！ 1. CSSのみで切り替える iPhone用に作成したCSSを作り、デバイスの幅によって使用するCSSを切り替えます。 <link rel
38 Mobile (iPhone) Sites - Web Designer Wall
As you may probably know mobile design is getting more and more popular, particularly the iPhone design. Almost every popular website or web app offers a mobile version now. In this post, I’ve collected a list of 38 nicely designed sites (ranging from personal, blog, portoflio, editoral, web app, etc.) that are optimized for iPhone. I hope this list will come in handy when you need to design a mob
40 Effective Examples of Responsive Website Layouts – Speckyboy
Responsive web design gained massive popularity in 2011, and it looks like it’s here to stay in 2012 as designers continue to support a wide range of mobile devices. However, creating layouts for the web can be pretty challenging, and that’s where inspiration comes in handy. To help inspire you, we’ve put together a gallery of 40+ amazing responsive website layouts. These designs are carefully cra
iPhone向けサイト構築 基礎文法最速マスター - EC studio デザインブログ
弊社代表の著書、「iPhoneとツイッターで会社は儲かる」の出版記念と、巷で話題の「基礎文法最速マスター」ブームに便乗して、iPhone（iPod Touch）向けサイト構築における基礎とプラス応用のネタと、参考になるリンク集をまとめました。 2010/11/18追記： iPhone向けサイト制作の書籍を執筆しました！ 既存のデスクトップ向けサイトをモデルにした iPhoneに最適化したサンプルサイトの紹介と コードの解説をしています。 iPhone向けサイト制作の入門書に最適です。 「HTML5＋CSS3で作る 魅せるiPhoneサイト」 基礎編 対象ブラウザはMobileSafariです レンダリングエンジンはSafariと同じwebkitですが、MobileSafariの方にはiPhone向けの一部独自拡張（CSS）があります。検証の際は、通常のSafariのウィンドウサイズを狭くし
50 Inspiring iPhone Application Websites
4 Pings & Trackbacks Pingback: 50 Inspiring Dark Web Designs | Inspiration Pingback: 10 Useful iPhone Apps for Web Designers and Developers | Tools Pingback: 34 Inspiring iPad Application Websites | Inspiration Pingback: 30 Inspiring iPhone Application Websites | Inspiration 31 Comments Excellent round up. Cookmate and Cellar stand out for me personally : ) Nice collection. I also like https://www
iPhone向けサイトのユーザビリティ最適化でチェックしておきたい項目まとめ
iPhoneを始めとするタッチパネル＆フルブラウザ搭載のスマートフォンの普及が進んでいる。iPhoneの出荷台数は世界で3000万台、日本国内に関して公式な発表はないが200万台を超えていると推測されている。今後はWindows Mobile端末の進化やAndroid携帯電話により、このスタイルの携帯端末の利用者がさらに拡大していくことが予想される。 今回は、こういったタッチパネル＆フルブラウザ搭載のスマートフォンからのウェブサイト／サービスのユーザビリティについて、主にiPhoneを題材に考えてみよう。 iPhone対応は形式にとらわれず「ユーザー中心」視点で iPhoneからのウェブ利用には、従来の携帯電話と同様の「携帯性の高さ」「位置情報との連動」などに加え、 従来の携帯電話と比べて画面サイズが広い 端末の処理能力が高く、アプリでのサービス提供の自由度が高い 独自の操作（画面をつまむ
iPhone Webアプリテンプレート（CSS Nite Vol.40 reprise） | Topics | DB - KAYAC Designer's Blog（カヤック デザイナーブログ）
こんにちは。意匠部ME課のtacamyです。 CSS Nite 4周年記念イベント（Vol.40 reprise）にてご紹介した iPhone Webアプリのテンプレートセットを配布します。 イベントの内容はこちらのエントリーをご覧ください。 ダウンロード iphone-tmpl.zip セット内容 index.html HTML5+iPhone用HTML css/iphone.css HTMLの新要素＋iPhone専用CSS js/iphone.js URL&検索バーを消す指定 js/lib/jquery.js jquery apple-touch-icon.png Webクリップアイコン cache.manifest マニフェストファイル .htaccess < dd style="margin-bottom:0.5em;">.manifestのMIMEタイプ設定 viewportにつ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
iPhoneデザインボックス
IDEA * IDEA
オリジナルフォントが作れるiPad用フォント作成アプリ「iFontMaker」｜linker journal｜linker
MdN Design｜総合情報サイト
IDEA * IDEA