href="https://freesoft-concierge.com">フリーソフト情報サイト

Freesoft-Concierge.comはソフト・動画の作り方などの操作方法情報を毎月更新。今すぐ検索を!

メニュー

                            友だち追加

「Sublime Text 3」WEB制作に使えるテキストエディタ

更新日:

sublimetext,無料,テキストエディタ
sublimetext,無料,テキストエディタ

最大6T動画ストレージが無料から? 
プロが作る動画制作がこんな安いの?

Web制作をする際に、重要視したいのがテキストエディタではないでしょうか?多くのエディタが開発されていますが、Web制作の現場でも使われている1つが、フリーソフトであるSublime Text(サブライムテキスト)です。Sublime Textは、HTMLだけではなくPHPやRubyなどのコーディングにも活躍するという、使い勝手抜群なタブ切替型のテキストエディタです。今回は、最新バージョンである「Sublime Text 3」をご紹介します。

Sublime Textをインストールする

Sublime Textは、シェアウェアでありますが、使用期限なく無料でも使うことができます。
まずはソフトをパソコンにセットアップすることから始めましょう。

Sublime Text_2

公式サイトでプログラムファイルをダウンロードしてください。

※所有しているパソコンに合わせてプログラムファイルをダウンロードしてください。
もし分からない場合は、【コントロールパネル > システム】との手順でシステム情報をご確認ください。

※インストールの過程で出てくる「Add to explorer context menu」は、右クリックした際に表示されるコンテキストメニューに「SublimeText」を表示させるかどうかの選択です。
もしも表示させたい場合はチェックを入れてください。

Sublime Text_3

『PackageControl』を導入する

Sublime Textを使用する上で『PackageControl』は大変便利ですので、まずはこちらを導入することをお勧めします。
※PackageControlとは、拡張機能を管理しやすくするためのプログラムです。

メニューから【view > Show Console】を選択します。

Sublime Text_4

下記の文字列をコピーペーストしてEnterキーを押せば完了です。

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

(引用元:Package Control

Sublime Text_5

Sublime Textを拡張する~プラグインの導入

そのままでも使えるのですが、プラグインを導入することによって、さらに使い勝手の良いものとなります。

1.メニューバーから【 Tools > Command Palette 】を開き、《 install 》と入力してから《 Package Control: Install Package 》を選択し、Enterを押す。
2.導入したいプラグインを入力してEnterを押す。

Sublime Text_6

この2つの作業でお好きなプラグインが導入できます。プラグインについては、紹介しているサイトもたくさんあるので、それらを参考になさってください。

Web制作に便利なテキストエディタ

Sublime Textはプログラマーにとって、とても使いやすいソフトです。テキストとしてコードを入力していくだけですが、補助的な役割が強いエディタといえます。

Sublime Text_7

『"』を入れると同時にもう1つ後に続く『"』を自動入力されたり、複数のコードを同時にマークアップしたりと、プログラム入力に特化しています。

Sublime Text_8

先に述べたように、プラグインを導入することによってハイライト表示されたり、エラーチェック・自動補完してくれます。

またコードを入力している途中で、右クリックして【Open in Browser】を選択すると、ブラウザ表示されます。内容を確認しながらWebサイトを制作することが可能です。
※ファイルの拡張子を《.html》で保存するとHTMLファイルとして認識してくれます。

Sublime Text_9

設定を変えたりプラグインを導入することによって、使い勝手は良くなりますので、自分仕様にカスタマイズしながらお使いください。

投稿者:

-HP作成, 文書・画像・HP
-, ,

top
page

Copyright© FreesoftConcierge , 2024 All Rights Reserved.