LINKS

便利だったツールやサイトのリンクまとめです。

HTML / CSS

クロノドライブ HTML辞典HTML4.01だが、説明が見やすい。
MDN HTML 要素リファレンスhtml要素。ブラウザーの互換性も見れる。
The W3C Markup ValidationHTMLバリデーション（文法）チェック
The W3C CSS ValidationCSSバリデーション（文法）チェック
HTML5ガイドライン見やすいHTML5ガイドライン
CSSガイドライン見やすいCSSガイドライン
CSSアーキテクチャ（前編）  （後編）CSS設計の種類が見やすい
HTML特殊文字変換ツールHTML特殊文字をコードに変換
CSS Compressorオンライン上でソースコード整形
Fluid-responsive font-size calculatorレスポンシブ対応のフォントサイズを簡単に定義できるオンラインツール
What The Font似ているフォントを探す
What Font Is似ているフォントを探す（基本的に有料フォントのみ）
HTML Imagemap Generatorクリッカブルマップが作成できるオンラインツール
WebTech技術別にフォーカスした日本国内のWebサイト参考ギャラリー
HeaderLoveヘッダーにフォーカスした日本国内のWebサイト参考ギャラリー

Javascript

jQuery → JavaScript コンバーターありそうでここしかないjQuery → JavaScriptへの変換ツール。
phpの変数をjavascript(jQuery)で処理する方法シンプルでわかりやすいjavascript・jQuary：functionの書き方

WordPress / PHP

PlusersWordPressオリジナルテーマ解説：書籍並みに詳しく、サンプルコードもあり。
はじめてのWPまとめWordPressオリジナルテーマ解説。
Flatsystems PHP Beautifierオンライン上でPHPソースコード整形

Color

原色大辞典カラーネーム。
Adobe Colorカラーパターン作成
Coolorsカラーパターン作成
Palettonカラースキーム作成
Color Blender2つの色の中間色作成
Mobile Palette Generatorメインカラーを設定するだけで、セカンダリカラー・アクセントカラーの3色パレットを生成するツール。
Instant Background Color背景色の濃さを文字色に合わせて自動で調節
uiGradientsグラデーションサンプル。大まかな色別、クリックでのCSSコピー等ここが一番使いやすい。
CSS Gradientグラデーション作成。
CSS Gradient Animator時間と共にアニメーションするグラデーション作成。

IMAGE（画像）

Placehold.jpシンプルなダミー画像作成
placekittenダミー画像作成（猫）
Lorem Picsumダミー画像作成（Unsplash）
ぱくたそ写真素材（人物豊富）
写真AC写真素材
Textures.comテクスチャー・背景素材
PicWishAIによる自動背景切り抜き（サイズ大で精度も高い）
「ペイント3D」での切り抜きWindows10の「ペイント3D」を使い、画像内の人物や物体を半自動で切り抜く
SVG Pattern Makerシンプルな背景パターンを作成、ダウンロード
haikei.app背景パターンを作成、ダウンロード
Patterncooler背景パターンをダウンロード
Pngyu一括画像圧縮フリーソフト（PNG減色化／Windows・Mac）
PNGGauntlet一括画像圧縮フリーソフト（PNG・JPG最適化／Windows）
ImageOptim一括画像圧縮フリーソフト（PNG・JPG最適化／Mac）
Jpeg.ioEPS他、様々なファイル形式に対応しているオンライン画像圧縮サイト。対応ファイル形式：EPS、PSD、JPG、PNG、GIF、BMP、TIFF、WebP。
Print1縦長画像を程よくA4サイズに分割して印刷できる

illustration（イラスト）

ソコスト商用可・フリーイラスト素材
shigureni素朴でかわいい女の子のイラスト素材サイト
Loose Drawing無料で商用可のフリーイラスト素材
Linustockシンプルな線画イラスト素材
ベクターシェルフ無料・商用利用OKのイラスト素材サイト
ハンコでアソブハンコ調のイラスト
Illustration Kitクレジット表記不要で自由に使えるオープンソースのイラスト配布プロジェクト
unDrawクレジット表記不要のイラスト素材サイト（商用利用可）
drawkit logoクレジット表記不要のイラスト素材サイト（商用利用可）
Scaleクレジット表記不要のイラスト素材サイト（商用利用可）
Stock Materialクレジット表記不要のイラスト素材サイト（商用利用可）
Delesignクレジット表記不要のイラスト素材サイト（商用利用可）
Open Peeps表情や髪型、ポーズなどを組み合わせてオリジナルのキャラクターを作れるサイト
Bing Image Creator無料の AI 画像ジェネレーター。アイキャッチ画像を作るのに便利。

ICON（アイコン）

Icongramライブラリ本体設置なしで、URLから1個単位でアイコンを使用できる（「Material Design Icons」「font awesome」「Simple Icons」もあり）
Material SymbolsGoogleの太さや塗りを変えられるアイコン。
Simple Iconsブランドアイコンが豊富（日本国内のhatenaやpixiv等のロゴもあり）。
webサイトの公式ロゴ素材まとめブランドロゴページと色のまとめ
IcoMoonSVG画像からWEBフォント化
icon rainbowアイコンをダウンロード
ICOOON MONOアイコンをダウンロード
FLAT ICON DESIGNカラーアイコンをダウンロード

