HTML and CSS Coding

さて問題です。下の2つの背景画像で、端がめくれ上がっているのはどっちでしょう？

「表現手法としてどちらが優れているか？」という問題ですと、人によって答えは違うかもしれません。上の画像は紙の折れ曲がっている部分に影の表現がありませんが、下の画像にはそれがあります。しかし2つの画像を見比べてみると、下の画像の折り曲げ部分に、何か違和感を感じるかもしれません。それはなぜかというと、下の画像の折れ曲がっている部分の寸法は、折り返した部分が紙に密着している寸法になっているからです。そして上の画像は影などの効果は何も付けていない手抜きですが、紙が密着せずに浮いている寸法になっています。

幾何学的観点から結論を言うと、下の画像は折った部分が下に密着していて、上の画像は折った部分が斜めに浮いている状態です。今回はベクターグラフィックのソフトを使ってこの画像を作りましたが、上のような状態を意図して、下のようにただ単に反転操作を使っている人は多いのじゃありませんか？　円形部分だとあまり目立たないですが、長方形を折ると違いは一目瞭然です。

回転という一手間と、回転は一発勝負

さて、どうやって上のような画像を作るかというと、反転する折り目の線を、水平か垂直にする方法です。つまり、元の画像を回転させます。回転させて、水平か垂直の線に対して反転操作し、上下方向か左右方向に大きさを小さくし、浮き上がっている状態にするのです。

この浮き上がった状態を作ってから、また逆回転させると元の向きに戻ります。ただし、折り目の線に合わせる回転と、元に戻す回転は、できる限り一発できめないといけません。間違って別の角度に回転して、それを戻すためにあれこれと、何度もあっちやこっちに回転させていると、入力数値の上では元に戻っているのに、実際にはわずかに斜めになってしまうことがあります。

実は一番上の2つの画像は、完全には水平にはなっていません。わかりやすくするために、枠つきで並べたのが下の2つです。

外側に全然違う色のボーダーを表示すると、隙間の部分がわかりやすいと思います。そして、きちんと水平に作れたものが、下の2つです。ピンク色の枠線と隙間の部分を見ると、隙間は一様になっているのがわると思います。

紙の端がめくれているような表現は、いろんなところで使える表現ですが、ちょっとしたことで見た目が変わってきます。みなさんも、一手間かけてみてはいかがでしょうか。

ページ上部に画像を入れて、画像上に文字を入れることも多いでしょう。SEOの観点からは、画像文字よりもテキスト文字の方が有利です。しかし配色によっては、テキストに透過背景色を設定する方が読みやすくなる場合もあるでしょう。

画像に重ねた複数行のテキスト文字に対し、CSSで背景色を指定して透過にする方法は、大きく3通りの方法があります。

• 全体を四角く透過背景にする・block要素
• inline要素で透過背景
• inline-block要素で透過背景

この3つの方法を順番に説明していきます。

テキスト文字全体を含む四角い透過背景

これは、テキストを含むブロックレベル要素に対して背景色を設定した場合の方法です。

このように、ブロックレベル要素に背景色を指定すると、四角くなります。今回のソースは以下の通りです。

HTML

<div class="head_img_1">
<p>ここにテキスト文字を書いています。<br>
途中で改行すると、行によって文字の長さがまちまちになります。<br>
しかし背景色を適用しているのは <p> タグ内部のインライン要素ではありません。
ブロックレベル要素である <p> 自体に背景色を適用しています。</p>
</div>


CSS

