HTML・CSSコーディングするときに役立つサイト

仕事中に「あれ?これってどうするんだっけ」となったときに開くサイトを集めてみました。

CSSレイアウト

CSS三角形作成ツール

CSS三角形作成ツール

疑似要素で三角形を作るときなどに使います。

CSS Flexbox

Flexのチートシートです。とてもお世話になっているサイト。

CSS Flexbox

CSS STRIPE GENERATOR

ストライプの背景を作れます。画像として配置したいときはSVG STRIPE GENERATORもオススメです。

CSS STRIPE GENERATOR

SVG STRIPE GENERATOR

吹き出し

CSS三角形と同じく、毎回忘れがちなのでブクマしてます。

CSSで作る!吹き出しデザインのサンプル19選

フォント・アイコン

Font Awesome 5 Free

Font Awesome 5(Free)

定番のアイコンサイト。フリー版をよく利用します。

Google Font

Google製のwebフォント。webフォント用に最適化されているので導入しやすいです。

Google Font

Google Material Icons

同じくGoogle製のアイコンサイト。シンプルで使いやすいので好き。

Google Material Icons

画像

TinyPNG

画像軽量化サイト。量が多いときはソフトを使いますが、だいたいこれで済ませてます。

TinyPNG

その他

codepen

おなじみ、html・CSS・JSをweb上で編集して共有できるサービス。便利すぎる

codepen

参考サイト

webデザインのパーツ参考のサイト10選の記事も書いてます!よかったら見てね