バイト先で「新ゆとり世代」と言われました。れこです。 HTML、CSSを省略して書けるZen-Codingの後見、 Emmetについて書こうと思います。 やれCoffeeだTypeScriptだSassだ〜と手をつける前に、 もっと簡単に、デメリット無く作業効率をあげられます。 CoffeeScriptやSassなどのプリプロセッサ系とは違い、 CoffeeやSassの知識を開発メンバー全員が持ってないとならず、 結局自由が効かなくなる、ということはありません。 個人から使えて、チームで使ってもなお良し。 さらに、展開後のカーソルの位置がいい感じだったりと、 細かい気配りまで完璧です。 そんなEmmetを 僕が頻繁に使っている機能に焦点を当てて、紹介したいと思います。 Emmetの導入 Emmetは各種エディタ・IDEのプラグイン形式で配布されています。 お値段は無料です。 Web系の人が
In this article, we’ll dig in to 12 of the best Atom packages for web developers. Atom has plenty of competition — including Visual Studio Code and Sublime Text — but it still holds its own as a popular and competent web development tool. Key Takeaways Atom, a popular and competent web development tool, offers a range of packages to extend its base install, including File Icons, Project Manager, S
Sublime Textのさまざまなパッケージの中から、利用シーン別におすすめのものを紹介。また、Sublime Textのパッケージの基本的な使い方として導入方法や有効化／無効化、削除の方法も説明する。 ← 前回 連載 INDEX 今回はSublime Textのさまざまなパッケージの中から、特におすすめのものを紹介する。 Sublime Textのパッケージ Sublime Text自体はオープンソース・ソフトウェアではないが、内部機能を操作するためのAPI（API Reference - Sublime Text 3 Documentation）が公開されている。また、メジャーなスクリプト言語であるPythonのランタイムが搭載されているので、誰でもパッケージを作成できる。 そのため、パッケージの作成は盛んで、2014年12月時点登録されている公式パッケージは2600以上となっている
※すいません、Package Controlを開くショートカットキーがCtrl+Alt+Pって書いてありましたが、 正しくはCtrl+Shift+Pです！（5/3訂正） 2014/9/3 プレビュー児時のSublimetextフリーズについて追記 恋に落ちるエディタとして名を馳せるSublimetext 3もベータ版ながらに問題なく機能しており人気沸騰中のエディタです！ 最近、やっと僕も手を出し始めたのでメモ代わりに記事にしていきます。 インストール手順も日本語化もスキップして、今日は「Sublimetextでのブラウザプレビュー」について書こうと思います。 これが色々検索したものの、”これだ！”というものにあまりヒットせず… Browser Refreshなんかも有名ですが、何故か僕はショートカットキーが効かず。 純正テキストエディタとまで書かれているSublimetextにとってブラウ
今年SublimeText3に乗り換えてからメニューまわりがうまく表示できなかったので再インストールしました。windowsの場合です。 SublimeTextのアンインストール SublimeText 本体をインストール Package Controlをインストール 日本語化 追加した設定・パッケージ 半角スペースやタブを可視化 全角スペースを可視化 折り返しを解除 shift-jisのファイルを文字化けせずに開きたい。文字コードを表示したい 文字変換の候補が変な位置にでてしまう コーディングの入力補助 タブ移動を順序どおりにする タブが多数開いても重ならないようにする 全てのタブを一気に閉じる テーマ まとめ SublimeTextに追加した設定 基本ユーザー設定 キーバインドユーザー設定 パッケージユーザー設定（trailing_spaces） SublimeTextのアンインストー
Myricaとは Myrica （ミリカ）は、無料で使えるプログラミング用 TrueType フォントです。 視認性、判別性 が高くなるように、複数のフォントから合成され作成されました。 Myricaの特徴Myricaは、多くの特徴をRictyから継承しています。 主な特徴は、以下のように挙げられています。 ASCII文字は「Inconsolata」が適用されます。それ以外の文字には「源真ゴシック」または「Mgen+」が適用されます。半角文字と全角文字の横幅の比が 1:2 に調整されています。視認性の高い日本語文字 (半濁音など) が使用できます。Rictyにない特徴Rictyにない特徴として、ASCII/ひらがな/カタカナにヒンティング情報が付加されています。 これにより、低解像度や、小さな文字サイズで表示させても、可読性が高くなるようになっています。 特徴のイメージ特徴に関するイメージ
■このエントリについて Advent Calendarなるものに初めて参加してみました。 ★Advent Calendarについて Advent Calendarは本来、12月1日から24日までクリスマスを待つまでに1日に1つ、穴が空けられるようになっているカレンダーです。WebでのAdvent Calendarは、その風習に習い、12月1日から25日まで1日に1つ、みんなで記事を投稿していくというイベントです。 いろいろなカレンダーがあるのですが、今回投稿するのはSublime Textというエディタに関するやつです。 http://www.adventar.org/calendars/407 ★Sublime Textについて 普段仕事ではWindowsがメインだった僕が、これからMacをメインに使い始めるにあたって、何か良いエディタはないものかと探していたところSublime Tex
この記事は Sublime Text Advent Calendar 2014 - Adventar の15日目の記事です。 11日目の id:mermaid1112 さんの記事を読んでいたら Sublime Text のプロジェクトについて困っていたので、その対処方法を書きます。 プロジェクトの作成方法 問題1：Sublime Text 3 では開いているプロジェクトを閉じることができない 問題2：Sublime Text 3 ではプロジェクトの一覧に作成したプロジェクトが表示されない Sublime Text のプロジェクトの構成 原因：sublime-workspace ファイルが作成されない 対処方法：sublime-workspace ファイルを作成する 対処方法1：Save Workspace as... で sublime-wokspace ファイルを作成する 対処方法2：S
SublimeText2 は大変便利なテキストエディタですが、shift-jis に対応していないのが玉にキズでした。 そんな時、@umibose さんのツイートが！ Sublime Text 2でSJISもいける！github.com/seanliang/Conv… — Hayakawaさん (@umibose) 2012年10月11日 ふむ、ConvertToUTF8 というものできるのか。というわけで早速試してみました。 以下手順。 1. Sublime Package Control の導入 Installation – Sublime Package Control – a Sublime Text 2 Package Manager by wbond の手順。 まず、SublimeText2 にパッケージコントロールシステムを導入します。(既に入っていればスキップ) Sub
こんにちは、湘南生まれデトロイト育ちのきんぐです。 入社してから1年半ほどWebマーケターをやった後、気付いたらエンジニアになってました。 そんなこんなで異動してから9ヶ月が経ち、合コン等で Q.「お仕事は何されてるんですか？」 A．「うぇ・・うぇぶえんじにあです。ほーむぺーじの運営してます。」 くらいは言えるようになったので、 本日は僕の相棒とも呼べる Sublime Text 2(3)のオススメプラグインを紹介したいと思います。 （そんな技術的なこと書いても、ね。） 私はSublime Text 2を使っていますが、これから導入する方はせっかくなので3使いましょう。 （当時2にあって3にはないプラグインがあった為未だに乗り換えてません） ※Sublime Textのインストール方法などは端折りますので、知りたい方は各自ggってくださいませ。 ■絶対入れるよねプラグイン ●A
本日が決算日の@cappeeです。 Sublime Text 2 + Sass(SCSS) + Compass + Emmet(Zen-Coding) 最強説！ ついにたどり着いてしまったかもしれません。 今話題にもなっている通り上の4つがタッグを組むことでものすごい効率的にコーディングができます。（そこまでまだ使いこなしてないので、正しくは「できそうです」。） せっかくなので導入するにあたり参考にさせていただいたサイトのまとめとつまづいたところなどをメモしておきたいと思います。 導入のキッカケ 話題すぎるほど人気のツールですので導入を検討するために調べてみたりはみなさんすでにしているかと思います。 私はDreamweaverを使用していてEmmet(Zen-Coding)は今までも活用してきたので、さらなるスピードアップを求めてSass+Compassの導入をしようと思っていました。 S
There are many CSS3 properties that are still experimental. An experimental CSS property uses vendor prefix, and as we already know, each browser has their own prefix; Firefox uses -moz-, Internet Explorer uses -ms-, Chrome and Safari use -webkit-, and Opera uses -o- (which has been switched to -webkit- as well). The problem is, unless you are utilizing Compass, including vendor prefix is tedious.
sublime text3 emmet というキーワードで検索されている事が多いようなので、じっくり解説です。 画面はmacのものですが、windowsでも同じような操作でインストールできます。 SublimeTextは、パッケージで機能追加 SublimeTextは、2も３も、パッケージと呼ばれるプラグインで必要な機能を追加していくことができます。 Emmetもパッケージとして配布されています。 パッケージは、パッケージコントロールで。 パッケージコントロールを導入すると、パッケージのインストールが簡単です。 パッケージコントロールの導入方法は、 Sublime Text 3 に Package Control をInstallするのが簡単になったよ - フロントエンドとかPCとかスマホとか を参照してください。 Emmetのインストール Mac：[Sublime Text] - [Pr
1. コードフォーマット パッケージとして提供されている HTML-CSS-JS Prettify を導入する。使い方はソースコードで右クリックして、Prettify Codeを選択。ショートカットは Shift + Command + H。しかるべきところでの改行と、インデントをまとめてしてくれるのでたすかります。 コードフォーマットの設定 Prettify Code コードフォーマットにおけるデフォルトでのインデントの設定はスペースです。設定変更や拡張子の追加などを行う場合は、Performance→Package Setting → HTML/CSS/JS/Prettify → Set Prettify Setting と進むと、設定ファイルが表示されます。(コマンドパレットからも呼び出し可。) インデントの設定を変更する場合は インデントの文字をスペースからタブに dent_cha
Expand Selection to WordでのTipsをいくつか紹介する。 例えば1つおきに編集したい場合などは、Ctrl(Win)／Command(Mac)＋Kキーで選択がスキップできる（図2.1）。また、Ctrl(Win)／Command(Mac)＋Dキーを入力しすぎて、想定よりも多く選択してしまった場合は、Ctrl(Win)／Command(Mac)＋Uキーで、選択をUndoできる。ちなみに、Ctrl(Win)／Command(Mac)＋Uキーは、Ctrl(Win)／Command(Mac)＋ZキーではUndoできないものをサポートしているので、ここで解説している例だけでなく、例えば複数行選択で↓キーを押しすぎた場合などでも利用できる。 また、同じ文字列を一気に複数選択する場合は、Alt＋F3キー（Win）／Ctrl＋Command＋Gキー（Mac）で行える。 Expand S
CPI x CSS Nite x 優クリエイト 「After Dark」（9） 『「今すぐSublime Textを使いこなす！」90分ライブセットアップ』 フォローアップを公開します 記事公開日：2014年4月21日（月） 2014年4月17日(木) 、KDDIウェブコミュニケーションズセミナールーム（麹町）で開催したCPI x CSS Nite x 優クリエイト 「After Dark」（9） 『「今すぐSublime Textを使いこなす！」90分ライブセットアップ』 のフォローアップを公開します。 CPI x CSS Nite x 優クリエイト「After Dark」（9） from CSS Nite on Vimeo. こちらもご覧ください。 CPI x CSS Nite x 優クリエイト 「After Dark」（9）Sublime Textが終了しました | CSS Nite
最近コーディングをする時はすっかりSublimetextを使用するようになりました。 軽さ、機能、プラグインが良くて多用している日々でございます。 Sublimetextの魅力は、いろいろあるのですが、ここでは割愛させていただきます。 代わりに記事を紹介しますので、そちらをご覧下さい。 新しい年に、テキストエディタをsublimeに変えた | スターフィールド株式会社 ”恋に落ちるエディタ”「Sublime Text」 完全入門ガイド！ | 株式会社LIG Sublime Text 2入門 (全14回) – プログラミングならドットインストール オススメのプラグイン 僕が今回オススメしたいのが「Hayaku」というプラグインです！ こちらはその名の通り、cssを早く書けちゃうという代物でございます！ hayaku/hayaku · GitHub sublimetextを使っている人であれば
Sublime Text 導入 | sonoshouのまじめなブログ でSublime Textを導入したのですが， キーバインドできるMarkdownエディタとしも優秀だという話を聞き， Sublime Textを自分なりにカスタマイズしてみました． 結論から言うと，非常にMarkdownが書きやすいです！ キーバインド使えることがこんなに嬉しいのか……！ Markdownって改行（半角スペース2回）が面倒だと思ってたのですけど， SHIFT + Enterに半角スペース2回を割り当てたら幸せになりました． ただ，他のMarkdown専用アプリと比較すると， プレビューがリアルタイムに見られないのが痛い……． キーバインドを取るか，プレビューを取るか，好みかもしれません． Macな方は適宜読み替えて下さい． 大きく違う点はありませんでした． 追記（2014年11月24日） OmniMar
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
