Category : HTML5

Kindle版 HTML5マークアップ 現場で使える最短攻略ガイド が値下げ中です

Category
Bookmark

HTML5マークアップ 現場で使える最短攻略ガイド (アスキー書籍)

拙著、HTML5マークアップ 現場で使える最短攻略ガイド のキンドル版が現在値下げ中で 1050 円となっているようです。 しかもポイントが 30% 付いてさらにお得に!!
多分その内戻るのかな? 気になってる方はこの機会に是非どうぞ。

Amazon で 1 位いただきました

Category
Bookmark

Amazon 1 位。 Amazon 1 位です。滅多に無いし大事な事なので二回言いました。

宣伝です。
Amazon 等ネットショップや全国の書店で発売中のHTML5マークアップ 現場で使える最短攻略ガイドが、Amazon の Web開発カテゴリで 1 位になりました! ぱんぱかぱーん!

そしてなんと!

一つ上のカテゴリ、インターネット・Web開発カテゴリでも 1 位に!

まさかここまで順位が上がるとは……!

更に更に、その上位のカテゴリ、コンピュータ・IT でも 7 位に!

上記は最大瞬間風速であって、今はそれなりの順位に落ち着いています。お買い上げくださった皆様ありがとうございました!

HTML5マークアップ 現場で使える最短攻略ガイド という本を出します

Category
Bookmark

Amazon:カルタ付 HTML5マークアップ 現場で使える最短攻略ガイド

HTML5のマークアップに関する本を出します。12月12日発売で、Amazon 等で予約受付中です。

対象読者は、HTML5 の仕様書を読むのが苦手な人

仕様書って、慣れない内は特に、結構読みづらいと思っています。ページは長いですし、言い回しは独特な物がありますし、そもそも英語ですし……。
本書は、そんな人に向けた HTML5 解説書です。

仕様書の言い回しを噛み砕いた日本語にして解説したり、ソースコードのサンプルも馴染みやすいものを掲載しています。

読みやすい構成に気を配りました

フルカラーだったり、セクションごとに改ページするなど、読みやすさにも気を配りました。

技術書って、「読もうという気持ち」になれる事が大切だと思っています。本書の構成に関して、当初の案にはオライリー等のような文章が延々と続いていくタイプも検討されたのですが、そうではなくて、セクションごとに改ページされるものになっています。

オマケには HTML5 カルタ付き

HTML5カルタの体験版がオマケで付いてきます。 これ僕も実際にやった事あるんですけど、何人かでやると意外に燃えるんですよね。見るだけだと伝わらない謎の魅力があるのです。

ちょうど時期的にも、もういくつ寝るとお正月ですし、体験版を使って良い感じだったら、上記サイトで製品版を購入しちゃったりなんかすると良いのではないでしょうか。

HTML5 Conference 2012 のクイズ大会に出た問題について

Category
Bookmark

雑記です。

HTML5 Conference 2012のスペシャルセッションである HTML5 クイズについて書いてる人が周囲にいなかったので、書いてみる的な。
問題文のスクショは、クイズのスライドである HTML5 Conference Quiz から引用しました。

第1問(練習問題):HTML5は?

1:6 って書いてあるアイコン 2:HTML5 って書いてあるアイコン 3:CSS3 って書いてあるアイコン 4:7 ELEVEN(R) って書いてあるアイコン

正解は 2 でした。練習問題だけあって解説はいらないですね。

第2問:HTML5の要素数は?

1:Full HD 1080 2:SHIBUYA 109 3:煩悩 108 4:AKB48

正解は 3 の 108 個。
実は、webcre8 さんのエントリ、HTML5のタグって現時点(2012年8月)でいくつあるの? ― #HTML5のタグは百八つまであるぞ …? ― - WEBCRE8.jpを読んでいたので正解できたって言う。

第3問:HTML4から継承された要素は?

1:s 要素 2:big 要素 3:font 要素 4: center 要素

正解は 1 の s 要素。
s 要素に関しては、連載中のHTML5マークアップ移行ガイドに載っていますね!(宣伝)

第4問:strong 要素の中の small 要素の中に書かれている文章の意味は?

1:大きな補足 2:小さな強調 3:重要な細目 4:強大な魔力

正解は 3 の重要な細目。
なんと、こちらも現在 ASCII.jp さんの Web Professional で連載中のHTML5マークアップ移行ガイドに載っていますね!(宣伝)

第5問:セクショニング・コンテンツは?

1:div 要素 2:p 要素 3:header 要素 4:aside 要素

正解は 4 の aside 要素。
間違えやすい header 要素は、フローコンテンツとパルパブルコンテンツですね。

