- レビュー
- 【レビュー】モダンなCSSテクニックが満載の『現場で使える Webデザインアイデアレシピ』
【レビュー】モダンなCSSテクニックが満載の『現場で使える Webデザインアイデアレシピ』

小林マサユキさんが書かれた『現場で使える Webデザインアイデアレシピ』。書店で見つけて、さっそく購入してみました。
まだ、ざっと目を通しただけで、掲載されているサンプルのコーディングまではしていないのですが、どういった内容なのか、どういった方にオススメなのか、簡単に紹介したいと思います。
基本的なコーディングを学んで、レベルアップしたい方向け
まず、この書籍では、HTMLやCSSの基本的な使い方は解説されておらず、HTMLやCSSを使って、どうやってカッコよく、使いやすいデザインにするかということがテーマになっている気がします。ですので、HTMLやCSSを初めて勉強する方が買っても、どうやって使ったらいいかわからないと思うので、初心者の方へはオススメできません。
逆に、HTMLやCSSの基本的な部分を習得してスキルアップを考えている方や、もっとCSSの応用的な使い方を学びたい、中級者以上の方向けの内容になっています。
一つの書籍にまとまっていることに価値がある
この書籍で紹介されているテクニックは、小林さんの専売特許というものではないので、ネットで検索すれば、いろいろなサイトで紹介されている記事を見つけることができます。それなら、お金を出して買う必要がないんじゃないかと思うかもしれませんが、必要なときに、その都度ネット検索で見つけようとすると、想定以上に時間がかかったり、キーワードによっては見つけられないかもしれません。
ですが、そういったテクニックが一つの書籍にまとめられていることで、必要な時に辞書的に使うことで、無駄な時間を使わなくても済みます。また、いろいろなサイトのコードをコピペで使っていくと、どうしてもソースコードが汚れたり、CSS設計が崩れてしまうときがあります。ですが、この書籍のコードを使えば、名前や基本的な文法が統一されるので、管理しやすくなると思います。
HTMLより、CSSを使ったデザインテクニックが中心
表紙には、「HTML&CSSで表現するシンプルで使いやすい70のレシピ」とコピーがありますが、HTMLに関しては、あまりページが割かれていないように感じました。
【レビュー】プロの「引き出し」を増やす HTML+CSSコーディングの強化書
もし、HTMLでのレイアウト部分を学びたい方は、先日レビューした、こちらの書籍の方がいいかもしれません。
具体的に説明されているので、自分のサイトに応用しやすい
今回掲載されているテクニックは、モダンなものが多く、人によっては使ったことがなかったり、初めて見るようなプロパティもあると思います。ですが、CSSの使い方が、本当に詳細に説明されているので、自分のサイトで使うときも、問題なく設定できると思います。逆に、自分のサイトにうまく設定できない場合は、HTMLやCSSの基本的な考え方にあいまいなところがあるのかもしれないので、一度、基礎的なテキストを振り返ってみるのもいいかもしれません。
構造化データの説明もされている
巻末に、Google向けの内容として、構造化データの説明も載っています。HTMLやCSSの書籍で、構造化の使い方が載っているのは、わたしは初めてみました。あと、しっかりとしたサンプルがあるので、構造化データ、Schemeに詳しくない方でも、自分のサイトに設置できると思います。
また、今回の構造化データのサンプルは、JSON形式でのサンプルなので、もしWordPressでサイトを運営している人は、header.phpなどに埋め込めば、WordPressのテンプレートタグを使って、さらに柔軟にカスタマイズできそうです。
ベンダープレフィックスも多い
ただ、モダンなテクニックが多いので避けられないことなのですが、紹介されているCSSテクニックには、ベンダープレフィックスが多用されています。このベンダープレフィックスに関しては、わたしは小林さんとは別の考え方を持っている気がします。
わたしがサイトをコーディングするときは、極力ベンダープレフィックスを用いないようにしています。というのも、ベンダープレフィックスが必要ということは、まだ仕様が未確定であることなので、もしかしたらブラウザのアップデートで不具合が発生したり、細かなプロパティが変わる可能性もあります。そのあたりが、わたしにとって不安な要素になるので、ベンダープレフィックスが必要なら、CSSではなく画像などでコーディングすることが多くあります。
もちろん、ベンダープレフィックスを使うのがNGではないので、書籍のサンプルが間違いではまったくないのですが、もし、ベンダープレフィックスが必要なサンプルを使う場合は、いつも以上に動作チェックに気をつけた方がいいかもしれません。
【まとめとして】モダンなテクニックが満載なので、ぜひ辞書的に活用してみて
手に取って中を見るとわかるのですが、この書籍にはモダンなCSSテクニックが満載です。そのため、ある程度人を選んでしまうのですが、もしサンプルを見て『コーディングに使える!』と思った方は、ターゲットど真ん中だと思うので、実際のコーディングに非常に役立つと思います。