@appdamacyです。今回はHTML・CSSを学習し始めたばかりの初心者でも使えるリファレンスサイトを紹介します。
頻繁に使うことのないものは使用するときのルールを忘れてしまいがちなので、困った時はこれから紹介する２つのサイトを活用してみてください。
HTML Reference
HTMLタグと付与できる属性が紹介されているリファレンスサイト。無駄な情報は一切なく、必要最低限の説明だけが記載されているのが特徴です。
113個のHTMLタグがひと目で確認できる
トップページでHTML要素のタイプが表記されているので、間違えやすいインライン要素とブロック要素がひと目でわかります。
- またbrタグのような閉じるタグが必要のないものはself-closing
- head内のみで記述するものはmetaとしてわけられている
ので初心者でも間違いなく適切に使用できるので安心です。チェックマークを外すことで任意のタイプに絞って表示することもできます。
HTMLタグごとに使用できる属性が紹介されている
どのように使えるHTMLタグなのかといった説明から、付け加えることができる属性の説明までされています。
さらにいくつかのパターンに分けて実行結果が掲載されているのでひと目で比較することができます。
CSS Reference
こちらは「HTML Reference」の姉妹サイトで、CSSの基本的な知識が盛りだくさんなリファレンスとなっています。
129個のCSSを視覚的に理解できる
CSSはHTMLで書いたものを装飾することができます。
そのため文章だけでは動作を想像しにくいケースがでてきますが、CSS Referenceではわかりやすい実行結果で視覚的に理解することができるのが特徴です。
以下ではとくに役立ちそうなFlexboxやAnimation周りのプロパティをあげておきます。
Flexboxで自由なレイアウトを組める
ボックスの横並びを指定するとき余白の調整などが超絶簡単になるFlexbox。
たくさんの指定方法が用意されていますが、一度覚えてしまうとウェブサイト・ブログをカスタマイズするときの効率が格段にアップするはずです。
- Flexboxに関するCSSプロパティを集めたページ：Flexbox - CSS Reference
個人的に煩わしいFloatを使わなくても指定できるだけでステキです。
CSSアニメーションの基礎を学べる
プロパティ説明文の下に用意されている「Play animations」を押してみてください。
それぞれ指定されている条件下でどのような動作をするのかを確認することができます。
- アニメーションに関するCSSプロパティを集めたページ：Animations - CSS Reference
これらの動きはスマートフォン問わず見られるので（もちろんサイトでも使える）ホーム画面に入れておくと忘れてしまったときや確認したいときにさくっとチェックできるのでとっても便利です。
さいごに
どちらもWebサイトのデザインが綺麗にまとまっていてとても見やすいリファレンスに仕上がっています。
海外サイトですが、ひとつひとつのタグに対して適切な説明が簡単に記載されているだけなので、英語が得意でないひとでも気軽に利用することができます。
（どうしても読めない場合は右クリックで日本語に翻訳するといいかも）
- HTML Reference - A free guide to all HTML elements and attributes.
- CSS Reference - A free visual guide to CSS
HTMLとCSSの基本を理解した段階からゆるゆると使いはじめるのが良いでしょう。
以上『綺麗で見やすいリファレンスサイト「HTML Reference・CSS Reference」がおすすめな理由！』でした。