HTML5使ってます！をロゴで表示しよう！

W3Cは、このロゴは「HTML5、CSS、SVG、WOFFといったオープンWeb技術群を表す汎用ロゴマーク」だとしている。Webサイトに表示したり、Tシャツなどのグッズに利用することができる。既にMicrosoftのInternet Explorer 9 Test Driveサイトなどがこのロゴを表示している。ロゴはクリエイティブ・コモンズライセンスの下で提供されている。

W3C、HTML5ロゴを発表 - ITmedia News

デザイナーズブログもhtml5なので、フッターにこのロゴを表示しました！

1分でわかる設置方法

公式サイトはこちら。

• W3C HTML5 Logo

ロゴには二種類あります。
用いている技術をアイコンにして表示するパターンと、静的な画像を

アイコンを選ぶパターン

縦横タイプはアイコンを選べます。設置するサイトで用いている技術をアイコンにして表示することができるみたいです。
設置サイトで用いているhtml5の技術を選択するとアイコンが切り替わります。
コードをコピーしてサイトに貼りつけるだけ！簡単ですね。

静的な画像を設置するパターン

ロゴだけのパターンや個別のアイコンなどの素材も公開されています。
これらの画像を設置してもよいでしょう。
PNGだけじゃなく、SVGファイルもあるだなんて！

おまけ

弊社ではhtml5を使っている自社サービスもあります。こちらにもロゴを設置させていただきました！

• jsdo.it - Share JavaScript, HTML5 and CSS

2010年もあと僅か！

みなさま、こんにちは。
残り数十分で年越しとなりました！あっという間の1年でしたねー。

今回はありがとうを言いたい○○シリーズということで
2010年で刺激を受けたイベント3つを振り返ってみます。

SPEC - Flash and HTML5 -とは

ブラウザ上でFlashを作成できる「wonderfl」と、JavaScript、HTML、CSSを実行できる「jsdo.it」が
提供する公開型リクルーティングイベントです。
企業出題するテーマに対して、ユーザーが得意なプログラム言語で回答するものです。
気になるユーザーの方には、運営事務局を通してスカウトされる場合があります。

審査形式

審査員：株式会社サイバーエージェント
Flash部門、JavaScript,HTML5,CSS部門それぞれから優秀作品を3作品発表。
該当者なしの可能性もあり
作品投稿者の中から、気になる作品投稿者へ、スカウト実施。

Vol1 テーマ

モンスターを捕まえて、育て、戦わせるゲーム『GYAOS!（ギャオス）』のバトルシーンの演出方法を追求してください。

バトル画面のユーザーインターフェース作成、バトルシーンのエフェクト付けなど、
投稿している素材を自由につかっていただき、Webデザイナー、マークアップエンジニア、
Flashクリエイターとそれぞれの見地から、オリジナリティあふれる作品を投稿してください！
優秀作品者には、いま話題の Kinect for Xbox360 を贈呈させていただきます！
 

スケジュール

募集期間： 2010年12月21日（火）〜2011年1月31日（月）
審査期間： 2011年2月1日（火）〜2011年2月7日（月）
結果発表： 2011年2月8日（火）

賞品

入賞された方には、豪華な賞品もご用意しております！

1位 Kinect + Xbox360
2位 Amebaぬいぐるみ
3位 Amebaキーホルダー



今後もクリエイティブな企業が続々登場します！
お楽しみに！

SPEC - Flash and HTML5 -

Facebookのプロフィール画像を使ってオリジナルのマンガ名刺を作れるアプリを作成しました！

まずは遊んでみてください！

何ができるの？

• デザインを選んだら1クリックであなたのカードを作成します。
• 友達の名刺を勝手に作ることもできます。

バズを起こすためのポイント！

• 名刺を生成したらユーザーのアルバムに保存→タグづけ。
• アルバムに保存したことがウォールにポストされます。
• タグがつけられた写真はその人のプロフィールページに掲載されます。

ぜひぜひ、友達と一緒に遊んでみてくださいね！

連載企画「今年ありがとうを言いたい○○」

前回書いた記事が予想外の評判で驚いています。
読んでいただいた方ありがとうございます！

さて、自分がありがとうを言いたい物ですが、Google Chromeのエクステンションに対して「ありがとう！」と言いたいです。

という訳で、感謝の気持ちを込めて、自分が使っているGoogle Chromeのエクステンション10個を紹介していきたいと思います。

連載企画「今年ありがとうを言いたい○○」

2010年も残り僅かとなりましたが、いかがお過ごしでしょうか。

デザイナーズブログでは今年を振り返って、
それぞれが「ありがとうを言いたいもの」を紹介する連載企画をはじめます。

第一弾は「今年ありがとうと言いたい『html5の本』」です。
それでは続きからどうぞ！

HTML5分かりにくいですよね。

初めまして。11月からME課で働いている久保田(@ta2_o2p)です。よろしくお願いします！

自分の仕事としては、携帯サイト中心にコーディングを行っているのですが、BMKidsの縁起物と笑い袋の紹介ページのコーディングを行ったり、他にも色々とPCサイトのコーディングをしています。

さて、実はカヤックで働き始めてHTML5を本格的に触ったのですが、触れていくうちに「HTML5はややこしい所があるなー」と思い、この記事を書きました。

