HTML+CSSコーディングが10倍速くなるZen Coding

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>
    内容の入力
HTML+CSSコーディングが10倍速くなるZen Coding
  • HTML+CSSコーディングが10倍速くなるZen Coding
  • こもり まさあき・岡部 和昌 著
  • ISBNコード
    978-4-8443-2945-9
  • インプレス

この記事は、書籍『HTML+CSSコーディングが10倍速くなるZen Coding』の内容の一部を、Web担向けに特別にオンラインで公開しているものです。

ネットで話題の"究極の超速コーディング"がだれでもマスターできる!

めんどうなタグ入力も、一瞬でラクラク変換! Zen Codingを使えば、かんたんな「省略形」だけでHTML/CSSタグがどんどん入力でき、複雑なHTML/CSSも、あっという間にコーディング可能です!同じタグの繰り返しや入れ子構造、連番も一発で自動変換。Webページ制作が画期的にスピードアップできます。 日々大量のタグを打つWebデザイナー、マークアップエンジニア、サイト更新担当者らが泣いて喜ぶマジックツール、Zen Codingのはじめての解説書です。

この記事が役に立ったらシェア!
みんなが読んでるWeb担メルマガで、あなたも最新情報をチェック
  • SEOやデジタルマーケの最新情報をゲット
  • 事例やインタビューも見逃さない
  • 要チェックのセミナー情報も届く
みんなが読んでるWeb担メルマガで、あなたも最新情報をチェック
  • SEOやデジタルマーケの最新情報をゲット
  • 事例やインタビューも見逃さない
  • 要チェックのセミナー情報も届く

Web業界の転職情報

もっと見る
Sponsored by

人気記事トップ10(過去7日間)

今日の用語

Google爆弾
Googleに限らず、検索エンジンでネガティブな言葉を入力すると特定のホームペー ...→用語集へ

連載/特集コーナーから探す

インフォメーション

RSSフィード


Web担を応援して支えてくださっている企業さま [各サービス/製品の紹介はこちらから]