MENU

はじめてのWeb制作に役立ったツール集

今回は、Web制作の勉強をしていた時に使っていた便利ツールを紹介します。
これも自分の備忘録含め…(ほんとに何でもすぐ忘れちゃうんですよ。健忘症か?)

①WinSCP

FTPサイトをサーバーにUPするときに使っていました。
もちろんDreamWeaverなどからでもUPはできるのですが、結構使いにくくて…
Webスクールの先生に教えていただいたソフトです!英語ソフトなのですが、操作は直感的にできるので簡単ですよ。

ダウンロードはこちら↓

https://winscp.net/eng/download.php

 

②HTMLエラーチェッカー

作ったサイトにコードのエラーがないかチェックしてくれるGoogle chromeの拡張ツールです。サーバーにUPしないとチェック機能は作動しませんが、「何かサイト表示が変だな?」と思ったときどこが変か一目瞭然でわかるので、とっても便利です!!
あ、これもWebスクールの先生に教えていただきました。

ダウンロードはこちら↓

https://chrome.google.com/webstore/detail/html%E3%82%A8%E3%83%A9%E3%83%BC%E3%83%81%E3%82%A7%E3%83%83%E3%82%AB%E3%83%BC/ohdllebchmmponnofchalfkegpjojcaf?hl=ja

 

③chromeの検証ツール

ディベロッパーツールともいいます。これはソフトとかではなく、Google chromeを使っているときにマウスを右クリックすると【検証】というメニューが出てくる→クリックすると表示されているサイトのコードを全て見ることができます!

割と常識ですが、私はスクールで教えてもらうまでは知りませんでした。はじめは見方が難しかったりしますが、使いこなせるようになるとめちゃくちゃ便利です!
一人でサイトを作っていて辛いのは謎のエラーにぶつかって詰まってしまうときですが、検証ツールくんがいてくれれば大抵のことは解決します!!本当にお世話になってます!

使い方の載っているサイトを見つけました↓

https://ferret-plus.com/1880

 

④CSS3 MAKER

グラデーションやborderの角を丸くするなどのCSSを自動生成することができます。細かい色の調整とかは面倒なので、完成形のイメージからちゃちゃっと作れるのはとても便利ですね。
これもスクールで教えてもらいました。

http://www.css3maker.com/index.html

 

⑤border radius

こちらもCSS3メーカー。数字を入力するだけで簡単にborder-radiusのコードが作れます。

http://border-radius.com/

 

⑥Colourlovers

サイトの色で迷ったとき、眺めていました。自分の引き出しにはない色の組み合わせが見つかったりします!これもスクールでry

http://www.colourlovers.com/

 

以上です。なんだかスクールの受け売りばかりですが…私がガチでお世話になったツールばかりです。こういう裏ワザを教えてくれたという意味でも、スクールは素晴らしかった。(先生、情報流出すみません。。)
他にも思い出したらまた書こうと思います!

 

 

よかったらシェアしてね!

この記事を書いた人

コメント

コメントする

目次
閉じる