プログラミング

【2022年戦える】HTML&CSSのおすすめ中級本「コーディングの強化書」を現役エンジニアが解説!

【2022年戦える】HTML&CSSのおすすめ中級本「コーディングの強化書」を現役エンジニアが解説!

こんにちは、フリーランスでエンジニアをしているしょーご(@samuraibrass)と申します。

この業界に入って4年、HTMLやCSSの本というのは大量に存在していたのですが、以下のような問題を抱えていました。

ありさちゃん
ありさちゃん
HTMLとCSSは基礎はなんとなくわかったんですが、中級者向けの本ってないんでしょうか…もう少し凝った内容を学びたいです
まさひろくん
まさひろくん
最近アクセシビリティとか言って、正直ついていけてないんだよなぁ

この本はそんな人にピッタリの本となっています。

私のように実務経験をある程度積んだ状態でも参考になる部分が多々あったため、「この部分が良かった!」という所をかいつまんで解説していきます。

しょーご

この記事を書いたのは
しょーご@samurabrass

このブログ「しょーごログ」の運営者。本業でエンジニアとしてサイト制作やシステム開発を数年行っており、ブログとYouTubeで情報発信を行っている。駆け出しエンジニアのコーディング課題添削も行う

追記:著者、出版社の方にコメントいただけました。こんな素敵な本をありがとうございます

プロの「引き出し」を増やす HTML+CSSコーディングの強化書

プロの「引き出し」を増やす HTML+CSSコーディングの強化書

今回紹介する本は「プロの「引き出し」を増やす HTML+CSSコーディングの強化書」です。

この本は草野あけみさんという、Twitterでもよくお見かけするマークアップエンジニアの方が書かれた本です。

まずこの本、かなり厚みがあります笑

プロの「引き出し」を増やす HTML+CSSコーディングの強化書

前提:初めてHTML,CSSを学ぶ本ではないです

中身の解説の前に、この本について重要な前提があります。

  • HTMLやCSSの基本的な解説は無い(background-colorとは何かみたいな解説)
  • jQueryやCMS実装(WordPress)の観点も若干入っている

このことから、全くの初心者が手をつけるには早いかなと思います。逆に

  • 一回でもデザインカンプからコーディングをしたことがある
  • 実案件もこなしたことがあるが、正直正しい知識が身についているかは不安
  • アクセシビリティとかも知りたい

こんな人にはピッタリだと思います。

コーディングの強化書の具体的に良かったポイント

❶最新のプロパティとともに、ブラウザの対応状況の解説がセットである

この本には随所に便利なCSSプロパティが登場します。

  • flexboxのgap
  • aspect-ratio
  • object-fit
  • min()やmax()
  • gridのauto-fillなど

これらを使いこなすことでかなりコーディングが便利になるのは間違いありません。

そもそも詳しく知らない人も多いのではないでしょうか。

しかしこれらのプロパティの中には「IEや最新版ではないブラウザでは動作しない」ものも一定含まれています(object-fitはpolyfillを入れればIEでも大丈夫ですが)

このプロの「引き出し」を増やす HTML+CSSコーディングの強化書」では逐一

「現在は〜に対応していないので、使うときは対応ブラウザに気をつけましょう」と教えてくれるのが非常に親切だと思いました。

そのプロパティが使えるかはCan I useを使うのが鉄板です。
https://caniuse.com/

❷flex-boxとgridの使い分けがわかりやすい

flexboxとgridの使い分けが初心者には難しかったりしますが、このプロの「引き出し」を増やす HTML+CSSコーディングの強化書」では

  1. まずはflexboxで実装してみる(カード型レイアウト)
  2. その後gridで実装してみて、今回の場合はgridの方が楽だと気づく
  3. flexboxが活躍するパターンを学習する(横並び)
  4. gridが活躍するパターンを学習する(聖杯レイアウト)

という形式をとっており、自然と使い分けを学習できる形式になっています。

