htmlとcssを利用したwebサイトのパーツ・装飾をコピペで簡単表現「Copypet – こぴぺっと」

どうも。
フリーランスでグラフィック・web制作をしている名もなきデザイナーshoji@です。

web制作に必須なhtmlとcssの知識ですが、仕組みだけ理解しておけば書き方を全て覚える必要はありません。

というかパーツや装飾などの指定できるスタイルがありすぎて全て覚えるのは不可能です。

大体は「やりたい事　css」で検索すれば指定の書き方が出てきますが、コピペだけで完結する「Copypet – こぴぺっと」が便利なのでご紹介します。

web制作のための便利サイト「Copypet」

掲載されているカテゴリーはパーツ系と装飾系に分けられます。

パーツ

装飾系

これだけカテゴリーが分けられていればパーツの細部のあしらいや装飾などはCopypetだけ見れば十分ですね。

試しによく使うボタンパーツの装飾を見てみましょう。

ボタンの装飾だけでも15パターンが用意されていました。

画面の左側で実際の動きを確認し、右側にhtmlとcssの表記があります。

コピペして色やサイズを変更するだけで製作中のサイトに実装できます。超簡単。

copypetはかなりの数が掲載されているのでこのサイトを押さえておけば大体の事は表現できます。

こういう表現もあるんだーと見てるだけでも楽しいし勉強になります。

htmlとcssの構造だけ理解しておいて、後はこのような便利なサイトを利用してコーディングの時間を短縮させましょうね。

などなど何でもお気軽に連絡いただければと思います。