こゆめHTML&CSSについて困ったら見るサイト3選

私はよくHTMLやCSSの細かい仕様を忘れます。その度にGoogleで検索したりします。

しかし、ググってもわからない、ハッキリしないことはあります。

  • そもそもこのCSSプロパティは今使えるのか
  • HTMLタグの属性を忘れた
  • このHTMLタグはここに使っていいのか
  • CSSプロパティはわかるけど指定の表示ができるタグがわからん

こういう時に私が真っ先に確認するサイトを3つほど、ご紹介します。

事前準備:Google翻訳 – 翻訳する

Google翻訳(https://translate.google.co.jp/?hl=ja)

3つと言いながら1つ追加しておきます。おなじみGoogle翻訳さんです。

理由は、3つのサイトの内2つは英語ページだからです。
コピペして翻訳すれば、問題なく内容を理解できます。

HTML Standard – HTMLの仕様を公式で確認

HTML Standard(https://html.spec.whatwg.org/multipage/)

英語サイトです。現在標準の「HTML Living Standard」の仕様が書いてあります。

主にHTML5で追加されたタグなどは、どこで使うべきか迷うことが多いです。asideとか。
後はform周りのマークアップをどうするかとか、悩んだ時はここで書かれていることを参考にします。

使用方法は、開いたページのページ内検索で目的のタグを探し、詳細テキストをGoogle翻訳へコピペして確認、です。

案外公式はpを多用してるんだなあと感じました。divかなあとか思うところもpでやってますね。

Can I use… – Web技術のブラウザ対応を検索

Can I use…(https://caniuse.com/)

英語サイトです。Web技術のブラウザ対応を検索して確認できます。

flexなどの比較的新しい機能をもうメインで使ってもいいかな、少し古いブラウザで不具合はあるかな、などの確認に使えます。

使用方法は、トップの「Can I use _ ?」の「_」部分に「flex」とか入力するだけです。「flex」を含む各プロパティや、「gap」がflexのボックスで使えるかなどが検索結果として出てきます。
代表的なブラウザ+バージョンの表になっており、バージョンの背景が緑になっていれば対応しています。

たまに自分の知らなかった機能に出会うこともあります。Webの世界は広し。

開発者向けのウェブ技術 | MDN – Web技術のマニュアル

開発者向けのウェブ技術 | MDN(https://developer.mozilla.org/ja/docs/Web)

日本語サイトです。が、日本語に翻訳されていない英語ページに繋がることもあります。Mozilla運営で、各種Web技術の初心者向けチュートリアルからリファレンス、その他情報がミチミチに詰まっています。

CSSのプロパティなどの説明で、実際にどの値でどの表示になるのかがその場で確認できるのが良いところです。その場で自分で書きかえて試すこともできます。

ちなみに、正直なところサイト内は迷いやすいので、戻る時はブラウザの戻るボタンでやった方がいいです。この手のドキュメントは結構そんなところありますね。

ここも、一覧を見ていると新たな発見があることがありますし、ドキュメント眺めてるだけでも結構楽しいです。