まさひろくん
まさひろくん
実はgridは使いこなせてないんです…

というあなたにもピッタリです(失礼)

❸実際のデザインカンプに頻出のパーツを練習できる

このプロの「引き出し」を増やす HTML+CSSコーディングの強化書」で練習するレイアウトはほとんど「実務で高確率で遭遇するパーツ・レイアウト」ばかりです。

具体的には

  • google mapsのpadding-top
  • カード型レイアウト
  • ブロークングリッド
  • フォーム
  • ハンバーガーメニュー
  • タブ

どれか最低一つはどんなサイトをコーディングしようが絶対に出くわすものです。

私が出しているコーディング課題でも似たレイアウトが頻出です。

引用:https://note.com/samuraibrass/n/n1622c507b9c7
引用:https://note.com/samuraibrass/n/nd1748e42934e
引用:https://note.com/samuraibrass/n/n8dd48cf8d30f

ブロークングリッドの解説が参考

この中で特にブロークングリッドを取り上げたいです。

https://kinarito.net/
引用:https://kinarito.net/

近年こういったレイアウトは非常に増えています。

個人的に良いなと思ったのは、「プロの「引き出し」を増やす HTML+CSSコーディングの強化書」の中では「二種類の実装方法」が紹介されていています。

しかしどちらも絶対に正しいということではないのです。

どちらも一長一短だから、デザイナーとコミュニケーションが必要という流れになっているのがいいかなと。

実際ブロークングリッドはデザインカンプの幅以外での再現イメージが人によってまちまちなのですよね。

それと細かいですが、「レスポンシブでの表示画像の切り替えをHTMLのpicture要素で切り替え」してるのがいいと思いました。

<picture>
  <source media="(min-width:800px)" srcset="large.jpg">
  <source media="(min-width:400px)" srcset="medium.jpg">
  <img src="small.jpg" alt="サンプル">
</picture>

PC、スマホでそれぞれ画像を出し分ける際(アートディレクションと言います)、片方をdisplay: none;するのは余計な画像が読み込まれてしまうから良くないと言われるので、現代ではpicture要素を使います。

しょーご

初学者は抜けがちな知識ですね

❹アクセシビリティの観点が随所に取り入れられている

アクセシビリティを重視したコーディングは重要です。

しょーご

スクリーンリーダーの読み上げや、キーボードだけで操作ができるかなどですね。世の中にはディスアビリティを抱える方が少なく有りません。

この本で出てくるアクセシビリティ対策一部
  • inputの文字サイズは16px以上推奨(自動ズームしてしまう)
  • チェックボックス・ラジオボタンのinput要素をdisplay: none;しないこと(キーボード操作で支障)
  • WAI-ARIA(ウェイ・アリア)でハンバーガーメニューやタブを作成

WAI-ARIAとは、簡単に言うとHTMLだけでは伝えられない構造や状態をGoogleに伝えるものです。

ぶっちゃけこのあたりは難しいですし、駆け出しの頃に意識する余裕はないかもしれません。

このサイトで使っているブログテーマも、ぶっちゃけいくつか穴があるなと思っています…それぐらい完璧に実装することは困難です。

しかし、だからこそこういったアクセシビリティに配慮した人材の付加価値は高いとも言えます。

三井住友銀行アクセシビリティガイドライン
https://www.smbc.co.jp/accessibility/guidelines/index.html

❺CSS設計はBEMの運用を深堀りで学べる

ただただ「BEMとはこういうものですよ」と解説する本は山ほどありますが、本書ではBEMに特化しているのに加え

  • ヘッダーの設計
  • カード型レイアウトの設計
  • ボタンの設計
  • 見出しの設計
  • 余白の設計

実際のパーツをもとに見てくので、わかりやすいです。

サンプルコードでBEMを確認できる

各課題のサンプルコードはファイルで一式ダウンロードできるので、コードを見たり検証ツールで確認すると非常にBEMが確認しやすいかと思います。