そういう訳で、HTML5でコーディングするに当たって間違いやすいポイントについて、書いていきたいと思います。

まずその前に

本題とは反れますが、HTML5でコーディングするにあたって、押さえておきたいポイントを2つ書きます。

文字コードの指定はmeta要素のcharset属性で

今までは以下のようにmeta要素の中に長々と属性を指定していたと思います。

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

しかし、HTML5ではこう書きます。

<meta charset="UTF-8">

「え？これだけ？」と思った人もいると思いますが、これだけです。簡単ですね。

IEの8以下の為にhtml5.jsを読み込ませる

IE9ではHTML5をサポートするようですが、現時点で多く使われているIE6～8はHTML5に対応していません。 header要素やfooter要素にCSSで装飾してもそれが全く反映されないのです…… 
しかし、html5.jsというJavaScriptを読み込ませる事により、IE6～8でもCSSを反映させる事が出来ます。

<!--[if lte IE 8]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->

では、本題に入りたいと思います！

asideの使い方

asideを見直す(http://www.html5.jp/html5doctor/aside-revisited.html)によると、

メインのコンテンツほど重要な役割を持たないコンテンツだけれども、それがページや記事に関連しているなら、ビジュアル・デザインの有無にかかわらず、aside が適切。

と書かれています。つまりasideはサイドバーをコーディングする時に使用してもいいという事になります。 例としては下のようになります。

<article>
     <h1>記事タイトル</h1>
     <p>本文本文本文本文本文</p>
</article>
<aside>
     <section>
          <h2>最新記事一覧</h2>
          <ul>
               <li><a href="/">記事タイトル</a></li>
               <li><a href="/">記事タイトル</a></li>
               <li><a href="/">記事タイトル</a></li>
          </ul>
     </section>
</aside>

しかし、ページや記事と関係ない物をサイドバーに置く事も考えられます(特に広告など)。 ページや記事と関係ない物を置く場合は、サイドバーをdivで囲ってコーディングしたほうが良いと思います。

<article>
     <h1>記事タイトル</h1>
     <p>本文本文本文本文本文</p>
</article>
<div id="sidebar">
     <section>
          <h2>最新記事一覧</h2>
          <ul>
               <li><a href="/">記事タイトル</a></li>
               <li><a href="/">記事タイトル</a></li>
               <li><a href="/">記事タイトル</a></li>
          </ul>
     </section>
     <div class="ad">
          <p>広告</p>
     </div>
</div>

またasideは、サイドバーだけに使用されるのではなく、article内などでも使う事が出来ます。
使う場面としては、例えば百式(http://www.100shiki.com/)の記事の下にある管理人の独り言のような所や、記事の中に専門用語を書いた時の解説の役割を果たす用語集などがあると思います！

articleとsectionの違い

<article>と<section>は似た物同士に見えて、実は！全く違う物です。
まず<article>は、ブログの記事や記事に投稿されたコメントなど、メインコンテンツとなるような項目をマークアップする時に使います。 そして<section>は、文章の構成を示す物となります。
例えば、『永久保存版！？携帯コーディング、これだけ読めばすぐできる！（テンプレートのおまけつき）』という記事を例にあげると、

<section>
     <h1>携帯コーディングの基本</h1>
     <section>
          <h2>基礎の基礎</h2>
          <p>内容～</p>
     </section>
     <section>
          <h2>docomoでCSSを使う</h2>
          <p>内容～</p>
     </section>
</section>
<section>
     <h1>携帯コーディング独自テクニック</h1>
     <section>
          <h2>共通項目</h2>
          <h3>DTD、xml宣言</h3>
          <p>内容～</p>
     </section>
</section>

という風にコーディングされます。
<section>のコーディングのコツとしては、本の目次を作る感覚でコーディングすれば上手くいくと思います！

こんにちは、カヤックのラボチームBMKids（ブッコミキッズ）のねじです。
先日マッシュアップアワードで優秀賞をいただいた「安心レーダー」に続いて、新作iPhoneアプリを２本同時リリースしました。「つまらない話でも爆笑してくれるアプリ『笑い袋』」と「持ってるだけで運気アップ間違いなしの縁起が良いアプリ『縁起物』」です。

コーディングは好きですか？私は大好きです！
DE課でME課なgunjiです。

カヤック意匠部では、デザイナーも全員コーディングを一度は経験し、
ちょっとしたコーディングならME（マークアップエンジニア）課に依頼せず
自分たちでやります。

単に人手が足りないときもありますが、WEBデザイナーならやっぱり
コーディングの考え方を理解していた方が、WEBに最適なデザインが
できるようになるから　という理由もあります。

そのため、新人さんや、中途でも紙の分野から来た方には
オリジナルのコーディング課題をお出ししています。

今回はそんな課題の第1回を、
思い切って公開してみたいと思います。

ダウンロードする

続きには模範解答と簡単な解説を掲載しました。

やるだけでコーディングがみるみるできるような気分になりますよ！

こんにちは！

携帯中毒のゆりっぺです✿

早速ですが、カヤックでつくったソーシャルアプリ、

『ぼくらのワールドリーグ』が、マッシュアップアワードで賞をいただきました！！！！！

パチパチパチ(拍手)！！！！！！

→『ぼくらのワールドリーグ』受賞作品ページはこちら