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

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

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

投稿日:

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

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

 

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

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

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

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

 

まとめ

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

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

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

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

執筆者:


comment

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

関連記事

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

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

サイト内の画像を一気に取得できる「Image Cyborg」

今回は、サイト内の画像を一気に取得できる「Image Cyborg」をご紹介します。 画像の多いサイトのリニューアルの時などに便利なオンラインサービスです。   「Image Cyborg」 …

文字タッチツールを使えば、面倒な文字組みが簡単にできる!

   イラストレーターで簡単に文字の大きさや角度を変えたい! …そんなときに便利なのが、文字タッチツールです! この文字タッチツールを使えば、文字をアウトライン化せずに、大きさ・色・回転・カーニング・ …

【Illustrator】配置した背景透明のPSD画像に黒いラインが出てしまう時の対処法

IllustratorはPhotoshopで作成したPSDファイルの配置が可能ですが、背景が透明のPSD画像を配置した時に、絵柄と透明部分の間にわずかな黒いライン(境界線らしきもの)が出てきてしまうこ …

Macユーザー必見!過去のコピー履歴を管理できる「Clipy」のご紹介

パソコンで作業していると、よくURLやテキストをコピーすると思います。 当たり前ですが、ペーストしないうちに新しいものをコピーすると、最初にコピーしたものが分からなくなってしまいますよね。 そんな時、 …