第6問:Indexed Databaseが実装済なのは?

1:IE9 2:Safari 3:Opera 4:Firefox

正解は 4 の Firefox.
僕は若干迷ってしまって、あえなく時間切れに><

第7問:W3Cの仕様に実際あるのは?

1:a 要素の ping 属性 2:グローバルな translate 属性 3:img 要素の srcset 属性 4:a 要素の download 属性

正解は 2 のグローバルな translate 属性。
これちょっと引っ掛け問題ですよねw 「W3Cの」っていうところがミソで、カンファレンス時点では 1,3,4 の属性は WHATWG 版の仕様書にのみ載ってるんですね。

正解の 3 は W3C の仕様書にも載っています。
3.2.3 Global attributes — HTML5

第8問:Google Chromeは?

1:左上が黄色、右上が緑、下赤、中央は上が濃くて下が薄い紺色のグラデーション。 2:左上が緑、右上が赤、下が黄色、中央は左が濃くて右が薄い紺色のグラデーション。 3:上が赤、右下が黄色、左下が緑、中央は上が薄くて下が濃い紺色のグラデーション。 4:上が黄色、右下が緑、左下が赤、中央は左が薄くて右が濃い紺色のグラデーション。

正解は 3 でした。
僕は正解できたんですが、ぶっちゃけ勘でした。ミクさんは天使。

第9問:html5j.orgのコミュニティ登録者数は?

1:約 2,000 人 2:約 3,000 人 3:約4,000 人 4:約 5,000 人

正解は 4 の 約 5,000 人。
実はこれ、基調講演のスライドに登場していたんですね。朝早くから来ていた人にはご褒美?があったというところでしょうか。

おまけ

3位に hamashun の名前が!

そんなこんなで、3 位に入りました!

おしまい。

meter要素のフォールバックサンプル

Category
Bookmark

meter要素の、スタイルを含めたフォールバックのサンプルです。

HTML

<meter min="0" max="100" value="60" title="percentage"><span class="outer"><span class="inner">60%</span></span></meter>

CSS

