Webデザインをサクッと実装【コードスニペット】のまとめサイト!【Bits】とは?

テクノロジー
スポンサーリンク

みなさんこんにちは!おさかなです!

今回は「Bits」について、書いていこうと思います!

それでは、レッツゴー!!!!!

想定読者
・良い感じのWebデザインを探している方
・コードスニペットを探している方
・HTML/CSS、JavaScriptの学習をしている方

良い感じの「Webデザイン」を作りたい!

おさかな
おさかな

サクッと良い感じの「Webデザイン」を作りたいな〜。

ナビまる
ナビまる

それなら「Bits」を活用してみると良いかも!

おさかな
おさかな

おお!早速使ってみよう!

【ロゴガイドライン】のテンプレートを生成できちゃう!?【Baseline】とは?
みなさんこんにちは!おさかなです!今回は「Baseline」について、書いていこうと思います!それでは、レッツゴー!!!!!想定読者・ブランドのロゴを作りたい方・ロゴデザインが中々決まらない方・ロゴのガイドラインを...

「Bits」って何?

Bits」とは、Creative Timeが作成したコードスニペットのまとめサイトことです。
Bootstrap」や「TailwindCSS」などのCSSフレームワークも使用しており、デザイン性に優れたものがいくつも揃っています!(便利!)

Bits by Creative Tim - Code Snippets for easier coding
An awesome library of Bootstrap and Tailwind CSS snippets to avoid typing repetitive code, no need to download an entire theme. Test your code!
【ぐるぐる】「読み込み中」のアニメーションが見つかる!【CSS loaders and Spinners】とは?
みなさんこんにちは!おさかなです!今回は「CSS loaders and Spinners」について、書いていこうと思います!それでは、レッツゴー!!!!!想定読者・読み込み中のデザインを探している方・ローディング...

実際につかってみよう!

デザインを探そう!

それでは早速サイトにアクセスします!

まずは「VIEW SNIPETS」ボタンをクリックします!(ポチッと)

すると…?
こんな感じで「Bootstrap」のスニペット一覧が表示されました。(おー!)

少しスクロールすると、「TailwindCSS」のスニペットもあります!(いいね!)

気になるデザインを見つけたら、クリックしてみましょう!

すると、「デザインの詳細」「ソースコード」などを見ることができます!(ふむふむ…。)

Edit in JSFiddle」を押すと…?

こんな感じで、JSFiddleからソースコードを編集することもできます!(助かる!)

どうでもいいですが、このデザインは某クソ花戦を思い出しますね。笑

(あと、もう少し…🚩)

実装しよう!

気に入ったデザインを見つけたら、コードをコピーしましょう!(よいしょ!)

適当なエディタに貼り付けましょう!(今回はSublime Text 3を使用しています。)

「CSS」や「JavaScript」は、別ファイルにすることをおすすめしますが、今回はとりあえず

CSS → <style></style>
JS → <script></script>

を使って、全てhtmlファイル内に書いていきます。(横着しました)

(途中経過…。)

編集が終わったら、保存してページを更新してみます!

こんな感じで無事にデザインが反映されました〜!(わ〜い!)

→もっとプログラムを学びたい方はこちら

おさかな
おさかな

コーディングをラクにしよう!

これで全ての操作は完了です。(やった~!)
お疲れ様でした☕

ここまで読んでくださり、ありがとうございました!

【HTML/CSS】コードをコピーするだけで、デザイン実装できちゃう!【Nomad Code】とは?
みなさんこんにちは!おさかなです!今回は「Nomad Code」について、書いていこうと思います!それでは、レッツゴー!!!!!想定読者・HTML/CSSを学習している方・Webデザインを学んでいる方・Webサービ...
おさかな

文章が書けちゃう、新種のおさかなです。

元不登校。紆余曲折あり、現在はエンジニア兼ライターとして活動中。
SAOのユウキが好きです!

おさかなをフォローする
タイトルとURLをコピーしました