Tags

閉じる

Category

閉じる

Search

Search

閉じる

( ・ω・)⊃ “html5/(XHTML)“ の検索結果

HTML5花見の会場はこちらになります

コーディングコンテスト "Q" vol.2を開催中です！

jsdo.itで開催中のイベント「Web Creator's Contest "Q"」で「桜」を募集したところたくさんの投稿が集まっています。まだ募集期間中ですが、花見シーズンが終わる前に投稿作品の一部を紹介したいと思います！

Flashの名作をHTML5でリメイクしてください

このFlashで作られた作品をHTML5でリメイクするのが今回の課題です。

SAKURA - wonderfl build flash online

続きを読む

HTML5関連の情報源のまとめ（2012年4月版）

こんにちわ。HTMLファイ部のふちがみです。

HTML5のすごいコンテンツやニュースをキャッチアップしきれない！知らないところでバズってる！と悔しい思いをしている方も多いと思います。そこで、ミーハーなファイ部のメンバーに「どうやって情報収集をしているか」を聞いてみたのでまとめてみました。

続きを読む

コーディングコンテストに集まったTODOアプリが「本気出しすぎ」と話題に

jsdo.itでコーディングコンテスト「Web Creator's Contest Q」が開催中です。

現在募集中のテーマは「ブラウザで動くTODOアプリ」。
お手本コードをフォークして書き始めてもいいし、ゼロから書いても参加してもOKなコンテストです。
締切は今週の水曜日、3月28日です。

1位「MacBook Air」、2位「Apple TV」、3位「Web Money 5000円分」と賞品も超豪華なのでぜひぜひご参加ください！

と、いつものテンプレPR文はここまでにして、続々と集まっている投稿作品の一部をご紹介したいと思います。今回も皆さんかなり、本気出し過ぎですね…！

続きを読む

いまさら聞けない＞＜； 基礎から学ぶ「HTML5」超入門！

HTML5 旋風、吹き荒れてますね！(^0^)／

さて、ものすごく突然で恐縮ですが、この度「HTMLファイ部」、設立しました！

株式会社カヤック（本社：神奈川県鎌倉市、 代表取締役CEO：柳澤大輔、http://www.kayac.com以下「カヤック」）は、HTML＋CSSコーディング、JavaScript プログラムを担当する職種が所属する「HTMLファイ部」を発足いたします。

これまでHTMLおよびCSS、JavaScriptの担当者は、プログラマが所属する技術部、デザイナが所属する意匠部ME課（MEはMarkup Engineerの略）に分かれて所属していましたが、昨今のHTML5の進化と普及を受けて、HTML、CSS、JavaScriptの担当者は「HTMLファイ部」にて活動をスタートします。

そんなHTMLファイ部員が今回お送りさせていただくのは、 HTML5 について基礎から学ぶ方のために、参考サイト・資料、ギャラリー、勉強法などなどまとめてみました！

それでは、続きからどうぞ！

続きを読む

SVG女子を90%軽くしたSVG軽量化テク+α #svggirl

あいつ仕事してないで女の子のイラストばっかりいじってるぞと陰ながら言われていた喜納です。

HTML5で動くSVGアニメーション「SVG女子」がラスベガスでのマイクロソフト基調講演MIX11で公開され、
世界を（いろんな意味で）驚かしてきましたが、

ついに本日、日本でも公開されました！

しかも日本版に合わせてアニメーションも長くなっています！
こっそりブラウザを英語にして見ていた人も必見です！

 



（神風動画さんによる予告編動画！）

神風動画さんによるハイクオリティアニメーションをSVGで再現すると言う試み、
プログラムについては

SVG Girlの公開と内部実装（プログラマーブログ）

で担当プログラマーの吾郷が説明していますが、とにかく

いかにSVGをきれいに軽くするかが最重要！

SVGといえば拡大しても荒れる事の無いベクター形式で、pngよりも軽くつくれたりすることで使われていますが、
今回は1500枚を超えるレイヤーによる250コマに及ぶ大量のSVG！
それをぐりぐり動かすとあって、そう簡単にはいきませんでした。

始めた頃は150MB超、気がつけば15MB台にまで落ちたファイルサイズ

この記事ではイラストをSVGに変換する過程で得た、SVGの軽量化テクニックをご紹介したいと思います〜
（あとイラレでSVGを扱った時のバグを未解決も含めていくつか）

SVGってなに？って方はこの記事をみてからどうぞ！

2011年はSVG元年に。デザイナー大注目の画像フォーマット「SVG」の特徴を一気におさらい。

続きを読む

2011年はSVG元年に。デザイナー大注目の画像フォーマット「SVG」の特徴を一気におさらい。

MIX11で「SVG女子」が紹介されました！

弊社が制作をさせていただいた「SVG女子」が先日ローンチし、MIX11で大きく取り上げられました。
こちらがその様子です。

日本上陸は4/26！「SVG女子」をより楽しむために、まずはSVGについて知っておきましょう。

それでは続きからどうぞ！

続きを読む

卒制採用にのっかって「コーディング推薦」やります！就活よりコーディングを頑張ったあなたを推薦します！

弊社では「卒制採用」を始めました。

卒制採用2011

面白法人カヤックは、卒業制作をがんばったあなたを積極採用いたします。
卒業制作に打ち込みすぎて就職活動が終わってた！そんな方も大歓迎です。
私たちの経営理念は「つくる人を増やす。」
つくることに打ち込んで、力のこもった作品を生み出したあなたと、一緒に働きたいと思っています。

