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サービス

  • Ideone.com
  • codepad (http://codepad.org/ サービス修了した? 2021年4月)
  • paiza.IO

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

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

関連記事

no image

【Windows】Folder Painter を使ってフォルダの色を変更する

Folder Painter を使ってフォルダの色を変更する手順を紹介します(Windows環境です)。

Anki

大学入学共通テストの英語音声問題をAnkiのデッキにする

大学入学共通テストの英語音声問題を Anki のデッキにしてみましたので、その手順を紹介します。

ImageMagick

コマンドラインで画像ファイルの画像形式を変換する (ImageMagick)

コマンドラインで画像ファイルの画像形式を変換する (ImageMagick) 方法を紹介します。

Git

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

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

WSL

WSL 2 の Kali Linux で Win-KeX (kali-win-kex) を使う場合の注意点

目次1. はじめに2. Win-KeX の使い方と注意点(1) Kali Linux の導入(2) kali-win-kex パッケージのインストール(3) 注意事項注意点 その1注意点 その2(4) …