プログラミング

【HTMLおすすめ本】武器になるHTMLはプロなら買うべき【中級者向け】

【HTMLおすすめ本】武器になるHTMLはプロなら買うべき【中級者向け】

こんにちは、現在Web制作フリーランス5期目のしょーごです。

HTMLの本はたくさんありますが、こんなこと思ったことないですか?

ありさちゃん
ありさちゃん
HTMLの基本はなんとなくわかったけど、中級者向けの使い方を知りたい
ゆうすけくん
ゆうすけくん
アクセシビリティとかまで学べる本はないの?

しょーご

私が初学者の頃、HTMLは初学者向けばかりで物足りなさを感じていました。

HTMLは簡単」と言われることが多いですが、実はHTMLは「正しく書こう」とすると、結構難しいです。

  • アクセシビリティ配慮
  • スクリーンリーダー配慮
  • キーボードフォーカス配慮
  • テクニカルSEO

など配慮するべき点が多いです。

なのに、「初学者向けに軽く学んだあとは自分流で書く人」が多いので、HTMLのタグが脳死でdivだけになるパターンが散見されます。

それを解決するのが、今回紹介する「武器になるHTML」です。

著者は「シバタヒロノリ(@hilosiva)」さんです。10年ほどフリーランスでデザインとコーディングをされている方ですね。

武器になるHTML」はCSSには一切ふれずにHTMLだけに振った、潔い本です。

私はこの5年間様々な専門書を見てきましたが、初学者向けに分かりやすく、ここまでHTMLを深掘って解説している本はなかったので、

今回は「武器になるHTML」を現役Web制作者視点で徹底分析していきます。

しょーご

厳密には、HTML辞典みたいな本はあったんですが、ほんとに辞典で読み物ではない感じだったんですよね。

先に行っておくと、「武器になるHTML」は中級者向けの本になります。

HTML本の2冊目として買うか否か、この記事で判断していただければと思います。

\現役エンジニアのレビュー付き/

実践レベルのコーディング課題公開中

【駆け出しコーダーに捧ぐ】2022年以降のポートフォリオ戦略&レビュー付きデザインカンプからのコーディング課題について解説
販売ページはこちら
  • デザインカンプからのコーディングを経験したい
  • 現役エンジニアのレビューを受けてみたい
  • 即戦力級のポートフォリオを用意したい

コーディングを学習中の方はぜひご活用ください。

無料の入門編から本格企業サイトまで/

武器になるHTMLの特徴

HTMLに特化して、CSSには一切触れない

とにかくこれに付きます。

しょーご

本当にCSSは一行も書いてないです笑

これによって「HTMLをとことん詳しく解説できている」ところがいいなと思います。

それでいて「細かすぎる仕様には触れていない」のが良いですね。

もう少し深ぼると、

  • HTML Standardに準拠した解説

これが全体的な特徴ですね。

HTML Standardとは

HTML Standardは現在のHTMLの標準仕様です。

HTML5を聞いたことがあるかもしれませんが、これはW3Cという団体が策定したもので、

HTML StandardはWHATWG(ワットダブルジー)が策定しています。

2021年1月にW3CがHTML Standardを正式な勧告として発表。HTML5は、廃止となりました。

現在HTML5は標準ではなく、HTML Standardが唯一の公式・標準になっています。

これを参考書の段階できちんと触れているものが意外にないので、「武器になるHTML」はよいなと思いました。

例えばタグ「h1~h6」「pタグ」はこのように設定されています。

要素名カテゴリコンテンツ・モデル(内包可能なもの)
h1~h6フロー・コンテンツ
ヘディング・コンテンツ
フレージング・コンテンツ
要素名カテゴリコンテンツ・モデル(内包可能なもの)
pフロー・コンテンツフレージング・コンテンツ

hタグ自体は「フロー・コンテンツ」なので、hタグはpタグの中には入れられません。

また同様に「フロー・コンテンツ」であるpタグをhダグの中に入れることもだめです。

しょーご

地味にややこしい部分ですが、この本で頻出タグに関してはしっかり学ぶことができます。

しょーご

HTML Standard」に頻繁に言及するので、参照する癖がつくと思います。

個人的に面白かった部分

全部を話すと大変なので、ここからは私が「特に役立つ!」と思った部分をかいつまんで解説します。

よくSNSなどで論争になるような部分です笑

①srcsetとpictureでの画像の出し分け

まずこのコードの意味が分かるでしょうか。

<picture>
  <source srcset="/img/img01.jpg, /img/img01@2x.jpg 2x" media="(min-width: 769px)"  /> // 画面幅が769px以上の時(パソコン)
  <source srcset="/img/img02.jpg, /img/img02@2x.jpg 2x" media="(max-width: 768px)"  /> // 画面幅が768px以下の時(タブレット)
  <img src="/img/img03.jpg" secset="/img/img03@2x.jpg 2x" alt="画像" /> // ブラウザが対応していない形式の画像の場合imgを表示する
