Web制作者向け！ブックマーク必須サイト4選

Web制作者向け！ブックマーク必須サイト4選

Webの世界は日々に変化、進歩しています。

よって、「過去に得た知識が現在では通用しない」ということも多々あります。

Web制作者といえど、最新の全てのWeb知識を備えているわけではありません。
分からないことや最新情報は随時調べながら仕事をしています。

そんなWeb制作者がチェックすべきサイト4つを、Webエンジニアとして活動している自身の経験をもとにまとめました。
是非ブックマークして活用しましょう！

ブックマーク必須サイト4選

結論となる「ブックマーク必須サイト4選」を先にまとめておきます。新規タブで該当ページが開きます。

• MDN Web Docs
• Statcounter Global Stats – Browser, OS, Search Engine including Mobile Usage Share
• Can I use… Support tables for HTML5, CSS3, etc
• HTML5 入れ子チートシート | 吉川ウェブ

Web制作者サイト4選の解説

MDN Web Docs

MDN Web Docs

HTMLの各タグやCSSのプロパティ、JavaScriptの関数などの詳細な仕様を調べることができます。

普段あまり使用しないプロパティなどは、その仕様を忘れがちなので、使用のする際にはこのサイトをチェックして誤りがないように気を付けています。

初心者から市場で活躍しているエンジニアまで御用達のサイトです！

Statcounter Global Stats

Statcounter Global Stats – Browser, OS, Search Engine including Mobile Usage Share

デバイスの画面サイズのシェア率を調べることができます。

Webページを作る際、パソコン、タブレット、スマホの各画面サイズで表示が崩れていないことを確認するのは必須です。

その際、何をもって各デバイスの画面サイズを決めるかが重要になってきます。

このサイトでシェア率をチェックすれば、理由を持って「画面幅1280pxを境に表示を切り替えよう」と決めることができます。

また、地域別のシェア率も調べることができるので、日本向けのWebページを制作している場合は、日本に絞ったシェア率を参考にするのも良いでしょう。

Can I use…

Can I use… Support tables for HTML5, CSS3, etc

ブラウザ毎のプロパティ等の対応状況を調べることができます。

Google ChromeやSafari、FirefoxなどブラウザによってCSSプロパティ等の対応状況は異なります。

自分の開発環境では反映されていても、あるブラウザではそれが未対応のため反映されておらず、そのユーザーは「表示が崩れたページ」を見る羽目になります。

とりわけ新しいプロパティを使う際には、このサイトで対応状況をチェックし、できる限り全ユーザーを考慮した制作を心掛けています。

HTML5 入れ子チートシート

HTML5 入れ子チートシート | 吉川ウェブ

HTMLタグの入れ子ルールを瞬時に確認することができます。

入れ子ルールとは、例えば「pタグの中にaタグを入れることはできるが、h1タグを入れることはできない」といったルールです。

よく使うタグに関しては、一通り入れ子ルールを把握していますが、使用頻度の少ないタグを使用する際には、このサイトで適切な入れ子になっているかを確認しています。

クリックするだけで視覚的にルールを確認できる優良サイトです。

おわりに

今回紹介した4サイトは利用頻度も多いので、私のブックマークリストでもトップに置いています。

Web制作の基礎的な部分での誤りは、後々大きな不具合に繋がるおそれがあるので、多少面倒でもこれらのサイトをこまめにチェックするようにしています。

クライアントのためにも、ユーザーのためにも、その一手間をかけることが重要だと思っています。