『ほんの一手間で劇的に変わる html & cssとwebデザイン実践講座』を解説

この書籍を購入検討されている方は、本書に前作があることをご存じでしょうか。それは『１冊ですべて身につくHTML＆CSSとWebデザイン入門講座』という本です。かなり有名で、書店でも目につきやすい位置に置かれているため目にした方も多いと思います。

タイトルの通り前作より実践に近づいたテクニックを紹介している本書ですが、基礎を徹底して書かれている前作の解説も行っていますので、先にそちらから目を通してもらえるとさらにこの記事が読みやすくなります。

本書の著者

本書と前作を書かれている方は、Manaさんという方です。以下は巻末から引用したManaさんの自己紹介文です。

日本で2年間グラフィックデザイナーとして働いた後、カナダ・バンクーバーにあるWeb制作の学校を卒業。 カナダやオーストラリア、イギリスの企業でWebデザイナーとして働いた。その後クリエイター専門の留学サポート企業「Frog」で素敵な広報担当＆Webサイト制作をしました。現在はWebサイト制作のインストラクターとして教育に携わっているブログ『Webクリエイターボックス』は2010年日本のアルファブロガーアワードを受賞。著書『１冊ですべて身につくHTML＆CSSとWebデザイン入門講座』(SBクリエイティブ)は2019年ドCPU大賞　書籍部門の大賞を受賞。

ほんの一手間で劇的に変わるHTML&CSSとWebデザイン実践講座

といった経歴を持たれているすごい方が書いたものです。

僕もこの方のブログは拝見させていただいていて、Web制作においてかなり役に立つ最新の知識が学べて重宝しています。
気になった方は下記より覗いてみて下さい。

リンク：WEBクリエイターボックス

そんな方が書かれている本ですので、かなり詳細に、ときにはこんなことも出来るのかと驚くようなテクニックまで紹介されています。それでは次から解説していきます。

前作からの違い

前作では基礎中の基礎が解説されており、実際のサイト制作を通してマークアップの行い方やCSSでの装飾を学ぶといった内容が趣旨になっていました。

それに比べ、今作ではレスポンシブデザインを作成する際に気を付けたいことや、CSSの応用編、さらにはSassを使用した記法なども書かれています。

また、Webサイトをデザインする際の考え方についても前作より詳細に書かれています。

そのため、前作と今作を一通り学ぶと、Web制作の流れというものがなんとなく見えてくるような構成になっています。

学べることの例

例えば、border-radiusというプロパティがありますよね。

これの使い方について、あまり詳細に語られているサイトというのは少ない気がするのですが、本書の内容を加味して作成すると、下図のようなものが作れます。

こんな、クローバーのような形の図形が作れます。今はbackground-colorを緑で塗りつぶしてますが、本書で紹介されているものは春夏秋冬の画像をそれぞれのパーツにあてはめてます。

こんなにおしゃれなものが作成できる知識が身につきます。

他にも、下図のように、ボーダーの外側にも色がつくようにして少しかわいらしいデザインも作成することができます。

今紹介させていただいた２つは、決して特別なことをしているのではなく、基礎を理解した上で設定を変えてあげるだけで実現可能なものとなっています。

このように、『ひと手間』というキーワードがかなり重要な意味をもってくるのが本書の最大の特徴とも言えるでしょう。

このほかには、Visual Stadio Codeというテキストエディターの便利な使い方や、Sassを使用したCSSを記述する方法など、細かいけど身に着けておくと作業効率が上がる方法などを網羅してくれています。

本書をおすすめできる方

HTML、CSSを一通り学び終えて、自分でコードは書けるようになったけどなかなか思うような動きを実装できなかったり、効率の悪さを感じているような方に特におすすめします。

基礎が頭に入っていることが前提になっているように見受けられるので、駆け出し期に購入しても、言っていることの意味が分からず、あまり身につくことが少なくなってしまうように思います。

Web制作において、コードを暗記するというよりは『たしかこんな実装の仕方もあったな、調べてみよう』という程度に頭に染みこませる学習方法の方が効率がいいと個人亭に思っています。

なので、最低限何をしているのかが理解できないと自分の引き出しとして増やすのは難しくなってくると感じます。

まとめ

いかがでしたでしょうか。本書の魅力が少しでも伝わりましたでしょうか。

僕自身何度も読み直している本書ですが、自分のスキルレベルが上がってから読むと、今まで理解できなかった部分がスッと頭に入り、自分のスキルとして身に着けられるので購入してから何回も読み直しています。

こういった本は自分の備忘録にもなるので、困ったときに調べるためのツールとしても手元に置いておくと良いかもしれませんね。

前作と合わせて駆け出し期に持っておくと長期にわたって役に立つ書籍ですので、ぜひ一度手に取ってみてください。