Kindle版 HTML5マークアップ 現場で使える最短攻略ガイド が値下げ中です
- Category
- HTML5
- お知らせ
- Bookmark
拙著、HTML5マークアップ 現場で使える最短攻略ガイド のキンドル版が現在値下げ中で 1050 円となっているようです。 しかもポイントが 30% 付いてさらにお得に!!
多分その内戻るのかな? 気になってる方はこの機会に是非どうぞ。
拙著、HTML5マークアップ 現場で使える最短攻略ガイド のキンドル版が現在値下げ中で 1050 円となっているようです。 しかもポイントが 30% 付いてさらにお得に!!
多分その内戻るのかな? 気になってる方はこの機会に是非どうぞ。
宣伝です。
Amazon 等ネットショップや全国の書店で発売中のHTML5マークアップ 現場で使える最短攻略ガイドが、Amazon の Web開発カテゴリで 1 位になりました! ぱんぱかぱーん!
一つ上のカテゴリ、インターネット・Web開発カテゴリでも 1 位に!
更に更に、その上位のカテゴリ、コンピュータ・IT でも 7 位に!
上記は最大瞬間風速であって、今はそれなりの順位に落ち着いています。お買い上げくださった皆様ありがとうございました!
HTML5のマークアップに関する本を出します。12月12日発売で、Amazon 等で予約受付中です。
仕様書って、慣れない内は特に、結構読みづらいと思っています。ページは長いですし、言い回しは独特な物がありますし、そもそも英語ですし……。
本書は、そんな人に向けた HTML5 解説書です。
仕様書の言い回しを噛み砕いた日本語にして解説したり、ソースコードのサンプルも馴染みやすいものを掲載しています。
フルカラーだったり、セクションごとに改ページするなど、読みやすさにも気を配りました。
技術書って、「読もうという気持ち」になれる事が大切だと思っています。本書の構成に関して、当初の案にはオライリー等のような文章が延々と続いていくタイプも検討されたのですが、そうではなくて、セクションごとに改ページされるものになっています。
HTML5カルタの体験版がオマケで付いてきます。 これ僕も実際にやった事あるんですけど、何人かでやると意外に燃えるんですよね。見るだけだと伝わらない謎の魅力があるのです。
ちょうど時期的にも、もういくつ寝るとお正月ですし、体験版を使って良い感じだったら、上記サイトで製品版を購入しちゃったりなんかすると良いのではないでしょうか。
雑記です。
HTML5 Conference 2012のスペシャルセッションである HTML5 クイズについて書いてる人が周囲にいなかったので、書いてみる的な。
問題文のスクショは、クイズのスライドである HTML5 Conference Quiz から引用しました。
正解は 2 でした。練習問題だけあって解説はいらないですね。
正解は 3 の 108 個。
実は、webcre8 さんのエントリ、HTML5のタグって現時点(2012年8月)でいくつあるの? ― #HTML5のタグは百八つまであるぞ …? ― - WEBCRE8.jpを読んでいたので正解できたって言う。
正解は 1 の s 要素。
s 要素に関しては、連載中のHTML5マークアップ移行ガイドに載っていますね!(宣伝)
正解は 3 の重要な細目。
なんと、こちらも現在 ASCII.jp さんの Web Professional で連載中のHTML5マークアップ移行ガイドに載っていますね!(宣伝)
正解は 4 の aside 要素。
間違えやすい header 要素は、フローコンテンツとパルパブルコンテンツですね。
正解は 4 の Firefox.
僕は若干迷ってしまって、あえなく時間切れに><
正解は 2 のグローバルな translate 属性。
これちょっと引っ掛け問題ですよねw 「W3Cの」っていうところがミソで、カンファレンス時点では 1,3,4 の属性は WHATWG 版の仕様書にのみ載ってるんですね。
正解の 3 は W3C の仕様書にも載っています。
3.2.3 Global attributes — HTML5
正解は 3 でした。
僕は正解できたんですが、ぶっちゃけ勘でした。ミクさんは天使。
正解は 4 の 約 5,000 人。
実はこれ、基調講演のスライドに登場していたんですね。朝早くから来ていた人にはご褒美?があったというところでしょうか。
そんなこんなで、3 位に入りました!
おしまい。
meter要素の、スタイルを含めたフォールバックのサンプルです。
<meter min="0" max="100" value="60" title="percentage"><span class="outer"><span class="inner">60%</span></span></meter>
.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;
}
判りやすいように、対応しているブラウザではブラウザごとのインターフェイスに(Chrome8, Opera11 だと緑のバー)、非対応ブラウザでは青いバーが出るように(Firefox3.6, IE6,7,8, iPhone Safari (iOS4.2) で確認)なっています。
(モニタによっては、メーターの幅を示す灰色のグラデーションが見えづらいかもしれません)
特に難しい事はしていません。
単純にmeter要素の中のテキストを二重に囲って、それぞれにスタイルを当てているだけです。
/* 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という属性があります。 この属性を持った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>
ここまでをまとめると、scoped属性の嬉しい点は二つあります。
この内、スコープに関しては、現在で実装はないようです。
もう一つのメリット、フローコンテンツが期待できる場所(フローコンテンツが書ける場所)に書ける事が地味に便利な予感がしていて、例えばブログの記事内でちょっとしたサンプルを載せたい時なんかに使えるんじゃないかなと。 ただ、スコープの実装がない内には他の要素にまでスタイルが当たってしまう恐れがあるので、次のようにすると良いんじゃないかなとか。
<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(Internet Relay Chat)が公開されました。 ライブドアのラボである、livedoor labs EDGE内のページです。
以下からが本題。
件のlivedoor IRCのページもHTML5なのですが、デザインに合わせてソースコードもシンプルにしてみました。
HTML5では、仕様書でタグの省略について決められているので、それを参考にしました。
で、省略して良いのか最後まで迷ったのが、body開始タグです。仕様書の該当部分には次のように書かれています。
8 The HTML syntax ― HTML5 (Editor's Draft 23 May 2010)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.
・・・まあちょっと、ぶっちゃけ英語は苦手なんでアレなんですが、何とか読み解いた感じで、次の三つがbody開始タグを省略できる条件かなと。
一つめと二つめは分かりやすいんですが、ちょっと引っかかるのが三つめです。
HTML4.01などでは、style要素はhead要素内にしか記述する事ができませんでした。 が、HTML5では、scoped属性を付ける事でbody要素内に記述する事ができたりします(詳細はHTML5タグリファレンスとか見てください)。
scoped属性を持っているstyle要素の中に書かれたスタイルは、その親要素(あれば)以下にしか適用されなくなります(ただ、現在では実装しているUAは無い模様)。
と言うわけで、「三つめの条件はscoped属性を持っている事が前提に書かれているのではないか?」 という疑問と、僕の英語力の拙さが相まって、の所はbody開始タグを省略していないのです。