え!?まだimgタグのwidthとheightを手入力してるの?

こんにちは。フリーでWeb開発をしているとみっちです。

一人で数十画面のHTMLコーディングとか、これほど孤独で辛い戦いはない・・・。

今日は1日HTMLばっかり見ていて誰とも話しをしてないぞ。

気晴らしに喫茶店に仕事しに出てきたけど、なんだかみんな浮かれていてつれー!

さらに、SNSを眺めると、なんだかみんな楽しそうでつれー!

・・・フリーランスの闇!!

さて、今回はimgタグのお話です。

imgタグのwidthとheightなんてまだ設定しているの!?

なんて言われそうだけど、僕は設定する派。

というかこれまで依頼されてきた案件は、大抵widthとheightを省いていいとは言われないんだよね。

今から何年も前に、EC Studioさんのブログで、

「widthとheight属性は指定しない」

というのがあって、当時の自分もwidthとheightの指定がやたらと面倒だったので、世の中がこの流れになればいいなーなんて淡い期待を抱いていたけれど、どうもそうはならなかったようだね。

皆さんはwidthとheightどう考えてます??
 

あれから何年も経った今、テキストエディタがかなり進化して、例えばSublime Textのプラグインを使えばwidthとheightを手打ちしなくていい時代が来たね。

確かDreamWeaverでは、ビジュアルモードで画像を選択して、何かリロードボタンみたいなのを押すと数値が自動入力されたように思うけど、やっぱりDreamWeaverは嫌いだし使わない。

というわけで今日は、Sublime Textでimgタグの数値を自動入力させる方法を書いてみるよ。

そもそもimgタグにwidthとheightの指定って必要?

<img src="../img/xxxxx" alt="代替テキスト" width="300" height="150">

ブラウザがWebを表示する際、widthとheightが未指定の状態だと、画像をダウンロードしてから画像サイズなどのレイアウトを計算するけど、指定してあれば事前に表示するWebページのレイアウトを計算しておくことが可能

画像を読み込む前に、表示する画像のサイズが分かっていると、閲覧時の体感速度が速い。さらに、この時ブラウザがどこにどの大きさで画像を表示するか分かっているから、レイアウトも崩れずに画像を読み込んでいけるという大きなメリットが。

読み込み時の挙動を気にしないなら全然いいけど、そうでないのなら是非ともwidthとheightを指定しておこう。

とは言え、いちいち画像のサイズをHTMLに正しく入力するのはかなり面倒。

そこで登場するのがSublime Textのプラグインである「AutoFileName」と「Emmet」の出番!

プラグイン「AutoFileName」と「Emmet」をインストール

まずは、Sublime Text3にプラグイン「AutoFileName」と「Emmet」をインストールするよ。

パッケージコントロールを使ってサクッとインストール。

■Mac
⌘(Command) + ⇧(Shift) + Pr>
■Win
Ctrl + Shift + P

もしくはTools → Command Palette を選択。
コマンドパレットを呼び出して、「install」と入力。

Package Control: Install Package」と表示されるので、Enterキーを押す。

そうすると、パッケージ名を入力する画面となるので、「AutoFileName」と入力。続いて「Emmet」も是非とも入れておこう。

パッケージのインストールは、SublimeTextハイになる瞬間の一つだね。

うーん、快感。

GitHubから落とす人はこちらからどうぞ。

「AutoFileName」でwidthとheightを自動入力

先ほどインストールした「AutoFileName」を使えば、「img」と入力してTabキーを押下、そして「src=""」内に相対パスを入力していくとディレクトリ内のファイルを一覧表示してくれる。

画像ファイルは、画像のサイズを表示してくれる。

使用したい画像をエンターを押して決定すれば、あらま、widthとheightが自動的に入力される!

「AutoFileName」はデフォルトでは相対パスで記述しないとファイルの一覧を表示してくれないので注意。

「../img/common/xxx」とかはよくて、「/img/common/xxx」だとダメよ。

絶対パスでも動作させるためには、プロジェクトごとにドキュメントルートを指定すればできる。この方法もまたいずれ紹介しましょう。

画像を変更した場合にwidthとheightを自動再設定

優れた「AutoFileName」だけど、後からコピペなどで「src=""」内の画像を変更した場合などには、widthとheightは自動で再設定されないんだよね。

そこで、登場するのが「Emmet」のUpdate Image Size機能。

画像ファイルを変更後、そのimgタグ内で、

■Win & Mac
Ctrl + Shift + I

と押すと、widthとheightが再計算されるよ!本当に便利・・・!

Update Image Size機能はCSSファイルでも動作して、background-imageを設定した行で実行すると、background-sizeを自動で設定してくれるので是非お試しあれ。

Emmetで数値計算するショートカットも合わせて使用すれば、爆速コーディングへ一歩踏み出せるんじゃないだろうか。

皆で爆速コーディング目指そう〜。
 

【追記】
なぜか今回紹介した操作画面のアニメーションで、altタグが抜けてました。。
altタグも適切に設置しようね。

プロから直接学べるプログラミングスクールの紹介!PHPコースあり!

Webデザインスクールの「WebCamp」が手がけるママのためのWebデザインコース

1ヶ月の短期集中でWebデザイナーを目指せます。仕事復帰を希望する主婦やママさんにオススメです。

1ヶ月でHP作成!WebCamp

【参考記事】HTMLの勉強ならTechAcademy(テックアカデミー)のフロントエンドコースが短期集中でオススメ!

自己流でプログラミングを覚えようとすると、環境設定でつまづく、書いたプログラムがなぜ動かないか解決できず、多大な時間を浪費してしまいがちです。

担当の指導者(メンター)が付いてくれるTechAcademyなら、分からないことをどんどん質問して解決できます!コードレビューしてもらえるのも素晴らしい点ですね。

【TechAcademy】家で学べるプログラミングスクール

【参考記事】HTMLの勉強ならTechAcademy(テックアカデミー)のフロントエンドコースが短期集中でオススメ!

Web制作会社が立ち上げたWebデザイナー育成スクール Web塾超現場主義

Web制作に実際に携わっている講師陣が、現場で通用するスキルを伝授します!卒業後は転職支援、仕事紹介などを行っており、フリーランス独立する道を探すこともできそうです。

まだ「独立・開業はちょっと...」という方へは、当社の制作案件をお手伝いして頂く道も開けます。
Facebookアカウントでコメント

※本コメント機能はFacebookによって提供されており、この機能によって生じた損害に対してザ サイベースは一切の責任を負いません。

ABOUTこの記事を書いた人

とみっち

埼玉でザ サイベースを主催しています。Webクリエイター。フリーランス歴7年。飄々と生きています。これでも育児頑張ってます。長野市出身。 @tomicci 詳しいプロフィール【興味】ギター/DTM/Web/車/田舎/旅/酒/育児 自然の音からデスメタルまで聴きます。【運営サイト】 ザ サイベース おと風景