こんにちは。フリーランスでweb開発をしている「とみっち」です。
(2018年7月に法人化しました！)
一人で数十画面のHTMLコーディングすることとか多いんですが、これほど孤独で辛い戦いはないですよ…。
最近HTMLばっかり見ていて誰とも話しをしてない。
気晴らしに喫茶店に仕事をしに出てきたけど、なんだかみんな浮かれているように見えてかなりツライ！さらに、SNSを眺めるとみんな見えてツライ！！！
…フリーランスエンジニアの闇！！
クリックでジャンプ
前置き
さて、今回はimgタグのお話です。
なんて言われそうですが、僕は設定をする派です。
そう言えば、これまで依頼されてきた案件では、widthとheightを省いていいと言われたことはない、そんな気がします。
今から何年も前に、EC Studioさんのブログで、
といった内容の記事があって、当時の自分もwidthとheightの指定がやたらと面倒だったので、世の中がこの流れになればいいなーなんて淡い期待を抱いていたんですが、どうもそうはならなかったようです。
皆さんはwidthとheightをどう考えていますか！？
あれから何年も経った今、テキストエディタがかなり進化して、例えばSublime Textのプラグインを使えばwidthとheightを手打ちしなくていい時代が来ました。
今回の記事では、Sublime Textでimgタグの数値を自動入力させる方法を書いてみます。
imgタグにwidthとheightの指定って必要あるの！？
<img src="/img/xxxxx" alt="代替テキスト" width="300" height="150">
ブラウザがwebを表示する際、widthとheightが未指定の状態だと、画像のダウンロードが完了してからレイアウトを計算します。
しかし、あらかじめwidthとheightを指定してあれば、事前に表示するwebページのレイアウト(画像サイズ)を計算しておくことが可能なのです。
画像の読み込みが完了していなくても、レイアウトだけ完成すれば閲覧時の体感速度が速くなると言えます。さらにレイアウトが崩れずに、綺麗に画像を読み込んでいけるという大きなメリットが。
読み込み時の挙動を気にしないなら全然いいのですが、ちょっとでも気にするのであれば、ぜひともwidthとheightを指定しておきましょう。
とは言っても、いちいち画像のサイズをHTMLに正しく入力するのはかなり面倒です。
そこで登場するのがSublime Textのプラグインである「AutoFileName」と「Emmet」の出番！
プラグイン「AutoFileName」と「Emmet」をインストール
まずは、Sublime Text3にプラグイン「AutoFileName」と「Emmet」をインストールします。
パッケージコントロールを使ってサクッとインストールしましょう。
⌘(Command) + ⇧(Shift) + P
Ctrl + Shift + P
もしくは「Tools → Command Palette」と選択します。
コマンドパレットを呼び出して、「install」と入力。
「Package Control: Install Package」と表示されるので、Enterキーを押します。
そうすると、パッケージ名を入力する画面となるので、「AutoFileName」と入力。続いて「Emmet」をインストールしましょう。
パッケージのインストールは、SublimeTextハイになる瞬間の一つですねw うーん、快感。
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タグも忘れずに設置しましょうね！
