Webサイト制作・Web関連の学習をするときに利用するサービスまとめ

当方とは関係ありませんが、役立つツールやサービスを紹介しているページを掲載します。

+ [これ知ってる？WEBの人なら押さえておきたいツール＆サービス50選](http://uraweb.hatenablog.com/entry/2016/08/29/081144)
+ [Webサイト制作や勉強をする際に役立つ便利なツール・サイトまとめ 100 | NxWorld](http://www.nxworld.net/services-resource/useful-resources-for-web-development-and-study.html)
+ [Webアプリの開発で面倒な作業を一発解消してくれる無料Webサービス9選！](http://paiza.hatenablog.com/entry/2015/12/15/Web%E3%82%A2%E3%83%97%E3%83%AA%E3%81%AE%E9%96%8B%E7%99%BA%E3%81%A7%E9%9D%A2%E5%80%92%E3%81%AA%E4%BD%9C%E6%A5%AD%E3%82%92%E4%B8%80%E7%99%BA%E8%A7%A3%E6%B6%88%E3%81%97%E3%81%A6%E3%81%8F%E3%82%8C%E3%82%8B)
+ [それなりに使える、Web制作者がお世話になる便利ツール | コムテブログ](http://commte.net/blog/archives/5547)

#Web制作関連

##デザイン・コーディング

|サイト|備考|
|:--|:--|
|[使いたいときの HTML特殊文字 & 機種依存文字](http://www.benricho.org/symbol/tokusyu_07_mark.html)|特殊文字や機種依存文字のコードを一覧表示|
|[htpasswd用パス作成ツール](http://phpspot.net/php/pghtpasswd%E7%94%A8%E3%83%91%E3%82%B9%E4%BD%9C%E6%88%90%E3%83%84%E3%83%BC%E3%83%AB.html)|Basic認証で使うパスワードを作成|
|[Webデザイン黄金比計算ツール](http://zapanet.info/blog/item/1298)|黄金比を計算|
|[Fontello - icon fonts generator](http://fontello.com/)|Webフォントのアイコン|
|[Adobe Kuler](https://kuler.adobe.com/ja/create/color-wheel/)|補色など関連する色を表示|
|[Paletton - The Color Scheme Designer](http://paletton.com/#uid=1000u0kllllaFw0g0qFqFg0w0aF)|補色など関連する色を表示|
|[0to255](http://0to255.com/)|彩度別の色を表示|
|[Grad3](http://grad3.ecoloniq.jp/)|選択するだけでグラデーションをCSS3で表示|
|[Ultimate CSS Gradient Generator](http://www.colorzilla.com/gradient-editor/)|選択するだけでグラデーションをCSS3で表示|
|[wordmark.it - helps you choose fonts!](http://wordmark.it/)|入力した文字をフォント別に一覧表示|
|[Specificity Calculator](http://specificity.keegan.st/)|入力したCSSの詳細度を計算|
|[Google Fonts](https://www.google.com/fonts)|欧文のWebフォント|
|[TypeSquare](http://typesquare.com/)|モリサワが提供してる日本語のWebフォント|
|[PXtoEM.com](http://pxtoem.com/)|pxと%の単位を変換|

##写真素材

|サイト|備考|
|:--|:--|
|[写真素材・商用無料（フリー）ぱくたそ/PAKUTASO](http://www.pakutaso.com/)||
|[IM Free - Free Design Resources Free Images, Free Icons](http://www.imcreator.com/free)||
|[フリー写真素材 フォトスク](http://photosku.com/)||
|[写真素材 足成【フリーフォト、無料写真素材サイト】](http://www.ashinari.com/)|||[無料の写真素材 フリー画像素材なら.foto project](http://free.foto.ne.jp/)||
|[フリー写真素材 Futta.NET - 無料の風景フリー画像](http://www.futta.net/)||
|[人物専門の写真素材・ストックフォトのモデルピース](http://www.modelpiece.com/)|

##データ圧縮

|サイト|備考|
|:--|:--|
|[JPEGmini](http://www.jpegmini.com/main/my_account#tab/myAlbums)|jpegデータを圧縮|
|[TinyPNG – Compress PNG images while preserving transparency](https://tinypng.com/)|pngデータを圧縮|
|[Compress javascript and css. Amazing code compression. Quick,easy and free!](http://compressor.ebiene.de/)|javascriptやcssのコードを圧縮|

##確認・検証

|サイト|備考|
|:--|:--|
|[Unicorn - W3C 統合検証サービス](http://validator.w3.org/unicorn/?ucn_lang=ja#validate-by-uri+task_conformance+with_options)|HTML/CSSの文章をチェック|
|[リンクチェッカー(リンク切れチェックツール) dead-link-checker.com](http://www.dead-link-checker.com/ja/)|リンク切れをチェック|
|[CSS Lint](http://csslint.net/)|CSSの記述ミスやプロパティの重複などをチェック|

##その他

|サイト|備考|
|:--|:--|
|[Google翻訳](https://translate.google.co.jp/)|翻訳|
|[Toggl - Insanely simple time tracking](https://www.toggl.com/login)|タスク別に時間をカウント|
|[QRコード(二次元バーコード）作成【無料】](http://www.cman.jp/QRcode/)|QRコード作成|
|[Ideone.com](https://ideone.com/)|ブラウザ上でコードの実行や共有|
|[3v4l.org](http://3v4l.org/)|PHPのバージョン別の実行結果を表示|
|[Print1](http://webnaut.jp/tools/print1/)|縦に長い画像を自動分割して1枚で印刷できる無料ツール|
|[Favicon Generator for all platforms: iOS, Android, PC/Mac...](http://realfavicongenerator.net/)|faviconを一括作成|

#Web学習関連

##動画

|サイト|備考|
|:--|:--|
|[ドットインストール](http://dotinstall.com/)|3分動画でマスターする初心者向けプログラミング学習サイト|
|[スクー](https://schoo.jp/)|無料動画のオンライン学習サイト|
|[Learn HTML5, CSS3, Javascript - video style tutorials](http://thecodeplayer.com/)|ライブコーディングの動画サイト|
|[UTokyo OpenCourseWare](http://ocw.u-tokyo.ac.jp/)|東京大学の講義資料・講義映像を無償で公開するWebサイト|

##Q&A

|サイト|備考|
|:--|:--|
|[teratail【テラテイル】](https://teratail.com/)|思考するエンジニアのためのQAプラットフォーム|
|[スタック・オーバーフロー](http://ja.stackoverflow.com/)|プログラマーとプログラミングに熱心の人向けの質問と回答のサイトです|
|[ITエンジニア向け質問・回答コミュニティ - QA@IT](http://qa.atmarkit.co.jp/)|QA@ITは、ベストなQAを蓄積するためのITエンジニア向けの質問・回答コミュニティです|
|[Yahoo!知恵袋](http://chiebukuro.yahoo.co.jp/)|みんなの知恵共有サービス|

##その他

|サイト|備考|
|:--|:--|
|[コードレシピ](http://coderecipe.jp/)|「実際に作ってみたい」初心者のための簡単プログラミングレシピサイトです|
|[Progate](http://prog-8.com/)|オンラインでプログラミングを学べるサービスです|
|[CodeBabes.com ](https://codebabes.com/)|Learn Coding and Web Development the Fun Way!|