フロントエンドコーディング時に便利なジェネレーターサイト（随時更新）

## 更新履歴

### 追加

* 2024/10/23
  * [「ShadeStudio」](#shadestudio)を掲載しました
* 2024/07/22
  * [「CSS Grid Generator」](#css-grid-generator)を掲載しました
* 2024/07/02
  * [「Proportio.app」](#proportioapp)を掲載しました
  * [「CSS Filter Generator」](#css-filter-generator)を掲載しました
* 2024/04/01
  * [「Epic Easing」](#epic-easing)を掲載しました
* 2024/03/07
  * [「Filter Blend」](#filter-blend)を掲載しました
* 2024/03/04
  * [「Tooltips & Speech Bubbles」](#tooltips--speech-bubbles)を掲載しました

<details><summary>2023</summary>

* 2023/07/04
  * [「CSS Box Shadows Generator」](#css-box-shadows-generator)を掲載しました
* 2023/06/29
  * [「Regulex」](#regulex)を掲載しました
* 2023/04/05
  * [「Colorable」](#colorable)を掲載しました
* 2023/03/09
  * [「Scrollbar.app」](#scrollbarapp)を掲載しました
</details>

<details><summary>2022</summary>

* 2022/10/04
  * [「CSS Shadow Palette Generator」](#css-shadow-palette-generator)を掲載しました
* 2022/09/07
  * [「Wayback Machine」](#wayback-machine)を掲載しました
* 2022/05/31
  * [「Min-Max-Value Interpolation」](#min-max-value-interpolation)を掲載しました
* 2022/05/11
  * [「Blob Animation」](#blob-animation)を掲載しました
* 2022/03/28
  * [「CSS Polka Dot Generator」](#css-polka-dot-generator)を掲載しました
* 2022/03/25
  * [「Regex Vis」](#regex-vis)を掲載しました
* 2022/01/31
  * [「CSS Gradient Generator」](#css-gradient-generator)を掲載しました
  * [「CSS2Sass」](#css2sass)を掲載しました
* 2022/01/13
  * [「MESHER」](#mesher)を掲載しました
</details>

<details><summary>2021</summary>

* 2021/12/22
  * [「Pure CSS Stripes Generator」](#pure-css-stripes-generator)を掲載しました
  * [「Glassmorphism Generator」](#glassmorphism-generator)を掲載しました
  * [「Neumorphism Generator」](#neumorphism-generator)を掲載しました
* 2021/11/19
  * [「Tree」](#tree)を掲載しました
* 2021/10/01
  * [「Smooth Shadow」](#smooth-shadow)を掲載しました
* 2021/08/30
  * [「Placehold.jp」](#placeholdjp)を掲載しました
* 2021/04/03
  * [「Glob tester」](#glob-tester)を掲載しました
* 2021/03/05
  * [「アスペクト比計算ツール」](#アスペクト比計算ツール)を掲載しました
* 2021/02/26
  * [「TRIANGLE GENERATOR」](#triangle-generator)を掲載しました
* 2021/02/16
  * [「HTML2Jade」](#html2jade)を掲載しました
* 2021/02/15
  * [「Compressor.io」](#compressorio)を掲載しました
  * [「SVGOMG」](#svgomg)を掲載しました
  * [「Excel To Json Converter」](#excel-to-json-converter)を掲載しました
* 2021/02/05
  * [「Free Markdown to HTML Converter」](#free-markdown-to-html-converter)を掲載しました
  * [「Markdown to PugJS」](#markdown-to-pugjs)を掲載しました
* 2021/01/28
  * [「Table Convert Online」](#table-convert-online)を掲載しました
* 2021/01/22
  * [「Web App Manifest Generator」](#web-app-manifest-generator)を掲載しました
* 2021/01/19
  * [「Print1」](#print1)を掲載しました
</details>

### 削除

* 2024/03/05
  * [「Blob Animation」](https://blobanimation.com/)を削除しました
    * サイトが表示できないため
  * [「JSON Crack」](https://jsoncrack.com/)を削除しました
    * ほとんど利用しないため
  * [「Meta Tags」](https://metatags.io/)を削除しました
    * Xの表示がTwitterのままで、更新されていないようなので
* 2024/03/04
  * [「Sass Color Generator」](http://scg.ar-ch.org/)を削除しました
    * Dart Sass ではSass関数ではなく、ビルトインモジュールを利用するため


## HTML

### HTML2Jade

https://html2jade.org/

:::note info
`HTML` と `Pug` の相互変換ができます。
:::

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/492675/f2649d54-bcab-58a2-ccf4-9824823e8f66.png" width="1000" height="667" decoding="async" loading="lazy">

## CSS

### Proportio.app

https://proportio.app/


:::note info
フォントサイズ、スペース、角丸、影などのバリエーションを自動で作成し、CSS変数としてエクスポートできます。
:::

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/492675/f96ec758-cd2d-1912-7fe3-f5084184721a.png" width="1000" height="667" decoding="async" loading="lazy">

### Min-Max-Value Interpolation

https://min-max-calculator.9elements.com/


:::note info
最小幅から最大幅の間をレスポンシブにするclamp関数を作成できます。
:::

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/492675/0823c81d-f8bb-57f9-4830-4aaa0ea047b5.png" width="1000" height="667" decoding="async" loading="lazy">

### Scrollbar.app

https://scrollbar.app/

:::note info
スクロールバーのデザインを変更するCSSを、表示を確認しながら作成できます。
:::

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/492675/8ce956f8-9c20-a0cd-1812-90750e7ff753.png" width="1000" height="667" decoding="async" loading="lazy">

### TRIANGLE GENERATOR

https://csstriangle.firebaseapp.com/#/

:::note info
CSSの `border` プロパティを利用した三角形を作成できます。
:::

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/492675/8697e04d-c336-903b-1a54-00fc8916525c.png" width="1000" height="667" decoding="async" loading="lazy">

### Clippy

https://bennettfeely.com/clippy/

:::note info
CSSの `clip-path` プロパティをドラッグしながら作成できます。
:::

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/492675/0985c3f1-2ad4-88de-7072-a08754608b67.png" width="1000" height="667" decoding="async" loading="lazy">

### Tooltips & Speech Bubbles

https://css-generators.com/tooltip-speech-bubble/

:::note info
さまざまなタイプの吹き出しを作成できます。
:::

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/492675/e214b852-bdfc-42c7-d91b-16860d59bdb7.png" width="1000" height="667" decoding="async" loading="lazy">

### CSS Polka Dot Generator

https://screenspan.net/polka/

:::note info
ポルカドットの大きさ、数を自由に変更できるパターン柄を作成できます。
:::

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/492675/6dace86c-769c-213f-12ba-5b4a65faa458.png" width="1000" height="667" decoding="async" loading="lazy">

### Pure CSS Stripes Generator

https://stripesgenerator.com/

:::note info
ストライプの角度、色、数を自由に変更できるストライプ柄を作成できます。
:::

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/492675/08ef3e69-258c-3e7d-eb15-7bfb917dab89.png" width="1000" height="667" decoding="async" loading="lazy">

### CSS Filter Generator

https://www.cssfiltergenerator.com/

:::note info
CSSの `filter` プロパティを利用して、確認しながら画像加工できます。
:::

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/492675/6e0ad3eb-b810-10a5-14c1-bbb65a3585e9.png" width="1000" height="667" decoding="async" loading="lazy">

### Filter Blend

https://ilyashubin.github.io/FilterBlend/

:::note info
CSSの `mix-blend-mode` と `filter` プロパティを確認しながら作成できます。
:::

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/492675/982aeab5-d351-afde-f2df-1565a6134c38.png" width="1000" height="667" decoding="async" loading="lazy">

### Glassmorphism Generator

http://santhoshsivan.in/glass.html

:::note info
グラスモーフィズムエフェクトを作成できます。
:::

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/492675/6042b770-068c-e767-c67a-f7ae85ca48b4.png" width="1000" height="667" decoding="async" loading="lazy">

### Neumorphism Generator

http://santhoshsivan.in/neu.html

:::note info
ニューモーフィズムエフェクトを作成できます。
:::

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/492675/b4c256e2-1309-fbfd-f01e-f061f38aaa86.png" width="1000" height="667" decoding="async" loading="lazy">

### CSS Gradient

https://cssgradient.io/

:::note info
グラデーションを作成できます。
:::

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/492675/b04d4cc1-48db-8626-6e07-b69c6dd32397.png" width="1000" height="667" decoding="async" loading="lazy">

### CSS Gradient Generator

https://www.joshwcomeau.com/gradient-generator/

:::note info
グラデーションの中央がグレーに濁らないHSLモードでグラデーションを作成できます。
:::

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/492675/1cc39e48-3432-917e-7150-6fb54d11ecc4.png" width="1000" height="667" decoding="async" loading="lazy">

### MESHER

https://csshero.org/mesher/

:::note info
複雑なメッシュグラデーションを作成できます。
:::

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/492675/2f293e49-019c-8950-c451-4a0fcb6165ef.png" width="1000" height="667" decoding="async" loading="lazy">

### Smooth Shadow

https://shadows.brumm.af/

:::note info
複数のシャドウを重ねて、現実の影のようなシャドウを作成できます。
:::

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/492675/c0a011af-657c-0c08-40ce-deb9297902af.png" width="1000" height="667" decoding="async" loading="lazy">

### CSS Shadow Palette Generator

https://www.joshwcomeau.com/shadow-palette/

:::note info
光源の位置や影の大きさを調整しながら、大中小のシャドウのセットを作成できます。
:::

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/492675/ba6ce940-dc1b-4dd2-0ca5-e28192a490a5.png" width="1000" height="667" decoding="async" loading="lazy">

### CSS Box Shadows Generator

https://boxshadows.xyz/

:::note info
シャドウの重ねがけを確認しながら作成できます。
:::

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/492675/fa841c2c-f0e9-153c-a18d-d25d9cbfe0ef.png" width="1000" height="667" decoding="async" loading="lazy">

### Epic Easing

https://epiceasing.com/

:::note info
アニメーションのイージングを確認しながら作成できます。
:::

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/492675/e4bc0d5c-da9a-c878-909c-2cb9aedeadaf.png" width="1000" height="667" decoding="async" loading="lazy">

### Layoutit Grid

https://grid.layoutit.com/

:::note info
CSS Grid Layout のCSSを確認しながら作成できます。
:::

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/492675/36d8491f-557f-a647-4976-16ffca49c967.png" width="1000" height="667" decoding="async" loading="lazy">

### CSS Grid Generator

https://cssgridgenerator.io/

:::note info
CSS Grid Layout のCSSを直感的に作成できます。
前述の「[Layoutit Grid](#layoutit-grid)」より設定項目が少ないですが、その分シンプルで使いやすいです。
:::

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/492675/003659d1-6374-286f-50cf-434b51270739.png" width="1000" height="667" decoding="async" loading="lazy">

### Autoprefixer CSS online

http://autoprefixer.github.io/

:::note info
入力したCSSに必要なベンダープレフィックスを付与してくれます。
:::

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/492675/873bfea2-f168-02a0-6ea6-a029e427635d.png" width="1000" height="667" decoding="async" loading="lazy">

## Sass

### CSS2Sass

https://css2sass.herokuapp.com/

:::note info
CSSをSassに変換してくれます。
:::

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/492675/3d2bf230-5662-a802-c2da-7cc524178d49.png" width="1000" height="667" decoding="async" loading="lazy">

### SassMeister

https://www.sassmeister.com/

:::note info
Sassのコンパイル結果が確認できます。
mixinやループ処理が正常に動作しているか確認する時に利用しています。
:::

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/492675/f2b48a18-a3af-b19b-86ce-8352fc1beaeb.png" width="1000" height="667" decoding="async" loading="lazy">

## JavaScript

### You might not need jQuery

https://youmightnotneedjquery.com/

:::note info
jQueryの記述をネイティブなJavaScript（Vanilla JS）に変換してくれます。
:::

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/492675/6e18b925-3e3e-4c39-f5a2-1f8bb9563b8c.png" width="1000" height="667" decoding="async" loading="lazy">

### 正規表現チェッカー

https://okumocchi.jp/php/re.php

:::note info
正規表現を検証できます。
:::

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/492675/540c2e24-c25d-e53d-4efd-ab6ce8bd1f22.png" width="1000" height="667" decoding="async" loading="lazy">

### Regulex

https://jex.im/regulex/

:::note info
正規表現ロジックをカラフルでわかりやすく可視化してくれます。
:::

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/492675/f355f0b6-f28d-00f1-3251-01ddff93114b.png" width="1000" height="667" decoding="async" loading="lazy">

### Regex Vis

https://regex-vis.com/

:::note info
正規表現ロジックを可視化しつつ、マッチするか検証できます。
:::

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/492675/a72820ea-652d-b6b3-d5ab-dd282697cfb7.png" width="1000" height="667" decoding="async" loading="lazy">

## Markdown

### Free Markdown to HTML Converter

https://markdowntohtml.com/

:::note info
マークダウンを `HTML` に変換してくれます。
:::

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/492675/7ded4672-62ea-261a-1973-680e83c999a5.png" width="1000" height="667" decoding="async" loading="lazy">

### Markdown to PugJS

https://alexandremasy.com/markdown-to-pug/

:::note info
マークダウンを `Pug` に変換してくれます。
:::

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/492675/201239e4-0d6f-8627-14e7-50e4801c2580.png" width="1000" height="667" decoding="async" loading="lazy">

## 画像

### Compressor.io

https://compressor.io/

:::note info
画像の圧縮ができます。
対応してる拡張子が `jpg, png, gif, svg, webp` と何でもコイの頼もしいやつ。
可逆圧縮、非可逆圧縮も選べます。
:::

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/492675/cd505a7a-18af-1601-b140-e82190ab246c.png" width="1000" height="667" decoding="async" loading="lazy">

### SVGOMG

https://jakearchibald.github.io/svgomg/

:::note info
SVG画像のファイルから不要なデータを取り除き、ファイルサイズを削減します。
実際のSVGファイルの変化を確認しながら取り除くデータを細かく設定できます。
:::

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/492675/c9b08092-54e6-17de-ed93-9909ee0f5eda.png" width="1000" height="667" decoding="async" loading="lazy">

### Patternify

http://www.patternify.com/

:::note info
ドットで作成したパターンを `Base64` に変換してくれます。
わざわざパターン画像を作らなくてすむのでとっても便利です。
:::

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/492675/6c67c618-0515-ec5f-24ab-062c488453a1.png" width="1000" height="667" decoding="async" loading="lazy">

### patternico

https://patternico.com/

:::note info
シームレスなパターン画像を作成できます。
:::

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/492675/2990d39b-86dd-bb09-0149-2029b4255d42.png" width="1000" height="667" decoding="async" loading="lazy">

### placehold.jp

https://placehold.jp/

:::note info
ダミー画像を提供してくれているサイト。
CMSのテンプレート作成時、登録画像が表示される部分に利用しています。
画像内の文字や色も簡単に変更できて便利です。
:::

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/492675/e27a6587-234a-a209-1f96-ba20dd4001f0.png" width="1000" height="667" decoding="async" loading="lazy">

## 色

### ShadeStudio

https://laura.media/shade-studio/

:::note info
1色のHEXカラーコードから、11段階のシェードパレットを生成してくれます。
:::

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/492675/4ab21433-76b0-67c1-07f3-34b1b2da6953.png" width="1000" height="667" decoding="async" loading="lazy">

### Colorable

https://colorable.jxnblk.com/

:::note info
「Web Content Accessibility Guidelines (WCAG)」に基づいた、最適な文字色と背景色の組み合わせを作成できます。
:::

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/492675/3050f2da-e5a6-6a12-3141-9bdde8f7c4c0.png" width="1000" height="667" decoding="async" loading="lazy">

## フォント

### Google Fonts

https://fonts.google.com/

:::note info
Googleが提供する無料のWebフォントサービス。
:::

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/492675/2a2a7049-271a-a3dc-4d30-f825c25dbc3f.png" width="1000" height="667" decoding="async" loading="lazy">

### Fontello

https://fontello.com/

:::note info
アイコンフォントを作成できます。
以下の点が便利です！

* 独自アイコンの追加が可能
* 登録したアイコンの一覧が確認できるhtmlファイルが作成される
* 登録したアイコン情報がjsonファイルとして作成され、後からでもフォントの追加が可能
:::

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/492675/8d735d7b-f657-c97b-a56e-c048aa3fead8.png" width="1000" height="667" decoding="async" loading="lazy">

## アイコン

### Faviconジェネレーター

https://favicon-generator.mintsu-dev.com/

:::note info
マルチアイコンに対応したFaviconを作成できます。
マルチアイコンのサイズが多いので使ってます。
:::

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/492675/262dc271-420d-a73c-ce2c-6289571a0643.png" width="1000" height="667" decoding="async" loading="lazy">

### Favicon Generator for perfect icons on all browsers

https://realfavicongenerator.net/

:::note info
さまざまなデバイスに対応したアイコンを作成できます。
:::

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/492675/b66dd15d-8658-1ce9-12ba-cb4449d50386.png" width="1000" height="667" decoding="async" loading="lazy">

## その他

### Wayback Machine

https://web.archive.org/

:::note info
WEBの魚拓サイト。
リニューアル前のサイトを見たくなった時に助かります。
:::

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/492675/2690a594-012f-7e15-06fd-aaf8a799d34f.png" width="1000" height="667" decoding="async" loading="lazy">

### Tree

https://tree.nathanfriend.io/

:::note info
ディレクトリ構造をテキスト（ASCII文字）で表現してくれます。
:::

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/492675/da47da5b-7b0a-4b3c-9673-6f6527227c92.png" width="1000" height="667" decoding="async" loading="lazy">

### Glob tester

https://globster.xyz/

:::note info
globパターンの検証ができます。
:::

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/492675/d4fab13b-8be7-9107-f2c5-54b56dbe54d7.png" width="1000" height="667" decoding="async" loading="lazy">

### アスペクト比計算ツール

https://aspect.arc-one.jp/

:::note info
アスペクト比の計算ができます。
:::

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/492675/16444d33-f82e-386d-ae40-79792308bd18.png" width="1000" height="667" decoding="async" loading="lazy">

### Excel To Json Converter

https://beautifytools.com/excel-to-json-converter.php

:::note info
ExcelファイルのデータをJSONに変換できます。
:::

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/492675/c5a5f1cf-1c2e-79b8-25b6-1c4f9f0172ef.png" width="1000" height="667" decoding="async" loading="lazy">

このツールは Beautify Tools というサイトに掲載されているツールの1つになります。
他にもめちゃくちゃたくさんのツールが掲載されています。

https://beautifytools.com/

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/492675/c8fc83f8-bfc8-0cf1-23e3-7b0317367b02.png" width="1000" height="667" decoding="async" loading="lazy">

### Table Convert Online

https://tableconvert.com/

:::note info
表組みをさまざまな形式に変換できます。
:::

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/492675/32768cc8-e2d6-6eb5-3e9a-268c214ac5bb.png" width="1000" height="667" decoding="async" loading="lazy">

### Web App Manifest Generator

https://tomitm.github.io/appmanifest/

:::note info
`manifest.json` を作成できます。
:::

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/492675/29dc188a-a6be-c08d-0654-a808d1ca17b3.png" width="1000" height="667" decoding="async" loading="lazy">

### Print1

https://webnaut.jp/tools/print1/

:::note info
長ーいページでも1枚の紙に収めて印刷できます。
:::

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/492675/b4011637-5767-e082-6062-58875ba4c861.png" width="1000" height="667" decoding="async" loading="lazy">

### sitemap.xml Editor

http://www.sitemapxml.jp/

:::note info
最大1000URLまでのXMLサイトマップを作成できます。
除外ディレクトリも指定できるので便利です。
:::

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/492675/792a75b5-f2fb-8220-775c-b8187890b79d.png" width="1000" height="667" decoding="async" loading="lazy">

### ベーシック認証用 .htacess 作成ツール

https://www.softel.co.jp/labs/tools/basic-auth/

:::note info
ベーシック認証に必要な `.htaccess` と `.htpasswd` に記述するコードを作成できます。
:::

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/492675/486d9e1d-3b5f-415e-ca6d-721eda3a5d7e.png" width="1000" height="667" decoding="async" loading="lazy">

## 関連記事

<!-- フロントエンドコーディング時に便利な Visual Studio Code 拡張機能（随時更新） -->
https://qiita.com/taqumo/items/cdd7a9ecd631ecc37793

<!-- フロントエンドコーディング時に便利なChrome拡張機能（随時更新） -->
https://qiita.com/taqumo/items/b2cc6807bc3ca31a5063

<!-- フロントエンドコーディング後によく利用するチェックサイト（随時更新） -->
https://qiita.com/taqumo/items/c5d20a6339045021f395