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につ
MdN Design｜総合情報サイト
CSS についても、PC サイトとは異なる箇所がある。スマートフォンは縦向きと横向きで横幅が変わり、デバイスの種類によっても違うため、コンテンツの幅は100% のリキッドレイアウトで作るのが一般的だ。HTML5 の新しい要素に対してもCSSのリセットを行うために、今回はhtml5doctor のCSS（http://www.html5.jp/html5doctor/html-5-resetstylesheet.html）を利用した。また、モバイル版WebKit独自のプロパティもいくつか用意されている【2-1】。 【2-1】-webkit-text-size-adjustをnoneとすれば、デバイスの向きを変えたときも文字サイズを拡大しないように指定できる。-webkit-tap-highlight-colorでは、リンク要素をタップしたときの色を指定できる。指で操作していると自分がどこをタ
HTML5/CSS3で作るスマートフォンサイトの基本 (3/5)
マークアップの方針を決める スマートフォンはPCに比べて通信速度の遅い3G回線で利用されることが多いので、画像を多用するとページが表示されるまでに時間がかかります。必要のない画像の使用は控え、ダウンロードするコンテンツの容量を抑えましょう。今回は、ヘッダー部分とフッター部分だけを画像として切り出し、それ以外のタイトル文字やボタンなどはCSS3を使って装飾します。 基本的な要素をマークアップする まずは、基本的な要素をマークアップしていきます。Photoshopでヘッダーとフッターの画像を切り出して保存します。ここでは、写真を多用しているヘッダー部分をJPEG形式で、フッター部分はPNG形式で保存しました。 サイト名はh1要素、小見出しはh2要素といった具合にマークアップを施していきます。実際のHTMLは以下のようになりました。 <!DOCTYPE HTML> <html lang="ja"
雨のち晴れ » iphone対応サイト制作まとめ
iphoneに表示最適化したサイトもかなりたくさん出てきていますが、iphone対応サイトの作り方を備忘録的にまとめたかったので途中までまとめてみた。もっと書きたい事あるけど、続きは追記しておこうかな。 iphone最適化とはヤフー検索が対応した事例でもある通り、すぐに情報を見つけられるように、よりページを軽く、そして操作性の良い、iphoneに特化した見せ方をする事を言います。iphoneは通常PCでの見え方をそのまま表示し、タップしたりピンチオープンして拡大させたりしながら使用しますが、PC表示だといらない情報が多く、特に検索だと、パッと探してパッと表示できるものであって欲しいですよね。使う人の利便性を考えた設計から成り立ってます。 と言うことで今回は、iphoneサイト制作の基本をまとめてみた。 基本 iphoneのブラウザはMobile Safari ブラウザ: Safari2.
ゼロからはじめるスマートフォン専用サイト（iPhone＆Android）の作り方を学べるサイト集めました | HTML5でサイトをつくろう
これからのWEB制作はPCサイトだけではなく、iphoneなどのスマートフォンやipadなどさまざまなデバイスでの閲覧を前提として作成しなければいけません。 iphoneサイトやAndroidサイトはHTML5やCSS3にかなり対応しているので簡単そうなイメージもありますが、縦画面、横画面など変化することを前提に構築しなければいけませんし、Androidは機種によって解像度が違う、機種によってCSSが適用されないという昔のモバイルサイトより大変なことがおきているようです。 またシミュレーターを使ったり、実機をたくさん揃えたり、レンタルしたりとPCサイトより手間な制作の時代に逆戻りですね・・。 友人に聞いたら現在は案件よってはiphoneのみ対応、iphoneとdocomoを対応、すべて対応などさまざまなようですね。まあこれは予算によるのかもしれませんね。 僕はまだ本格的なスマホサイトの仕事
Android対応スマートフォンサイトのレイアウト（viewport・コンテナ編）
最近いろんなスマホ最適化されたサイトを見るようになりました。 それと同時に、多様なAndroid端末が急速に普及し、iPhone3GSが全盛だった去年までの制作方法では対応が不十分になってきてまして、僕自身も試行錯誤中なこともあり、2011年5月時点でのiPhone・Androidに対応できる自分なりのレイアウト方法をちょっとまとめてみようと思います。 今回は全体編なので、主にviewportの設定と全体を囲むコンテナ要素にフォーカスを絞ります。 viewportはdevice-width、コンテナはwidth:100%などの伸縮するリキッドレイアウトに 端末の横幅を最大限に活かした方がよい 特に理由が無ければ、大抵の場合は、 viewportはdevice-width、コンテナはwidth:100%などの伸縮するリキッドレイアウトにする 自然な考え方で考えると、PCに比べるとただでさえ狭
面白法人カヤックがHTML5,CSS3,JavaScript,SVGの技術を駆使してコーポレイトサイトをリニューアル！！！！！キーワードは「軽い」「楽しい」「スピーディ」 - カヤックニュース
Webコンテンツの企画開発を事業とする株式会社カヤック（本社：神奈川県鎌倉市、 代表取締役CEO：柳澤大輔、以下「カヤック」 ）は、2011年7月7日、コーポレイトサイトを全面リニューアルいたしました。 近年注目が高まる、HTML5、CSS3、JavaScript、SVGの技術を使い、リッチなデザインを保ちながらも、快適な操作性の実現すること、また、リニューアル前のサイトの特徴でもあった「漫画表現」を要所に取り込み、オリジナルの世界観をつくりだすことを意図して設計しています。 企画コンセプト 1）世界一更新頻度の高い、スピーディなコーポレイトサイトを目指す TOPページを一覧するだけで、最近のカヤックの動向がわかるようニュースでTOPページを構成。リリース情報、講演情報、メディア掲載情報など、日々、リアルタイムにカヤックの最新の情報を発信します。 2）漫画表現を各所で活用して、世界に「漫画
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
初心者でも分かるiPhoneサイト制作で参考になるサイトのまとめ - iPhoneデザインボックス
Loading...
MEMOLOG メモログ 実機がない時の実機チェック!?