これからの「標準」を身につける HTML+CSSデザインレシピ

スポンサーリンク

増税前の駆け込みで買った4冊のうちの1冊、「WordPress ステップアップブックレビュー)」に続いてのエビスコム本です。

これからの「標準」を身につける HTML+CSSデザインレシピ 表紙

結論から申せば、「めっちゃ当たり」です。

※今までもちろん「ハズレ」もありましたよ・・・MdNのjQuery本とか・・・。

この本ではWordPressには触れていませんが、HTML5とCSS3でのサイト構築方法ですので、ウェブ制作では無関係ではありません。

「HTML+CSSデザインレシピ」は日本では恐らく初めて?の、フレームワークでのサイトデザインを解説した本です。

紹介されているフレームワーク

フレームワークとは?

フレームワークとは、レスポンシブや、パンくず・ボタンなどよく使われるデザインを予めCSSファイルなどにまとめた、ウェブ制作用のコードファイルのセットです。

Fondation5

自分でゼロからレスポンシブCSSなどをいちいちコード打ちする必要がなく、既に用意されているclass属性を付けるだけで、レスポンシブにさせたり、色をつけたりといったことが出来ます。

詳しくは以下のサイトで解説されています。

便利な反面、使い方がわからないことには何とも使いこなせません。WordPressもWelcartもそうですけどね。

紹介されているフレームワークは2つ

「これからの「標準」を身につける HTML+CSSデザインレシピ」で紹介されているのは、以下の2種類のフレームワーク。どちらも有名どころです。

(余談)Bootstrapはどこで読み方を切るのか私はわかりません。「ブート・ストラップ」なのか「ブーツ・トラップ」なのか?語感からは何となく前者じゃないかなとは思ったりしますが・・・。

本編ではBootstrapのほうが多めに解説されています。本の後半で作る4つのレシピのうち、3つはBootstrapです。エビスコムのサイトでは出来上がりのサンプルを見ることが出来ます。

これからの「標準」を身につける HTML+CSSデザインレシピ (E BISCOM TECH LABO)

私は基本的に「独学」なWeb担当なので、ここ最近色々なところで「フレームワーク」という言葉を見ても、何のことやら、自分に関係があるのかどうかもよくわかっていませんでした。

が、本書でがっつりそのフレームワークを学べて、その便利さにすっかり感動。今回Welcat用のWordPressテーマを制作するにあたり、ここで学んだフレームワーク(ちなみにFoundation5)を早速取り入れてみています。

クリックでデモサイトへ

最近は他にもたくさんのフレームワークが出ていますが、BootstrapとFoundationの2つを押さえておけば、何にでも応用出来るのではないでしょうか。

フレームワークの使い方を紹介しているサイトももちろんたくさんありますが、やはりこういう技術は本で学ぶほうが覚えますね。3,000円というお値段ですが、セミナーなんかに行くよりずっと安い!

古いブラウザやブラウザ間の違いに対応した細かな配慮

また、この本の特に濃い部分は、最新のHTML5に沿ったコードを書きつつも、古いブラウザでの動作もカバーしているところでしょう。

これからの「標準」を身につける HTML+CSSデザインレシピ IE7/8対応

最初の章の<head>から、最新のWindows8にも対応しつつ、古いIE8/IE7にも対応したコードの書き方の解説もあり、細かな配慮がされています。

クロスブラウザにも対応

また、IE・Chrome・FirefoxなどのPC用ブラウザの他、スマートフォンのiOS・Androidでのブラウザによるデザイン表現の違いに配慮したスタイルシートの書き方も解説してくれています。

これからの「標準」を身につける HTML+CSSデザインレシピ スマホ対応

その辺のHTML+CSS本では、なかなかここまで細かく解説していません。やたらめったら端末を用意出来ない一般人としては、ここの解説は非常に有難いところです。

この本で学べること

  • フレームワーク(Bootstrap・Foundation5)の使い方
  • アイコンフォントの使い方
  • CSSのmarginやpadding、floatやalignの洗い直し(かなり細かい!)
  • ブラウザ間の表示の差異と、それをなくすCSSの書き方
  • 古いブラウザへの対応方法

フレームワークの使い方はもちろんですが、それ以外の内容も非常に濃いです。

CSSなどは結構わかっているつもりでしたが、フォントサイズはフォントのどの部分を以て判断されるのか、そこからどの程度がline-heightとして判断されるのか等々、あまりに細かい解説に舌を巻きました。

「HTML + CSS デザインレシピ」の細かすぎる解説

この本に向いている人

  • HTMLとCSSの基礎がある
  • ウェブサイト制作にかける時間を短縮したい人
  • スマホ対応(レスポンシブ・ブラウザ間の表示の違い)について学びたい人
  • ウェブサイトは作れるが、まだフレームワークやアイコンフォントを知らない人

全くウェブサイトを作ったことがない人には、この本は敷居が高いでしょう。先に入門本でHTMLとCSSは何とやらを学び、その後にこの本に進めば、一気に技術アップできるのではと思います。

一通りやった後も、前半はフォームやテーブルなどのパーツ別レシピにもなっているため、サイト制作の段階に応じてリファレンス本にもなります。実際、Welcart用テーマを作るにあたっては、フレームワーク以外の部分でも出番が多かったです。

「エビスコム」ブランド、やはり安定の信頼度。こういう信頼のブランド作りは商売人としても参考になりますわ。

これからの「標準」を身につける HTML+CSSデザインレシピ (Web Designing Books)

  • 出版社 マイナビ
  • 著者 エ・ビスコム・テック・ラボ
  • 価格 ¥ 3,110
  • 発売日 2014/3/20

コメントは受け付けていません。

Copyright© 2024 Welcart カスタマイズ ブログ All Rights Reserved.