Build, share, and learn JavaScript, CSS, and HTML with our online code editor. Discover web applications and hire talent from the world’s largest community of front end developers and designers.
![CodePen - Front End Developer Playground & Code Editor in the Browser](https://cdn-ak-scissors.b.st-hatena.com/image/square/b03f672cb06c9cde2f6ac91e7992e03ca34c33fc/height=288;version=1;width=512/https%3A%2F%2Fstatic.codepen.io%2Fassets%2Fsocial%2Ffacebook-default-05cf522ae1d4c215ae0f09d866d97413a2204b6c9339c6e7a1b96ab1d4a7340f.png)
ダウンロード 以下のページから自分の環境に合うものをダウンロード(以下は Windows 64bit 版) http://www.sublimetext.com/3 インストールはダウンロードしたファイルをダブルクリックして指示にしたがっていくだけでとても簡単なので省略。 メニューの「Preferences」→「Settings-User」に設定を記述する。 どのような設定項目があるかは「Preferences」→「Settings-Default」のファイルを参照し、変更する項目をコピーして「Settings-User」でその値を設定する。 「Settings-Default」は変更しない。 「Settings-User」の設定で「Settings-Default」をオーバーライドする感じ。 「Settings-Default」はソフトウエアのバージョンアップ等で上書きされるてしまう可能
フロントエンドの悩み フロントエンドの仕事をしていると、誰が書いたのか分からないまともにインデントもされていない、更には文法まで間違っている汚い HTML に手を加えなければならない場面は往々にしてあると思います(?) それでもブラウザは表示してしまうので、書いた本人は気付いていないか、表示されれば良いと思っているのでしょう。 インデントが無い HTML は、大体入れ子構造も間違っていることが多いです。文法が間違っているとエディタで開始タグと終了タグがハイライトされないので、非常に編集しにくくて困ります。 エディタで解決 HTML-CSS-JS Prettify と SublimeLinter-html-tidy を使って、汚い HTML と決別できます! HTML-CSS-JS Prettify HTML, CSS, JS のコードを整形するプラグインです。 HTML-CSS-JS P
お久しぶりです。HTMLコーダーの加藤です。 GWも終わり、暑い日が続いてますね。 昼は暑いのに夜はけっこう寒かったりで、服装選びに少々困っている日々です。 ではさっそく本題に入ります。 9ヶ月くらい経ってますが、前回はSublime Text(以下ST)の簡単な概要とメニューのEdit・Selection・View・Gotoについてご紹介しました。 今回は続きということで、Find(検索・置換)、マクロ機能、スニペットについてご紹介します。 最近Atomがすごい!という記事が出回っていたりVisual Studio Codeが出た!と聞いたりして、あれ?STの時代終わった?とか一時思いましたが、まだ乗り換えるほどではなかったので気にせず書いていきます。 目次 検索・置換 マクロ機能 スニペット 検索・置換 まずは非常によく使う検索・置換についてです。メニューのFindがこれにあたります。
Sublime Text: grep 機能のこと 複数ファイルに渡って、特定の文字列を検索・一括置換する grep 機能。 Sublime Text にも grep 機能があるので、オプション周りの覚書き。 Indexgrep 機能の呼び出し方左下の各アイコンの役割(Find について)検索対象ファイルを設定する(Where について)文字コードの問題grep 機能の呼び出し方ショートカットキー cmd + shift + F で、簡単に呼び出すことができます。 メニューから開く場合は、 Find -> Find in files 。 これで立ち上がったウィンドウから複数ファイルに渡った検索・置換が可能です。 Flatland Theme を使用しているため、見た目が異なる場合があります。 左下の各アイコンの役割(Find の設定)左下には5つのアイコンがあります。それぞれ、下表のような検
エディタ何使ってますか? 色々試してきましたが、自分の選択はBracketsでした。 でも、いまいち人気がないような... 自分は何者か? そもそも前提とする使い道によって、エディタの選択は変わってくるかと思います。 自分は何者かというと、今風に言うフロントエンジニアに近い立ち位置にあります。 古くはLingo/AS3、現在はAnimation系やら3DやらのJavaScriptライブラリでのインタラクション実装が主戦場です。 たまにはPHPやNode.js、Swiftなども触りますが、日常的にサーバーサイドやアプリのコードに触れているわけではありません。 HTMLやCSSも生業としておりますが、PugとStylusですので、生で扱うことはほぼない状況です。 つまり近頃の日常は、 Pug + Stylus + Babel + 何かしらの賑やかしライブラリ の人です。 使ってきたエディタは以
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
Sublime Textのショートカットを利用し始めてから、開発が今まで以上に楽しくなってきました。 この記事は、sublimetextのショートカットをもっといろいろ知ってみたいという人にお勧めです!! まだ全然わからないよという方は、以前、qiitaで書いた「最速でコードを書こう!本当に便利なsublime textのショートカット6選!」という記事のほうが、よりよく使われるショートカットが載っているので、この記事から読むことをお勧めします!! 1. 終了タグの挿入★★★ Windows: Alt+. Mac: command+option+. なんで今まで知らなかったのか。いつも簡単に終了タグ挿入できたらいいのに、と思いながらも地道に書いてました。これで、htmlのコーディングも2倍速!! 2. 親要素をたどる★★☆ Windows:Ctrl+Shift+A Mac:Command+
こんにちは。 Dreamweaverは使っているけど、ちょっとの工夫でコーディングが早くなる! そんな方法を厳選してまとめていきたいと思います。(PV次第!) 今回は一発で簡単にタグを選択する方法です。 以外にこれ知らないんじゃないかな・・・と思います。 マウスで頑張って選択してる人は必見ですよ! EmmetのMatch Pair Tagを使って簡単にタグを選択 こんな感じで一瞬で選択可能! ※Emmetのショートカットを利用するには、別途Emmetの拡張をインストールしなくてはいけません。 インストールがまだの方は、DMX ZONEを使ってEmmet拡張をインストールしましょう! DMX ZONEについては以前記事に書きましたので、ご覧ください!
[SublimeText 3] SFTPでページ更新が劇的に変わる! 2016.03.24 2018.12.01 sublimeText プラグイン 効率化 どうもこんばんは!スタバとかでマック開いて足組みながらコーヒー飲む事すら恥ずかしくて出来ない意識低い系こうじです。 今回は作業効率が劇的に変わるSublimeTextのプラグイン『SFTP』をご紹介したいと思います。 SFTPとはなんぞや SFTPとは、簡単に言うとFFFTPとかNextFTPのようなFTP接続が出来るプラグインです。 単純に使うとSublimeTextはテキストエディタなので、そんな機能は持っているはずがないのですが、『プラグイン』という拡張機能を利用してSublimeTextにFTP機能を持たせる事が出来るのがこの神プラグイン『SFTP』なのです! SFTPを導入しよう まずはインストール まずはプラグインを導入し
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く