【完全無料】BoostNoteの特徴や使い方を解説

記事内に商品プロモーションが含まれる場合がございます。本サイトはステマ規制への対応をしてます。

似たようなコードを１から書いたりするのってめんどうですよね。とくに、メニュー部分だったり、フッター、ボタンその他もろもろ。
なのでそんな方向けに、今回は「BoostNote」というエンジニア専用のメモ帳を紹介＆使い方を紹介します。

本記事のもくじ

この記事を書いた人

滝田裕雅

ゆうがブログ運営者・ブロガー

「正しい知識を正しく届ける。」を理念にサイトを運営しています。その分野の専門家の記事や論文、私の実体験をもとに情報に誤りのない記事を作成しています。プロフィールの詳細＆記事編集ポリシーはこちら

BoostNoteとは？特徴を解説

BoostNote （ブーストノート）とは、オフラインで作業ができるエンジニア向けに作られたMarkdownメモ型ソフトウェアです。
初心者でも簡単に操作でき、よく使うHTML/CSS・JS・PHPなどのコードをメモしておける便利ツールです。

つづいてBoostNoteの特徴を解説していきます。

ライブプレビュー機能というの、記述した内容がリアルタイムに反映されるというもので、たとえば、書いたコードにおかしいところがないかをリアルタイムで確認できます。

そのおかげで、ミスに気づきやすくなり本番で失敗しなくなります。

エンジニアあるあるで、コードを書いた後に保存をするのを忘れてコードが消えて萎えるということがあります。しかし、BoostNoteなら自動保存があるのでその心配がいりません。
「保存する」という行為が省けるので余計な手間がなくなります。

BoostNoteは、オフラインのソフトウェアなのでネット環境がない場所でも作業ができます。なので、バグる心配もなく安心です。
またコードを書いているときも重くなることはなく、サクサク作業できるのも特徴です。

上記のリンクからBoostNote公式サイトへアクセスしてください。

下の方へスクロールするとダウンロードリンクがあるので「Mac」or「Windows」を選んでダウンロードしてください。
あとは、手順通りやってもらえれば完了です。

BoostNoteの使い方を、3STEPでスクショを用いて解説していきます。

まずはBoostNoteを開いたらノートを作成するという文字が出るのでノートを作成してください。

続いて、何のためのコードなのかを記入しましょう。
今回は「折りたたみメニュー」という題名として作成しました。

実際にコードを記入していきましょう。
コード開始部分と終わり部分に```を使用すると、Markdown記法によりコピーボタンを押すとコピーできるコードエディタを作る事ができます。

今回の場合、```html```cssとしてコードエディタを作っています。

以上がおおまかな使い方です。Markdown記法になれている方は簡単に使いこなせるかと思います。
個人的には、初心者の方でもできて便利すぎだなという感じです。

今回はweb制作や開発に便利なツール、BoostNoteの使い方を解説していきました。
web制作をしている方なら頻繁に使うコードなどが絶対あると思うので、そのコードの保存先としてBoostNoteを使ってみてください。

下記のリンクよりメガメニューやドロップダウンメニューのHTML/CSSテンプレートを紹介しているので、ぜひBoostNoteに保存してみてください。