DB（カヤック デザイナーブログ）

tacamyです。

11月10日（火）にCSS Nite 4周年記念イベントにて、
『HTML5のメリットを活かしたコンテンツアイデア』という
セッションでお話しさせていただきました。

ああいった場所で話をするのは初めてのことだったので、
至らない部分も多々あったかと思いますが、
ご参加いただいた皆様や、ご協力いただいた関係者の方々に感謝しています。

遅くなってしまい申し訳ありませんが、こちらのエントリーにて、
当日の資料の配布や補足事項について掲載させていただきます。

こんにちは。意匠部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

.manifestのMIMEタイプ設定

viewportについての補足

このテンプレートはコンテンツ幅100%で制作されることを前提に
viewportを指定しています。

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=no">

必要に応じてviewportの指定を変更してください。

■参考サイト

• Viewport [iPhone生活]
• iPhone向けWebアプリを作ろう（ビューポートの設定）[@IT]
• iPhone 3G用のWebページを作る1 [All About]

■Googleの場合

<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0">

コンテンツ幅100%で制作され、
横表示では文字サイズはそのまま、コンテンツの幅が広がる。

■Yahoo!Japanの場合

<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=0">

コンテンツ幅100%で制作され、
縦表示はアイコンが横に4つ並び、横表示ではアイコンが6つになります。

■イケメンホイホイiPhone版の場合

<meta name="viewport" content="width=480; user-scalable=no">

イケメンが３人ピッタリ収まるように、縦横どちらでも全く同じ見え方にしたかったので、
横幅480px固定で作り、縦にしたときはコンテンツ全体が自動縮小するようにしました。

CSSアニメーションを使ってアイコンを動かしてみたいと思います。
以下、気をつけた点。

• CSSアニメーションに非対応のブラウザでもアイコンとして成立している
• 過剰なマークアップをしない

現実的に使えそうな路線で頑張ってみました。

本屋に並んでいる膨大な漫画本。
その中でも装丁の凝ったものはつい手に取ってしまいますよね。
そこで、すてきな装丁の漫画本をまとめてみました。

• 気付いてにんまり・仕掛け系
• 作品とぴったりマッチ系
• 素材にこだわりアリアリ系
• 勇気あるギリギリネタ系

では早速つづきをどうぞ！

こんにちはshiihoです。今日は日食だそうですね。
twitterにアニメとかコンテンツとかのキャラクターはどれほどいるのかなと疑問になったので、いろいろまとめてみました。
意外なキャラクターもいてビックリです。それでは見て行きましょう。