こんにちは、フリーランスでエンジニアをしているしょーご（@samuraibrass）と申します。
この業界に入って5年、HTMLやCSSの本というのは大量に存在していたのですが、以下のような問題を抱えていました。
この本はそんな人にピッタリの本となっています。
私のように実務経験をある程度積んだ状態でも参考になる部分が多々あったため、「この部分が良かった！」という所をかいつまんで解説していきます。
この記事を書いたのは
しょーご（@samurabrass）
このブログ「しょーごログ」の運営者。本業でエンジニアとしてサイト制作やシステム開発を数年行っており、ブログとYouTubeで情報発信を行っている。駆け出しエンジニアのコーディング課題添削も行う
プロの「引き出し」を増やす HTML+CSSコーディングの強化書
今回紹介する本は「プロの「引き出し」を増やす HTML+CSSコーディングの強化書」です。
この本は草野あけみさんという、Twitterでもよくお見かけするマークアップエンジニアの方が書かれた本です。
まずこの本、かなり厚みがあります笑
前提：初めて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コーディングの強化書」では逐一
「現在は〜に対応していないので、使うときは対応ブラウザに気をつけましょう」と教えてくれるのが非常に親切だと思いました。
❷flex-boxとgridの使い分けがわかりやすい
flexboxとgridの使い分けが初心者には難しかったりしますが、この「プロの「引き出し」を増やす HTML+CSSコーディングの強化書」では
- まずはflexboxで実装してみる（カード型レイアウト）
- その後gridで実装してみて、今回の場合はgridの方が楽だと気づく
- flexboxが活躍するパターンを学習する（横並び）
- gridが活躍するパターンを学習する（聖杯レイアウト）
という形式をとっており、自然と使い分けを学習できる形式になっています。
というあなたにもピッタリです（失礼）
❸実際のデザインカンプに頻出のパーツを練習できる
この「プロの「引き出し」を増やす HTML+CSSコーディングの強化書」で練習するレイアウトはほとんど「実務で高確率で遭遇するパーツ・レイアウト」ばかりです。
具体的には
- google mapsのpadding-top
- カード型レイアウト
- ブロークングリッド
- フォーム
- ハンバーガーメニュー
- タブ
どれか最低一つはどんなサイトをコーディングしようが絶対に出くわすものです。
私が出しているコーディング課題でも似たレイアウトが頻出です。
ブロークングリッドの解説が参考
この中で特にブロークングリッドを取り上げたいです。
近年こういったレイアウトは非常に増えています。
個人的に良いなと思ったのは、「プロの「引き出し」を増やす 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（ウェイ・アリア）でハンバーガーメニューやタブを作成
ぶっちゃけこのあたりは難しいですし、駆け出しの頃に意識する余裕はないかもしれません。
このサイトで使っているブログテーマも、ぶっちゃけいくつか穴があるなと思っています…それぐらい完璧に実装することは困難です。
しかし、だからこそこういったアクセシビリティに配慮した人材の付加価値は高いとも言えます。
三井住友銀行アクセシビリティガイドライン
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で実装されます。
例えば本書では「記事のサムネ画像」の話が出てきます。
こういったサムネ画像は「どんな画像が来ても崩れないようにする」必要があります。
画像の縦横比が崩れやすい場所です。
それを解決するためにobject-fitを使用するなど選択肢の提示などがあり、こういった知識はWordPress化し動的サイトにする際に必須の知識となります。
❽サンプルコードで復習できる
特に最終課題のBEMやSassのディレクトリ構成とかは見ていて参考になると思います。
コーディングの強化書はどんな人に合うか
この「プロの「引き出し」を増やす HTML+CSSコーディングの強化書」は私にも役立ったわけですが、どんな方におすすめかと言うと、
- 自分でググってネットの断片知識で長年コーディングしてきた人
- 丁寧にレビューしてくれる上司・同期がおらず、自己流な人
- アクセシビリティはてな？な人
- デザインカンプからのコーディングをしつつ辞書的に使いたい人
こういう方は有用に活用できるかと思います。
私も丁寧なレビューをくれる上司がいたわけではないので…
おわりに これからWeb業界に入りたい人へ
ちょっと話はそれますが、こういったちゃんとしたプロの解説やコードを見て学ぶことは実はかなり重要で貴重です。
実際に実装を行うに当たっては、これからみなさんたくさんググって、いろいろなブログ記事を見ることになると思います（Web制作では公式リファレンス見るより多くなりがち）
しかしその記事のコードが正しいとは限りません。とんでもない汚コードな場合もありますが、中身がわかっていないとコピペして貼って終わりになりやすい、
つまり実務経験がある程度あっても、スパゲッティコードを書く人が出てしまうのです。
そうならないためにも、そうなってしまっている人にも、「プロの「引き出し」を増やす HTML+CSSコーディングの強化書」は有効活用していただけるのではと思います。
Web制作ロードマップに補助教材として追加しました↓
2024年追記 周りと差がつくWeb制作本も紹介しました！
HTML初心者からWordPress実案件レベルまでのコーディング演習課題を「専用ページ」にて公開しています。
- Figma,Photoshopデザインからのコーディング
- サーバーアップロードでサイト公開
- プロによる最大3回の表示確認特典
- レビュー返しは爆速
- 2024年にデザイン刷新！被らないポートフォリオ
「初級編」は初めてデザインからコーディングする方向け
「中級編」はJavaScriptやjQueryの練習
「上級編」はWordPressの実案件を模擬体験できるレベル感にしています。
中級者の方には高難易度課題を詰め合わせた「即戦力セット」も出しています。
全課題で「実務レベルの、プロの厳しいレビュー」を受けられるようにしています。
また、2024年には随時デザインの刷新をしており、完全リニューアル！！
他者と差をつけられるポートフォリオが準備できます！
制作会社も使用する専用レビューツールで分かりやすく添削していきます！
基本的に「まとめて購入」していただくとかなりお得になります↓
コーディングは書籍だけではなかなか実力がつかないので、実務レベルのレビューを受けて自身をつけたい人は是非挑戦してみてください！
＼課題の購入はこちらから／
ご寄付を頂けると今後の更新の励みになります！
WAI-ARIAとは、簡単に言うとHTMLだけでは伝えられない構造や状態をGoogleに伝えるものです。