タグ

関連タグで絞り込む (0)

  • 関連タグはありません

タグの絞り込みを解除

Zen-Codingに関するtacarzenのブックマーク (3)

  • ドットインストールで知った Emmet のちょっと便利なショートカットキー - understandard

    ドットインストールで知った Emmet のちょっと便利なショートカットキーの紹介。 最近実装された機能ではないとは思うので、なぜ調べなかったんだろうという思いです。 Emmet/Zen-coding入門 (全9回) – プログラミングならドットインストール ドットインストールおよび以下の内容については、Sublime Text 2 に Emmet をインストールした場合のショートカットキーになります。 編集可能な場所へ移動 ctrl + option + ← で前、ctrl + option + → で次の編集可能な場所へ移動します。 以下の様な HTML があり、ul 開始タグの前にカーソルがある場合、ctrl + option + → で最初の li 開始タグの直後にカーソルが移動します。 その次は href のダブルクォートの間にカーソルが移動します。 地味だけど便利。 参考: #0

  • マークアップ効率化 - zen-codingでコーディングを倍速に

    HTMLの記法について 基的には「div」の様に要素を省略せずに記述して、それを展開すると「<div></div>」という形に展開されます。 このときに展開できる要素は以下の公式ドキュメントに明記されていますのでそちらを見るとよいです。 Zen HTML Elements Zen HTML Selectors Zen CheatSheets 基的な記法 ひとつずつ順番に記述して説明していきます。しばらく初歩的な説明になるのである程度知っている方は飛ばしていただいて良いかと思います。 まずものすごく基的な記法である、単独タグの記法について説明を行います。 cssのセレクタをイメージしながら見ていくと納得しやすいと思います。 タグだけ変換 変換前 div 変換後 <div></div> デモ 文末でtabを押してください div 変換後、div要素の間にカーソルが移動するので、すぐにテキ

    マークアップ効率化 - zen-codingでコーディングを倍速に
  • Zen-Codingの応用でもっと超速に - 原稿ありきの変換について

    ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog はじめに こんにちは。R&D統括部 制作部 ウェブデベロップメント部に所属しております。岡部和昌(@kzms2)と申します。 前回の記事(マークアップ効率化 - zen-codingでコーディングを倍速に)ではZen-Codingの基について説明しました。 また、その内容をCSS Nite実行委員会(公式ページ)が主催した、Dreamweaver Town Meeting in TokyoというDreamweaverにフォーカスをあてたイベントで公演させていただきました。 [撮影:飯田昌之] その公演では、Zen-Codingを知らない方向けに、Zen-Codingとは何か・どんなことが出来るのかなど、基に関して実演を行い

    Zen-Codingの応用でもっと超速に - 原稿ありきの変換について
  • 1