Emmetを始めるのに、とりあえずこれだけ覚えておけば大丈夫
バイト先で「新ゆとり世代」と言われました。れこです。 HTML、CSSを省略して書けるZen-Codingの後見、 Emmetについて書こうと思います。 やれCoffeeだTypeScriptだSassだ〜と手をつける前に、 もっと簡単に、デメリット無く作業効率をあげられます。 CoffeeScriptやSassなどのプリプロセッサ系とは違い、 CoffeeやSassの知識を開発メンバー全員が持ってないとならず、 結局自由が効かなくなる、ということはありません。 個人から使えて、チームで使ってもなお良し。 さらに、展開後のカーソルの位置がいい感じだったりと、 細かい気配りまで完璧です。 そんなEmmetを 僕が頻繁に使っている機能に焦点を当てて、紹介したいと思います。 Emmetの導入 Emmetは各種エディタ・IDEのプラグイン形式で配布されています。 お値段は無料です。 Web系の人が
12 Essential Atom Packages for Web Development — SitePoint
Stay Relevant and Grow Your Career in TechPremium ResultsPublish articles on SitePointDaily curated jobsLearning PathsDiscounts to dev toolsStart Free Trial7 Day Free Trial. Cancel Anytime. 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 com
特におすすめしたい、Sublime Textのパッケージ - Build Insider
Sublime Textのさまざまなパッケージの中から、利用シーン別におすすめのものを紹介。また、Sublime Textのパッケージの基本的な使い方として導入方法や有効化／無効化、削除の方法も説明する。 ← 前回 連載 INDEX 今回はSublime Textのさまざまなパッケージの中から、特におすすめのものを紹介する。 Sublime Textのパッケージ Sublime Text自体はオープンソース・ソフトウェアではないが、内部機能を操作するためのAPI（API Reference - Sublime Text 3 Documentation）が公開されている。また、メジャーなスクリプト言語であるPythonのランタイムが搭載されているので、誰でもパッケージを作成できる。 そのため、パッケージの作成は盛んで、2014年12月時点登録されている公式パッケージは2600以上となっている
出来た…Sublimetext3でブラウザプレビュー View in Browser｜ツーブロッカ
※すいません、Package Controlを開くショートカットキーがCtrl+Alt+Pって書いてありましたが、 正しくはCtrl+Shift+Pです！（5/3訂正） 2014/9/3 プレビュー児時のSublimetextフリーズについて追記 恋に落ちるエディタとして名を馳せるSublimetext 3もベータ版ながらに問題なく機能しており人気沸騰中のエディタです！ 最近、やっと僕も手を出し始めたのでメモ代わりに記事にしていきます。 インストール手順も日本語化もスキップして、今日は「Sublimetextでのブラウザプレビュー」について書こうと思います。 これが色々検索したものの、”これだ！”というものにあまりヒットせず… Browser Refreshなんかも有名ですが、何故か僕はショートカットキーが効かず。 純正テキストエディタとまで書かれているSublimetextにとってブラウ
SublimeTextを再インストールしてパッケージや設定を整理しました - emuramemo
今年SublimeText3に乗り換えてからメニューまわりがうまく表示できなかったので再インストールしました。windowsの場合です。 SublimeTextのアンインストール SublimeText 本体をインストール Package Controlをインストール 日本語化 追加した設定・パッケージ 半角スペースやタブを可視化 全角スペースを可視化 折り返しを解除 shift-jisのファイルを文字化けせずに開きたい。文字コードを表示したい 文字変換の候補が変な位置にでてしまう コーディングの入力補助 タブ移動を順序どおりにする タブが多数開いても重ならないようにする 全てのタブを一気に閉じる テーマ まとめ SublimeTextに追加した設定 基本ユーザー設定 キーバインドユーザー設定 パッケージユーザー設定（trailing_spaces） SublimeTextのアンインストー
視認性の高いプログラミングフォント「Myrica」をWindows＋Sublime Textで使う方法
Myricaとは Myrica （ミリカ）は、無料で使えるプログラミング用 TrueType フォントです。 視認性、判別性 が高くなるように、複数のフォントから合成され作成されました。 Myricaの特徴Myricaは、多くの特徴をRictyから継承しています。 主な特徴は、以下のように挙げられています。 ASCII文字は「Inconsolata」が適用されます。それ以外の文字には「源真ゴシック」または「Mgen+」が適用されます。半角文字と全角文字の横幅の比が 1:2 に調整されています。視認性の高い日本語文字 (半濁音など) が使用できます。Rictyにない特徴Rictyにない特徴として、ASCII/ひらがな/カタカナにヒンティング情報が付加されています。 これにより、低解像度や、小さな文字サイズで表示させても、可読性が高くなるようになっています。 特徴のイメージ特徴に関するイメージ
Sublime Text を使って WordPress のテーマ作成 - understandard
この記事は Sublime Text Advent Calendar 2014 – Adventar 24日目の記事です。 今回は僕が普段 Sublime Text を使って WordPress のテーマを作るときの流れをざっくりと。 Twenty Fifteen などを親テーマにしたり、_s というスターターキットなどを利用する方法もありますが、そういったものを使わずにテーマを作ることがほとんどです。 また、先に HTML を作成してからテーマ化という方法も取っていません。 テーマ作成の準備 XAMPP や MAMP など、ローカルで WordPress が動かせる環境で開発をしていきます。 まずは WordPress をインストールから。 公式サイトから最新版をダウンロードしておくという方法でもいいですが、よりおすすめなのは Nettuts+ Fetch です。 これを利用すると、事前
Sublime Text + Markdownを記法を使うとはてなブログを書くのがものっそい便利だった - Swing-by
■このエントリについて 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 のプロジェクトを閉じる方法 - 情報系大学院生のWebメモ
この記事は 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 を使う - Qiita
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
http://ipestov.com/the-best-plugins-for-sublime-text/
See related links to what you are looking for.
Sublime Textの作業効率を飛躍的に上げるプラグイン31個 | aucfan Engineers' blog
こんにちは、湘南生まれデトロイト育ちのきんぐです。 入社してから1年半ほどWebマーケターをやった後、気付いたらエンジニアになってました。 そんなこんなで異動してから9ヶ月が経ち、合コン等で Q.「お仕事は何されてるんですか？」 A．「うぇ・・うぇぶえんじにあです。ほーむぺーじの運営してます。」 くらいは言えるようになったので、 本日は僕の相棒とも呼べる Sublime Text 2(3)のオススメプラグインを紹介したいと思います。 （そんな技術的なこと書いても、ね。） 私はSublime Text 2を使っていますが、これから導入する方はせっかくなので3使いましょう。 （当時2にあって3にはないプラグインがあった為未だに乗り換えてません） ※Sublime Textのインストール方法などは端折りますので、知りたい方は各自ggってくださいませ。 ■絶対入れるよねプラグイン ●A
Sublime Text 2 + Sass + Compass + Emmet 最強説！導入方法と自動アップロードの設定まとめ | Cappee Design
本日が決算日の@cappeeです。 Sublime Text 2 + Sass(SCSS) + Compass + Emmet(Zen-Coding) 最強説！ ついにたどり着いてしまったかもしれません。 今話題にもなっている通り上の4つがタッグを組むことでものすごい効率的にコーディングができます。（そこまでまだ使いこなしてないので、正しくは「できそうです」。） せっかくなので導入するにあたり参考にさせていただいたサイトのまとめとつまづいたところなどをメモしておきたいと思います。 導入のキッカケ 話題すぎるほど人気のツールですので導入を検討するために調べてみたりはみなさんすでにしているかと思います。 私はDreamweaverを使用していてEmmet(Zen-Coding)は今までも活用してきたので、さらなるスピードアップを求めてSass+Compassの導入をしようと思っていました。 S
Adding CSS Vendor Prefix Automatically with Sublime Text
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.
じっくり解説。SublimeText3にEmmetをインストールする - フロントエンドとかPCとかスマホとか
sublime text3 emmet というキーワードで検索されている事が多いようなので、じっくり解説です。 画面はmacのものですが、windowsでも同じような操作でインストールできます。 SublimeTextは、パッケージで機能追加 SublimeTextは、2も３も、パッケージと呼ばれるプラグインで必要な機能を追加していくことができます。 Emmetもパッケージとして配布されています。 パッケージは、パッケージコントロールで。 パッケージコントロールを導入すると、パッケージのインストールが簡単です。 パッケージコントロールの導入方法は、 Sublime Text 3 に Package Control をInstallするのが簡単になったよ - フロントエンドとかPCとかスマホとか を参照してください。 Emmetのインストール Mac：[Sublime Text] - [Pr
Sublime textでコードをなるべく楽に綺麗に書くための機能紹介 3つ - megane9988のブログ
1. コードフォーマット パッケージとして提供されている HTML-CSS-JS Prettify を導入する。使い方はソースコードで右クリックして、Prettify Codeを選択。ショートカットは Shift + Command + H。しかるべきところでの改行と、インデントをまとめてしてくれるのでたすかります。 コードフォーマットの設定 Prettify Code コードフォーマットにおけるデフォルトでのインデントの設定はスペースです。設定変更や拡張子の追加などを行う場合は、Performance→Package Setting → HTML/CSS/JS/Prettify → Set Prettify Setting と進むと、設定ファイルが表示されます。(コマンドパレットからも呼び出し可。) インデントの設定を変更する場合は インデントの文字をスペースからタブに dent_cha
Markdown記法 とりあえずこれだけ覚えれば大丈夫 基本のチートシート - megane9988のブログ
まだ使ってない人向けです。WordPressの場合は、Jetpackが提供してくれるMarkdownを利用することで、普通にタグを書くよりもずいぶんブログを書く時間が短縮できますよ。 見出し [code lang=text] # h1 ## h2 ### h3 // 増やした数だけ数字が増える [/code] リスト [code lang=text] – リスト – リスト – 子要素(先頭にタブインデント1つ) – 孫要素(先頭にタブインデント2つ) – 子要素(先頭にタブインデント1つ) – リスト [/code] 数字のリスト [code lang=text] 1. リスト 2. リスト 3. リスト //数字を増やさなくても同じ結果になる 1. リスト 1. リスト 1. リスト [/code] リンク [code lang=text] [リンクのテキスト](http://hoge
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Package Control
GitHub - wesbos/cobalt2: Tweaked and refined Sublime Text theme based on the original cobalt.
コードが見やすく使いやすいSublime Text 2/3のテーマのまとめ