卒制に打ち込んでいた学生の皆さんにぜひぜひ応募していただきたいと思っています！

とはいえ、、、

ME志望の学生さんの中には
「学生時代は三度の飯よりコーディングに打ち込んでました」という方もいるのでは・・・！
ぜひとも、そういう学生さんにもエントリーしてほしい・・・！

ということで、担当にかけあってきました！
「卒制採用」とは、あくまで別軸ですが、特別に「コーディング推薦」を行います！

就活よりコーディングを頑張ったあなたを推薦します！「コーディング推薦」！

  1. 対象は 2011年3月に卒業予定の方
  2. jsdo.itで「課題」に挑戦していただきます（課題については後ほど説明します）
  3. 卒制採用のページから、作品のURLを添えてエントリーしてください。希望職種の欄には「意匠部（ME課・コーティング推薦）」とご記入ください
  4. 集まった作品をME課のみんなで見させていただき、「これは！！」という作品を投稿頂いた方をME課から推薦・面接に進んでいただきます！
    ※その他詳細は、卒制採用に準じます

課題について

以下の原稿を「あなたらしく」マークアップ・装飾してください。

ME課 コーディング推薦 課題 - jsdo.it - share JavaScript, HTML5 and CSS

ポイント！

  • 上記の作品をフォーク（改変）して作成してください
  • htmlのテキスト情報を適切にマークアップしてください（多少の改変はOKです）
  • デザインは自由です。あなたらしく装飾してください。
  • javascriptは使用しても使用しなくても構いません

あなたらしい、学生生活の集大成のような作品をお待ちしております！

W3CのHTML5のロゴを表示しました！1分でわかる設置方法！

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

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

W3C、HTML5ロゴを発表 - ITmedia News

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

HTML5 Powered with CSS3 / Styling, Graphics, 3D & Effects, and Semantics

 

1分でわかる設置方法

公式サイトはこちら。

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

アイコンを選ぶパターン

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

img01.png

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

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

img02.png

おまけ

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

HTML5でつまずきやすいasideとsectionの使い方

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>のコーディングのコツとしては、本の目次を作る感覚でコーディングすれば上手くいくと思います！

HTML5で出来たこのサイトがbいいね！

HTML5で出来たこのサイトがbいいね！って事で、
最近見たものからきょうBuzzってるHTML5のサイトを幾つかご紹介します。
 

 20 Things I Learned About Browsers and the Web

html5b02.jpg
 

北極のホッキョクグマ | Ring Ring Wonder Christmas

html5b03.jpg
 

kaleidoscope

html5b01.jpg

A WORLD OF TWEETS

html5b04.jpg
 

simo

html5b05.jpg
 

良く出来てるHTML5増えてますね。
カッコbいいね！
o(●´ω｀●)oわくわくしたw
 

 

その他今日気になった記事＆サービス!!

Googleおみせメモ

http://www.google.co.jp/hotpot#

スティーブ・ウォズニアック：Appleは某日本企業と共同で2004年に携帯を出す寸前だった

http://goo.gl/0uo2t

Top Trends of 2010: HTML5

http://goo.gl/JA9Zv

なんかワクワクする!! インフォグラフィックなWebまとめ

 
 

美しい! 格好良い! インフォグラフィックスまとめ記事って最近よく目にしますね。
一目見ただけで引き込まれる作品ばかりで、自分も沢山ストックしてます。

ちなみに、インフォグラフィックスとはデータ・情報・知識をダイアグラム、チャート、グラフ、マップ、ピクトグラムなんかでビジュアライズしたものです。
 
インフォグラフィックスまとめも面白いんですが、検索すると分かるように
膨大な数のインフォグラフィックスがひっかかります。
 
ですので、今回はWeb屋らしくHTML5(XHTML) / CSS3 / JavaScript  あたりで実装されている
インフォグラフィックなWebを集めてみました。まだそれほど数が多くないので...
Flashで作ったインフォグラフィックスも沢山あるんですが、今回はFlashは抜きで。

続きを読む

HTML5でWebアプリ！マークアップエンジニアがつくるToDo管理アプリ

「DeNA × 面白法人カヤック × クリーク・アンド・リバー社　セミナー」に登壇することになりました。

はじめまして。 このブログで書くのは初めてのME課の比留間(@edo_m18)です。

今回は9/23に開催される「DeNA × 面白法人カヤック × クリーク・アンド・リバー社　セミナー」で、 自分のセッションのプロローグを書きたいと思います。 セッションのタイトルは「もしも、マークアップエンジニアがひとりでWebサイトをつくるとしたら ～HTML5でつくるWebアプリ～」です。

bnr_seminar.gif

話の内容は、最近なにかと目にする「HTML5」について。
その中でも関連API(JavaScript)を使ったwebアプリについて話したいと思っています。
HTML5になることで、今まではサーバを介してしかできなかったこと、そもそもブラウザ上では実現不可能だったことが実現できるようになります。
これを利用して、マークアップエンジニア(だけ)でも作れる、ちょっとしたwebアプリを紹介しながら、HTML5の可能性について話そうと思います。

続きを読む

新人デザイナーがハマったコーディングの勘違い

はじめまして。新人MEの渕上伸吾です。

カヤックのME は、uemura率いる意匠部ME課（メカ）に所属しています。
ME課のお仕事は、コーディングを覚えたい新人デザイナーのサポートも担っているのですが、
そんななかで出会った、新人にありがちな勘違いネタについてエントリーを書いてみたいと思います。

これから紹介する勘違いや誤解はME課が全力で解いているのでご安心ください ♪

続きを読む