つのCoDe.

ソフトとかWebとかアウトプットして覚える

便利なChrome拡張機能を厳選して3本勝手におすすめしたい②

f:id:tsunowa:20181005175841j:plain

 

メインで使用する検索エンジンは Google Chrome です。
そして便利で、もはやなくてはならないのは 拡張機能(アドオン)ですよ。

以前に ”表” にその話しを書きました。

tsunowa.hatenablog.com

 

今回は、主にプログラミングの勉強中なら特に便利な拡張機能について、勝手におすすめしたいという話し。

 

 

「What Font」

わたしはフォントが好きです。
今までで特に美しいなーと思ったのは、広島アンデルセンの「ANDERSEN」の文字です。
これはフォントというよりはロゴタイプですね。
しかし、あれほど美しい文字はちょっとないなーと思うんです。
つまりそれくらいフォントが好きです。

なので気になるフォントを見つけると、直ぐに調べてみたくなります。

このプラグインは、フォントのスタイルやサイズpx値、line-heightの数値までワンクリックで調べられるのでお手軽だし、CSSを書くときなどとても便利です。

何より使い勝手がシンプルなところが良いです。

 

chrome.google.com

 

 

「Page Ruler Redux」

Webページの画像や余白の大きさなどを調べるのに使っています。

html/cssの勉強がある程度終わって美しいWebサイトを模写するときに、これを知ってからはよく使いました。今でも使っています。
これを使うとWebページで表示されるパーツの大きさや余白が簡単に分かるのでとても便利です。

ちなみに模写は有名なプログラミング系ブロガーさんたちがお勧めされているように、とても勉強になります。何より達成感が心地良い。

  chrome.google.com

 

 

「Web Maker」

ドットインストールや書籍で勉強中に出てきたコードと違うやり方を試してみたり、何度も理解を深めたりするのに使っていました。
現在はソースコード再利用目的で、Markdownメモアプリの「Boost Note」と併せて使っています。

 本番は普通にテキストエディタでhtmlやcssやjsファイルをつくってコードを書き、ブラウザで確認して修正したりするのですが、ちょっと違うデザインを軽くためしてみたいなど思いついたときに、ちゃちゃっと使ったりもします。

 Web Makerを立ち上げると、HTMLとCSSとJSとプレビューの窓がすべて並んで表示されているので、プレビューでどのように表示されるコードなのかをひとつひとつ確認しながら入力ができるので気に入っています。

作ったファイルはダウンロードすることができるので、「Code Pen」へ移行することもできます。そうすると例えば、作ったファイルをはてなブログなどに貼りつけたりすることもできます。(最初から「Code Pen」でも良いです)

 

chrome.google.com

 

 

まとめ

今回はプログラミングの勉強中に便利で楽しくなる拡張機能、厳選3本です。

模写で便利な

 1. What Font

 2. Page Ruler Redux

ソースコードの確認に便利な

 3. Web Maker

 

ついでに、併せて使いたいソフトは次の通り

★「Boost Note」

boostnote.io

 

★「Code Pen」 

 https://codepen.io/trending

 

 

最後まで読んでくださって、ありがとうございます。