• HTML5で記述された、FLASHを用いない動的なグラフィック。HTML5でどんなことができるのかを、端的に伝えてくれる。要素としてツイッターの発言も利用している。kino

• 赤を基調としたシンプルな要素によるナビゲーションがきれい。kino

• レゴが積み重なってウィンドウ背景に。自分でレゴに関する情報を次々と積み上げていく構成なので、ページも下から上に誘導する形になっている。メディアに取り上げられた情報や写真・ビデオ、ツイッターなどがごちゃまぜに見られるのも楽しい！kino

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

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

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

• tacamyです。

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

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

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

  yamada

• 女の子のカワイイを応援する情報サイト、カワつく.com、秋冬リニューアルしました！
  マロンみたいなベージュトーンで、やさしい＋カワイイデザインに生まれ変わりましたよ☆
  団員限定で応募できる豪華プレゼントも実施中！タレント・モデル・スタイリストなど、いろんなカワイイ賢人も続々参加中の「カワつく団」は引き続きみなさんの入団をお待ちしています！
  shiiho

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固定で作り、縦にしたときはコンテンツ全体が自動縮小するようにしました。

• こんにちは。意匠部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固定で作り、縦にしたときはコンテンツ全体が自動縮小するようにしました。

  

  

  yamada

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

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

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

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

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

  futchy

• メニューにあたる丸い球体の動きがかわいらしい。メッセージごとに文字組も変えていて、つい他のもと押したくなってしまう。kino

• カラフルなバーとシンプルな遷移。触ってて気持ちいい！kino

• 世界中の132人の写真家がオバマ大統領就任の日となる１月２０日を撮影したポートフォリオサイト。企画のコンセプトが明確なので、大量の写真を見ることも飽きない。社会派の写真を見る機会は少なかったけど、写真をマイリストに登録することもできるので、何度でも足を運んで見返したくなった。kino