</picture>
  1. まずsourseのmediaで、画面幅で画像を出し分けます。ブラウザが対象外の画像形式ではimg画像を出します。
  2. 高解像度ディスプレイでは2倍のサイズの画像(2x)が必要なので、srcsetで二倍の画像を出すようにし、それ以外のときはデフォルトの大きさの画像を出します。

画像を出し分けないと、Webページ読み込みの際に全部の画像を読み込んでサイトが重くなるので、こういった出し分けをしていたりします。

しょーご

令和のHTMLは画像読み込みコードが流すぎる…

まあ基本レベルなので、知らない人は今すぐ「武器になるHTML」を買って学習したほうがいいですね。

ちなみに、WordPressでは投稿ページでは自動で様々なサイズで画像を出しわけてくれています。

あとは細かいですが、画像の「非同期読みこみ」「遅延読み込み」解説もありました。

<img class="hoge" decoding="async" src="/images/hage.jpg" alt="hage" width="200px" height="160px">
<img class="hoge" loading="lazy" src="/images/hage.jpg" alt="hage" width="200px" height="160px">

やっていることを簡単に言うと、画像の読み込みによってWebサイトの表示に時間がかかることが多いので、そのラグを減らす試みです。

Webサイトの高速化の知識は教養レベルなので、これもいいですね。

②altの書き方

altの役割としては以下です。

  1. 検索エンジンにコンテンツの内容を正確に伝えられる→画像検索での流入が見込める
  2. 画像が表示されない場合、テキストで画像の内容を補完
  3. 音声読み上げ機能を使用した際の読み上げテキストとして使用

これらを踏まえて、例えば以下を見て、「からあげの画像」に対してどのようなaltを書きますか?

https://amzn.to/3ZjtLyG

本書ではこのようになっています。

<h1>絶対に失敗しない架空のからあげ</h1>
  <p><img src="../images/karaage.jpg" width="840" height="520" alt="揚げたてのからあげをお皿に盛り付けて、パセリを添えるとより美味しそうに見えますよ" ></p>

もしかしたら、「からあげ」と入力してしまう人がいるかもしれません。

本書でも「明確な正解はない」としつつも、このような先生のコメントがあります。

先生

「からあげ」だけだと、上の見出しを繰り返しているだけにも感じるね。代替テキストとしては情報が不足しているんじゃないかな。前後の文とのつながりも考えて、この画像がなくても、代替テキストを読むだけで内容が成立するようにしよう。

しょーご

ちなみに実案件ベースで話すと、altの文言まで指定されることはほぼないです。なので、自分で文脈を読み取って指定してあげる必要があります。

また勘違いされやすい要素として、alt属性は基本的に記述した方がいいとされていますが、全ての画像に記述する必要はありません。

記述の必要がない例として、「意味をもたない装飾目的で使われる画像」があげられます。

装飾目的の画像にはalt属性は記述せず、空白のままにしておきます。

どれが装飾か分かりにくい!」となるかもですが、

「画像が表示されなかった際に記事の内容がわかりにくくなるものに、積極的にalt属性を設定していく

という考え方がいいかなと思います。

③figureの使い方

figure要素、みなさんはどういったときに使うでしょうか?

なんとなく画像などをボックスで囲んだほうが制御がしやすいし、それにfigureを使う」という理由だけで囲む人も多いと思います。

武器になるHTML」によれば、「移動しても本文の流れに差し障りのないイラスト・図表・写真などをfigureで囲む」とされています。

例えば以下の珈琲の画像はどうでしょうか?

https://amzn.to/3k6u0gx

答えは「figure要素で囲む」です。

<figure>
 <img decoding=
<figure>
    <img src="images/coffee.jpg" width="480" height="320" alt="厳選したコーヒー豆を使った淹れたてのブレンドコーヒーをお召し上がり下さい。" loading="lazy">
    <figcaption>キミのブレンドコーヒー</figcaption>
</figure>

珈琲の画像によってユーザーのイメージを具体的にする効果がありますが、仮に珈琲の写真がなくても、意味は成り立ちます。

では、以下はどうでしょうか?

<p>お客様には</p>
  <figure>
    <img src="images/coffee.jpg" width="480" height="320" alt="厳選したコーヒー豆を使った淹れたてのブレンドコーヒー" loading="lazy">
  </figure>
  <p>を召し上がっていただきます。</p>

これだと「珈琲の写真が分の一部として成り立ってしまっている」ので、figureで囲むのは適しません。

ちなみに、私のブログ記事を見てみると、挿入画像の部分は

figureで囲まれていました。

WordPressが自動で挿入しているようです。

しょーご

これって画像が文脈の中で意味を持つ場合もついてしまうのかな…?

④label要素やフォームアクセシビリティ

突然ですが、以下のお名前」の部分をpタグなどで囲ってしまっている人はいないでしょうか?

ここで使うべきタグは「labelタグ」です。

コントロール部品にidを振って、labelでfor属性を使って、ラベルとコントロール部品を紐付けます。