文字で追うのが苦手な方にもおすすめです。

綺麗なBEMもなかなか見かけることがないので、貴重かなと思います。

❻Twitterで話題に上がりがちな点の解説がある

具体的には以下のような点について、著者の観点からの解説があります。

  • remがいいのか、pxがいいのか
  • margin-topとmargin-bottomどっち派?
  • alt属性の書き方

人によってまちまちになりがちだからこそ論争になるのですが、一応の答えをいただけるのはいいかなと思います。

alt属性なんかはみなさん自己流の解釈で書かれていると思いますが、ある程度型が決まっていますので、正しい手法を学んでおきましょう。

❼CMS実装の観点があり、かなり実務的な視点

実際にHTMLコーディングした企業サイトなどは、高確率でWordPressなどのCMSで実装されます。

例えば本書では「記事のサムネ画像」の話が出てきます。

https://note.com/samuraibrass/n/n9faac1c35977
引用:https://note.com/samuraibrass/n/n9faac1c35977

こういったサムネ画像は「どんな画像が来ても崩れないようにする」必要があります。

しょーご

画像の縦横比が崩れやすい場所です。

それを解決するためにobject-fitを使用するなど選択肢の提示などがあり、こういった知識はWordPress化し動的サイトにする際に必須の知識となります。

❽サンプルコードで復習できる

本書プロの「引き出し」を増やす HTML+CSSコーディングの強化書」ではほとんどのサンプルや課題に答えのコードが載っています。
しょーご

特に最終課題のBEMやSassのディレクトリ構成とかは見ていて参考になると思います。

コーディングの強化書はどんな人に合うか

このプロの「引き出し」を増やす HTML+CSSコーディングの強化書」は私にも役立ったわけですが、どんな方におすすめかと言うと、

  • 自分でググってネットの断片知識で長年コーディングしてきた人
  • 丁寧にレビューしてくれる上司・同期がおらず、自己流な人
  • アクセシビリティはてな?な人
  • デザインカンプからのコーディングをしつつ辞書的に使いたい人

こういう方は有用に活用できるかと思います。

しょーご

私も丁寧なレビューをくれる上司がいたわけではないので…

おわりに これからWeb業界に入りたい人へ

ちょっと話はそれますが、こういったちゃんとしたプロの解説やコードを見て学ぶことは実はかなり重要で貴重です。

実際に実装を行うに当たっては、これからみなさんたくさんググって、いろいろなブログ記事を見ることになると思います(Web制作では公式リファレンス見るより多くなりがち)

しかしその記事のコードが正しいとは限りません。とんでもない汚コードな場合もありますが、中身がわかっていないとコピペして貼って終わりになりやすい、

つまり実務経験がある程度あっても、スパゲッティコードを書く人が出てしまうのです。

そうならないためにも、そうなってしまっている人にも、「プロの「引き出し」を増やす HTML+CSSコーディングの強化書」は有効活用していただけるのではと思います。

Web制作ロードマップに補助教材として追加しました↓

\\\コーディング課題公開中///

HTML初心者からWordPress実案件レベルまでのコーディング演習課題noteで公開しています。

コーディング練習課題
  1. デザインカンプからのコーディング
  2. プロによる2回の表示確認特典
  3. ポートフォリオとして使用OK

初級編は初めてデザインからコーディングする方向け、中級編はJavaScriptやjQueryの練習、上級編WordPressの実案件を模擬体験できるレベル感にしています。

中級者の方には高難易度課題を詰め合わせた「即戦力セット」も出しています。

しょーご

自分が「これを実案件までに学習しておくと良いな」と感じたポイントを詰め込んだ教材になります!

基本的にまとめて購入していただくとかなりお得になります。

コーディングは書籍だけではなかなか実力がつかないので、ぜひ腕試しにご利用ください!!

\課題の購入はこちらから/

\課題の詳細はこちらから/

あなたに是非読んでほしい記事です!