Warning: "continue" targeting switch is equivalent to "break". Did you mean to use "continue 2"? in /home/users/1/attlabo-ssl/web/buchiko-web.com/wp-content/plugins/all-in-one-seo-pack/modules/aioseop_opengraph.php on line 844
コーディング時に使えるコピペサイト「copypet」 | ぶちろぐ

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

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

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

投稿日:

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

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

 

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

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

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

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

 

まとめ

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

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

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

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

執筆者:


comment

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

関連記事

Webデザイン学習法その1. 独学で勉強する

Webデザインを学習するのに、まずは独学でやってみようと思う人はたくさんいると思います。 そこで今回は、Webデザインを独学で学ぶことのメリットとデメリットについて私なりにまとめてみました。 &nbs …

【Webデザインおすすめ書籍】やってはいけないデザイン

今日はデザインの勉強を始めたばかりの方や、駆け出しのデザイナーさんにおすすめの書籍をご紹介します。   やってはいけないデザイン     こちらの本はノンデザイナー向けのデザイン入門書で、難しい専門用 …

ファビコン制作で参考になるサイト

タブやお気に入りなどで、横に小さくに表示されるファビコンですが、サイズが小さい故に意外とデザインも難しいですよね。。 それでも、ウェブサイトのシンボル、そしてユーザーにウェブサイトを印象付けるための重 …

【Webデザインおすすめ書籍】Webデザイン必携。プロにまなぶ現場の制作ルール84

私が最近読んでタメになった、オススメのWebデザインの本をご紹介します。   Webデザイン必携。プロにまなぶ現場の制作ルール84   図やキャプチャが多く使われていてサクサク読み …

Webデザイン学習法その2. スクールに通う

前回は独学について触れていきましたが、今回はスクールに通うことのメリットとデメリットについてご紹介します。 ちなみに私は、オンラインスクールで4ヶ月間Webデザインを学びました。 そこから感じたことも …