CSSの情報収集できるWEBサイト

WEBデザイナーは比較的プレイヤーの多い印象がありますが、プログラマーに比べて技術よりはセンスが必要なため、WEB制作では重要なポジションでもあります。 しかし最近は、デザイナーでもJavascriptやCSSなどのコーディング技術も重要になってきています。 javascriptはガッツリプログラミングですが、CSSは、デザイン直結スクリプトなため、デザイナーの人でも詳しくなっておく必要は大いにあります。 今回は「CSS-TRICKS」というCSSの情報満載のWEBサイトを見つけたのでご紹介。 （英語ページです） https://css-tricks.com/

サイト紹介

基本的にはCSSに関するブログページがメインで、色々なジャンルで情報を提供しているようです。 HOMEはRootディレクトリで、ブログ記事一覧が表示されています。 ほぼ毎日追加更新されていて、それぞれの質も高いので、ここをウォッチしていると情報をたくさん得られます。 日本人のエンジニアやデザイナーは、国内のWEBサイト（日本語サイト）以外からは情報収集していない人がほとんどなので、こうした英語サイトからの情報インプットをしておくことで、周囲の同じ職種の人との差別化を測ることができるでしょう。 VIDEOページでは、Podcast的なノリで、CSS-Learningを配信しています。 動画はYoutubeプラットフォームを使っているので、Youtubeで登録しておくとスマホでも簡単にみることができますね。 「ALMANAC」って何だ？と考える人も多いでしょうが、直訳すると「暦、年鑑」という事です。 このページには、selectorとpropertyの２ジャンル解説ページにしているようです。 機能名からの検索しかできないので、逆引きができないため、リファレンスページとして利用するのがいいでしょう。 この記事を書いている時に、GALLARYページの上部にあるページネーション機能がバグっていたので、ここは見て見ぬ振りをしておきます・・・orz CSSテクニックを駆使した作品がたくさん掲載されています。 日々更新されているので、定期的にウォッチしておくといいかもしれません。 おそらくこのサイトの最も魅力のあるコンテンツはこの「SNIPPETS」であると言ってもいいでしょう。 CSS以外にも、Javascript,PHP,SCSS他にもたくさんのソースコードのスニペット（簡易コード）がたくさん掲載されています。 Codepenと連動して、ソースコードも見やすく、プレビューも見れて、非常に有意義なコンテンツです。 掲示板も備えていて、StackOverflowや知恵袋的な要素を持っています。 英語の勉強をしている人など、以外と読みやすくていい言語学習としても使えるかもしれませんね。 このサイトにメールアドレスをSignupしておくと、情報更新などをメールで送信してくれます。 そんなメール送信している内容を、きちんとまとめてWEBサイトで見られるように掲載してくれています。 ノリはひと昔前の感覚ですが、改めてこうしたサービスは有用であることがわかりました。 仕事の実績サイトの紹介をしているページかと思ったんですが、実際はCodepenに掲載しているスニペット集になっています。 どうやら仕事で作ったコードをこうしてライブラリ化しているんですね。 プログラマーで言う所のGithubですね。 最後に「GUIDE」ページは、色々なカテゴリに対してのサイト内のページを紹介してくれているようです。 デザイナーが運営しているとは思えないぐらいのシンプル構成のサイトですが、随所にセンスを感じられ、今時でなく、古くなりにくいデザインという風にも思えました。 やはり海外サイトには、有益な情報が満載ですね。 英語に苦手意識を持たずにもっともっと探索していくべきですね。