Web制作者にかなりオススメの解説書！ HTMLとCSSの今のテクニックを基本からしっかり学べるカピバラ本
Post on:2021年10月29日
sponsors
これは本当に、かなりお勧めの解説書です。
カピバラのかわいいイラストに癒やされながら、しっかりした知識が身につくHTMLとCSS、そしてWebデザインの解説書を紹介します。内容はかなり本格派。
HTML Living Standardに準拠したマークアップから、CSS GridやFlexboxなど、実務に役立つWebの知識がていねいに分かりやすく解説されています。
初心者向けの解説書ですが、Web制作を仕事にしたい人向けなので、中級者でもかなり学びのポイントがあると思います。一から学び直したい、現状のワークフローを強化したい、最近の知識を身につけたい人にもお勧めします。
版元様より画像をいただきました。
この「さまざまな工夫」というのがポイントです。私もいろいろな解説書を読んできましたが、非常によくできていると思います。詳しくは後述します。
普通の入門書だと短期間で卒業してしまうかもしれませんが、本書は長い期間、お世話になる解説書です。単なる基礎知識が身につくだけなく、なぜそうするのか、こうするとどうなるのか、理由や考え方などもていねいに解説されています。
HTMLとCSSに携わる人すべてが読んでおいて損のない一冊です！
Kindle版も発売されています。
「さまざまな工夫」の1つ目は、特典です。
解説に使用したデータがダウンロードできるのはよくありますが、チートシートもダウンロードできます。さらに、動画も用意されており、重要なポイントがより分かりやすく理解できると思います。
本書の特典
版元様より許可をいただいたので、紙面のキャプチャを少しだけご紹介。
「はじめに」より
本書を一言で表すと、ワクワクしながら学べる解説書です。誌面のデザインも楽しいですが、サンプルのページやコンポーネントも勉強が楽しくなるデザインです。
本書で実装するWebページのサンプル
本書で実装するWebページのサンプル
中にも「さまざまな工夫」がたくさんあります。
解説は目的・手段が明確で、非常に分かりやすい言葉が使用されています。もちろん、図解も豊富で、すべてのコードにファイル名と行数が記載されています。見本と同じにならない！そんな悲しいことにはなりません。また、図解はビフォーアフターで掲載されているので、こうするとどうなるがよく分かります。
「さまざまな工夫」は、コメントにもあります。
コメントにはカピぞう（カピバラ）、デザイナー（女性）、マークアップエンジニア（男性）の3人？が登場し、生徒のカピぞうが2人に教わります。先生のコメントは女性はデザイン寄り、男性はマークアップ寄りになっている感じです。
解説は本格派で、情報を構造化し、HTMLでマークアップする手順から学びます。初心者の人には「構造化」「マークアップ」という言葉は馴染みがないかもしれませんが、Web制作の仕事に就くと普通の言葉です。基本から本格的に学べるのが本書の特徴です。
それでは、肝心の中身を見てましょう。本書は5つのパートに、15章構成となっており、パート1はウォーミングアップとして基礎知識、パート2から実装に入ります。前章で情報を整理してマークアップする方法を学んだので、CSSで視覚表現（スタイル）する方法を学びます。
「さまざまな工夫」の1つ、Adobe XDのファイル。右ページ下部にデザインのバリエーションが掲載されており、XDファイルでダウンロードできます。画像の切り出しや色・数値抽出、デザインファイルの作り方の参考になります。
解説は非常に分かりやすく、必要な知識がきれいにまとまっています。例えば、CSSのリセットだと、CSSリセットとは何か、各ブラウザのデフォルトのCSSとは、CSSリセットを使用するとどうなるか、記述の順番、ノーマライズとサニタイズの相違点などが、この見開きに解説されています。
解説文だけでなく、図解もていねいで分かりやすいと思います。例えば、ボタンのCSSでは、ステップごとにビフォーとアフターが掲載されており、1つひとつのCSSがどのようになるのかがよく分かります。
本書内のすべて図解がビフォーアフターになっており、CSS GridやFlexboxをはじめ、CSSの少し高度なテクニックもこの形式です。CSSでこう記述すると、見た目がこうなるというのが視覚的に分かり、非常に優れた解説書です。
見出しと画像とボタンの簡単なコンポーネントの後は、いよいよページの実装です。
まずは、文章構造のマークアップ。初心者向けの解説書でも実務的なフローで、しっかりした知識を身につけることができます。
「さまざまな工夫」の1つ、チートシート。特典では、Flexboxレイアウト、CSS Gridレイアウト、CSSのショートハンド、キーボードショートカットの4つのチートシートが特設サイトからダウンロードできます。
実装の手順も非常にていねいで、分かりやすいと思います。2カラムで中央配置にするのもステップごとに解説されており、ひとつの表現をするのに色々なCSSの記述方法も分かります。
1カラムレイアウト、複数ページのサイトもあります。
複数ページのサイトではHTMLとCSSだけでなく、企画や要件定義、サイト設計について学べます。
もちろん、HTMLとCSSの解説も同じペースで、ていねいに解説されています。
後半になると、少し高度なテクニックが増えてきます。上記は画像とテキストのリンクで、リンクの範囲を広げつつ、余白があり、タップ時のエフェクトもあり、という要素です。ステップごとにビフォーアフターの図解とコード、分かりやすい解説があり、つまずくことはないと思います。
画像をレスポンシブ対応で表示する時は、object-fitプロパティが便利です。
CSS Gridをまだ使用したことがない人もこれからは使用する機会が増えてくるはずです。
HTML/CSS&Webデザイン1冊目の本の目次
HTML/CSS&Webデザイン1冊目の本の目次
私も解説書や入門書は数多く目にしてきましたが、本書は非常によく考えられて執筆された書籍だと思いました。本の構成も、そして解説も非常にていねいで分かりやすく、しかもムダがありません。ページを順番に進めていくことで、確実にスキルが身につき、次のステップに繋がります。
ムダな寄り道はせずに、正しい知識を着実に積み重ねることができる、そんな解説書です。
献本の御礼
最後に、献本いただいた翔泳社の担当者さまに御礼申し上げます。
当サイトでは随時、献本を受け付けています。
お問い合わせは下記よりお願いいたします。
sponsors
