Sublime Text3の使い方【ポートフォリオサイトの作り方❸】

みーちゃん

Sublime Text3ってどうやって使うの??

 

そんな疑問に答える本記事です!

 

こんにちは。いちかわともや(Twitter: @tomochan8282)です。

 

ポートフォリオサイトを編集する時、必要になってくるのが、テキストエディタと呼ばれるアプリケーションです。

 

本記事では、無料で使えるテキストエディタ「Sublime Text3」をご紹介します。

 

Sublime Text3は、シンプルな画面で使いやすく、様々な機能を拡張することができます。

 

僕が初めて使用したのは、「mi」と呼ばれるテキストエディタでしたが、このSublime Text3に変えた時、あまりの操作のしやすさに感動しました。

 

本記事では、Sublime Text3の使い方を解説していきます!

 

Sublime Text3の使い方【ポートフォリオサイトの作り方❸】

Sublime Text3をダウンロード

最初に、Sublime Text3をダウンロードします。

 

 

Sublime Textの公式ページより、「Download」をクリックします↑↑

 

 

ダウンロードページに進みますので、OSを選択してクリックします↑↑

 

 

ダウンロードが完了したら、「Sublime Text.app」をクリックします↑↑

 

 

Sublime Text3が開きました↑↑

 

この状態で「Sublime Text『3』」になっているので、安心してください。

 

便利な機能を追加するための準備

次に、Sublime Text3の便利な機能を追加していくための準備をします。

 

 

「View」より「Show Console」を開きます↑↑

 

 

このような画面(↑)が開きます。

 

import urllib.request,os,hashlib; h = 'eb2297e1a458f27d836c04bb0cbaf282' + 'd0e7a3098092775ccb37ca9d6b2e4b7d'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); by = urllib.request.urlopen( 'http://packagecontrol.io/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); print('Error validating download (got %s instead of %s), please try manual install' % (dh, h)) if dh != h else open(os.path.join( ipp, pf), 'wb' ).write(by)

 

次に、上記のコードをコピーします↑↑

 

 

そして、赤枠の部分にコピーしたコードを貼りつけて、Enterを押します↑↑

 

メニューの日本語化

次に、メニューを日本語化します。

 

 

「Tools(ツール)」>「Command Palette」をクリックします↑↑

 

 

「Package Control: Install Package」と入力し、クリックします↑↑

 

 

「Japanize」と入力し、選択をします↑↑

 

 

このような画面(↑)になれば成功です。

 

カラー指定したコードに色を付ける設定

次は、カラー指定したコードに色を付ける設定をします。

 

 

「Tools(ツール)」>「Command Palette」をクリックします↑↑

 

 

「Package Control: Install Package」と入力し、クリックします↑↑

 

 

「Color Highlighter」と入力し、選択をします↑↑

 

 

この設定をすることで、このように(↑)カラー指定したコードに色が付与され、とても見やすくなります。

 

コーディングを簡単にする設定

最後に、コーディングを簡単にする設定をします。

 

 

「Tools(ツール)」>「Command Palette」をクリックします↑↑

 

 

「Package Control: Install Package」と入力し、クリックします↑↑

 

 

「Emmet」と入力し、選択をします↑↑

 

 

コードを入力後、「tabキー」を押すと、このようにコーディングを簡略化することができます↑↑

 

コーディングを簡略化するコマンドについては、こちらを参考にしてください↓↓

>>参考:Cheat  Sheet

 

以上が、Sublime Text3の使い方でした。

 

ポートフォリオサイトの作り方はコチラ↓↓

 

Twitterでも、エンジニア向けの技術情報やブログ運営の方法など、役に立つ情報をわかりやすく発信していますので、よろしければフォローをお願いいたします↓↓

イチカワトモヤ@ホテルマンエンジニア(Twitter: @tomochan8282

 




コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA