アラサー主婦のWEBデザイン奮闘記

Webデザイン Web制作 制作お役立ち

コーディング時に使えるコピペサイト「copypet」

投稿日:

今回はコーディングで困った時や、時間を短縮したい時に使えるコピペサイト「copypet」をご紹介します。

パーツや装飾などの指定できるスタイルって、本当にたくさんあって全て覚えるのは難しいと思いますが、そんな時にコピペだけで完結する「copypet」はとても助かりますよ!

 

コーディング時に使えるコピペサイト「copypet」

スタイルはパーツと装飾系の2つのカテゴリーに分けられており、それぞれかなりの数が掲載されています。

パーツのカテゴリーには、テーブルや画像につけるホバーエフェクト、タグ・タブのデザインなど、装飾系のカテゴリーには、見出しやボタンのデザイン、フォーム、アニメーションなどがあります。

真似したい項目をクリックすると下の様に右側にhtmlとcssが表示されるので、ここからコピペをして使いましょう!

 

まとめ

いかがでしたでしょうか?

私自身コーディングの知識はまだまだなのですが、htmlとcssの構造をきちんと理解したら、このような便利なサイトを利用してコーディングの時間を短縮させていきたいなと思います。

ただなんとなく眺めているだけでも、こういう表現もあるんだなあと勉強になるのでオススメですよ!

-Webデザイン, Web制作, 制作お役立ち

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

Macをお得に買うなら、Apple整備済製品がオススメ!

Mac製品を少しでも安く買いたい…という方のために、超お得なApple整備済製品についてご紹介します! 「Apple整備済製品って何?」「どのくらいお得なの?」「商品はちゃんとしてるの?」など、実際に …

【Illustrator】オブジェクトを等間隔にコピーしていく方法

Illustratorでオブジェクトを等間隔にコピーしていく方法をご紹介します。 イラレ使いには常識!?とも思われる機能ですが、これを知っていると、普通のコピー&ペーストに比べて断然作業が早く …

【Illustrator】ドキュメントのタブが消えた時の対処法

突然ですが、みなさんはイラストレータを使用中にドキュメントのタブがいつの間にか消えてしまったことはありませんか? 通常だと開いたドキュメントはコントロールパネルの下にタブで表示されますよね。 ですが、 …

Macbookやスマホなどのモックアップを簡単に作れるサイト「Dimmy.club」

クライアントへの提案書作成時や、サイト内に制作実績を載せたい時など、PCやスマホの画像にサイトのスクリーンショットはめ込んだものを作ることって多々ありますよね。 今回はそんな時に便利なWebサービス「 …

超便利!アイコンフォントを一括検索できる「GlyphSearch」のご紹介

Webサイト制作では、出番の多いアイコン。 私は以前まで画像のアイコン素材を使用していましたが、その存在を知ってからはアイコンフォントに頼りっぱなしです まずアイコンフォントについて簡単に説明すると、 …