TweetPocketSublimeTextと言えばコーダーやWeb系プログラマーに人気のコードエディター。開発も盛んに行われ、非常に多くのパッケージ(便利なプラグインみたいなもの)が公開されています。最近僕もCoda2からSublimetext2へ乗り換えたのですが、コーディングをメインに行う人ならやっぱりこっちかな〜と思います。できることが多くて、慣れるまでは普通のテキストエディターとの違いがなく別に乗り換えるほどでもないかと思いがち。そこでこの記事では人気の高いコードエディターを使いこなすためのテクニックを厳選してお届けしたいと思います。SublimeTextを使いこなす10のテクニック1.選択範囲の使い方コーディングの際に修正箇所が出てくるのはよくあることです。これまで使っていたエディターでは置換機能を使って書き換えていましたが、ちょっとした単語の変換などでは逆に効率が悪く感じてました。SublimeTextではそんな置換機能も大変便利になっています。便利なのは選んだ範囲を同時に修正できるところ。以下のようなものがあります。任意の場所にカーソルを置く、異なる単語を同時に修正可能2.Emmetコーディングの使い方Emmetとは特定の記述ルールに従って短いコードを書き、それを展開して使うもの。HTMLとCSSに対応しており、例えばmb10と書いてTabを押すと、margin-bottom:10px;と出力されます。このように全て記述すると長くて大変なコードを短縮して書けるようになるのが大変便利。コード一覧は公式サイトをチェックして下さい。PaletteからEmmetのパッケージをインストールするだけです。CSSの方はスニペットの数が多く、覚えるのが大変でHTMLの展開のみ使用していましたが、最近はCSSでもよく使うようになっています。3.CSSのソートの使い方CSSの記述順って気をつけていても、ついつい適当になってしまいがち。SublimeTextではソートしたい範囲を選択してF5を押すだけでアルファベット順にソートできます。アルファベットじゃちょっと・・・というときはCSSCombというパッケージをインストールしましょう。CSSCombを使えばソートの細かい設定が可能になります。CSSを見やすく整理したいときに是非。4.パッケージコントロールの使い方SublimeTextの醍醐味と言えばやっぱりこれ。豊富なプラグインをインストールすることで標準にはない様々な機能を追加することができます。パッケージコントロールをインストールするにはPackageControlのページにアクセスし、インストールしたSublimeTextのバージョン(2か3)を選んでコードをコピーします。Consoleからコンソールを起動。コンソールの入力欄にコピーしたコードを貼付けてEnterを押せば完了です。Tools->CommandPaletteでコマンドパレットを開きinstallと入力。Packageを選びます。次に出てくる入力欄でインストールしたいパッケージ(プラグイン)名を入力し、出てきた候補のなかから必要なものを選んでインストールします。5.SublimeTextのスニペット機能の使い方よく使うコードのパターンを登録できます。HTMLのときだけ、PHPのときだけのようにシンタックスを指定してスニペットを使用することも可能。Wordpressの独自タグやコメントの挿入などでよく使ってます。登録方法はとっても簡単。snippetでスニペット設定画面を出します。スニペットで設定できるのは以下の通り。実際に作ってみるとこんな感じ。CSSではよくmediaクエリを使うのでスニペットに登録してみました。プレースホルダーを2カ所指定し、トリガーも設定しています。scopeにはCSSとSCSSを指定。Packagesからパッケージを開き、各言語パッケージのtmLanguageファイルにあるstringを調べます(一番下にある)。スニペットのファイル名は何でも良いですが、拡張子に必ずsublime-snippetと入れるようにします。6.CommandPalettの使い方CommandPalettではコマンドの入力でファイルのリネームやスニペットの呼び出しなど大抵のことができるようになっています。こちらもEmmetと同じで一度覚えると大変便利な機能。コマンドパレットを呼び出します。入力欄にrenameと入力するとファイルのリネームができます。その他よく使う機能はこんな感じ。スニペットの呼び出し7.セレクター検索機能の使い方この機能はHTMLやCSSを編集する際によく使います。押すと入力欄が出てくるので、文字列を入力します。この機能を使えば目的のセレクターに素早くアクセスできます。8.SublimeTextのアイコンを変更する方法いつも同じアイコンで飽きてきた方におすすめ。SublimeTextなら簡単にアイコンを変更することができます。アイコンはGoogle検索でも良いですが、おすすめはDribbble。ここでsublimetextやicnsで検索するとハイクオリティなアイコンがたくさん出てきます。ダウンロードしたアイコンは拡張子が.icnsになっていることを確認。iconsで変換できます。アイコンを変更するにはアプリケーション->sublimetext(アプリ名)->右クリックからパッケージの内容を表示->Resourcesにある.icnsファイルを新しいものに置き換えるだけ。このときファイル名はスペースも含めて全く同じものにします。9.SublimeTextのテーマ変更する方法デフォルトのデザインも気に入ってるのですが、Sublimetextではテーマを変更することも可能。手順は以下の通りです。英語のままだとどこに何があるかわからない!という方は日本語化してみましょう。パッケージをインストールすることで簡単にできます。CommandPaletteのinstallからJapanizeをインストールインストール後にでてくる説明文通りにファイルを移動まとめCodaからSublimeTextに切り替えた理由はCodaよりもコーディング向けの機能が揃っているというところです。選択範囲の機能はものすごく使いやすいですね。細かい環境設定やカラースキームの変更方法、もっと便利なパッケージを知りたい!という方はこちらの書籍がおすすめ。最近出版されたばかりで、SublimeTextの最新版である3にも対応しています。SugimoriBootstrapやCMSを使ったテンプレートの作成やカスタマイズ、既存サイトのレスポンシブ化など、多くの案件でフロントエンドを担当。現在はテンプレートエンジニアとしてTetraThemesでテンプレートを開発中。守ってますか?コードの記述ルール。最近ブログの記事はMarkdownで書いているのですが、ふと思ったのが、Markdownで書いたブログ記事ってSEO的に大丈夫なの?ってことです。前回の投稿でグリッドレイアウトの基本的な使い方についてまとめたので、ここではさらにもう一歩突っ込んだ内容のお話をしたいと思います。一度間違ってないか確認しておきましょう。simple1はカラーミーショップ向けレスポンシブテンプレート。カラーミーキットに対応、高品質なスライダー同梱、スマートフォンに最適化されたナビゲーションメニューを搭載。simple1はEC-CUBE2.13系に対応したレスポンシブテンプレートです。画像スライダーにはFlexSliderを採用、Bootstrap3に対応しているため高品質なECサイトを低コストで制作可能です。simple2はカラーミーショップ向けレスポンシブテンプレート。カラーミーキットに対応、高品質なスライダー同梱、スマートフォンに最適化されたナビゲーションメニューを搭載。simple2はEC-CUBE2.13系に対応したレスポンシブテンプレートです。画像スライダーにはFlexSliderを採用、Bootstrap3に対応しているため高品質なECサイトを低コストで制作可能です。MinimalCubeはEC-CUBE2.13に対応したマルチカラムのレスポンシブテンプレート。Bootstrap3を導入し、様々なコンポーネントも簡単に使えてデザインもシンプルなミニマルデザインを採用。TetraThemesはWordpressやカラーミーショップ、EC-CUBEのテンプレートの販売、CMSのカスタマイズ方法、Bootstrapの使い方などWeb制作に関する記事を書いているサイトです。お知らせ【お知らせ】サイトを移行しました。{td_theme_css.after(splited_css);}}});}})();。