ラボラジアン 全般
HTML, CSS, JS をすぐに試せるWebサービス
他のサービスが使っている技術・ツールを知る
- Discover and discuss the best software tools and services | StackShare
- 紹介記事
- 有名スタートアップの「Web開発環境」を丸ごと見れる「StackShare」に驚愕！ | シェアしたくなる最新のWebサービス・ITニュース情報をチェック！ APPGIGA!!（アプギガ）
- 紹介記事
多言語対応
- WOVN.io
- Localize your website.
デザイン
レイアウト
- UI Tiles: Website Flowcharts
- 《無料》ホームページテンプレート.com
- 商用可能なレスポンシブWordPressテーマ・ホームページテンプレートが完全無料
- ホームページのデザイン
- クレジット表記を外すのは有料になる。
- Gridpx：グリッドデザイン計算ツール
- Webデザイン便利ツール
- HTML5 UP! Responsive HTML5 and CSS3 Site Templates
- HTMLテンプレートを生成してくれる。
- 1ページで構成されたサイトを作るためのHTML5/CSS3のテンプレート
フォント関連
- Font Awesome
- アイコンフォント
- IcoMoon
- アイコンフォントを生成できる。
- 用意されているアイコンフォントを必要なものだけ使える（有料のアイコンもある）。
- アイコンをフォントとして扱えると、CSSで色やサイズを変更できて便利である。
- Type Scale
- 見出しとか本文のバランスを調整してくれるサービス。
ロゴ作成
- Squarespace Logo
- LOGASTER
- フリーのロゴメーカー
HTMLパーツジェネレーター
- coveloping (https://coveloping.com/) リンク切れ？
- UICloud (http://ui-cloud.com/) リンク切れ？
- Frame
- PCの画面に画像をはめ込んだ画像を作ることができる。
オンラインエディタの追加
- CKEditor.com
- The best web text editor for everyone
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
- 特定の画像からイメージマップを生成できる。
- 画像のいち部分をクリックできるようになる。
画像素材
テスト用に直リンしてよい画像を生成してくれるサービス
たいていは、サイズを指定することができる。
- PlaceIMG
- いろんなタイプの素材を直接リンクからランダムに表示してくれる。
- Placehold.it – Quick and simple image placeholders
- Griddle.it
- グリッド画像を生成してくれる。
動画をランダムに表示する
テクスチャ素材
- フリーテクスチャ素材館
- Subtle Patterns (http://subtlepatterns.com/) リンク切れ
カラーパターン選定
CSS関連
全般
- Can I use… Support tables for HTML5, CSS3, etc
- フロントエンド技術のブラウザ対応状況が分かる。
- Online CSS3 Code Generator With a Simple Graphical Interface – EnjoyCSS
- ウェブ画面上で操作すると、CSSコードを出力してくれる。
- LESS, SASS/SCSS にも変換できる。
CSS拡張言語
- Sass: Syntactically Awesome Style Sheets
- CSSをより便利に使うことができるライブラリ・ツール
CSSフレームワーク
- Bootstrap · The world’s most popular mobile-first and responsive front-end framework.
- Bootstrap Live Customizer v3.3.7
- Bootstrapをカスタマイズできる。
- Foundation for Apps | Playground from ZURB
CSSによる部品生成
- ColorZilla.com
- グラデーションを作ることができる。
- CSS3 Generator
- いろいろなCSSコードを生成することができる。
- CSS triangle generator
- 三角を作ることができる。
- cssarrowplease
- 吹き出しを作ることができる。
- CSS Button Generator
- ボタンを作ることができる。
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関連のツール
- Node.js
- JavaScriptを実行するために使用する。
- webpack
- JavaScriptのコードをモジュール化したり、変換したりするためのツール。
- Jade – Template Engine
- JavaScript用テンプレートライブラリ
- Mocha – the fun, simple, flexible JavaScript test framework
- テスト用フレームワーク
- jQuery
- 有名なJavaScriptライブラリ
HTML部品の生成 (JavaScriptによる)
- ProgressBar.js
- JavaScript で作るプログレスバー
- OsamaElzero/oz-scroll-up
- ページスクロールするとページの一番上に移動するリンクを追加できる。
- jQuery Plugin
ウェブサーバー関連
設定
- htaccess Tester – madewithlove
- .htaccessファイルをテストしてくれる。
サーバーを借りる
- Heroku
- Cloud Application Platform
- Amazon S3
- スケーラブルなクラウドストレージサービス
- 静的サイトを低料金でホスティングできる。
- Xdomain(エックスドメイン)
- 無料レンタルサーバー
- スターサーバー – 無料プラン
- レンタルサーバーの無料プラン
テスト
- ShouldBee
- 自分のウェブサイトをテストする。
- テスト内容を自分で指示できる。
バリデーション
- The W3C Markup Validation Service
- HTMLの問題をチェックできる。
- W3C Link Checker
- リンクをチェックしてくれる。
- OnlineWebCheck.com
- HTMLやCSSに問題がないかチェックしてくれる。
サイトの問題点をチェック
- PageSpeed Insights
- Googleのサービス
- ウェブページの問題点をいろいろ指摘してくれる。
- Mobile Friendly Websites
- Googleのサービス
- モバイルデバイスでの表示に問題がないかチェックできる。
- Nibbler
- ウェブサイトを総合的にチェックしてくれる。
コードチェック
- SideCI
- CI for Build Clean Code and Culture
テストで使う文章データ
その他
- Sciweavers
- Online Latex Equation Editor
