【CSS】情報収集・学習で必ず確認しておきたいサイト 10選
はじめに
この記事を読んでいるあなたは、普段CSSの情報収集をする際にどのようなサイトを利用しているのだろう？よくネット上では、Qiitaよりも公式ドキュメントを参照するという意見がよく見られる。確かに、MDNなどのようなドキュメントを読むのも一つの手段である。
しかし、QiitaやZennなどの個人が書いている記事にも魅力がある。
そこで、今回の記事ではCSSの情報収集をする際に必ず確認しておきたいサイトを10個紹介する。今後のCSSの学習の質を上げるときに参考になれば幸いだ。
Qiita
日本のプログラマーなら一度使ったことのある情報収集のSNSサービス。CSSやSassのタグをフォローして確認しよう。
Zenn
Qiitaの競合サイト。使い方はQiitaと似ていて、CSSとSassと検索するだけ。
TechFeed
TechFeedにある「Web/フロントエンド」の項目から「CSS」にアクセスすると、CSSに関する情報を収集できる。最新の情報をこのサイトだけで網羅できるので非常におすすめである。
DEV Community
海外版Qiita。タグで#cssあるいは#sassと検索するだけで情報を取得できる。Qiitaと同様に、お気に入りの記事やストックした記事を一覧で表示する機能を持つ。
Medium
海外版note。cssと検索すればCSSのコーディングに必要なテクニックからベストプラクティスまで幅広い内容の情報を取得できる。しかし、一部有料の情報があるので注意が必要。
CSS-tricks
CSSのコーディングに役立つテクニック、ベストプラクティスやトレンドなどに関する情報をまとめた画期的なサイト。CSSで生計を立てているプログラマーは必見である。
codrops
CSSのベストプラクティスを中心に掲載されている海外のWebサイト。CSSだけではなく、JavaScriptで効果的なUIを作る方法も丁寧に解説されているのがポイント。
sidebar
CSSだけではなく、JavaScriptや他のフレームワークを使ったUIデザインの設計のテクニックが満載のWebサイト。CSSのコーディングに関するテクニックはもちろん、AdobeやFigmaなどのデザインツールの基本的な使い方まで網羅的に解説されている。
Modern CSS Solutions
CSSの問題を解いてCSSのコーディングスキルをアップさせられるサイト。スキルを最短で上げる方法は問題を解くことである。問題を解いて、間違った問題を正確に解けるようにするために何度も解き直すことは最強の勉強法だ。CSSの腕試しにはうってつけのサイト。
CSSBattle
CSSを使って絵文字を表現したり、何らかのオブジェクトを作ったりするときの完成度(作ったものがサンプルに限りなく近いかどうかをはかる数値)を確認できるサイト。より本物に近いCSSをコーディングできる力を養える。他のプレイヤーとリアルタイムで対戦できるのが最大の特徴である。Modern CSS Solutionと同様に、自分のCSSスキルを力試しする上ではうってつけ。
参考サイト
Discussion