Tools

Webプログラミングに役立つサービスたち

投稿日:2016年6月29日 更新日:

全般

HTML, CSS, JS をすぐに試せるWebサービス

他のサービスが使っている技術・ツールを知る

多言語対応

デザイン

レイアウト

フォント関連

  • Font Awesome
    • アイコンフォント
  • IcoMoon
    • アイコンフォントを生成できる。
    • 用意されているアイコンフォントを必要なものだけ使える(有料のアイコンもある)。
    • アイコンをフォントとして扱えると、CSSで色やサイズを変更できて便利である。
  • Type Scale
    • 見出しとか本文のバランスを調整してくれるサービス。

ロゴ作成

HTMLパーツジェネレーター

  • coveloping (https://coveloping.com/) リンク切れ?
  • UICloud
  • Frame
    • PCの画面に画像をはめ込んだ画像を作ることができる。

オンラインエディタの追加

HTMLメールの作成

  • BEE free
    • Free email editor to design responsive design messages

コメント機能の追加

  • Disqus
    • The #1 way to build an audience on your website

レビュー機能の追加

  • Orankl
    • Easy online reviews for ecommerce websites

図を描く

画像圧縮

画像加工

  • sumopaint.com
    • ネット上で Photoshop みたいに画像を編集できる。
  • HTML Imagemap Generator
    • 特定の画像からイメージマップを生成できる。
    • 画像のいち部分をクリックできるようになる。

画像素材

テスト用に直リンしてよい画像を生成してくれるサービス

たいていは、サイズを指定することができる。

動画をランダムに表示する

テクスチャ素材

カラーパターン選定

CSS関連

全般

CSS拡張言語

CSSフレームワーク

CSSによる部品生成

CSSアニメーション

  • Animate.css
    • 軽量で使いやすい。
  • Animatron
    • Free HTML5 Online Animation Maker, Banner Maker and Video Maker

プログラミング

いろいろなプログラミング言語をすぐに試せるWebサービス

JavaScript関連のツール

HTML部品の生成 (JavaScriptによる)

  • ProgressBar.js
    • JavaScript で作るプログレスバー
  • OsamaElzero/oz-scroll-up
    • ページスクロールするとページの一番上に移動するリンクを追加できる。
    • jQuery Plugin

ウェブサーバー関連

設定

サーバーを借りる

テスト

  • ShouldBee
    • 自分のウェブサイトをテストする。
    • テスト内容を自分で指示できる。

バリデーション

サイトの問題点をチェック

  • PageSpeed Insights
    • Googleのサービス
    • ウェブページの問題点をいろいろ指摘してくれる。
  • Mobile Friendly Websites
    • Googleのサービス
    • モバイルデバイスでの表示に問題がないかチェックできる。
  • Nibbler
    • ウェブサイトを総合的にチェックしてくれる。

コードチェック

  • SideCI
    • CI for Build Clean Code and Culture

テストで使う文章データ

その他

📂-Tools
-

執筆者:labo


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

Git

Git でユーザー名とメールアドレスを設定する方法(全体用とプロジェクト用)

Git で、ユーザー名とメールアドレスを設定する方法です。(1) 全体の設定方法と、(2) プロジェクト毎の設定方法の2つを紹介します。 目次1. プロジェクトをまたいだ全体の設定(グローバル, gl …

WSL

WSL 2 で Docker を使うパターン

目次1. はじめに1-1. Docker についての基礎知識1-2. 前提2. WSL 2 ディストロ(Ubuntu) + パッケージのDocker を利用するパターン3. WSL 2 ディストロ(U …

Vim

Vim でHTMLタグの中身を置換するキー操作

Vim でHTMLタグの中身を置換するキー操作について説明します。

Windows

WSL (Windows Subsystem for Linux) の導入と設定

本ページでは、WSL (Windows Subsystem for Linux) の導入と設定についてポイントをまとめています。

Evernote

Android 用 Evernote 8.9 で検索ができない問題

Android 用 Evernote バージョン 8.9 で検索ができない問題についての対応策を書いています。