こんにちは。
普段はWebサイト制作やCMS構築を本業で行い、個人開発(JISOUのカリキュラム)でReactでのアプリ作成を行っている者です。
仕事と個人開発でコードを書いたりデザイン/UIを実装する上で、困った際や詰まった際に特に参考にしているサイトを4つほど紹介したいと思います。
皆さんの参考になれば幸いです。
1. MDN Web Docs
- 情報の信頼性が高い
- 掲載されている情報・内容の網羅性が高い。フロントエンド系の基礎情報はほぼ何でも載っている
- 作例付きで掲載されているのでイメージが掴みやすい
私が最も参考にしているサイトの1つ。HTML, CSS, JavaSCript関連で知らないプロパティや記載があったらまず第一に参考にするサイトです。
Mozillaの公式Webサイトのため情報の信頼性・網羅性が高いことが特徴。
学習用ツールというよりは辞書代わりに使っていることが多いです。
2. ICS MEDIA
- 最新技術を応用したJS, CSS, UI周りの記事が豊富
- 更新頻度が高い。情報や知識のキャッチアップに最適
- クリエィティブコーディング、UI実装系の内容に特に強い
株式会社ICS様が運用しているWebメディア。
ICS様はインタラクションデザイン専門のWeb制作会社であり、会社の得意分野であるUI・クリエィティブコーディング周りの情報の充実度が高いです。
更新頻度の高さも特徴でおよそ1週間に1本は新しい記事が投稿されています。
JavaScript, CSSの最新情報・UI周りのAPIの情報に強い一方でデザイン系の記事も充実しているため、デザインとコーディングの双方を理解しておきたいフロントエンドエンジニアにとってはかなりおすすめのサイトだと思っています。
3. Coliss
- 情報量と更新性が非常に高い
- Webデザインで活用できるようなCSS周りの記事が充実している
- 書籍の紹介も多い。気に入った本に出会える機会を増やせる
Webデザイン/Web制作全般についての情報発信をしているサイト。
デザイン系の記事に加えてWeb制作でよく使われるCSS関連の記事が多く、Webデザイナー寄りのエンジニアには非常におすすめのサイトの1つ。
リセットCSS・グリッドデザイン・カスケードレイヤー等、最近のWebサイト制作でよく使われるCSS知識の最新情報に強いため私もよく参考にしています。
4. TAKLOG
- アクセシビリティやユーザビリティを意識したコードを学べる
- ピクセルパーフェクトに近づけるための実装方法を知れる
- 「とりあえず動く」の一歩先のUI実装を意識できるようになる
フロントエンドエンジニアのTAKさんが運営している個人ブログ。
CSS周りの記事が充実しており、特にFigmaに合わせるための実装方法やユーザビリティを意識したマークアップ方法など、Web制作寄りのコーダー/エンジニアが「ただ動く、ただ見た目通りになる」から一歩上の実装をするための知見を多く得ることができます。
掲載されている情報も最新のトレンドに基づいた記事ばかりであり、実務で実装をする際に非常に役に立っています。
よりCSSの知見を深めたい人にはかなりおすすめのサイトだと思っています。
最後に
ここまで読んでいただきありがとうございます。
今回挙げた4サイトはどれも私自身が普段の学習と実務のどちらでも閲覧頻度の高いサイトです。
業務中でも普段の情報キャッチアップでもおすすめできるサイトとなっています。
フロントエンドを学んでいる人たちの参考になれば幸いです。