<p>
  <label for="your_name">お名前:</label>
  <input type="text" id="your_name" name="your_name">
</p>

または、labelタグでコントロール部品を囲ってもいいです。

<p>
 <label>
 お名前: <input type="text" name="your_name">
 </label></p>
<p>
  <label>
        お名前: <input type="text" name="your_name">
  </label>
</p>

なぜlabelタグを使う?

ラベルとコントロール部品を関連付けることで、視覚障害の方やマウスが使えない方にフレンドリーになるので、アクセシビリティやユーザビリティの向上につながると言われます。

⑤セクショニング・コンテンツ

セクショニング・コンテンツとは、「話題の範囲を示すことができる要素」です。

具体的に「section要素」「article要素」「aside要素」「nav要素」の4つが存在します。

要素名意味・役割
section一般的なセクションを表す
articleブログやニュース記事などの、独立したセクションを表す
asideメインコンテンツから切り離すことが可能な、独立したコンテンツを表す
nav主要なナビゲーションを表す

なぜセクショニング・コンテンツが必要なのか

話題の始まりと終わりをhタグだけで機械が判断するのは難しいため、補足するためにセクショニング・コンテンツが役立ちます。

例えば、このブログ「しょーごログ」の記事一覧ではarticleが記事ブロックを囲んでいます。

itemscopeやitemtypeというのは「マイクロデータ」という構造化マークアップで使う手法です。ここでは解説しませんが、多少上級テクニックです。

主要なナビゲーションはnavタグで囲まれています。

また、sectionはLPなどが分かりやすいです。話題の範囲毎にsectionタグで囲んでいます

クラウドワークス
sectionタグで構成されている

また、「セクショニング・コンテンツ内でheaderやfooterが使える」ことを知らない人も多いかもしれません。

<article>
  <header>
    <h3>ごはんが進むイカと大葉のバター醤油炒め</h3>
      <p><time datetime="2022-02-19">2022.02.19</time></p>
  </header>
  <p>ぷりぷりのイカに大葉がアクセントになって、ごはんが<em>何杯でも</em>食べられる逸品です!お弁当に入れても、おつまみとしてもその役割を全うします。</p>
   <footer>
     <p>斎藤 あかね</p>
   </footer>
</article>

他にもたくさんありますが、知らないものがあった人は要注意です!

詳しくは「武器になるHTML」で確認してください。

しょーご

セクショニング・コンテンツにしっかり触れている入門者向けの本は少ない印象なので、ここのパートはかなり有用ですね!

⑥div,spanは最後

この本で思わずため息が出たのが、”汎用的な要素”という項目で、「最後にdivとspanを出してきた時」でした。

divもspanも「特別な意味を持たない要素」で、大抵はCSSで調整したりボックスで囲みたい時に使います。

Progateや大抵の入門書では逆にdivから始まることが多いと思いますが、これによってdivしか書かない人が一定出てきてしまうので、

しょーご

この本はあえて最後に持ってきたんですね、いや〜痺れるな〜

と思ってましたw

武器になるHTML」内のコメントをそのまま引用します。

なお、これらの要素を使う前には、必ず他に適切な要素がないかを確認してから使うようにしましょう。

あくまでこれらの要素は、この範囲をマークアップするのにふさわしい要素がほかにないけれど、その範囲にCSSでレイアウトや装飾がしたかったり、グローバル属性を使って補足情報を設定したかったりする時に使える要素になります。

話題の範囲を示したいのであれば、div要素よりもsection要素やarticle要素のほうがふさわしく、強調したいフレーズであれば、span要素よりもem要素のほうがよいでしょう。

よりふさわしい要素がある場合は、そちらを利用しましょう。

https://amzn.to/3k6u0gx

100回ぐらいうなずきながら読んでいました笑

「武器になるHTML」は誰向けか?

色々書きましたが、「武器になるHTML」を特におすすめしたい層を列挙すると、

  • HTML,CSSの学習本が一冊最低でも終わっている
  • 既にデザインカンプからのコーディング経験がある
  • 我流でなんとなくHTMLを書いている現役コーダー

こういった方々におすすめです。

特にちゃんとHTMLのタグの使い方」を学ばず、脳死でdivを連打している人などには刺さるんじゃないかなと思います。

HTMLをしっかり、このタイミングで学び直しましょう!

逆におすすめできない人は、

既に実務経験が多数あり、セクショニング・コンテンツなどはわかっている

WAI-ARIAを詳しく知りたい

構造化マークアップを極めたい

こういった方には物足りなく感じるかもしれません。

武器になるHTML」のスタンスとして、はじめてHTMLを学ぶ層」に配慮した難易度の記述になっているので、致し方ない部分かなとは思います。

とはいえ、個人的に基礎の総復習になったので、

しょーご

HTMLをなんとなく書いている」自覚がある人は、買って損しないですので、ぜひ!

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

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

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

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

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

しょーご

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

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

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

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

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