こんにちは。フリーでWeb開発をしているとみっちです。
一人で数十画面のHTMLコーディングとか、これほど孤独で辛い戦いはない・・・。
今日は1日HTMLばっかり見ていて誰とも話しをしてないぞ。
気晴らしに喫茶店に仕事しに出てきたけど、なんだかみんな浮かれていてつれー！
さらに、SNSを眺めると、なんだかみんな楽しそうでつれー！
・・・フリーランスの闇！！
さて、今回はimgタグのお話です。
imgタグのwidthとheightなんてまだ設定しているの！？
なんて言われそうだけど、僕は設定する派。
というかこれまで依頼されてきた案件は、大抵widthとheightを省いていいとは言われないんだよね。
今から何年も前に、EC Studioさんのブログで、
「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」をインストールするよ。
パッケージコントロールを使ってサクッとインストール。
⌘(Command) + ⇧(Shift) + Pr>
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タグ内で、
Ctrl + Shift + I
と押すと、widthとheightが再計算されるよ！本当に便利・・・！
Update Image Size機能はCSSファイルでも動作して、background-imageを設定した行で実行すると、background-sizeを自動で設定してくれるので是非お試しあれ。
Emmetで数値計算するショートカットも合わせて使用すれば、爆速コーディングへ一歩踏み出せるんじゃないだろうか。
皆で爆速コーディング目指そう〜。
【追記】
なぜか今回紹介した操作画面のアニメーションで、altタグが抜けてました。。
altタグも適切に設置しようね。
