LINKS
便利だったツールやサイトのリンクまとめです。HTML / CSS
| クロノドライブ HTML辞典 | HTML4.01だが、説明が見やすい。 |
|---|---|
| MDN HTML 要素リファレンス | html要素。ブラウザーの互換性も見れる。 |
| The W3C Markup Validation | HTMLバリデーション(文法)チェック |
| The W3C CSS Validation | CSSバリデーション(文法)チェック |
| 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
| Plusers | WordPressオリジナルテーマ解説:書籍並みに詳しく、サンプルコードもあり。 |
|---|---|
| はじめてのWPまとめ | WordPressオリジナルテーマ解説。 |
| Flatsystems PHP Beautifier | オンライン上でPHPソースコード整形 |
Color
| 原色大辞典 | カラーネーム。 |
|---|---|
| Adobe Color | カラーパターン作成 |
| Coolors | カラーパターン作成 |
| Paletton | カラースキーム作成 |
| Color Blender | 2つの色の中間色作成 |
| Mobile Palette Generator | メインカラーを設定するだけで、セカンダリカラー・アクセントカラーの3色パレットを生成するツール。 |
| Instant Background Color | 背景色の濃さを文字色に合わせて自動で調節 |
| uiGradients | グラデーションサンプル。大まかな色別、クリックでのCSSコピー等ここが一番使いやすい。 |
| CSS Gradient | グラデーション作成。 |
| CSS Gradient Animator | 時間と共にアニメーションするグラデーション作成。 |
IMAGE(画像)
| Placehold.jp | シンプルなダミー画像作成 |
|---|---|
| placekitten | ダミー画像作成(猫) |
| Lorem Picsum | ダミー画像作成(Unsplash) |
| ぱくたそ | 写真素材(人物豊富) |
| 写真AC | 写真素材 |
| Textures.com | テクスチャー・背景素材 |
| PicWish | AIによる自動背景切り抜き(サイズ大で精度も高い) |
| 「ペイント3D」での切り抜き | Windows10の「ペイント3D」を使い、画像内の人物や物体を半自動で切り抜く |
| SVG Pattern Maker | シンプルな背景パターンを作成、ダウンロード |
| haikei.app | 背景パターンを作成、ダウンロード |
| Patterncooler | 背景パターンをダウンロード |
| Pngyu | 一括画像圧縮フリーソフト(PNG減色化/Windows・Mac) |
| PNGGauntlet | 一括画像圧縮フリーソフト(PNG・JPG最適化/Windows) |
| ImageOptim | 一括画像圧縮フリーソフト(PNG・JPG最適化/Mac) |
| Jpeg.io | EPS他、様々なファイル形式に対応しているオンライン画像圧縮サイト。対応ファイル形式: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 | 表情や髪型、ポーズなどを組み合わせてオリジナルのキャラクターを作れるサイト |
ICON(アイコン)
| Icongram | ライブラリ本体設置なしで、URLから1個単位でアイコンを使用できる(「Material Design Icons」「font awesome」「Simple Icons」もあり) |
|---|---|
| Material Symbols | Googleの太さや塗りを変えられるアイコン。 |
| Simple Icons | ブランドアイコンが豊富(日本国内のhatenaやpixiv等のロゴもあり)。 |
| webサイトの公式ロゴ素材まとめ | ブランドロゴページと色のまとめ |
| IcoMoon | SVG画像からWEBフォント化 |
| icon rainbow | アイコンをダウンロード |
| ICOOON MONO | アイコンをダウンロード |
| FLAT ICON DESIGN | カラーアイコンをダウンロード |
LOGO / SHAPE(ロゴ・図形)
| LOGASTER | 無料で使えるお手軽かんたんロゴジェネレーター(※透かしあり) |
|---|---|
| Brandmark Logo Maker | AIロゴメーカー |
| テキストロゴ・アイコン画像作成メーカー・ツール | テキストから、かんたんなアイコン画像作成 |
| フキダシデザイン | フキダシをダウンロード |
| FRAME Design(フレームデザイン) | 1000以上の飾り枠のある素材サイト |
| CSS三角形作成ツール | シンプルなCSS三角形作成ジェネレーター |
| CSS吹き出しジェネレーター | Webspe Tools | かなり細かく設定できて、使い方もわかりやすい吹き出しジェネレーター |
| Basic Pattern Repository | シンプルで使いやすそうなSVGパターン集 |
| Underline Generator | シンプルで使いやすそうなアンダーライン・マーカージェネレーター。 |
| works-thumbnail-generator | かんたんモックアップ画像作成ジェネレーター。 |
LIBRARY(ライブラリ・コンポーネント)
| HAMBURGERS | クラス名だけでハンバーガーアイコン |
|---|---|
| headers.css | 17種類のヘッダーデザインまとめ |
| HeaderLove | ヘッダーデザインの参考色々 |
| box-shadow examples | コピペでそのまま使える、box-shadowのサンプル集 |
| CSS Arrow Please | CSSフキダシ ジェネレーター |
| Neumorphism.io | Neumorphism(ニューモーフィズム)を確認しながら調整できるオンラインツール。 |
| Glass Morphism | Glass Morphism(グラスモーフィズム)を確認しながら調整できるオンラインツール。 |
| ウェブ地図を使う際の注意点などまとめ | OpenStreetMapと地図サービスについてのまとめ記事 |
| OpenStreetMapで画像化 | 「OpenStreetMap」と「まち歩きマップメーカー」を利用した地図のSVG化記事 |
| city roads | 「OpenStreetMap」と「まち歩きマップメーカー」を利用した地図のライン化 |
ANIMATION(アニメーション)
| Hover.css | お手軽CSSアニメーションライブラリ。 |
|---|---|
| Animista | ジェネレーターで使えるCSSアニメーションサイト。 |
| Imagehover.css | シンプルなclassで使える画像向けhoverライブラリ。 |
| hoverエフェクト28選 | SONICMOOV LAB | コピペで使えるhoverサンプル集。 |
| Moving Letters | anime.jsを使用したテキストエフェクト集。 |
| textillate.js | クラスで使えるテキストアニメーションライブラリ。 |
| SpinKit | Simple CSS Spinners | コピペで使えるシンプルなローディングスピナー。 |
MOVIE(動画)
| CMAN テキスト→音声変換 | 商用利用できるテキスト→音声への変換サイト。速度:-1にすると「音読さん」と同じくらいになる。 |
|---|---|
| 音読さん | 商用利用できるテキスト→音声への変換サイト。(※無料利用は要クレジット、月5000字まで) |
| D-elf.com | イベント・ナレーション等向きの商用利用可のフリー音楽サイト(※要クレジット) |
| Mixkit | 無料で使えるフリーのpremiereテンプレート集 |
ANALYTICS(SEO・アナリティクス)
| Meta Tags | metaタグをまとめて生成(解説) |
|---|---|
| favicon.io | pngからファビコン作成 |
| GT metrix(解説) | ページ表示速度と改善点をチェック |
Naming, Text
| CSSのクラス名を決めるときに使うリスト | レイアウトclass名の参考に(Qiita) |
|---|---|
| プログラミングでよく使う英単語のまとめ | レイアウトclass名の参考に(Qiita) |
| 本の部分の英語名称メモ | レイアウトclass名の参考に、本の部位の英単語について詳しい。 |
| アンティーク辞典 | GEOGRAPHICA | レイアウトclass名の参考に、家具の名称の英単語について詳しい。 |
| Medical Terminology 体の部位 | レイアウトclass名の参考に、身体の部位の英単語について詳しい。 |
| Classnames | レイアウトclass名の参考に |
| terminology01 | 動物分類学に関するおもな用語 |
| 五か国語対訳音楽用語一覧 | 日本語から引ける五か国語対応の対訳一覧 |
| emmetチートシート | emmet記法の一覧。略語のまとめとしても。 |
| All Acronyms | 略語、頭字語の検索サイト。投票数がある。 |
| Acronym Finder | 略語、頭字語の検索サイト |
| 天才英単語 | 英単語の覚え方辞典 | 英語の類語・語源等に詳しい |
| 英語の違い図鑑 | クラス名で使えそうな英単語のまとめ |
| ja.ilovetranslation.com | 日本語から、→ ラテン語に翻訳 |
| lingvanex.com | 日本語から、→ ラテン語に翻訳 |
| 青空文庫の猫たち | ダミーテキスト用。 |
| Unicode 囲み英数字 - CyberLibrarian | 囲み英数字。 |
| Unicode 幾何学模様 - CyberLibrarian | ○(丸)、△(三角)、□(四角)他、記号。 |
| Unicode その他の記号及び矢印 - CyberLibrarian | ⬅➡(矢印)他、その他の記号。 |
| Unicode 絵記号 - CyberLibrarian | 絵記号。 |
| kiyaku.jp | Webサイト用の「利用規約」「プライバシーポリシー」等のひな型(雛形・テンプレート)を掲載(無料・商用利用可)。 |
OTHER(その他)
| VS Code ショートカット | キーボードショートカットリストの日本語訳 |
|---|---|
| Emmetのアクションまとめ | Emmetのアクション一覧。ここが見やすい。 |