calendarcodediamondfacebookfingerglobalgoogleplushatenahomepagetopplainpocketrssservicetwitterwordpresshome2searchfoldernext-arrowback-arrowfirst-arrowlast-arrow

素早く制作できた！Web制作に役立つトレンドのツール一覧

  • 作成：2014/12/22
  • Web制作
Website_Building_Tools

2014年、WPテーマやコーポレートサイト作成時にお世話になったツールと2015年に使いたいツール。素早くコーディングを行うために知っておきたいツールをメモ。

Sponsored Link

もくじ

CSS ツール

SVG / ロングシャドー / ポリゴン作成

エディタ関連

CSS ツール

１．CSS スニペット

css-snippet_tool

色々なCSSテクニックを紹介しているCSS-Tricksから、CSS / Sass / js / WordPress のスニペット集。何かアイデアを得たい時にも便利。

２．CSSアニメーションサンプル

css-animationsample_tool

CSS3のアニメーションライブラリ。クラスを付与するだけで様々なアニメーションを出力してくれます。

３．背景を様々な形に切り抜く ジェネレーター

clipingpath_tool

背景切り抜きジェネレーター。三角形や六角形菱型などを選択し、パスを動かすとプロパティclip-pathのコードを生成してくれるツール。backgroundに画像URLを指定すると画像切り抜きが簡単に出来ます。

４．SCSS/CSSに変換するツール

convert-scss-to-css_tool

オンライン上でSassのコードをCSSに変換出来ます。

５．CSS フレームワークとチートシート

css-framework_tool

フレームワークに沿った記述をしていくだけで今風のデザインを構築出来るので便利。こちらはフレームワークを扱う時に見ておきたいチートシート。

６．CSS3 アイコン

css3-icon_tool

CSS3コードがコピペできる200以上のアイコン集『CSS3 Icons』 | IDEA*IDEAで紹介されてたCSS3だけで表示出来るアイコン集。アイコンをクリックするとコードがポップアップされ、コピーするだけという手軽さ。CSSの勉強にもなります。

７．CSS / JS / HTML コード整形

code-formatting_tool

UIが綺麗なオンラインコード整形ツールならこれ。例えばliだけの要素を貼り付けて「Clean」を押すと、インデント整形・タグの補完などの他、bodyやheadなども挿入してくれます。

８．レスポンシブ モックアップ作成

responsible-mock_tool

表示確認しながら作成しHTML, CSSをダウンロードできるレスポンシブ用モックアップツール。もう一つはプロトタイプ作成ツールのAdobe Edge Reflowについて書かれた記事。RWD用のデザインカンプにかける時間をこれらで短縮。

９．ブラウザ対応表

browser-corres_tool

各ブラウザごとのHTML5/CSS3対応状況を確認する時はこれ。

SVG / ロングシャドー / ポリゴン作成

１０．SVG ブラウザサポート状況確認表

svg-browser_tool

SVGのブラウザサポート状況を確認できる表はこちら。トップのCan I useではCSS/HTML5/SVG/JS APIの一覧と検索が可能です。

１１．SVG ローディングアニメ作成

svg-animation_tool

オンライン上で動くSVGアニメーション生成ツール。コピペできるので簡単。例：一旦Circle 2と3を消しCircle1で形を整えたら、Actors横ボタンで図形を増やします。

１２．SVG 背景作成ジェネレーター

svg-background_tool

ショーケースから任意のサンプルを選択しCode EditでSVGを出力します。トレンドのジオメトリックなパターンもあるので今後使いたいツールです。

１３．SVG パターン背景作成

creating-svg_tool

メニューの＋ボタンで図形のパターンを選択し背景画像として作成することができます。SVGアップロード可能。

１４．ロングシャドウ生成

long-shadow_tool

ロングシャドウを作成するためのPhotoshopプラグインとオンラインジェネレータ。

１５．ポリゴン背景作成

create-polygon_tool

面倒なポリゴン画像をSVG出力してくれるツール。パターンを選択しノイズとサイズを指定可能です。

１６．アイコンフォント

icon-fonts_tool

ウェブアイコンをフォント化したモノクロベースのオシャレなアイコンフォント。Iconvauはフォント生成サービス。

１７．OGP画像シミュレータ

ogp-image-simulator_tool

FacebookのOGP画像シュミレータ。画像をアップロードすれば、様々なサイズのプレビューをその場で確認することができます。

エディタ関連

１８．Sublime Text -プラグイン一覧

st-plugin_tool

主要パッケージの他に入れておきたいもの。Hex-to-RGBAやCan I Useは知りませんでした。処理が遅くなるので入れすぎに注意。

１９．Sublime Text - ショートカット

st-shortcut_tool

Sublime Text のショートカットキーをMacとWin版で分けて見ることができます。

２０．Sublime Text -テーマ

st-theme_tool

テーマを変更したいときに。ColorsublimeはCSS / Rubyなど各コードのカラーをプレビューできるテーマ集。

２１．Emmet - チートシート

emmet-cheat-sheet_tool

Emmetの使い方や例の一覧、公式チートシート。忘れたらここを見ます。

２２．Emmet - 各エディター プラグイン

emmet-plugin_tool

Sublime text、Dreamweaver、Notepad++など様々なエディターに対応したEmmetプラグイン一覧。

２３．VPS操作：コマンド

VPSでファイルを扱う時に。VPSでWordPressを動かす時もターミナルからssh接続してコマンドを打ち込みます。以下結構使うコマンドです。

  • [history] 履歴表示
  • [タブ] 途中まで入力後、tabキーを押すと補完される
  • [su] アカウントを切り替える
  • [pwd] 現在位置
  • [cd ..] 上に上がる
  • [ls] ファイル・ディレクトリ情報を表示
  • [ls -al] .htaccess を確認したいとき
  • [ll] ファイル詳細情報閲覧
  • [chown] 所有者変更
  • [chmod] 権限変更
  • [cp -rp] ファイルをコピー
  • [cp -b file dir] バックアップコピー
  • [mkdir] ディレクトリを作成
  • [touch] 空のファイル作成
  • [unzip] 圧縮ファイル 復元
  • [zip] ファイル圧縮
  • [sftp] 暗号化、sftp接続
  • [scp] リモート⇔ローカルファイル コピー

参考サイト一覧

スポンサード リンク

この記事を書いた人
投稿者：commte

株式会社コムテ代表取締役。2015/8：弊社にてWeb制作スクールを開始。 WebDesign + Web制作 (最新情報 配信)。おっとりした話し方をするおっさん。

URL：西田 鉄平
この後によく読まれている記事

Comments

Leave a Comment

コメントする

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください。