今どきのテクニック満載! HTML5 & CSS3 デザインレシピ集

どうも、ご無沙汰しております。今年はスギ花粉の当たり年なのか、例年になく症状がひどいです(グズッ)。

昨年は体調など諸々の理由で主に自宅で仕事をしていたのですが、今年の年始から再び高田馬場のコワーキングスペース「CASE Shinjuku」さんに出戻って、快適な環境で作業をしております。やっぱり広いスペースは気持ちいいですね。

私が離れていた間にもCASEさんの月額会員は着々と増えておりまして、そのお一人がStudio 947の狩野祐東さんで、HTMLやCSS、JavaScriptなどwebの技術書を執筆されています。

そういったご縁で近刊の著書をご恵贈いただきました。私もweb技術指導も仕事にしておりますので、レビューを書かせていただこうと思います。

ただいま直々に昨日発売の新刊を著者の狩野さんからご恵贈いただきましたので、書評書きます。

五十嵐 武志さん(@takeshi81)がシェアした投稿 –

「HTML5 & CSS3 デザインレシピ集」のおすすめポイント

1. HTML5.1準拠のマークアップテクニック300例収録

私見ですが、最近web関係というとWordPressなどCMSの解説書、ReactやVue.jsなどのフロントエンドフレームワークの解説書が多く、基本であるモダンなHTML5とCSS3のテクニックを学べる書籍というのが、かなり少なかったという印象です。

どうしてもHTML5はブラウザ実装が先に進んでしまい、使おうとしている要素や技術がどのブラウザで使用できるのか、Can I useなどのサイトで確認してから実装する、といったことを日々しているというのが現状だと思います。

またちょっとした小技などもweb検索に頼りがちになり、検索エンジンでヒットしたwebページを参考にしたりすることになりますが、どうしても情報が散逸して、まめにブックマークでもしておかないと忘れてしまい、また検索するようなこともしばしばです。

この「HTML5 & CSS3 デザインレシピ集」では、そういった小技が定番から高度なものまで、300例も収録されているので、逆引きリファレンスとしてとても最適なつくりになっています。

2. CSSボックスモデルの事例が、float版とflexbox版に2パターンを併記

Flexbox、いいですよね。Bootstrap 4でも、リリースの途中でboxのデフォルトがfloatからflexboxへ変更されました。案件によりfloatを使わないといけないこともあると思いますが、「HTML5 & CSS3 デザインレシピ集」では、float版とflexbox版の両方の例が載っています。

3. 初心者が助かる定番テクニックから、transition、transformなど高度な技まで網羅

収録サンプルと目次のページを見ていただきたいのですが、HTMLの基礎知識から始まって、要素ごとの使用例、定番テクニックと進んで、最後の章が「アニメーションとエフェクトのテクニック」というように、初学者から上級者まで、一冊あると便利な内容になっています。

すでに仕事でマークアップをしているような方も、新人教育の教科書も兼ねて、オフィスに一冊あると助かる本だと思います。おすすめです。

9/17 Flashとおやつのゼミ #2

たけしです。こんにちは。

昨日、9/17に水玉製作所Flashとおやつのゼミ#2が開催されました。今回は普段Flashを使っている方向けに、HTML5の新機能紹介をするというお題で、私がデモを行いました。ダイジェストにまとめたスライドを貼っておきますので、よろしければご覧下さい。

なおUstreamで配信したスクリーンキャストは、ちゃんと配信出来たのに、うっかり録画ボタンを押し忘れて残ってませんでした。残念。今度は忘れないようにします。