「Webサイトをもっと良くするには？」というテーマで、Web・HTML/CSSの知識を問うクイズを5問ご用意しました！
なんとなく書いていたコードも、『なぜそう書くべきなのか』が理解できるクイズです。知らなかった！という発見があるかも。
正解がわからなかったトピックは、解説記事でサクッと復習してみてくださいね。
Q1. SEO：検索エンジンに伝わるリンクの書き方
以下のHTMLのうち、SEO（検索エンジン最適化）の観点で最も適切ではないのはどれでしょうか？
A. <a href="service.html">サービスの詳細を見る</a>
B. <a href="service.html">こちらをクリック</a>
C. <a href="service.html"><img src="btn.png" alt="〇〇を購入する"></a>
・
・
・
正解は
B. <a href="service.html">こちらをクリック</a>
検索エンジンのクローラーは、リンクのテキストを見て「リンク先に何が書いてあるか」を理解します。「こちら」だけでは情報が不足しているため、リンク先の内容が具体的にわかる言葉を含めているAやCの方が適切です。
Q2. パフォーマンス：画像タグにサイズを書く理由
レスポンシブルが一般的になった現在のWeb制作でも、<img>タグにwidthとheightを書くことが推奨されています。その最大の理由は何でしょうか？
A. 画像のファイルサイズを自動で圧縮するため
B. 画像が表示される前に「場所」が確保され、レイアウトが安定し高速化できるため
C. 高画質な画像として認識させるため
・
・
・
正解は
B. 画像が表示される前に「場所」が確保され、レイアウトが安定し高速化できるため
ブラウザは、width属性とheight属性が書かれている場合、その値から縦横比を計算して、画像を表示するためのスペースをあらかじめ確保します。これにより、ページのレイアウトが安定し、結果として表示速度の向上につながります。
これらの属性がないと、画像のダウンロードが完了したあとに縦横比を計算してページ全体のレイアウトをし直すため、ページの表示速度に影響します。
Q3. 読みやすさ：CSSでの「行間」の考え方
文章を読みやすくするためにCSSの line-height を設定する際、推奨される「値の指定方法」はどれでしょうか？
A. line-height: 24px; （pxで固定する）
B. line-height: 1.6; （単位なしの数値で指定する）
C. line-height: 150%; （％で指定する）
・
・
・
正解は
B. line-height: 1.6; （単位なしの数値で指定する）
line-heightプロパティは、正確には「1行の高さ」を決めるもので、値には1文字の高さの倍率を、単位なしで設定します。
Q4. パフォーマンス：表示速度を上げる「遅延読み込み」
画像が多いページで、初期読み込みを速くするために、「本当に表示する必要があるまで画像の読み込みを遅らせる」HTMLの記述はどれでしょうか？
A. <img src="photo.jpg" loading="lazy">
B. <img src="photo.jpg" defer="true">
C. <img src="photo.jpg" preload="none">
・
・
・
正解は
A. <img src="photo.jpg" loading="lazy">
loading="lazy"を記述すると、ブラウザは「その画像が画面に近づくまで」ダウンロードを待機します。これにより、ブラウザの処理の負担が軽くなって、スクロールがカクカクしたり、クリックできなかったりといった、ページの操作性が低下することを防ぎます。
Q5. HTMLとCSS：<img>タグと「背景画像」の使い分け
Webサイトに画像を掲載する際、HTMLの<img>タグを使うか、CSSのbackground-imageを使うかの判断基準として、最も適切なものはどれでしょうか？
A. 画像の上に文字を載せる場合は、必ずCSSの背景画像にする
B. その画像が「コンテンツとして重要な情報」なら<img>タグ、単なる「装飾」なら背景画像にする
C. 表示速度を速くしたいなら、すべて<img>タグにする
・
・
・
正解は
B. その画像が「コンテンツの内容を伝える情報」なら<img>タグ、単なる「飾り」なら背景画像にする
<img>タグは「文書の一部」として扱われ、alt属性で内容を説明できるため、SEO対策やアクセシビリティの向上に有益です。一方、背景画像はあくまで「装飾」であり、alt属性はつけられません。
さいごに
全問正解できたでしょうか。「なんとなく」書いていたコードも、その理由を知るだけでWebサイトの品質はぐっと上がります。今回ご紹介したテクニックを、日々の更新作業に活かしてみてください！
