サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。
Zen Codingを使ってHTML/CSSコーディングするには、Zen Codingを導入した環境でそれぞれのHTML/CSSタグの「省略形」(Abberiviation)といわれる略語を入力し、「展開」を実行([Expand Abberiviation]メニューを選択、あるいは +キーを押す※)します。入力した省略形を「展開」(Expand)すると、統合開発環境のスニペット(統合開発環境から短いプログラムコードを呼び出す機能)のように、一連のコードが生成されるしくみになっています。 省略形を覚えるのはたいへんだと思うかもしれませんが、1章で述べたとおり、すべてを覚える必要はありません。自分がよく使うタグの省略形だけを覚えればじゅうぶんです。 また、Zen Codingの省略形は、HTMLの場合はHTMLタグの名前の、CSSの場合はスタイル指定のためのプロパティ名の頭文字などになっていま
先日「恋に落ちるエディタ」Sublime Textの勉強会に参加してきた霙(@xxmiz0rexx)です。 エディタの便利さ、優雅さ、魅力などを語るのは別の機会にするとして、 今回はそのSublime Textで、爆速コーディング用プラグイン「Zen-Coding」先生を使えるようにする設定方法を学んできましたので、備忘録もかねて記事にしたいとおもいます。これから使ってみようと思っている方は是非! Sublime TextにZen-Codingプラグインを入れる手順 他のアプリみたいに設定画面で操作できないので変な感じですが、やってしまえば意外とあっさり終わります。 1.Sublime Textをダウンロードする まずはSublime Textがなくては始まりませんね。 公式サイトに行ってダウンロード、そしてパソコンにインストールしましょう! 参考:Sublime Text: The te
HTML/CSSのコーディングを効率化する「Zen-Coding」が次期バージョンで大幅に仕様を変更し「Emmet」と名称を変更するようなので、現在公開中のベータバージョンを試してみました。 Sublime Text 2にインストール Sublime Text 2(以下ST2)向けのEmmetはGitHunにて公開されていますので、レポジトリを追加してインストールすることが出来ます。 具体的な手順は下記の通り。 コマンドパレット(Win:Ctrl+Shift+p、Mac:Command+Shift+p)から「Package Control: Add Repository」を選択 「https://github.com/sergeche/emmet-sublime」を入力 コマンドパレットの今度は「Package Control: Install Package」を選択 「emmet-sub
Emmet Documentation ブラウザ上でZenCodingできるEmmetのサイト「Emmet.io」。 知らない間にZenCodingはEmmetになるようですね。 サイト上ではブラウザ上でEmmet(ZenCoding)がそのまま使えてコーディングを高速にできるエディタが公開されており、そのまま使っても便利です。 Emmetの形式で記述してTabでHTMLに速攻変換。 ZenCodingでもよかった気がしますが、Emmetも慣れるとシンプルでよさそう。 関連エントリ これは新しい、回転する円形のイメージギャラリー実装サンプル CSS3を使ったクールなスライダー実装jQueryプラグイン「slideControl.js」 コンテンツ幅に対してテキストを最大にして美しくレイアウトできる「BigText」
Sergey Chikuyonok氏のGithubを見に行ったら、"Emmet (ex-Zen Coding)" という気になる記述があり、気になったので調べてみました。 Zen-Codingについて Zen-Codingは、IDEやエディタで使えるHTML/CSSのコーディングをパワフルにサポートするプラグインです。多くのアプリケーションで提供されており、3年前ほどから日本でも多くのサイトがZen-Codingを紹介しています。 そのZen-Codingが、「Emmet」と、リネームされてプロジェクトが進められているようです。 Emmet(beta) Emmetは、開発中です。 正式リリースはまだですが、機能は試すことができます。 Emmetは、2013年2月24日に正式リリースされました。 基本的には、今までのZen-Codingと変わりません。 Zen-Codingを使っていた人は、
Emmetは、Zen-Codingの次期バージョンの名前です。 Zen-CodingはHTMLの記述方法が取り上げられることが多いですが、個人的には、CSSの入力補助こそ真価が発揮されると思っています。 私は、EmmetまたはZen-Codingがなければ、CSSのプロパティを打つのが苦痛なほどです。 Emmetから、さらに多くのプロパティに対応し、数値も含めて展開できるようになりました。CSSの記述がより使いやすくなったので、紹介します。 Zen-Codingから使える CSSの展開は、ほとんどのZen-Codingから使えます。 Emmetではさらに使いやすくなりましたが、Emmetは現在開発中のため、不安定な部分があります。不安な方は、Zen-Codingをおすすめします。 プロパティに、ショートコードが用意されており、+でつないで展開(Expand Abbreviation)する形
先週くらいから爆発的な注目を集めている、HTML/CSSショートカット用ライブラリ「zen-coding」。 「zen-coding」とは、カンタンな記述で構造化されたHTML/CSSが生成されるという、コーダー感涙の超絶便利なライブラリです。 その便利さ、コーディングが驚くほど簡略化されるというコトで、AptanaやDreamWeaverをはじめ、WordPressやCodaにもzen-codingプラグインが続々と登場しております。 そこで今回のエントリーでは、そんなzen-codingの各種エディタ用プラグインをまとめてみました。 まだ触ったコトの無いコーダーさん!もし自分の愛用エディタのプラグインがあったら、ぜひ騙されたと思って導入してみてください♪ zen-codingとは 先ほども書きましたが、zen-codingとは「カンタンな記述で構造化されたHTML/CSSが生成される」
コーディングスピードはまだ上がる!! Zen-Coding カスタマイズ 2011-01-20 コーディング速度が"3倍!10倍!上がる"と言われてる Dreamweaver Documents and Settings/[ユーザー名]/Application Data/Adobe/Dreamweaver "バージョン"/ja_JP/ Configuration/Commands/ZenCoding/zen_settings.js Aptana [任意で保存したZen-Codingの場所]/zencoding.js(過去バージョンのファイル名は"zen_settings.js") Notepad++ [Notepad+の場所]/plugins/NppScripting/include/Zen Coding.js HTMLの言語を修正する(ついでにインデントも) 例えばhtml:xsで展開す
Zen-Codingを使いこなす Zen-Codingを利用すると、効率的にHTMLやCSSのマークアップを行えます。前回(もしも10分の1の行数でHTMLが書けたら)はZen-Codingの基本的な機能をご紹介しました。 今回は、さらにZen-Codingを使いこなすために、さまざまなコマンドや省略記法をご紹介します。サンプルはIE 8/Firefox 4/Chrome 12/Safari 5/Opera 11.5で動作確認済みです。 前回の復習 これらの機能について、簡単に復習しておきましょう。 省略形の展開(Expanded Abbreviation) 「Ctrl+E(Macの場合は Command+E)」で省略形を展開できます。 #を付けるとid名、.を付けるとclass名を付けられます。 *は繰り返し、$は連番に展開されます。 +は兄弟関係、>は親子関係、()はグループ化されて展
最近になって急に盛り上がってきているZen-Codingをみなさんご存知ですか? Zen-CodingはHTML/CSSをショートカット+スニペットで簡略化してコードを書くことができるライブラリです。 独立したテキストエディタソフトではなく、既存のHTML/CSSエディタにプラグイン的に導入するものです。 Zen-Codingというのもがどういうもので、どんなすごいものなんだ、というのはこちらの動画を見てください。 ※音が出ますのでご注意ください。 Zen Coding v0.5 from Sergey Chikuyonok on Vimeo 一体何がおこわれているのか?という感じだと思われますが、今回の記事ではこのZen-Codingの導入方法と使い方の一例を紹介します。 Zen-Codingに対応しているエディタは色々あるのですが、今回は弊社の開発環境しているAptana Studio
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く