zen-coding - Set of plugins for HTML and CSS hi-speed coding - Google Project HostingCode Archive Skip to content Google About Google Privacy Terms
zencoding-mode.el ã¯æ—¢ã«ã€yasnippet ã¨ã®å”調を実装ã—ã¦ã„ã‚‹ - ã™ã°ã‚‰ã—ã„新世界
スニペット補完後ã®ã‚«ãƒ¼ã‚½ãƒ«ã®ä½ç½®ãŒã€ã‚ã¾ã‚Šä½¿ã„ã‚„ã™ããªã„。 zencoding-mode.el を眺ã‚ã¦ã„ã¦æ°—ã¥ã„ãŸã‚“ã ã‘ã©ã€zencoding-mode ã¯ã™ã§ã«yasnippetã¨ã®å”調を実装ã—ã¦ã„ã¦ã€ã“ã‚Œã«ã‚ˆã£ã¦ä¸Šã®è¦æœ›ã‚’解決ã—ã¦ã„る模様 (zencoding-mode:version 0.5(2009-11-20)版)。 zencoding-expand-yas ã¨ã„ã†é–¢æ•°ãŒã€ãれ。 比較例 次ã®æ–‡å—列を入力ã—ã¦ã€å±•é–‹ã™ã‚‹ã€‚ div>p*2 zencoding-expand-line (yasnippetã¨å”調ã—ãªã„) ã®å ´åˆ 次ã®ã‚ˆã†ã«å±•é–‹ã•ã‚Œã‚‹ã€‚[] ã¯ã€å±•é–‹ç›´å¾Œã®ãƒã‚¤ãƒ³ãƒˆã®ä½ç½®ã€‚ã¾ãã“ã‚Œã¯ç¢ºã‹ã«ãƒã‚¤ãƒ³ãƒˆã‚’pè¦ç´ ã«ç§»å‹•ã•ã›ã‚‹ã®ãŒé¢å€’ãã•ã„。 <div> <p> </p> <p> </p> </div>[] zencoding-expand-yas (yasnippetå”調) ã®
Bridge Word
This shop will be powered by Are you the store owner? Log in here
マークアップ効率化 - zen-codingã§ã‚³ãƒ¼ãƒ‡ã‚£ãƒ³ã‚°ã‚’å€é€Ÿã«
HTMLã®è¨˜æ³•ã«ã¤ã„㦠基本的ã«ã¯ã€Œdivã€ã®æ§˜ã«è¦ç´ ã‚’çœç•¥ã›ãšã«è¨˜è¿°ã—ã¦ã€ãれを展開ã™ã‚‹ã¨ã€Œ<div></div>ã€ã¨ã„ã†å½¢ã«å±•é–‹ã•ã‚Œã¾ã™ã€‚ ã“ã®ã¨ãã«å±•é–‹ã§ãã‚‹è¦ç´ ã¯ä»¥ä¸‹ã®å…¬å¼ãƒ‰ã‚ュメントã«æ˜Žè¨˜ã•ã‚Œã¦ã„ã¾ã™ã®ã§ãã¡ã‚‰ã‚’見るã¨ã‚ˆã„ã§ã™ã€‚ Zen HTML Elements Zen HTML Selectors Zen CheatSheets 基本的ãªè¨˜æ³• ã²ã¨ã¤ãšã¤é †ç•ªã«è¨˜è¿°ã—ã¦èª¬æ˜Žã—ã¦ã„ãã¾ã™ã€‚ã—ã°ã‚‰ãåˆæ©çš„ãªèª¬æ˜Žã«ãªã‚‹ã®ã§ã‚る程度知ã£ã¦ã„ã‚‹æ–¹ã¯é£›ã°ã—ã¦ã„ãŸã ã„ã¦è‰¯ã„ã‹ã¨æ€ã„ã¾ã™ã€‚ ã¾ãšã‚‚ã®ã™ã”ã基本的ãªè¨˜æ³•ã§ã‚ã‚‹ã€å˜ç‹¬ã‚¿ã‚°ã®è¨˜æ³•ã«ã¤ã„ã¦èª¬æ˜Žã‚’è¡Œã„ã¾ã™ã€‚ cssã®ã‚»ãƒ¬ã‚¯ã‚¿ã‚’イメージã—ãªãŒã‚‰è¦‹ã¦ã„ãã¨ç´å¾—ã—ã‚„ã™ã„ã¨æ€ã„ã¾ã™ã€‚ ã‚¿ã‚°ã ã‘å¤‰æ› å¤‰æ›å‰ div 変æ›å¾Œ <div></div> デモ 文末ã§tabを押ã—ã¦ãã ã•ã„ div 変æ›å¾Œã€divè¦ç´ ã®é–“ã«ã‚«ãƒ¼ã‚½ãƒ«ãŒç§»å‹•ã™ã‚‹ã®ã§ã€ã™ãã«ãƒ†ã‚
ç°¡å˜ãªå…¥åŠ›ã™ã‚‹ã ã‘ã§HTMLタグを生æˆã—ã¦ãれるZenCoding | Happy My Life
EmacsWiki: Zen Codingより。 ZenCoding-modeã¨ã„ã†HTMLã‚’ç°¡å˜ã«å…¥åŠ›ã§ãるモードãŒã‚る。 ã“れを活用ã™ã‚‹äº‹ã§ã€Emacs上ã§ã‚¿ã‚°ã‚’ç°¡å˜ãªè¨˜æ³•ã§æ›¸ã„ãŸå¾Œã€C-ã¨ã™ã‚‹äº‹ã§HTMLã«å±•é–‹ã™ã‚‹äº‹ãŒå¯èƒ½ã«ãªã‚‹ã€‚ ã“ã®ãƒ¡ãƒªãƒƒãƒˆã¨ã—ã¦ã€æ–‡å—入力ãŒå°‘ãªããªã‚‹ä¸Šã«ã€ã‚¿ã‚°ã®é–‰ã˜å¿˜ã‚Œã‚‚ãªããªã‚‹ã®ã§æ—©ãã¦æ£ç¢ºã«HTMLãŒç”Ÿæˆã§ãる。 ã“ã®HTML化ã§ãã‚‹ã¨ã„ã†ã®ãŒé‡è¦ã€‚Hamlã®ã‚ˆã†ãªç‹¬è‡ªè¨˜æ³•ã ã¨ã€ãƒ—ãƒã‚°ãƒ©ãƒžãƒ¼ã«å–ã£ã¦ã¯æ¥½ã«è¨˜è¿°ã€ç·¨é›†ãŒã§ãã‚‹ã¨ã„ã†ä¾¿åˆ©ãªãƒ•ã‚©ãƒ¼ãƒžãƒƒãƒˆãªã®ã ãŒã€ãƒ‡ã‚¶ã‚¤ãƒŠãƒ¼ã«ã¨ã£ã¦ã¯ã€ä½¿ã„ãªã‚ŒãŸãƒ‡ã‚¶ã‚¤ãƒ³ã‚½ãƒ•ãƒˆãŒä½¿ãˆãªã„ã¨ã„ã†ã€éžå¸¸ã«ä¸ä¾¿ãªãƒ•ã‚©ãƒ¼ãƒžãƒƒãƒˆã€ã¨ã„ã†äº‹ã«ãªã‚‹ã€‚ ã—ã‹ã—ã€ZenCodingã ã¨æœ€çµ‚çš„ã«ã¯HTMLã«å¤‰æ›ã•ã‚Œã‚‹ã®ã§ã€ãƒ—ãƒã‚°ãƒ©ãƒžã¯ç°¡å˜ã«è¨˜è¿°ã§ãる。デザイナーã¯ã‚ã¨ã§æ¥½ã«ç·¨é›†ã§ãã‚‹ã¨ã„ã†ã€ä½•æ–¹ã«ã‚‚メリットã¨ãªã‚‹ã€‚ サンプル ã©ã®ã‚ˆã†ãªå…¥åŠ›ã§ã€ã©ã®ã‚ˆã†ã«
WordPressã§zen-codingを使ãˆã‚‹ã‚ˆã†ã«ãªã‚‹ãƒ—ラグイン・WP Zen-CodingãŒå‡„ã便利 - ã‹ã¡ã³ã¨.net
話題ã®zen-codingã‚’WordPress ã§ä½¿ãˆã‚‹ã‚ˆã†ã«ãªã‚‹ãƒ—ラグイン〠「WP Zen-Codingã€ã‚’試ã—ã¦ã¿ã¾ ã—ãŸã€‚ã“ã‚Œã€æœ¬å½“ã«ä¾¿åˆ©ã§ã™ã€‚ 確ã‹ã«ã‚³ãƒ¼ãƒ‡ã‚£ãƒ³ã‚°ã‚¹ãƒ”ードãŒé€Ÿã ãªã‚Šãã†ã§ã™ã‚ˆã€‚ zen-codingã£ã¦ä½•ï¼Ÿã¨è¨€ã†æ–¹ã¯ã€Zen-CodingãŒæ¥½ã—ã„ã¨ã„ã†è¨˜äº‹ã‚’ã”覧下ã•ã„。分ã‹ã‚Šã‚„ã™ã„ã§ã™ã€‚ zen-codingを使ã†ã¨ã€ã‚¿ã‚°å…¥åŠ›ä½œæ¥ã‚’ショートカットã®è¦é ˜ã§è¡Œãªã†äº‹ãŒå‡ºæ¥ãã¾ã™ã€‚例ãˆã° div#header>div#contents>ul.navigation>li*4>a ã¨æ‰“ã¡ã€ctr+E（winã®å ´åˆï¼‰ã§ä»¥ä¸‹ã®HTMLコードを展開ã—ã¦ãã‚Œã¾ã™ã€‚ <div id="header"> <div id="contents"> <ul> <li><a href=""></a></li> <li><a href=""></a></li> <li><a href=""><
1
リリースã€éšœå®³æƒ…å ±ãªã©ã®ã‚µãƒ¼ãƒ“スã®ãŠçŸ¥ã‚‰ã›
最新ã®äººæ°—エントリーã®é…ä¿¡
j次ã®ãƒ–ックマーク
kå‰ã®ãƒ–ックマーク
lã‚ã¨ã§èªã‚€
eコメント一覧を開ã
oページを開ã
HTMLã‚„CSSãŒæ‰‹é–“ãªã書ã‘ã‚‹Zen Coding | Zen Coding 1-1 | HTML+CSSコーディングãŒ10å€é€Ÿããªã‚‹Zen Coding
{{#tags}}- {{label}}
{{/tags}}