スマートフォン向けに表示を切り替える
メディアクエリーは@mediaルールを使い、max-width（またはmax-device-width）、min-width（またはmin-device-width）で適用範囲を指定します。連載のテンプレートではAndroid端末で多い横幅480pxを意識して、例のように「@media only screen and (max-width: 479px) 」と記述し、479pxまでのデバイスでHTMLメールの横幅が強制的にデバイス幅に調整されるようにします。
デバイスの切り替えサイズは、俗に「ブレイクポイント」と呼ばれます。スマートフォン用、タブレット用とブレイクポイントを細かく増やすこともできますが、スマートフォン向けとタブレット・PC向けがあれば十分でしょう。
class属性「wrapper」と「content」を適用したtable要素は、横幅がviewport（表示領域）の幅に100%で表示されます。table,tdセレクターを使って、class属性「content」のtable要素の中のtd要素には左右に10pxの余白を適用して、画面の横にぴったりと付かないように調整しています。
本文の文字サイズもデスクトップでは16px、スマートフォンでは17pxになるように変更を加えました。
■img-responsiveの記述をしたCSS
/* style要素内の最後に追加 */
@media only screen and (max-width: 479px) {
table[class="wrapper"] {
margin: 0 auto;
width: 100% !important;
box-sizing: border-box;
}
table[class="content"] {
width: 100% !important;
box-sizing: border-box;
}
table[class="content"] td {
padding: 0 10px;
}
img[class="img-responsive"] {
width: 100% !important;
max-width: 100%;
}
p {
font-size: 17px;
</style>
</head>
img-responsive
画像もデバイス幅で調整されるように、コンテンツ領域の2つの画像にはclass属性「img-responsive」を記述しておきます。
■ヘッダーバナーイメージにclass属性「img-responsive」を追加したHTML
<h1><img src="images/modern-header-retina.jpg" width="540" alt="ヘッダーバナーイメージ" class="img-responsive" /></h1>
■「応募する」ボタンにclass属性「img-responsive」を追加したHTML
<a href=""><img src="images/modern-button.jpg" width="200" alt="応募する" class="img-responsive" /></a>
class属性「img-responsive」を付与したimg要素は、スマートフォンでは横幅を100%に調整しています。HTMLにはデスクトップやタブレット向けに表示するサイズを「width="xxx"」の形式で設定しています。ロゴ画像にはその指定をしていません。横幅いっぱいに表示したい画像にだけclass属性を追加するのがポイントです。
「img-responsive」を付与する前のAndroid4.2（左）と付与した後（右）
「img-responsive」を付与する前のiPhone5s（左）と付与した後（右）
