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

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

関連記事

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

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

Webデザイナーとして採用されるために、私が作ったポートフォリオの内容をご紹介。

  Webデザイナーの面接には必ずポートフォリオが必要です。     ですが、   ポートフォリオに何を載せたらいいのか分からない… どんな形式で作成すればいいの…?   と悩 …

日本の伝統色を集めた「NIPPON COLORS」のご紹介

和風のデザインを制作するとき、配色の参考になる素晴らしいサイトを見つけたのでご紹介します。 その名も「NIPPON COLORS – 日本の伝統色」といって、日本らしい色の数々がストックさ …

Webデザイン学習法その3. 職業訓練校で勉強する

私は初め、Webデザインを学ぶのに職業訓練校に通おうかな、と考えていました。 結局、スクールに通うことに決めたのですが、 職業訓練について調べる中でメリット・デメリットがあることがよく分かりました。 …

ロゴ制作の際に参考にるサイト【アイディア編】

前回の記事では、ロゴ制作の「ヒアリング内容〜制作の流れ」について、参考になる記事を2つご紹介しました。 そこで今回は、実際にどのようなロゴにするかアイディアを出していく時に参考になるサイトを3つご紹介 …