読者です 読者をやめる 読者になる 読者になる

アプリ魂

はじめてのプログラミング生活

綺麗で見やすいリファレンスサイト「HTML Reference・CSS Reference」がおすすめな理由!

綺麗で見やすいリファレンスサイト「HTML Reference・CSS Reference」がおすすめな理由!

@appdamacyです。今回はHTML・CSSを学習し始めたばかりの初心者でも使えるリファレンスサイトを紹介します。

頻繁に使うことのないものは使用するときのルールを忘れてしまいがちなので、困った時はこれから紹介する2つのサイトを活用してみてください。

HTML Reference

HTML Reference

HTMLタグと付与できる属性が紹介されているリファレンスサイト。無駄な情報は一切なく、必要最低限の説明だけが記載されているのが特徴です。

113個のHTMLタグがひと目で確認できる

HTMLタグ一覧

トップページでHTML要素のタイプが表記されているので、間違えやすいインライン要素とブロック要素がひと目でわかります。

  • またbrタグのような閉じるタグが必要のないものはself-closing
  • head内のみで記述するものはmetaとしてわけられている

ので初心者でも間違いなく適切に使用できるので安心です。チェックマークを外すことで任意のタイプに絞って表示することもできます。

HTMLタグごとに使用できる属性が紹介されている

HTMLタグに付与できる属性

どのように使えるHTMLタグなのかといった説明から、付け加えることができる属性の説明までされています。

さらにいくつかのパターンに分けて実行結果が掲載されているのでひと目で比較することができます。

CSS Reference

CSS Reference

こちらは「HTML Reference」の姉妹サイトで、CSSの基本的な知識が盛りだくさんなリファレンスとなっています。

129個のCSSを視覚的に理解できる

CSSプロパティ一覧

CSSはHTMLで書いたものを装飾することができます。

そのため文章だけでは動作を想像しにくいケースがでてきますが、CSS Referenceではわかりやすい実行結果で視覚的に理解することができるのが特徴です。

以下ではとくに役立ちそうなFlexboxやAnimation周りのプロパティをあげておきます。

Flexboxで自由なレイアウトを組める

Flexboxの使いかた

ボックスの横並びを指定するとき余白の調整などが超絶簡単になるFlexbox。

たくさんの指定方法が用意されていますが、一度覚えてしまうとウェブサイト・ブログをカスタマイズするときの効率が格段にアップするはずです。

個人的に煩わしいFloatを使わなくても指定できるだけでステキです。

CSSアニメーションの基礎を学べる

CSSアニメーションの使いかた

プロパティ説明文の下に用意されている「Play animations」を押してみてください。

それぞれ指定されている条件下でどのような動作をするのかを確認することができます。

これらの動きはスマートフォン問わず見られるので(もちろんサイトでも使える)ホーム画面に入れておくと忘れてしまったときや確認したいときにさくっとチェックできるのでとっても便利です。

さいごに

どちらもWebサイトのデザインが綺麗にまとまっていてとても見やすいリファレンスに仕上がっています。

海外サイトですが、ひとつひとつのタグに対して適切な説明が簡単に記載されているだけなので、英語が得意でないひとでも気軽に利用することができます。

(どうしても読めない場合は右クリックで日本語に翻訳するといいかも)

HTMLとCSSの基本を理解した段階からゆるゆると使いはじめるのが良いでしょう。

以上『綺麗で見やすいリファレンスサイト「HTML Reference・CSS Reference」がおすすめな理由!』でした。

2016 アプリ魂
Powered by Hatena Blog.