CSSの項目を具体的なビジュアルとともに一目で理解できるようにまとめたサイト「CSS Reference」

CSSはWebページを表示する際に、「どの要素をどこに配置するのか」を決めるものですが、Webの発展とともにCSSもさまざまな設定が追加されており、「CSSで何ができるのか」という段階でつまずいてしまうことも少なくありません。そんなCSSの項目を視覚化し、一目でどんな効果がでるのかを確かめられるようにまとめたページが「CSS Reference」です。

CSS Reference - A free visual guide to CSS
https://cssreference.io/

サイトにアクセスし、下にスクロールすると……

CSSの項目を分野ごとにまとめた「Collections」と、その下に全ての項目を検索できる検索ボックスが出てきます。例えば「margin」と検索し、出てきた「margin」の項目をクリックしてみます。

左側に分野名と検索ボックス、右側にmarginの説明という2カラムのページに移ります。marginという項目名の右には「どのコレクションに所属している項目なのか」「marginを説明するページへのリンク」「SNSへの共有ボタン」「MDNへのリンク」が表示されています。項目名の下にプロパティの例とそのプロパティを設定した場合の視覚的なイメージが記載されており、その項目を設定しなかった場合に適用されるプロパティには「default」というマークもついています。

marginであれば値を2つだけ設定した場合や3つ設定した場合などの例も記載されています。書いてあることがイマイチ分からなくても右の例を見れば一目瞭然です。

左のカラムで「Animations」をクリックしてみると、Animationsカテゴリに属する項目がまとめられたページが表示されます。検索欄もAnimationsの項目だけになりました。右に表示されている項目欄を見てみると、比較的新しい項目にはその項目をサポートしているブラウザとそのシェアが一覧できるサイト「Can I use」へのリンクも用意されています。

アニメーションの項目では「Play animations」をクリックすると実際にアニメーションが始まり、どのような違いが出るのかがパッと理解できるようになっています。

現在のスタイリング手法の王道とも言えるFlexboxについてはもちろんのこと……

2017年ごろから登場したGridレイアウトに関してもまとまっています。

どの項目にも視覚的なイメージが付いているため、それぞれの項目がどのような設定を行うのかを非常に素早く理解できます。MDNやCan I useへのリンクなども用意されており、まさに至れり尽くせりのサービスです。CSSを書くことになったらまず抑えておきたいと言えるサイトとなっています。