htmlとcssを利用したwebサイトのパーツ・装飾をコピペで簡単表現「Copypet – こぴぺっと」

どうも。

名もなきデザイナーshoji@です。

 

web制作に必須なhtmlとcssの知識ですが、仕組みだけ理解しておけば書き方を全て覚える必要はありません。

というかパーツや装飾などの指定できるスタイルがありすぎて全て覚えるのは不可能です。

大体は「やりたい事 css」で検索すれば指定の書き方が出てきますが、コピペだけで完結する「Copypet – こぴぺっと」が便利なのでご紹介します。

 

web制作のための便利サイト「Copypet」

 

掲載されているカテゴリーはパーツ系と装飾系に分けられます。

パーツ

  1. Q&A
  2. svg
  3. その他
  4. タイムライン
  5. タグ
  6. タブ切り替え
  7. ツールチップ
  8. テーブル
  9. ナビゲーション
  10. パンくず
  11. フォームセット
  12. ブログカード
  13. メニュー
  14. モーダルウィンドウ
  15. ローディング
  16. 引用
  17. 画像
  18. 矢印

 

装飾系

  1. アニメーション
  2. パターン
  3. フォーム
  4. ボタン
  5. リスト
  6. リボン
  7. リンク
  8. 見出し

これだけカテゴリーが分けられていればパーツの細部のあしらいや装飾などはCopypetだけ見れば十分ですね。

 

試しによく使うボタンパーツの装飾を見てみましょう。

 

ボタンの装飾だけでも15パターンが用意されていました。

  1. シンプルな押したら凹むボタン
  2. HOVERで囲みから塗り潰しに
  3. HOVERで下線がグッと上がる
  4. HOVERで上下のラインがグッとテキストに近づく
  5. HOVERで左右のラインが斜めに倒れる
  6. HOVERで背景のストライプが大きくなる
  7. HOVERでテキストがふわっと光る
  8. 丸いボタンでHOVERでくるくる回る
  9. HOVERでテキストがくるくる上下に回転
  10. 格子の囲みがHOVERで交差がフィット
  11. HOVERで斜めに光が通る
  12. 付箋風ボタンHOVERで付箋の色が横に伸びる
  13. HOVERで左上から斜めに背景の色が変わる
  14. HOVERで中央から斜めに背景の色が変わる
  15. HOVERで枠の色が中央から外に向かって変化

 

画面の左側で実際の動きを確認し、右側にhtmlとcssの表記があります。

コピペして色やサイズを変更するだけで製作中のサイトに実装できます。超簡単。

 

まとめ

copypetはかなりの数が掲載されているのでこのサイトを押さえておけば大体の事は表現できます。

こういう表現もあるんだーと見てるだけでも楽しいし勉強になります。

htmlとcssの構造だけ理解しておいて、後はこのような便利なサイトを利用してコーディングの時間を短縮させましょうね。

 

関連記事:

・HTML&CSS webコーディングにオススメのAdobe公式無料エディタ「Brackets – ブラケッツ」

・Macで簡単!Windowsブラウザチェック無料webツール「browserling – ブラウザリング」

 

ABOUTこの記事をかいた人

・詳しいプロフィールはこちら
ひょんな事からフリーランスデザイナーになったアラサー男子。
海外フェスを回りながら仕事が出来るようなライフスタイルを目指しています。

趣味 : 音楽・一人旅・バイク
海外渡航歴 : スペイン・イタリア・ハワイ・マレーシア・シンガポール・タイ・韓国・台湾・香港