HTMLタグをいちいち手で入力していると、時間もかかりますし、入力間違いやスペルミスなど、間違いの原因にもなります。それはCSSでも同じです。 DreamweaverなどのWebオーサリングツールには、標準でタグや属性の補完機能や「スニペット」といわれる入力支援機能があります。スニペットは、登録されているよく使うコードを呼び出して、コピー＆ペーストの要領で入力します。 Zen Codingでは、このスニペットのようによく使うコードを呼び出して入力するものですが、「省略形」（abbreviation）といわれるコードの略語のようなものを入力するだけで、さらにかんたんにコードを入力することができます。 Zen Codingを使えばコーディングはこう変わる！HTMLコーディングでは、「<h1>見出しタイトル</h1>」のようにテキストを開始タグと終了タグで囲み、見出しを指定します。 Zen Co
最近になって急に盛り上がってきている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
2017年6月29日 便利ツール Webサイトを制作する時のWebオーサリングツール・HTMLエディタは何を使用していますか？きっと多くの人がDreamweaverを使っていると思います。私もそうでした。が、最近私のまわりのWebデザイナーがみんなCodaというソフトを使っているのに気づき、試したところ、あまりにも使い勝手がいいので紹介します。本当におすすめです！ ↑私が10年以上利用している会計ソフト！ Codaの特徴を簡単に 詳しい説明はリンクをクリックでジャンプします。 Mac専用 美しいビジュアル 便利なプレビュー画面 PHPやJavaScriptの動作確認も 素早いタグ打ちが可能 有料 8,500円 はい、Mac専用なんです。このブログを読んでいるユーザーの70%がPC使用なのでこれを記事にするか悩みましたが、Mac愛用者さんに向けて！ちなみに私はCoda英語版をインストールして
前回のエントリーで、Zen-codingをDreamweaverで使用するときのショートカット設定をXMLファイルを編集して変更するということを書きました。 あの後、KAITOKUのesshiさんに「普通にDreamweaverのショートカット設定画面から変更できるのでは…？」というご指摘をいただきまして…。 （ありがとうございます＞esshiさん） 慌てて確認したところ、ありました。普通に。設定画面で設定できました。 なんで見つけられなかったんだろう…「コマンド」メニューはほとんど使わなかったので全く気づきませんでした。 ま、ショートカットはXMLの設定ファイルがありますよーてな感じのトリビア的なところで。(^^;
先日超速コーディング？としてTextMateにZen-Codingを追加したコーディング手法の概要を紹介しました。で、実はZen-Coding、前回紹介した入力方法だけではありません。 HTMLのストラクチャ的なものがわかっていれば、特定の記述をして展開すると一気にコードが書けちゃったりします（どちらかと言えば、こっちが本当のZen-Codingなんでしょう）。 ということで、今回はその特定の記述とやらの話をしてみましょう。ここまで使えるようになってくると実に速い…（はず 笑）。 文書構造がわかってれば、1行書いて一気に展開できるZen-Codingは、前回紹介したような登録された略語を使ってHTMLとCSSのコードを展開する使い方だけでなく、特定の記述を使って構造を書き上げて一気に展開することができます。TextMateを使っている方はこちらのリストにある「Zen.Coding-Text
先日をぞーくんに教えてもらった Zen-Coding、Coda でも使えるとのことで試してみました。 Downloads から Zen Coding for Coda v0.3 (Universal Binary) をダウンロード。 解凍すると ZenCoding.codaplugin というファイルが出てくるので、ダブルクリックで Coda が起動してプラグインがインストールされます。 続きを読む Coda で Zen-Coding を使う
先日、ノンプログラマのためのPHP入門という素敵なUSTを見ていたのですが、その中で出てきたzen coding。 前々から知っていたものの、これ使うならエディタごと乗り換えないといけないんだ！とずっと勘違いしていて、なんだかんだでまだDreamweaver使ってるし…サイトの定義とかもしてるからなんだかんだでエディタ乗り換えるの面倒だしなぁ…とかごにょごにょ思っていたのですが… Dreamweaverでも使えるらしいよ！知らなかった！無知って怖い！＞＜ Dreamweaver用はこちらからダウンロードできます。 ダウンロードしたZen Coding.mxpをダブルクリックするとエクステンションマネージャーが立ち上がるので、承諾するをクリックしてインストール。 これだけでOK。 インストールが終わったら、早速何か入力してみましょう。 すごい！感動！ 展開はcontrolキーと,(カンマ)キ
ちょっと前に書いたZen-CodingネタをH2O Spaceのたにぐちさんに取り上げていただいてからというもの、関連するエントリーへのアクセスがにぎやかです（謎）。そんなこともあり、数日前の夜中に遊び半分で「Zen-Codingってこんな感じ」ってのをお見せしようと、Twitterで告知しながらUStreamでダラダラとやってました。 終わってから何名かの方に「見たかった！」というレスをいただいたのですが、ただやみくもにというか、適当に思いつくままキーボードをカチャカチャやってると、やってる本人も「何がいいかな？どうしようかな？」みたいな脳みそになっちゃいます。もちろん、見ている側も何してるか想像できないですからね…（笑）。 ということで…。 ならば、簡単なサンプルを作ってそれをやってみようじゃないか簡単ですがサンプルを用意してみました。ただブロックが組み合わさっただけだと面白くもないの
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
