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

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

関連記事

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

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

参考にしたい!斜めのラインが印象的なサイト3選

こんにちは、ぶちこです。 私は今斜めグリッドのサイトのデザインに挑戦しているのですが、斜めの角度や、コンテンツ間の余白の取り方など、レイアウトがなかなか難しく苦戦中です。 そこで、斜めグリットの参考サ …

作業がはかどる!オススメのGoogle Chrome拡張機能5選

こんにちは、ぶちこです。 いきなりですが、みなさんはGoogle Chromeの拡張機能、使いこなしていますか? 私は今までScreen Captureくらいしか拡張機能は使っていなかったのですが、他 …

Webデザイナーの面接で聞かれたこと

Webデザイナーの面接ではどのようなことを聞かれるのか、気になりますよね。 私も面接を受ける前は、どんなことを聞かれるんだろうとドキドキしてました。 そこで今日は、私が制作会社2社の面接を受けて聞かれ …

細いラインがおしゃれなアイコンの素材サイト3選!

最近、「キレイ、シンプル、おしゃれ」といったサイトをいろいろと見ていて気づいたことがあります。 それは、使われている線やアイコンが細めだということ。 そこで今回、細いラインのアイコンを無料で配布してい …