LOGO / SHAPE（ロゴ・図形）

LOGASTER無料で使えるお手軽かんたんロゴジェネレーター（※透かしあり）
Brandmark Logo MakerAIロゴメーカー
テキストロゴ・アイコン画像作成メーカー・ツールテキストから、かんたんなアイコン画像作成
フキダシデザインフキダシをダウンロード
FRAME Design（フレームデザイン）1000以上の飾り枠のある素材サイト
CSS三角形作成ツールシンプルなCSS三角形作成ジェネレーター
CSS吹き出しジェネレーター | Webspe Toolsかなり細かく設定できて、使い方もわかりやすい吹き出しジェネレーター
Basic Pattern Repositoryシンプルで使いやすそうなSVGパターン集
Underline Generatorシンプルで使いやすそうなアンダーライン・マーカージェネレーター。
works-thumbnail-generatorかんたんモックアップ画像作成ジェネレーター。

LIBRARY（ライブラリ・コンポーネント）

HAMBURGERSクラス名だけでハンバーガーアイコン
headers.css17種類のヘッダーデザインまとめ
HeaderLoveヘッダーデザインの参考色々
box-shadow examplesコピペでそのまま使える、box-shadowのサンプル集
CSS Arrow PleaseCSSフキダシ ジェネレーター
Neumorphism.ioNeumorphism（ニューモーフィズム）を確認しながら調整できるオンラインツール。
Glass MorphismGlass Morphism（グラスモーフィズム）を確認しながら調整できるオンラインツール。
ウェブ地図を使う際の注意点などまとめOpenStreetMapと地図サービスについてのまとめ記事
OpenStreetMapで画像化「OpenStreetMap」と「まち歩きマップメーカー」を利用した地図のSVG化記事
city roads「OpenStreetMap」と「まち歩きマップメーカー」を利用した地図のライン化

ANIMATION（アニメーション）

Hover.cssお手軽CSSアニメーションライブラリ。
Animistaジェネレーターで使えるCSSアニメーションサイト。
Imagehover.cssシンプルなclassで使える画像向けhoverライブラリ。
hoverエフェクト28選 | SONICMOOV LABコピペで使えるhoverサンプル集。
Moving Lettersanime.jsを使用したテキストエフェクト集。
textillate.jsクラスで使えるテキストアニメーションライブラリ。
SpinKit | Simple CSS Spinnersコピペで使えるシンプルなローディングスピナー。

MOVIE（動画）

CMAN テキスト→音声変換商用利用できるテキスト→音声への変換サイト。速度:-1にすると「音読さん」と同じくらいになる。
音読さん商用利用できるテキスト→音声への変換サイト。（※無料利用は要クレジット、月5000字まで）
D-elf.comイベント・ナレーション等向きの商用利用可のフリー音楽サイト（※要クレジット）
Mixkit無料で使えるフリーのpremiereテンプレート集

ANALYTICS（SEO・アナリティクス）

Meta Tagsmetaタグをまとめて生成（解説）
favicon.iopngからファビコン作成
GT metrix（解説）ページ表示速度と改善点をチェック

Naming, Text

i2OCR - Free Online Japanese OCR精度の高いOCRサイト
CSSのクラス名を決めるときに使うリストレイアウトclass名の参考に（Qiita）
プログラミングでよく使う英単語のまとめレイアウトclass名の参考に（Qiita）
本の部分の英語名称メモレイアウトclass名の参考に、本の部位の英単語について詳しい。
アンティーク辞典 | GEOGRAPHICAレイアウトclass名の参考に、家具の名称の英単語について詳しい。
体の部位・専門分野・専門医レイアウトclass名の参考に、身体の部位の英単語について詳しい。
Classnamesレイアウトclass名の参考に
terminology01動物分類学に関するおもな用語
五か国語対訳音楽用語一覧日本語から引ける五か国語対応の対訳一覧
emmetチートシートemmet記法の一覧。略語のまとめとしても。
All Acronyms略語、頭字語の検索サイト。投票数がある。
Acronym Finder略語、頭字語の検索サイト
天才英単語 | 英単語の覚え方辞典英語の類語・語源等に詳しい
英語の違い図鑑クラス名で使えそうな英単語のまとめ
ja.ilovetranslation.com日本語から、→ ラテン語に翻訳
lingvanex.com日本語から、→ ラテン語に翻訳
青空文庫の猫たちダミーテキスト用。
Unicode 囲み英数字 - CyberLibrarian囲み英数字。
Unicode 幾何学模様 - CyberLibrarian○（丸）、△（三角）、□（四角）他、記号。
Unicode その他の記号及び矢印 - CyberLibrarian⬅➡（矢印）他、その他の記号。
Unicode 絵記号 - CyberLibrarian絵記号。
kiyaku.jpWebサイト用の「利用規約」「プライバシーポリシー」等のひな型（雛形・テンプレート）を掲載（無料・商用利用可）。

OTHER（その他）

VS Code ショートカットキーボードショートカットリストの日本語訳
EmmetのアクションまとめEmmetのアクション一覧。ここが見やすい。