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

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

関連記事

Chrome

Chrome のデベロッパーツールでは、リダイレクト直前のレスポンスボディが見られない

目次1. はじめに2. Chrome のデベロッパーツール3. Chrome のデベロッパーツールのバグ?4. Firefox の開発ツールなら大丈夫5. おわりに6. 参考 1. はじめに Web …

Vim

テキストファイルの空行を Vim を使って削除する

テキストファイルの空行を Vim を使って削除する方法を紹介します。

Vim

vi (vim) の終了手順について

私の vi (vim) 終了手順について書いています。

Anki

Ankiのフィールドに表を記述する

Ankiのフィールドに表を記述する。

Vim

pathogen.vim を使って気軽に Vim のプラグインを管理する

Vim というエディタのプラグイン管理に関する話しです。 目次1. まえがき2. pathogen.vim の導入方法3. プラグインの導入方法4. Tips1. 他の環境で同じプラグインを使用する2 …