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

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

関連記事

Web Programming

Webブラウザ上でHTML/CSS/JavaScriptを書いて試すことができるサービスの比較

目次はじめにサービス比較CodePenjsdo.itJSFiddleObservableまとめ はじめに Webブラウザ上で、HTML/CSS/JavaScript を書き、それをその場で実行したり保 …

Git

ファイル(もしくはディレクトリ)を Git による管理から外す手順

Git を使ってファイルやディレクトリの履歴を管理してきたけれど、特定のファイル(もしくはディレクトリ)を Git による管理から外す場合の手順です。 1. ファイル ファイルを実際に削除しつつ、イン …

Windows

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

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

Evernote

Evernoteに自動引き落しさせない方法

Evernoteに自動引き落しさせない方法について説明します。

ICTリテラシー

手軽に画像ファイル(PNG,JPEG)のサイズを小さくする TinyPNG サイト

PNG や JPEG 形式の画像ファイルを、なるべく見た目の品質を維持しつつ、ファイルサイズを小さくしたい場合は、TinyPNG というウェブサイトが手軽で便利です。