Tools

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

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

全般

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

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

多言語対応

デザイン

レイアウト

フォント関連

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

ロゴ作成

HTMLパーツジェネレーター

  • coveloping (https://coveloping.com/) リンク切れ?
  • UICloud (http://ui-cloud.com/) リンク切れ?
  • 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

メールアドレスが公開されることはありません。

関連記事

JavaScript

npm のパッケージを最新版に更新する

目次1. npm のパッケージを最新版に更新するには?2. npm-check-updates を使ってプロジェクト内のパッケージを最新版にする手順1. npm-check-updates をインスト …

Anki

Anki: 学習の流れを図にしました

Ankiにおける学習の流れを図にしました。

Anki

Anki: 新規カードの表示順序を変更する

Ankiで、新規カードの表示順序を変更する方法を紹介します。

Windows

Putty でスクリーン上のやりとりをログファイルに保存する方法

目次1. はじめに2. Putty でログをとる手順3. ログファイルが既に存在していた場合の挙動設定4. おわりに 1. はじめに PuTTY とは、Windows用のターミナルエミュレータです。 …

Vim

Windows: gVim からクリップボードを利用する(キーボードのみ利用)

Windows: gVim からクリップボードを利用する(キーボードのみ利用)方法を紹介します。