position: absolute;

あなたのSublime Textを見せてください


この度、『Web制作者のためのSublime Textの教科書 今すぐ最高のエディタを使いこなすプロのノウハウ』という書籍の執筆に参加しました。どうぞよろしくお願いします。

で、この書籍のテーマがSublime Textですので、企画としてみなさんのSublime Textを見せていただきたい!ということになり、そのやり方をご案内します。

Sublime Text というエディターはカスタマイズ性が非常に高いことが売りですので、利用されるみなさんもテーマなどを選んで使っている人も多いと思います。人それぞれ千差万別、がある意味Sublime Textの魅力でもあるので、書籍の発売を記念してこの書籍のFacebookページにみなさんのSublime Textの画面を投稿していただきたい!というのが趣旨です。

ただ、実際のソースコードなど、業務で書いているものなどではいろいろと支障があるので、今回は監修のこもり御大が撮影用にBootstrapから抜き出したものを利用したスクリーンショットの撮影の手順を紹介します。

1.ソースコードを入手する

ソースはGitHubにあるので、Gitクライアンをお持ちの方は

git clone https://github.com/gaspanik/sttp.git

お持ちでない方は、zipをダウンロードして解凍してください。

2.Sublime Textでレポジトリを開く

ダウンロードした「sttp」ディレクトリ(フォルダ)をドラッグ・アンド・ドロップなどでSublime Textでプロジェクトととして開いてください。



3.ファイルを開く

プロジェクトが開いたら、index.htmlcss/bootstrap.cssjs/jquery.jsと3つのファイルがありますのでどれかを開いてください(それら以外のファイルでもかまいませんが)。

4.ウィンドウを分割する

[View] -> [Layout] -> [Columns: 2](ショートカット:[Alt]+[Shift]+[2]/Mac[command]+[option]+[2])でウィンドウを2分割します。

5.別のファイルを開く

分割した右側のウィンドウにフォーカスが当たっている状態で「3」で開いたものと別のファイルを開きます。



6.検索とコマンドパレットを出してスクリーンショットを撮る

[Find] -> [Find](ショートカット[Ctrl/command]+[F])で検索パネルを出し、そのまま[Tools] -> [Command Palette...](ショートカット[Ctrl/command] + [Shift] + [P])でコマンドパレットを出し、その状態でスクリーンショットを撮ります。

7.設定情報を確認

さらに、ユーザー設定ファイルから、color_schemefont_facethemeあたりの情報をコピーしてください。

8.Facebookページに投稿

この書籍のFacebookページに撮影したスクリーンショットと「7」で確認した情報や何かコメントあれば入力して投稿してください!

ご注意

特に賞品などといったことは予定はありません(盛り上がるとインプレスさんが何か考えてくれるかもしれませんが今のところは全くありせん)ので、その辺りご期待されることなくポストして頂ければ。

ただ、執筆陣や監修やFacebookページに「いいね!」しているみなさんから「いいね!」やコメントが寄せられるとは思いますので、Sublime Textユーザー同士の交流のきっかけになればと考えています。

というわけでSublime Textユーザーのみなさん、ご協力いただければ嬉しいです!よろしくお願いします!