.outer {
  display: block;
  width: 80px;
  height: 15px;
  background: #e5e5e5;
  background: -moz-linear-gradient(top, #FFFFFF 0%, #e5e5e5 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFFFFF), color-stop(100%,#e5e5e5));
  background: linear-gradient(top, #FFFFFF 0%, #e5e5e5 100%);
}

.inner {
  display: block;
  width: 60%;
  height: 15px;
  background: #3893E2;
  background: -moz-linear-gradient(top, #7FE9FF 0%, #3893E2 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7FE9FF), color-stop(100%,#3893E2));
  background: linear-gradient(top, #7FE9FF 0%, #3893E2 100%);
  text-indent: -99999px;
}

サンプル

60%

判りやすいように、対応しているブラウザではブラウザごとのインターフェイスに(Chrome8, Opera11 だと緑のバー)、非対応ブラウザでは青いバーが出るように(Firefox3.6, IE6,7,8, iPhone Safari (iOS4.2) で確認)なっています。
(モニタによっては、メーターの幅を示す灰色のグラデーションが見えづらいかもしれません)

解説

特に難しい事はしていません。
単純にmeter要素の中のテキストを二重に囲って、それぞれにスタイルを当てているだけです。

HTML5で最近使っているリセットCSS

Category
Bookmark

浅漬けCSS的なもの

/* html5 reset css */

/* reset */
html, body, div, h1, h2, h3, h4, h5, h6, p, blockquote, q, pre, table, caption, colgroup, col, tbody, thead, tfoot, tr, th, td, ul, ol, li, dl, dt, dd, form, fieldset, legend, label, span, a, img, em, ins, del, cite, abbr, sup, sub, dfn, code, var, samp, kbd, object, script, noscript, style, iframe, embed, param, map, area,
menu, hr, address, small, strong, i, b,
article, aside, figure, footer, header, hgroup, nav, section, figcaption, time, video, audio, mark, ruby, rt, rp, bdo, source, canvas, details, summary, command,
datalist, keygen, output, progress, meter {
  margin: 0;
  padding: 0;
  font-size: 100%;
}

address, article, aside, figure, figcaption, footer, header, hgroup, hr, legend, menu, nav,  section, summary {
  display: block;
}

li {
  list-style-type: none;
}

a img {
  border: none;
}

img {
  vertical-align: bottom;
}

[hidden] {
  display: none;
}

これをそっくりこのまま使うってわけじゃなくて、必要に応じて足したり引いたりします。

その他・用意しておくと便利そうな指定もの


* {
  word-wrap: break-word;
}

body {
  line-height: 1.5;
  letter-spacing: 0.03em;
  background: #fff;
  color: #333;
}

a:link {}
a:visited {}
a:hover {}
a:active {}

label { 
  cursor: pointer;
}

mark {
  background-color: #ff9;
  color: #000;
}



/* clearfix
:after {
  content: ".";
  display: block;
  clear: both;
  height: 0;
  visibility: hidden;
}
*/

body要素に指定した色などは、適宜書き換えます。

HTML5のstyle要素が持つscoped属性について

Category
Bookmark

HTML5のstyle要素には、scopedという属性があります。 この属性を持ったstyle要素は、フローコンテンツが期待できる場所に記述する事ができます(フローコンテンツの中って意味じゃ無いです)。

フローコンテンツには、div要素やsection要素やtable要素などがあります(詳しくはコンテンツ・モデル - HTML5タグリファレンス - HTML5.JPとか見てください)。

scoped属性を指定したstyle要素に記述されたスタイルは、ページ全体ではなく、そのstyle要素の親要素の中にあるコンテンツにのみ適用されます。 以下がサンプルコードです。

  <p>example text</p>     <!-- 赤くならない -->
<section>
  <style scoped="scoped">
  p {
    color: red;
  }
  </style>
  <h1>example title</h1>
  <p>example text</p>     <!-- 赤くなる -->
</section>

scope属性のメリット

ここまでをまとめると、scoped属性の嬉しい点は二つあります。

  1. スコープを持てる
  2. フローコンテンツが期待できる場所に書ける

この内、スコープに関しては、現在で実装はないようです。

もう一つのメリット、フローコンテンツが期待できる場所(フローコンテンツが書ける場所)に書ける事が地味に便利な予感がしていて、例えばブログの記事内でちょっとしたサンプルを載せたい時なんかに使えるんじゃないかなと。 ただ、スコープの実装がない内には他の要素にまでスタイルが当たってしまう恐れがあるので、次のようにすると良いんじゃないかなとか。

scope属性をサポートしない環境へのフォールバック

  <p>example text</p>     <!-- 赤くならない -->
<section id="entryExample">
  <style scoped="scoped">
  #entryExample p {
    color: red;
  }
  </style>
  <h1>example title</h1>
  <p>example text</p>     <!-- 赤くなる -->
</section>

使いようによっては便利になりそうなscope属性ですが、乱用は保守性の低下を招くのでご利用は計画的にした方が良いかもしれないです。

livedoor IRC リリース。及び、body開始タグの省略とstyle要素のscoped属性について

Category
Bookmark
  • 追記:body開始タグを省略できる条件 の和訳を追記しました(記事の結論は変わりません)。

livedoor IRC(Internet Relay Chat)が公開されました。 ライブドアのラボである、livedoor labs EDGE内のページです。

以下からが本題。

HTML5のタグの省略

件のlivedoor IRCのページもHTML5なのですが、デザインに合わせてソースコードもシンプルにしてみました。
HTML5では、仕様書でタグの省略について決められているので、それを参考にしました。

body開始タグの省略について

で、省略して良いのか最後まで迷ったのが、body開始タグです。仕様書の該当部分には次のように書かれています。

A body element's start tag may be omitted if the element is empty, or if the first thing inside the body element is not a space character or a comment, except if the first thing inside the body element is a script or style element.

8 The HTML syntax ― HTML5 (Editor's Draft 23 May 2010)

・・・まあちょっと、ぶっちゃけ英語は苦手なんでアレなんですが、何とか読み解いた感じで、次の三つがbody開始タグを省略できる条件かなと。

  • body要素が空の場合
  • body要素内に登場する最初のものが空白文字・コメント以外の場合
  • body要素内の最初の物がscript またはstyleの場合(「ではない」場合?)

一つめと二つめは分かりやすいんですが、ちょっと引っかかるのが三つめです。

scoped属性付きのstyle要素

HTML4.01などでは、style要素はhead要素内にしか記述する事ができませんでした。 が、HTML5では、scoped属性を付ける事でbody要素内に記述する事ができたりします(詳細はHTML5タグリファレンスとか見てください)。
scoped属性を持っているstyle要素の中に書かれたスタイルは、その親要素(あれば)以下にしか適用されなくなります(ただ、現在では実装しているUAは無い模様)。

と言うわけで、「三つめの条件はscoped属性を持っている事が前提に書かれているのではないか?」 という疑問と、僕の英語力の拙さが相まって、の所はbody開始タグを省略していないのです。