Webデザインを学び始めた初学者の方や制作現場の本棚に置いておき、何度も読み返したいおすすめの本を7冊紹介します。やさしく基礎だけを教えるという内容ではなく、Webデザインの学び始めから現場まで長く参考にできる本を集めました。まだチェックしていないものがありましたらぜひ手にとってみてください。

CSSだけでも表現できるデザインが増えてきまして、疑似要素::beforeや::afterなどを駆使することでボタンやテキストリンクへさまざまな装飾することができるようになりました。今回は全部で19パターンのデザインをCSSのみで実装する方法をご紹介します。あなたの現場でぜひご利用ください。

色で悩むことが多く、特にテーマカラーの選択が難しいので目についた色は集めるようにしています。今回はその中でも春を感じる淡い色をご紹介します。季節感だけではなく、優しさ、やわらかさ、軽やかさを表現できますので、イメージに近いものでお悩みの方はぜひ参考にしてみてください。

いざという時に必要な写真やイラスト、アイコン素材。汎用性が高く使いやすい無料の素材配布サイトを集めてみました。ブログなど個人運用のサイトは無料のもので済ませておきたいもの。ぜひ一通り確認してみてください。

よくある質問でよく利用するアコーディオン機能をCSSアニメーションとHTMLで実装する方法です。JavaScriptは不要。IEのみ非対応なのですがPolyfillを使って機能させることができます。

Google Fontsの中から見出しやメインビジュアルのテキストに使えるフォントを12個選んでみました。どれも程よい個性があって目を惹くにピッタリの美しいフォントばかりです。イメージに合わせて使用してみてください。

フェードインアニメーションをCSSのみで実装する方法です。アニメーションを発火させるタイミングの調整ができないので、ヘッダーやメインビジュアルといったファーストビューに使える方法になります。

ページローディングのプログレスバーをCSSアニメーションで実装する方法です。少しのコードで表現できるので実装の手間はかからず予算少なめの案件でも提案しやすいのでおすすめです。

ページ遷移の時にフェードインしながらコンテンツが表示されるアニメーションの実装です。遷移時に演出をつけたい、でも大げさなものは要らないという時にピッタリの表現です。

Webサイトに動画を設置する機会は多くなり、メインビジュアルの背景でループさせているサイトをよく見かけます。その際高画質で見せたいところなのですが、モバイルを考慮するとどうしてもサイズを小さくしないといけなくなり画質が悪くなります。その時にドットフィルターをかけると画質の粗さを目立たなくなるのでよく実装しています。今回はCSSのみでドットフィルターを実装する方法を紹介します。

文章はwrapの中におさめつつ、写真だけ画面横サイズいっぱいに広げたい時のCSSテクニックを紹介します。テキスト用のwrapと写真用のwrapの２つを用意しなくても、同じ親要素内にまとめても写真だけサイズを変更できるので便利。写真を印象的に表現したいページに使えます。

クリエイターを対象にWeb制作関連やフリーランスの働き方など、私が気になったことをTwitter（@pulpxstyle）の投票機能を利用してアンケートを実施しております。意外な結果に自分のスタンダードを覆されるものもあるので、興味深く日頃から質問させてもらっています。今回その結果をまとめて紹介しますのでご覧ください。