フロントエンドの参考用

#概要
フロントエンドを作成する上で役に立つサイトまとめてみました！！

## メインレイアウト

### bootstrap 
みんな大好きBootstrap。説明不要。

[Bootstrap]
(https://getbootstrap.com/docs/5.0/layout/breakpoints/)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/656158/b7cfcf29-872b-67c1-64af-0a24098c28fb.png)


### tailwindcss
cssのフレームワークでBootstrapを抜いて1位になったcssフレームワーク。
様々なレイアウトを提供している。

[tailwindcss](https://tailwindcss.com/)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/656158/ede1e9e1-22c1-a65b-2a33-911e069381d3.png)


###Google Fonts

googleが提供するfontで、google fontsをfont familyに設定するとどのコンピュータからでもfontが崩れずに表示できるという利点がある。

[Google Fonts](https://fonts.google.com/?preview.text_type=custom&selection.family=Roboto)

[使いかた](https://saruwakakun.com/html-css/basic/google-fonts#section2)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/656158/b129844f-6362-0d26-53bf-293c0da5b622.png)

## アニメーション生成
###Animista

rotateやscaleアップなどのアニメーションを自動生成してくれるサイト。

[Animista](https://animista.net/play/basic/flip-2)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/656158/5725df3c-fd24-7aa5-9d8e-9af1e10a33a4.png)

###Animate On Scroll Library

スクロールアニメーションを提供。

[Animate On Scroll Library](https://michalsnik.github.io/aos/)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/656158/244ebc10-554f-f05d-2eef-37fbc91e9275.png)


###slick

簡単にスライダーを実現。

[slick](https://kenwheeler.github.io/slick/)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/656158/77c9a120-62da-bb90-e987-9e35d4a9deff.png)

カスタマイズ参考記事

[【JavaScript】Swiper.jsを使ったスライダーデモ&カスタマイズ方法](https://webabc.hatenablog.jp/entry/2020/11/03/180131)

### swiper

スライドショーを簡単に実現

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/656158/09531d88-e35a-8775-0b48-0e337ac0b625.png)

カスタマイズ例↓

[【JavaScript】Swiper.jsを使ったスライダーデモ&カスタマイズ方法](https://webabc.hatenablog.jp/entry/2020/11/03/180131)



## css生成
### ストライプ生成
css背景のストライプを生成。

[Pure CSS Stripe Generator](https://stripesgenerator.com/)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/656158/f772e532-a913-ed18-3b9c-0f6e83df1966.png)


###グラデーション生成

cssのグラデーションを生成。

[CSS Gradient](https://cssgradient.io/)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/656158/cf1c71b9-ec3b-3846-5b83-e47dc3d81f0f.png)

###背景の境界線を生成
背景をモダンなサイトのような形状にしてくれるcssを生成してくれるサイト。

[Shape Divider App](https://www.shapedivider.app/)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/656158/032fe36c-50b4-c103-5fdd-af0df14f162f.png)

###動くグラデーションの生成

背景が動くグラデーションを生成できる。

[FUZE](https://fuze.8bit.codes/)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/656158/5d2dce46-9b2f-f618-686e-1d3218bd9cb5.png)



##各パーツ
###ボタンレイアウト

120種類以上のボタンのサンプルとcssを提供。
コピペで使える。

[CSSボタンデザイン120個以上！どこよりも詳しく作り方を解説！](https://jajaaan.co.jp/css/button/)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/656158/09d49af7-9081-9c10-2809-5e3f83868a8d.png)

###ハンバーガーメニュー①

ハンバーガーメニューを好みに合わせて生成。

[Burger Generator](https://burger-generator.com/)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/656158/025bbee3-b774-1ac0-cf27-1d730a7ce008.png)



###ハンバーガーメニュー②

17種類のハンバーガーメニューを提供。

[Tasty CSS-animated hamburgers](https://jonsuh.com/hamburgers/)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/656158/efd2d5a2-3bee-8d8a-ebe3-e3d6146a5f8b.png)


### スライドサイドメニュー
サイドメニューを実現できるプラグイン。

[Drawer](https://git.blivesta.com/drawer/)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/656158/6c6c561d-6696-18af-44eb-4b3e9ade14fc.png)

### pagination
ページーネーションの基本的な機能を網羅しているjsのライブラリ。

[ページネーション（ページ送り）](https://shanabrian.com/web/jquery/pagination.php)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/656158/aff7a4f4-9222-61c6-506b-5c7819778c03.png)


##素材サイト

### 各種まとまっているサイト

ホームページに必要な要素がまとまっている。

[ホームページのパーツ作成【無料】](https://webparts.cman.jp/)

###モダンなサイドバー

今風なサイドバーを紹介。

[今風に作られたスライド式サイドバーのコードスニペット9選](https://goworkship.com/magazine/slide-out-sidebars/)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/656158/b3353785-2f11-9d6d-0c0e-1160ee55c098.png)

###スライダー

jqueryで作成されたスライダーの紹介。

[jQueryスライダープラグイン9選！スライドショーを手軽に作成](https://ferret-plus.com/9396)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/656158/3cc783ec-79a2-ec69-0a86-cc638dcaac05.png)

###デザイン参考

モダンなデザインを参考にできる。

[【初心者必見】Webデザインを楽にするコツ&便利なサイト集！](https://www.jungleocean.com/design/190325design-easy)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/656158/abc41f83-2680-9bfa-832d-081df4c1ff39.png)


###Adobe XDデザインカンプ

Adobe XDのデザインカンプの紹介がされており、ダウンロードしてコーディングの練習ができる。

[Adobe XDの無料テンプレート配布サイト](https://tokyotunes.com/post/20171108-xd-template-collection/)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/656158/277339ff-d80c-f308-2572-11d6c5d4267c.png)

##学習サイト

###keyframeアニメーション

keyframeを利用したアニメーションについてよくまとまっていて非常に学びになる。

[CSSでアニメーション！「animation」と「keyframes」の使い方のおさらい](https://haniwaman.com/css-animation/)


###ボタンの中の要素の上下左右中央揃え

[FontAwesomeのアイコンを真ん中に表示したい](https://teratail.com/questions/186172)


### imageのhoverアクション

#### imageのzoom

[Image hover Zoom n’ Rotate effect with Pure CSS](https://w3bits.com/css-image-hover-zoom/)

#### imageに文字を出す方法


<p class="codepen" data-height="265" data-theme-id="light" data-default-tab="css,result" data-user="marumaru1019" data-slug-hash="LYbxQMw" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="zoom-img">
  <span>See the Pen <a href="https://codepen.io/marumaru1019/pen/LYbxQMw">
  zoom-img</a> by marumaru1019 (<a href="https://codepen.io/marumaru1019">@marumaru1019</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

## flexboxについて

[日本語対応！CSS Flexboxのチートシートを作ったので配布します](https://www.webcreatorbox.com/tech/css-flexbox-cheat-sheet)

## 無料素材サイト

[現役WEBデザイナー8人が教える即実践で使える素材集＆情報サイト33選](https://cardloan.a-tm.co.jp/design/)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/656158/f97ea0b7-ff52-cbfd-f10c-73bb02494594.png)