今、WEBデザインやコーディングをきっちり学びたいというあなた。

とりあえず独学で、と思っても、自分にあった教材を選ぶのって結構難しいですよね。

ネットだと中身までは確認できませんし、最高の一冊を求めてあちこちの書店をはしごするのもなかなか大変です。かといって必要そうな本を片っ端から買おうものならお値段がとんでもないことに……。

けれど、そんな苦労を飲み込んででもWEB制作を学びたいと思っている、そこのあなた。
「html&cssコーディング・プラクティスブック」という電子書籍はご存じでしょうか？

エビスコムから出版されていて、Kindle版でのみリリースされている電子書籍です。

2021年６月現在７巻まで出版されており、「ドットインストール」や「Progate」などを終えて、さらにもっとhtml、cssのコーディングを勉強したいという方にピッタリな内容になっています。

7巻という大ボリュームの技術書ではありますが、なんとあのAmazon Kindle Unlimitedに含まれているので、契約してさえいればいつでも何度でも無料で読むことができるんです。この贅沢さ、タブレットを傍らにPCで学習したことのある方ならご理解いただけるのではないでしょうか。

正直、手軽に学べるというだけでもかなり魅力的だったのですが、内容も非常に充実していました。

詳細はエビスコムのサイトを見ていただきたのですが、実務でありそうなサイトデザインを題材として、Adobe XDのデータを元にコーディングし、実際に作り上げながら学んでいく形式になっています。

例えば、クライアントのインハウスデザイナーからXDデータが入稿されたという想定で、このデータを元にどのようなポイントに注意してhtml,cssを組み立ててコーディングするのか。FlexBoxやGridレイアウトなど、各巻ごとに設定されたテーマに沿って実践的に学ぶことができます。

このシリーズの特長としては、以下の点が挙げられると思います。

• 依頼先からの（という想定で作られた）指示書がある（対応ブラウザ、カラーリングの指示、レスポンシブ対応に関する指示等）
• 指示書に沿ってデザインカンプ（Adobe XDのデータ）を解析するという形式が実践的でわかりやすい
• コーディングの準備作業に関する説明がパーツごとに分けて解析されている
• 実は重要な、作業の順番に関する説明がある
• モバイル版とPC版の調整についてそのつど説明してくれる
• ブレークポイントを9つ用意した場合_※の見え方の図解がある（※4巻の場合）

各巻の概要は以下の通りです。

巻	教材となるサイト	主に学ぶ技術テーマ	難易度 （簡単1〜難関4）
１巻	コーポレート系サイト	Flexbox	レベル2
２巻	カフェ系サイト	Flexbox・vm・rem	レベル4
３巻	ダークモード対応和風サイト	ダークモード対応	レベル3
４巻	コーポレート系サイト	Flexbox	レベル1
５巻	ブランド系サイト	CSS Grid	レベル2
６巻	ショッピング系サイト	12分割グリッド	レベル2
７巻	メインコンテンツに レスポンシブテーブルを使ったサイト	レスポンシブテーブル	レベル3

それぞれの巻で完結する独自のテーマで学んでいくので、１巻から順番に進める必要はありません。自分の興味のあるところから始めれば大丈夫です。スマホ用のメニューについても、各巻ごとにさまざまな作り方が示されているので非常に勉強になりました。私の経験では、ビギナーの方ならレベル1の4巻からスタートするのがスムーズだと思います。

ここからは、この「html&cssコーディング・プラクティスブック」で学んだ中から、自分としても新たな発見だった内容をピックアップして、実際にコーディングしてみたものをご紹介します。

flex-boxで縦に並べた要素の最下部のボタンを自動で揃える

ボタンのmargin-topをautoにすると高さを揃えることができます。

See the Pen practice01 by kunori (@kunori) on CodePen.

animationと@keyframesでフェードイン

animationで秒数を指定し、@keyframesで0%と100％の値を指定してフェードインさせることができます。

See the Pen practice02 by kunori (@kunori) on CodePen.

ダークモード対応

画像に対してfilter: saturate(0.8) brightness(0.8)を指定することで、明度と彩度を変更することもできます。
実装するにはcssの変数を使用します。

See the Pen 03practice by kunori (@kunori) on CodePen.

改行の有効・無効を切り替える

メディアクエリを使用し、brタグをdisplay: noneで無効にdisplay: inlineで有効にできます。

See the Pen practice04 by kunori (@kunori) on CodePen.

色を反転させる

反転させたい文字に対してmix-blend-mode: differenceを指定することで、階調の反転をさせることができます。

See the Pen practice05 by kunori (@kunori) on CodePen.

gridレイアウトでメディアクエリを使用せず可変グリッド

grid-template-columnsにminmax()を使用することで、画面幅の狭い時と広いときに対応できます。

See the Pen practice06 by kunori (@kunori) on CodePen.

実際に読みながらコーディングするときは、SassやGitも使いつつ、クラス名の命名規則をどうしようかなど考えながら進めるとより実践的な勉強ができると思います。

また、作業スタートからページを完成させるまでのフローが順を追って解説されているので、学んでいて達成感がありました。継続できるか心配な方にも、あきることなく学習できるのではないでしょうか。
また、章の終わりにあるコラムにも目から鱗の役立つ情報が散りばめられており、何度も読むことで習熟度にあった知識を拾い上げることができるのも魅力です。

全7巻（2021年6月現在）という情報量。ひとつひとつ実践して積み上げていくことで、確実に自分の実力を磨いていく実感を味わうことができる「html&cssコーディング・プラクティスブック」。

学んだことが増えれば、後日追加していきたいと思います。