前回に引き続き、今回は画像イメージを配置します。引っ越し先のブログ日記では、画像とテキストが主な要素。たまにmp3音源ファイルなども載せるかもしれないけれど、あまり複雑な事はしないつもりです。もうひたすらシンプルな日記に徹します。
　ところでどうでもいい話だけど、最近無性にリンゴが食べたくなって、一週間分を買い置きし、夜仕事から帰宅して寝る前に丸ごと１個食べたりしています。そこで今回はサイズ「800×533」のリンゴの写真を用意しました。その画像をCoda 2に配置するのにはどうするのかしら？と思ったら、普通にFinderからドラッグ＆ドロップでいけるんですね。すると＜img＞タグに主な属性も込みで記述されます。感動。

ウィンドウにぴったり合わせたい

　しかし、上図でのプレビューウィンドウで見たリンゴの写真は、当然のことながらウィンドウ幅よりサイズが大きいのではみ出ています（横スクロールバーが表示されている）。それを、iPhoneのような小さい画面であっても、ウィンドウの横幅ピッタリに合わせたい…というのが連載第４回のテーマ。

第4回「フルードイメージの導入とタイポグラフィの設定」

　そこで、CSSファイルに次のスタイルを追記し、HTMLからは「width=”800″ height=”533″」を削除しておきます。

img{ max-width : 100%}

　これで狭いウィンドウにも画像がぴったり表示されるようになりました。ちなみに「footer」をケツと呼ぶのはどうなのでしょうか？という声無き声を考慮して「あし」に変更しました。

　800ピクセルより大きいウィンドウの場合は拡大されず、原寸の横幅８００ピクセルで表示されるようです。下は11インチMacBook Airの画面フルサイズで表示した場合。

予期せぬ挙動にたじろぐ

　Coda 2のプレビューとMacBook Airのモニタで確認したので、これらファイルをサーバにアップし、手持ちのモバイル・ガジェットで表示を確認してみたところ…画像の横幅が画面にフィットせず、右端に空きスペースが表示されています（←）。
　当初、その原因が全く分からず、Retinaディスプレイ絡みの不具合か？と思ったのだけれど、iPad 2のタテ置き（768ピクセル）でも空いてしまうのでそれも無さそうだし…といろいろ考えながら、また珈琲タイムに突入しつつ、ぼんやりして過ごしてしまったのですが、こちらの記事をもう一度読み直していて、ようやく気付きました…。うっかりミスしてmetaタグにviewportを記述するのを忘れていました。

< meta name="viewport" content="width=device-width" >

　上の１行を挿入し、液晶画面に対してちゃんと横幅１００％で表示されるようになりました。が、iPad 2の画面をしばし眺めながら思ったんですけど、これは何か違うな…と。iPad の横置きで画像１００％は無いな、と。

　今回、たった３つの画面サイズの違いだけで、それぞれにサイトの見栄えを最適化する作業はちょっと手間がかかりそうだなあ…と感じた次第です。ちなみに初代iPod touchでの表示は、旧バージョンのSafariがHTML5のセマンティック要素を認識せず、もうダメダメでした。つづく。

４月も残１日ちょいですか。あ、もう無理です。

2014-04-29 ＞ VPS＆WordPress引っ越しメモ