そんな疑問に答える本記事です!
こんにちは。いちかわともや(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キー」を押すと、このようにコーディングを簡略化することができます↑↑
コーディングを簡略化するコマンドについては、こちらを参考にしてください↓↓
以上が、Sublime Text3の使い方でした。
ポートフォリオサイトの作り方はコチラ↓↓
Twitterでも、エンジニア向けの技術情報やブログ運営の方法など、役に立つ情報をわかりやすく発信していますので、よろしければフォローをお願いいたします↓↓
イチカワトモヤ@ホテルマンエンジニア(Twitter: @tomochan8282)
Sublime Text3ってどうやって使うの??