『See-SS』見やすいCSSデザインをコピペで実装できる

『See-SS』のCSSデザインはとても見やすい

プログラミング学習を始めた人が最初に学ぶのは、恐らくHTMLやCSSでしょう。

学習したことを生かして自分のホームページを立ち上げる人もいます。

ある程度の知識が身に付くと、CSSデザインを工夫してみたり、ほかのサイトのデザインを参考にすることも増えていきますよね。

中でもCSSデザインのサンプル集を集めたサイトは、コピペするだけでお洒落なボタンやアイコンを実装することができて大変便利です。

しかし、HTML&CSSを覚えたてのころというのは、複雑なデザインに憧れてしまいがちで、コードもごちゃごちゃになりやすいのではないでしょうか。

コードは整理されている方が編集しやすいですし、Word Pressならプラグインの恩恵も受けられます。

『See-SS』で紹介されているCSSデザインは、どれも無駄がなく、ミニマルなデザインです。

ここまでシンプルですと逆に美しさすら感じさせてくれます。

新サービスリリースしました🎉🎉

一覧でみやすいCSSコピペサイト 『See-SS』です！

50個以上のデザインパーツが並んでいるので、「これが欲しい！」というのが一発で分かります！
後は、コピペして爆速でWebサイトを作れます！💻

是非、見に来てください！https://t.co/PG2P6qITU2 pic.twitter.com/OAMWT1MUxV

— しがしぃ🐟 (@MyPoZi555) February 10, 2020

サービスをリリースした、しがしぃ@MyPoZi555さんは、日々CSSデザインを追加してくれています。

気になるデザインはコピペボタンを押すだけ

CSSデザインの完成度が高いのも勿論ですが、ウェブの知識が浅いユーザーへの配慮も行き届いています。

気になるCSSデザインの【コードを見る】をクリックすると、画面右側の【HTML】【CSS】のテキストボックスにコードが表示されます。

試しに『See-SS』の“円が回転するローディング”をWordPress上で簡単に実装してみます。

今回エディターはブロックエディターを使います。【＋】ボタンを押して【カスタムHTML】を選択します。

すると、HTMLを入力するブロックが作れます。

HTMLのコードを『See-SS』からコピペしてきます。

コピペしたHTMLコードの下にCSSコードを記述するためのstyleタグ（<style>…</style>）を書いておきます。

HTMLに続いてCSSのコードもコピペしてきます。

CSSのコードをstyleタグの中にペーストします。（<style>と</style>の間にペーストします。）

【カスタムHTML】のプレビューボタンをクリックすると、『See-SS』で選んだCSSデザインが適用されています。

使いたいデザインが探し易い

『See-SS』はあくまでCSSデザインのサンプル集サイトです。

ただ、使いやすいだけではなく、ユーザーが見やすいウェブサイトの設計が随所に見られます。

スペースを活かし、無駄も極力省いているのが分かりやすく、誰でも利用しやすいのです。

◇　参考URL

See-SS