Zen Codingで画像を挿入する

Zen Codingで画像を挿入する

Webページには、画像を挿入することも多いと思います。

HTMLで画像を挿入するには、「<img>」タグを使います。最低限「src=""」と「alt=""」の2つの属性を加えて、「<img src="" alt="">」というコードを入力します。エディタによっては、編集画面に画像をドラッグアンドドロップして、画像表示サイズなどを入力することもできます。

Zen Codingでは、省略形「img」を入力して展開すると、「<img src="" alt="">」となります。ここで、src属性に画像のURL、alt属性に代替テキストを入力します。

1. 省略形の入力

   Zen Codingを導入したエディタで画像タグの省略形「img」を入力する。

   
2. 省略形の展開

   ショートカットキーで省略形を展開する。

3. コードが展開された

   「img」が「<img src="" alt="" />」と展開されている。

   

   HTML4.01文書の場合は、「<img src="" alt="">」の形に修正しておく。

   <img src="" alt="">

4. 属性値を入力する

   src属性にURL、alt属性に代替テキストを入力する。

   

Zen Codingで画像のサイズを自動入力する

Zen Codingは、画像のサイズを自動入力する［Update image size］（エディタによっては、［Update <img> size］）というメニューがあります。

実行すると、画像ファイルから表示サイズを読み取って、width属性とheight属性が入力されます。すでに入力されていた場合も、最新の情報で上書きされます。

1. 画像サイズの自動入力の選択

   ［Update Image Size］メニューを選択する。

2. 画像サイズの更新

   画像サイズが自動的に入力される。

   
3. 内容の入力

   ページの内容を入力する。

   <p><img src="images/sample.jpg" alt="タンポポ" width="320" height="240" /></p>
   <p>道ばたでタンポポを見つけた。</p>