超絶便利、Webデザインパーツのスニペットサイト6選

超絶便利、Webデザインパーツのスニペットサイト6選

コーディングしてるけど、このデザイン、どうしたらいいんだ…

そんなときに使えるサイト、教えちゃいます。

コーディングで悩むときや、手っ取り早くプロトタイプを作りたいときに便利なWebパーツ(スニペット)のサイトをご紹介します。

この記事のもくじ

    ★2020.02.12「See-SS」を追記しました!

    ★2020.02.24「CMAN」を追記しました!

    01.Copypet(こぴぺっと)

    パーツ、装飾系、便利ツール

    すごい…テーブルや矢印、Q&Aなどのパーツから、見出し・ボタンなどの装飾、更にはWeb制作で必要な設定まで幅広く取り扱っています。

    ニャン易度で把握

    簡単~難しい内容は、難易度をあらわす(ニャン易度)で表示されています。

    かわいい!

    copypetはこちら

    02.コピペで簡単!Webパーツ屋

    アイキャッチが良い感じ

    アイキャッチがCSSデザインをキャプチャしてるっぽい?ので、一覧で見たときに「これを使おう!」と想像しやすいです。

    上階層のブログも好き

    もともとはにわマンという方のブログから派生したサイトみたいで、上階層に行くとHPcodeというブログへ飛びます。これがまた便利でタメになります☺

    コピペで簡単!Webパーツ屋はこちら

    私もチョットだけ書いてるよ

    まだまだ数は少ないですが、実はこのブログでもスニペットを紹介しています。

    これからどんどん増やしていきますので、ぜひ見てみてくださいね。

    スニペットの記事一覧

    03.See-SS

    2020.02.12追記

    この記事を更新したすぐ後に、スンゴイサービスが公開されました!

    See-SS

     

    デザインがシンプルで見やすい

    気になったコードをワンクリックで確認できる

    これはコーディングに役立ちそうです。

    See-SSはこちら

    2020.02.24 追記

    04.CMAN 

    ブラウザ上でカスタマイズできる

    このサイトのいいところは、ブラウザ上でカスタマイズしてコピーができるところです。

    いざというときに使いやすい!

    CMANはこちら

    Maromaroスタイルレシピ

    Maromaroスタイルレシピはこちら

    番外・変化球/Codepen

    自分でスニペットを蓄積していきたい

    そんな方には、Codepenも便利だよ!

    もぐでざでもCodepenでスニペットを作って埋め込んでます!

    CSSの読み込みもできるし、更にJSも追加できるからすっごく便利!

    使ってみてね!

    Codepenはこちら

    スニペットもだけど、デザインで迷ったら…?

    ここでCMはいります

    お?
    (MOGUMOGU DESIGN MUSEUM)

    Webデザインパーツと、そのサイト元が分かるまとめサイト「もぐでざ博物館」を公開しています!
    ぜひWebデザイン&コーディングに役立ててね!

    見てね!!

    スポンサーリンク

    おすすめ本の紹介

    直感的にデザインが分かっちゃうスバラシな本です

    余白の大事さがギュッとこの一冊で分かっちゃう

    WP中級者向け。テーマ作成で役立ちます。

    関連記事