div.head_img_1 {/*背景画像を含むdiv*/
border: 1px solid #F0F0F0; /*ボーダーは薄いグレー*/
width: 487px; /*幅は画像幅と同じ*/
height: 352px; /*高さは画像幅と同じ*/
padding: 0; /*パディングを0に指定*/
margin: 10px; /*マージンは10pxに*/
background: url(http://kitabaru.sakura.ne.jp/html-css-coding/wp-content/uploads/2014/07/FreeFloralDesignVectorGraphic-reflect-y.jpg); /*背景画像を指定*/
}
div.head_img_1 > p { /*背景画像の内側の段落（パラグラフ・paragraph）のタグ*/
margin-top: 120px; /*上からのマージン*/
margin-left: 80px; /*左からのマージン*/
margin-right: 10px; /*右からのマージン*/
padding: 8px; /*この指定で、背景色が文字の8px外側までになる。*/
color: #001800; /*文字色の指定*/
background: rgba(255,255,255,0.5); /*赤緑青と透過率の設定・白で透過率0.5*/
}


全体を四角く背景色という方法は、画像をどこかで一直線に区切ってであれば、効果的に使うこともできます。内側の <p> の3方向にmargin: 0;を指定して、幅か高さを画像サイズと一致させる場合のことです。

インライン要素全体に背景を指定・失敗例

では今度は、 <p> タグで括られたインライン要素全体を <span> タグで包んで、<span> タグに対して背景色と透過率を指定してみます。インライン要素に指定できるpaddingは、上下方向は1行1行の上下方向で、左右方向はタグで括る最初と最後の部分だけになります。 <br> タグでの改行や、長くて1行に入らず自動改行する部分では、左右方向のpaddingは適用されません。

このように、各行の両端にpaddingを指定したい場合は、各行ごとに <span> タグなどで括る必要があります。今回のソースコードは以下の通りです。

HTML

<div class="head_img_2"> <p><span><span>の始まりの部分は左側にpaddingがあります。<br>
しかし、改行部分にはpaddingは適用されません。<br>
上の2行は <br> タグで改行しましたが、この行は長く書いているので、幅の関係で途中で自動的に改行されます。どちらの改行の場合も、改行部分にはpaddingは適用されません。<br>
そして </span> の直前もpaddingが適用されます。</span></p> </div>

SCC

div.head_img_2 { /*画像を背景とする<div>*/
border: 1px solid #CCCCCC;
width: 500px;
height: 375px;
padding: 0;
margin: 10px;
background: url(http://kitabaru.sakura.ne.jp/html-css-coding/wp-content/uploads/2014/07/C00297-001N-reflect-y-0.125.jpg);
}
div.head_img_2 p { /*内側の<p>*/
margin-top: 150px;
margin-left: 80px;
margin-right: 10px;
text-align: right;
}
div.head_img_2 span { /*インライン要素全体を囲む <span>*/
padding: 4px; /*パディングを指定（今回は上下左右同じ値）*/
font-size: 14px;
line-height: 34px; /*フォントサイズとpaddingに合わせて行間を設定する。*/
color: #100800; /*文字色の指定*/
background: rgba(255,255,255,0.5); /*背景色と透過の指定*/
}


上下方向のパディングとフォントサイズに合わせて、行間の設定を行っておかないと、透過背景の部分が重なる場合があります。ここはインライン要素に上下方向のパディングを設定する場合特有の問題です。

1行ごとにdisplay: inline-block;とし、背景を指定

1行ごとに背景を分けて、かつ、一つの括りの中で改行することの無い長さに調節すれば、1行ずつ文字の部分だけに透過背景を作ることができます。もちろん、上下左右にきちんとpaddingが反映されます。インラインブロックを使ったソースコードは以下の通りです。

HTML

<div class="head_img_3">
<p>
<span>今回は1行ごとに<span>で括ります。</span>
<span>充分に長いと、<br>タグがなくても自動的に改行されます。</span>
<span>短いと、</span>
<span>横並びに</span>
<span>なります。</span><br>
<span><br> を使うと、</span><br>
<span>短くても改行されます。</span>
<span>逆に1行に長い文章を入れてみましょう。横に長くてはみ出す分は、自動的に改行されます。背景の色の変わり方を見ると、ブロックレベル要素と同じように四角くなっているのがわかります。</span>
<span style="line-height:22px;">そして縦方向の背景は、paddingにline-heightが加わります。この部分だけ個別に、line-heightを他より大きくしました。また別々のinline-block同士では、marginが適用されます。</span>
<span>これがインラインブロック要素です。</span>
</p>
</div>


CSS

div.head_img_3 {
border: 1px solid #CCCCCC;
width: 492px;
height: 330px;
padding: 0;
margin: 10px;
background: url(http://kitabaru.sakura.ne.jp/html-css-coding/wp-content/uploads/2014/07/han0205-049-reflect-y-0.25.jpg);
}
div.head_img_3 p {
margin-top: 2px;
margin-left: 40px;
margin-right: 10px;
text-align: right;
}
div.head_img_3 span {
display: inline-block; /*インラインブロックに指定*/
padding: 2px 4px; /*上下方向は2pxで、これにline-heightの値が加わる。左右方向は4px*/
font-size: 14px; /*フォントサイズは14px*/
line-height: 18px; /*行間がフォントサイズより上下に2pxずつ大きく、paddingと合わせると4px*/
margin: 4px 2px; /*他のインラインブロックとのマージン。上下は重なり・左右は合算*/
color: #101000;
background: rgba(255,255,255,0.5);
}


上下方向の背景は、paddingの値にline-heightの分を加えた値になります。

マージンは、上下方向については、重なり合います。上と下とで別々の値を指定した場合は、大きい方になります。一方で左右方向のマージンについては、左の値と右の値を足し合わせた値になります。スマホ等幅の狭い端末からのアクセスに備える場合は、左右方向のマージンを0として、細切れにする方法もあるでしょう。ただしこの場合はpaddingの分だけ隙間ができますから、句点や読点の部分で区切るなど工夫が必要となるでしょう。

おわりに

画像のalt属性よりもテキスト文字の方がSEO上有利になりますが、フォントなどで特にこだわりがない場合は、画像背景の上にテキスト文字を重ねる方がいいでしょう。そして配色の関係で読みにくい場合は、透過背景を使えばいいことになります。透過背景の使い方としては、全体を四角く囲むか、各行ごとに四角く囲むのがいいでしょう。特に後者の方法は便利なので、覚えておくと、何かと便利だと思います。

リンクにボタン状の画像を使いたいけれど、SEO上は画像リンクよりもテキストリンクの方が優位です。そこで、CSSを使ってテキストリンクに背景画像を設定し、CSSで位置を調整する方法を3通りご紹介します。

display: block; として line-height を height と合わせる

まず、 <a> タグに幅と高さを持たせるために、 display: block; とします。幅と高さは画像に合わせます。文字の左右を中央に合わせる場合は、text-align: center;とすれば大丈夫です。そして上下方向を中心に合わせるには、行間の高さを画像の高さに一致させます。line-heightを使います。

テキストリンク

この、画像を背景にした部分のHTMLとCSSを以下に書きます。

HTML

<a class="button" href="http://kitabaru.sakura.ne.jp/html-css-coding/wp-content/uploads/2014/07/freebu19_2-3.png" target="_blank">テキストリンク</a>

CSS

a.button {
display: block; /*blockレベル要素に指定*/
width: 160px; /*幅を画像サイズに合わせる*/
height: 55px; /*高さを画像サイズに合わせる*/
line-height:55px; /*行間の高さを画像に合わせる*/
text-align:center; /*文字の左右の配置を中央に*/
color: #8C0F27; /*文字色の指定*/
font-family: "Helvetica Neue", Arial, Helvetica, "Nimbus Sans L", sans-serif; /*フォントの設定*/
text-decoration: none; /*リンクの下線を非表示に*/
font-size: 14pt; /*フォントサイズを14ポイントに*/
background-image:url(http://kitabaru.sakura.ne.jp/html-css-coding/wp-content/uploads/2014/07/freebu19_2-3.png); /*背景画像の指定*/
background-position:0 0;" /*背景画像の表示位置を指定 左上からx,y方向に0と0*/
}
a.button:hover { /*マウスカーソルを合わせた時の設定*/
color: #CF310B; /*文字色を変更*/
background-position:0 -55px;" /*背景画像の位置を左上からx,y方向に、0と-55ピクセルに指定*/
}


HTMLとCSSのコードはこのようになります。マウスホバーで画像の色を変える部分は、下のように2画像を1つにまとめたものを使用しています。背景画像の表示位置の指定を使って、切り替える方式です。別々に分けた2枚の画像を使う場合に比べて、初回の応答性が高いのが特徴です。ブラウザの仕様によっては、ページを表示する時にはマウスホバー時の画像は読み込まず、マウスをホバーしてから読み込み開始するタイプのものもあります。このタイムラグをなくす便利な方法が、1画像にまとめたうえで表示位置を変える方法です。

文字を左寄せする場合の調整 text-indent

例えば左側に並ぶメニューのような場合、文字を左寄せにすることも多いでしょう。このような場合に、一番楽に左端の位置を調整できるのは、 text-indent を使う方法です。これは段落の始めの字下げ用の設定ですが、1行の場合でも使えます。paddingで指定する場合に比べると、幅の設定を画像サイズに合わせるだけですむのが便利なところです。（paddingで指定する場合ですと、paddingの分だけwidthの値を小さくする必要があります。）

• テキストリンク
• テキストでリンク
• 背景はCSSで

この番号なしリストのメニューのコードは以下の通りです。

HTML

<ul class="button2">
<li><a href="http://kitabaru.sakura.ne.jp/html-css-coding/wp-content/uploads/2014/07/freebu30_3-kai.png" target="_blank"<テキストリンク>/a></li>
<li><a href="http://kitabaru.sakura.ne.jp/html-css-coding/wp-content/uploads/2014/07/freebu30_3-kai.png" target="_blank">テキストでリンク</a></li>
<li><a href="http://kitabaru.sakura.ne.jp/html-css-coding/wp-content/uploads/2014/07/freebu30_3-kai.png" target="_blank">背景はCSSで</a></li>
</ul>

CSS

ul.button2 > li {
display: block; /*ブロックレベルに指定*/
margin-bottom: 1px; /*下に1pxのマージンを入れて白く抜けるようにする*/
}
ul.button2 > li > a {
font-family: "Helvetica Neue", Arial, Helvetica, "Nimbus Sans L", sans-serif;
color: #DEFFDE; /*色を薄い黄緑に*/
text-decoration: none;
font-size: 10pt;
display: block;
width: 130px;
height: 30px;
text-align:left; /*文字を左揃えに*/
text-indent: 24px; /*行頭の字下げを24pxに*/
line-height:30px;
background-image:url(http://kitabaru.sakura.ne.jp/html-css-coding/wp-content/uploads/2014/07/freebu30_3-kai.png);
}
ul.button2 > li > a:hover { /*マウスホバー時の設定*/
color: #FFFFFF; /*色を白に*/
}


左寄せで上下左右の位置を調整する場合 paddingで調整

背景によっては、文字の位置を上下の中心に以外に揃えたり、左右方向も調整する場合があるでしょう。そのような場合に、paddingを使って調整する方法です。paddingの分だけ、widthとheightの値を小さくする必要があります。widthとheightが画像サイズと同じ場合は、マウスホバーとみなされる範囲が背景画像から外にはみ出してしまいます。

左上からpaddingで調整

paddingを使って調整する場合のコードは以下のようになります。

HTML

<a class="button3" href="http://kitabaru.sakura.ne.jp/html-css-coding/wp-content/uploads/2014/07/freebu32_4.png" target="_blank">左上からpaddingで調整</a>

CSS

a.button3 { /*画像サイズは300px × 80px*/
display: block;
width: 276px; /* 300px - 24px = 276px　paddingの分だけ小さくする*/
height: 62px; /* 80px - 18px = 62px　paddingの分だけ小さくする*/
padding-left: 24px; /*左端のpadding この値だけ文字が左からズレる*/
padding-top: 18px; /*上端のpadding この値だけ文字が上からズレる*/
text-decoration: none;
font-size: 14pt;
font-family: "Helvetica Neue", Arial, Helvetica, "Nimbus Sans L", sans-serif;
font-weight: bold; /*今回はフォントを太字に*/
text-align: left;
color: #194F9E;
background-image:url(http://kitabaru.sakura.ne.jp/html-css-coding/wp-content/uploads/2014/07/freebu32_4.png);
}
a.button3:hover { /*マウスホバー時の設定*/
text-shadow: #A5D3E2 2px 2px 2.8px; /*文字に影をつける x,y方向に1pxと1pxの位置で、ぼかしは2.8px*/
}


おわりに

今回は、テキストリンクを画像リンクのように見せる方法と、文字位置の調整方法を3通り紹介しました。3通りありますから、好みも分かれるでしょう。画像リンクには独特のフォントを使うことができるのが、最大の特徴です。しかしSEO上は、画像文字にalt属性を指定するよりもテキストの方が有利です。なので、特にフォントについてこだわりがない場合か、テキストデータとして検索エンジンに認識させたい場合では、今回紹介したようにテキストデータの背景に画像を設定するのがいいでしょう。

HTMLではタグを入れ子構造にしますが、それは本当に入れ子になっていますか？　入れ子になっていない場合、HTMLの規格で定められている“閉じタグの省略”とみなされて、ブラウザが勝手に補正して表示します。意図した表示になっていない場合、あるタグの内側に入れることのできないタグを途中から使っている可能性があります。そんなわけで、ブラウザが勝手に、閉じタグを省略していると見なす場合について、今回はご紹介します。

長ったらしい前置き

人間にも扱いやすいHTMLから、機械可読性は向上したものの厳密に書かなければならないXHTMLへの移行は、当初の思惑ほどすんなりとはいきませんでした。XHTMLの普及には大変時間がかかり、HTML 4.01という幹から枝分かれして、そして枝の先が行き止まりになることが決定しました。XHTMLの次期バージョンは策定しないことが決定していて、HTMLが4.01から5に、大幅なバージョンアップをしようとしています。

さて、HTMLに対してXHTMLは、機械に対してフレンドリーな仕様になっています。HTMLにおいて認められていた閉じタグの省略が不可になり、空タグにもスラッシュを書くことになりました。またタグにも小文字しか使えなくなりました。

一方で、HTMLでは閉じタグを省略することが規格上認められているとはいえ、そのようなコードはきれいなコードではなく、きちんとタグを閉じるのが普通です。今では閉じタグを省略する人は普通はいないでしょう。

今のことではなく昔のことですが、閉じタグの省略で有名だった例として、Yahoo!オークションがあります。出品情報の記入で、ブログと同じようにHTMLのタグを使うことができます。そして入力が終わって「プレビュー」し、さらに書き換えようとして入力フォームを見ると、省略することが許容されている閉じタグが、自動的に省略される仕様でした。コードをきっちり書きたいユーザーから嫌われる仕様だったのは、言うまでもありません。

どんなときに閉じタグの省略とみなされるの？

さて前置きが長くなりましたが、どんな時に閉じタグが省略されるのかを、具体的な例を出しながら説明していきます。

あるタグの内側に入れることのできない開始タグが途中にあった場合、その直前に閉じタグがあるものと見なすことになっているタグがます。このことは、「HTMLが文法をマークアップする形式である。」という観点から見ると、大変わかりやすくなります。

段落中に入れることのできないタグ <p>タグについて

さて、皆さんがよく使うタグである、 <p> タグは、文法上何を意味するタグかご存知でしょうか。この「p」は、英語の「paragraph」の頭文字です。パラグラフ、日本語で言うと段落です。つまり、文法上段落の中に入れられないタグが途中で登場したら、その直前で段落が終わりであると見なす、つまり </p> があるものと見なす。こう覚えておくといいでしょう。

ではどんなタグがあると段落が終了すると見なされるか、つまり段落中に入れることのできないタグは何か、という話になります。代表的なものとしては、以下のものがあります。

• 段落 <p>
• 見出し <hx>
• 箇条書き <ol> 番号付きリスト
• 箇条書き <ul> 番号無しリスト
• 定義リスト <dl> 用語と説明
• 表 <table>

よくありがちなのは、このくらいでしょうか。それぞれのタグが文法上何を意味するタグなのかを知っていれば、段落の中に入れることができないことは、すんなりと理解できるでしょう。そしてこれらのタグは、全て“ブロックレベル”要素であることも重要なことです。“インライン要素なら段落の中に入れても大丈夫”と覚えておくといいかもしれません。例えば、 <a>タグなんかです。

見出しタグの中に入れられるタグ <hx>

さて、見出しは、見出しです。見出しの中に段落が来ることも、箇条書きが来ることも、表が来ることもありません。もちろん見出しが来ることもありません。例えば、 こんなときです。

<h1> ああああ <h2> いいいい </h2> うううう </h1>

このようなときは、「 <h2> の直前に、 </h1> があるものと見なす。」というのがHTMLの規格です。規格なのですから、ブラウザは規格に従って表示します。ブラウザがどう見なすかというと、こんな感じです。

<h1> ああああ </h1><h2> いいいい </h2> うううう </h1>

<h2> の前に </h1> があって、</h2> の後ろは特にタグの内側に入っていない“うううう”が続いて、最後によくわからない記述として、 </h1>がある。といったところです。

さて、何を入れてよくて何を入れたらいけないかについては、「見出しの <hx> タグの中には“インライン要素”しか入らない。」と、覚えておくといいかもしれません。

おわりに

さてここまで書いたら、もう概念的にはどういうお話か、わかったと思います。他にもいろんなタグで、省略と見なされる例があります。表中で使われる <tr> や <td> 、 <th> も省略が可能ですし、リストの <li> なんかもそうです。意図していない表示になって困っている場合には、今回紹介した「閉じタグの省略」によって変な表示になっていることもあるかもしれません。頭の片隅にでも入れておくといいかもしれませんし、文法エラーのチェック機能がある「Crescent Eve」といったエディタを使うのも手でしょう。（ただし、このディタではブロックレベルの <ins> と <del> には対応していないので、その点は注意してください。）

幅が可変のレイアウトで、メインビューなど幅が横いっぱいの画像を、表示デバイスに合わせて縮小表示する方法はいろいろな方が紹介しています。CSSの設定で、画像を囲むブロックレベル要素のpaddingをゼロに指定して、画像を外側のブロックレベル要素に対して100%の幅で指定すると、外側のブロックレベル要素の幅が変わるのに合わせて、内側の画像の幅が変わります。

今回紹介するのは、図や写真などで幅がまちまちの画像を、必要なときだけ自動的に縮小する方法です。うまく作らないと、内側の画像の幅が小さくならず、幅の狭いデバイスで見るときに外側の<div>の幅が画像サイズに合わせて大きなままになることがあります。また今回紹介する方法では、外側の<div>の幅が広いときに、画像が拡大されずに等倍で表示されます。もちろん、外側のカラムの<div>等にはpadding等が指定されていても大丈夫です。

例えば可変幅のカラムを<div>で作って、CSSではmax-widthとmin-widthをピクセル指定して、ブラウザの画面幅が広い場合はmax-widthの幅になり、ブラウザの画面を狭くすると、それに合わせて狭くなるレイアウトです。最小幅をiPhoneの幅の320pxからpaddingの分差し引いたピクセル数に指定して、最大幅はPCのブラウザで見る時の幅を指定する方法です。

前置き

いったいどういう問題にぶち当たったかと、解決までの過程を図で表しています。

うまくいった方法

実際のコード

画像の幅を調整するためのブロックレベル要素で<img>を囲みます。<div>等でpaddingゼロで画像だけを囲むかたちです。

HTML

<div id="content">
<!--/可変幅のコンテンツ部分/-->
...

<div class="variable_fig">
<img src="jacros.jpg" width="475" height="421" alt="写真の説明" style="max-width:475px;">
</div>
<!--/画像は幅がまちまちなので、どうしても<img>タグ内で、CSSでmax-widthを指定しないといけない。指定しない場合は、外側の<div>の幅いっぱいまで拡大表示されてしまう。/-->
...
<div>


CSS

/*可変幅のカラム*/
#content {
max-width: 883px; /*最大幅を指定*/
min-width: 300px; /*最小幅を指定*/
padding: 5px 10px 5px 10px; /*左右のパディングを指定可能*/
margin: 4px 0 8px 0;
}

/*画像を囲むブロックレベル要素*/
.variable_fig {
max-width: 883px;
padding: 4px 0 4px 0; /*paddingの左右はゼロ*/
margin: 4px 0 4px 0;
}

/*画像のCSS*/
.variable_fig > img {
padding: 0; /*左右はpaddingゼロ*/
margin: 0; /*左右はmarginゼロ*/
min-width: 274px;
width: 100%;/*この設定で、幅が外側のブロックレベル要素と同じ幅になる*/
height: auto;
}


画像の幅をCSSで100%に指定する部分は、よくある手法と同じです。そして100%に指定するための<div>等で外側を囲みます。この<div>等は外側のカラムの幅に合わせて拡大縮小されます。そして、その内側で画像が100%の幅で縮小されます。拡大されないようにするには、<img>タグに対して最大幅を指定する必要がありますが、画像のサイズがまちまちの場合は、インラインCSSで個別に指定する必要があります。

小さい画像をfloatで横並びにする場合の例です。

<div id="content">
可変幅のコンテンツ部分
...

<figure class="variable_fig2">
<img src="comtrac.gif" width="115" height="58" alt="写真の説明" style="max-width:115px;">
<figcaption style="max-width:115px;">図の説明をここに書きます。</figcaption>
</figure>
<!--/画像の説明部分の幅を画像幅に合わせる場合は、同様にインラインCSSを使わざるをえない。/-->
<figure class="variable_fig2">
<img src="atos.png" width="103" height="66" alt="写真の説明" style="max-width:103px;">
<figcaption style="max-width:103px;">図の説明をここに書きます。</figcaption>
</figure>

...
<div>


CSS

/*可変幅のカラム*/
#content {
max-width: 883px; /*最大幅を指定*/
min-width: 300px; /*最小幅を指定*/
padding: 5px 10px 5px 10px; /*左右のパディングを指定可能*/
margin: 4px 0 8px 0;
}

/*画像を囲むブロックレベル要素*/
.variable_fig2 {
max-width: 883px;
padding: 4px 0 4px 0; /*paddingの左右はゼロ*/
float: left; /*小さい画像を横並びにする場合*/
margin: 4px 3% 4px 3%; /*左右のマージンは％指定*/
}

/*画像のCSS*/
.variable_fig2 > img {
padding: 0; /*左右はpaddingゼロ*/
margin: 0; /*左右はmarginゼロ*/
min-width: 274px;
width: 100%;/*この設定で、幅が外側のブロックレベル要素と同じ幅になる*/
height: auto;
}