[Web制作]iPhoneサイトで表示崩れが発生した時、実機とMacを繋いでWebインスペクタ機能でデバッグする方法｜ウェビメモ

2015/05/19 89 users ウェビメモ Mac Web制作 実機 iPhone

こんにちは、霙(@xxmiz0rexx)です。 スマートフォンサイトを制作している時、たまーに困ることがあります。 それは、実機でしか再現しない表示崩れ。 Macでみた時は大丈夫だったのに、何故かiPhoneでは謎の余白が…なんてことが先日もありまして、 解決のためにSafariのWebインスペクタ機能を使ってみましたので使い方をメモしたいと思います。 Webインスペクタ機能とは iPhoneで見... 続きを読む

なぜ僕が本を書くことになったのか — Hiroki Tani

2013/12/11 461 users Hiroki Tani Writers Editors 経緯

Editors' & Writers' Advent Calendar 2013ということで、僕が2010年に初めての著書、HTML5＋CSS3で作る 魅せるiPhoneサイト（Kindle版）を出版するに至った経緯を書きます。 きっかけはブログ 当時在籍していた会社のブログで、iPhone向けサイト構築 基礎文法最速マスターという記事を書いたところ、まだ日本語のリソースも少なかったこともあってか... 続きを読む

たった１行でiPhoneサイトのヘッダーにアプリバナーを表示させる方法 ｜ iPhoneデザインボックス

2013/01/09 76 users ヘッダー iPhoneアプリ iPhoneデザインボックス

iPhoneデザインボックス » たった１行でiPhoneサイトのヘッダーにアプリバナーを表示させる方法App Storeと連動したiPhoneアプリのダウンロードバナーを表示 アプリのダウンロードへ誘導する方法としてダウロードボタンを用意しますが、iOS6のSafariで表示すると自動でApp Storeと連動したiPhoneアプリのダウンロードバナーを表示させる方法があるので紹介。 実装はすご... 続きを読む

2013年はスマフォサイトを作りたい！参考にしたい人気スマートフォンサイト１９ ｜ iPhoneデザインボックス

2013/01/07 36 users iPhoneデザインボックス 本年 新年 スマフォサイト 参考

iPhoneデザインボックス » 2013年はスマフォサイトを作りたい！参考にしたい人気スマートフォンサイト１９あけましておめでとうございます。 どうぞ本年もよろしくお願い申し上げます。 新年ということで2012年に掲載したiPhoneサイトのWebデザインで多く閲覧されたスマートフォンサイトをピックアップしました。 2013年は、スマートフォンサイトを作ろうと思っている方は参考にしてみてください... 続きを読む

iPhoneサイト（スマートフォンサイト）制作時の画像の表示方法と使用方法についてまとめました | HTML5でサイトをつくろう

2012/03/15 257 users HTML5 iPhone 制作時 画像 スマートフォンサイト

PCサイトでの画像の表示方法は、スライスした画像をimgタグにサイズ指定をしたり、背景画像に繰り返しや位置の指定をして表示するのが一般的ですが、スマートフォンサイトではデザインやコンテンツの内容によって画像の表示方法を工夫する必要があります。 特にiPhoneのように横画面にすると可変して表示されるデバイスの場合は、画像も可変して見せたほうが効果的な場合もあります。 また、iPhone4、4Sや高... 続きを読む

iPhoneサイト(スマートフォンサイト)制作のためにCSS3でPhotoshopのレイヤースタイルを再現する方法 | HTML5でサイトをつくろう

2012/03/06 105 users たくさん 最低限 CSS3 最適化 容量

スマートフォンサイトを制作する上で便利なCSS3。 必要最低限まで画像の使用を減らし、スマートフォンサイトのデザインをスムーズにコーディングすることができます。 また、画像を使わずにCSS3を使ってスマートフォンサイトのデザインを実現すれば、読み込み時間や容量の軽いサイトを制作でき、サイトの最適化へつながります。 最近では海外の便利なジェネレーターサイトがたくさんあり、誰でも気軽にソースをつくるこ... 続きを読む

Google ChromeでUAを偽装しiPhoneサイトを見る方法 | A!@attrip

2011/11/09 27 users attrip Firefox iPhone Chrome 方法

firefoxでfiremobileシュミレーターを使ってユーザ偽装をしてサイトを確認していたのですが、 firefoxのバージョンアップによって使えなくなって不便になりました。 そこで chromeをつかってユーザ偽装をしてGoogle ChromeでiPhoneでユーザ偽装してみる方法です。 ユーザ偽装方法iPhone まずgoogle　chromeのショートカットを作成します。 Google... 続きを読む

ゼロからでも始められるスマートフォン専用サイト（iPhone＆Android）の作り方を学べるサイト集めました | HTML5でサイトをつくろう

2011/10/13 2445 users iPhone＆Android iPad iPhone 解像度

これからのWEB制作はPCサイトだけではなく、iphoneなどのスマートフォンやipadなどさまざまなデバイスでの閲覧を前提として作成しなければいけません。 iphoneサイトやAndroidサイトはHTML5やCSS3にかなり対応しているので簡単そうなイメージもありますが、縦画面、横画面など変化することを前提に構築しなければいけませんし、Androidは機種によって解像度が違う、機種によってCS... 続きを読む

iphoneやスマートフォン専用サイトのデザイン作成の参考にするまとめサイトをまとめました[11サイト＋おまけ6] | HTML5でサイトをつくろう

2011/08/25 609 users iPhone CMS プラグイン シェア 資料

最近スマートフォンのシェアが広がってきてWEBサイト作成もPCサイトのみでなくiphoneなどのスマートフォンを意識する提案も増えてきましたか？ しかしHTML5＋CSS3サイトで専用ページを作ったり、CMSのプラグインで振り分けたりと作り方は色々です。 参考となるiphoneサイトやスマートフォンサイトもまだまだ少ないので提案の際の資料探すのも大変ですよね・・。 これからもっと増えるとおもいます... 続きを読む

大阪てら子 40「そろそろモバイル開発について語ろうぜ」 - sakotsu inspire

2011/07/04 20 users モバイルコンテンツ モバイル開発 web みなさん 開発環境

ちょっと そこまで webの勉強しに 行ってくるこんにちは！ 先日行われた、大阪てら子40「そろそろモバイル開発について語ろうぜ」について軽くまとめてみます。 モバイルコンテンツを作る方法ってこんなにあったんですね！な内容でした。 iPhoneサイトだの、Androidアプリだの開発環境についてみんなが教えてくれました 僕が特に知りたかったモバイル開発について、参加者のみなさんがそれぞれ違うアプロ... 続きを読む

スマートフォンサイトのデザイン集サイトのまとめ｜WEB Drawer -WEB制作に関するメモサイト-

2011/03/08 279 users iPhoneデザインボックス WEB Drawer まとめ

最近普及しているスマートフォンですが、その専用のサイトを作っている所も多くなってきました。WEB制作の会社でもスマートフォンサイトを制作する事が多くなってきたと思います。 スマートフォンは指で操作するのでパソコンとはまた違ったデザインになっています。そこで、デザインをまとめているサイトをまとめてみました。優れたiPhoneサイトデザイン集 - iPhoneデザインボックス優れたiPhoneサイトデ... 続きを読む