区画タグと画像コンテンツ — div in div —

2016/07/13

区画タグ(1)

次に div タグの実験を行います。

<div style="border: solid"> ここからは区画Aです。区画Aの範囲が枠で囲まれています。div タグはネストできるでしょうか? <div style="color: red"> ここが新たな区画です。文字を赤色にしています。これを区画Bとしましょう。 </div> ここは区画Aの中ですが、区画Bの外です。 </div> ここは区画Aの外です。

ここからは区画Aです。区画Aの範囲が枠で囲まれています。div タグはネストできるでしょうか?

ここが新たな区画です。文字を赤色にしています。これを区画Bとしましょう。

ここは区画Aの中ですが、区画Bの外です。

ここは区画Aの外です。

この結果はリーズナブル。

区画タグ(2)

複数の画像などを並べたい場合には table を使う古くからの方法もあろうが、HTML5の時代には画像をdivタグで区画化し、position属性を利用するのが素直で簡便であろう。子区画の配置位置を親区画の座標原点(左上座標)からの相対位置で指定するには、親区画のposition属性をstatic以外に指定し、子区画のposition属性を absoluteに指定する必要がある。(http://www.htmq.com/style/position.shtml)

以下の例では、(簡単のため)画像を文字列で代用しpositionを指定している。

<div style="border: solid;position:relative;"> ここからは区画Aです。区画Aの範囲が枠で囲まれています。<br> <div style="color: red; position:absolute;left:25em;"> 親区画Aの中の子区画B。文字を赤色にしています。 </div> <div style="color: blue; position:absolute;left:50%;top:0em"> 親区画Aの中の子区画C。文字を青色にしています。 </div> ここも区画Aの中ですが、区画Bと区画Cの外です。 </div> ここは区画Aの外です。

ここからは区画Aです。区画Aの範囲が枠で囲まれています。

親区画Aの中の子区画B。文字を赤色にしています。

親区画Aの中の子区画C。文字を青色にしています。

ここも区画Aの中ですが、区画Bと区画Cの外です。

ここは区画Aの外です。

この結果も一応リーズナブル。

区画の配置に座標を持ち込むのだから、leftとtopを共に指定するのが真っ当な考え方であろう。ここでは子区画Bのtopが省略されている。この場合の振る舞いが僕はまだよく理解できていない。

区画タグ(3)

画像配置を div の position で指定してみたが....
分からなくなってしまった...

以下の画像は
<div style="position:relative;border:solid;border-color:red"> <div style="border:solid;border-color:blue"> <img src="lily.jpg" width="50%"><br> リリー </div> <div style="position:absolute;left:50%;top:0px;border:solid;border-color:green"> <img src="iris.jpg" width="50%"><br> アイリス </div> ここは赤色区画の中です </div>
で生成されたものだ。

子区画で position:absolute を指定する場合には、親区画では position:static を指定してはならない。
position:static はデフォルトなので、明示的に他の値を指定することになる。

リリー

アイリス

ここは赤色区画の中です

img の width のパーセントの意味がわかるように、区画の境界に色を付けた。

結果はリーズナブル。しかし、画像サイズを揃えるのは難しいかも...

注意点:最初の子区画(ここでは青色区画)の position は static または relative にする。そうしないと意図通りの描画はしないであろう。

position のデフォルトは static であり、その場合 left や top の値は無視される。

区画タグ(4)

画像の高さを揃えて、画像を横に並べるには、次のコードのようにやる方法もある。

<div style="position:relative;border:solid;border-color:red;margin-left:10%;width:80%">
<div style="border:solid;border-color:blue;height:300px">
<img src="lily.jpg" height="90%"><br>
リリー
</div>
<div style="position:absolute;left:50%;top:0px;border:solid;border-color:green;height:300px">
<img src="iris.jpg" height="90%"><br>
アイリス
</div>
ここは赤色区画の中です
</div>

で生成されたものだ。

今回は画像の高さを揃えるために、画像を含む区画の高さを全て 300px に指定している。
その下で、画像の高さを90%パーセントで指定する。これで画像は270pxの高さに揃えられたはず。

全体を少し右に寄せているが、これには margin-left を使っている。

リリー

アイリス

ここは赤色区画の中です

結果はリーズナブル。

注意点:最初の子区画(ここでは青色区画)の position は static または relative にする。そうしないと意図通りの描画はしないであろう。

「区画タグ(6)」に改善版がある。

区画タグ(5)

描画位置を座標で指定するのは好きではない。

画像の大きさを固定した場合には、確実に2個を横に並べることはできない。ページの横幅が小さくなった時には画像の横幅も小さくなる必要がある。画像の横幅をパーセントで指定する必要があろう。以下の2つの画像はいずれも、画像の横幅をパーセントで指定しているが、難しい。

全体を少し右に寄せているが、これには margin-left を使っている。

コード:
<div style="position:relative;border:solid;border-color:red;margin-left:10%;"> <div style="float:left;border:solid;border-color:blue;width:30%;"> <img src="lily.jpg" width="100%"><br> リリー </div> <div style="float:none;border:solid;border-color:green;width:70%"> <img src="iris.jpg" width="46%"><br> アイリス </div> ここは赤色区画の中です </div>

コメント:

div の style の中の width のパーセントは、親区画の横幅に対するもの。
他方、img の width のパーセントは、div の横幅に対するもの。
float を指定する場合には position は static にする。
(static は position のデフォルトなので、 position を省略してよい)
float の影響を後に残さない場合には float:none にする。
(場合によっては他の簡便な方法、例えば <p style="clear:both"> も良いかも知れない)

リリー

アイリス

ここは赤色区画の中です

異なるサイズの原画像を使って表示される画像の高さを揃えるには、理論的な計算を行うか、試行錯誤が要求される。この意味で、簡単ではない。

「区画タグ(7)」に改善版がある。

区画タグ(6)

以下の方法は「区画タグ(4)」の改善版である。特徴は

描画位置を座標で指定しない
画像サイズが固定されているのでページの横幅によっては画像が重なる
コーディングが簡単

全体を少し右に寄せているが、これには margin-left を使っている。

コード:
<div style="position:relative;border:solid;border-color:red;margin-left:10%;"> <div style="float:left;border:solid;border-color:blue;width:30%;height:240px;"> <img src="lily.jpg" height="90%"><br> リリー </div> <div style="float:left;border:solid;border-color:green;width:30%;height:240px;"> <img src="iris.jpg" height="90%"><br> アイリス </div> <div style="float:left;border:solid;border-color:yellow;width:30%;height:240px;"> <img src="portyeraka.jpg" height="90%"><br> ポーチェラカ </div> <p style="clear:both"> ここは赤色区画の中です </div>

コメント:
以下、画像を直接含む div を「額縁」と呼ぶ。

全ての額縁の高さを統一している。(ここでは全て240px)
その下で img の高さを、額縁の高さに対するパーセントで指定している。(ここでは全て 90%)
全ての額縁の style を position:static;float:left で統一している
(static は position のデフォルトなので、実際には position を入れていない)
float の影響を絶つために <p style="clear:both"> が実行されている

リリー

アイリス

ポーチェラカ

ここは赤色区画の中です

画像を額縁の横幅に対するパーセント(例えば 90%)で指定した場合には、ページの横幅の変化に応じて画像のサイズも変化するが、画像のキャプションの位置に問題が発生する。

額縁の幅の変化に対して高さが自動調整される仕組みがあれば良いのだが... 難しいだろう...

区画タグ(7)

以下の方法は「区画タグ(5)」の改善版である。特徴は

描画位置を座標で指定しない
ページの横幅が変化した場合には画像サイズが自動調整される
コーディングは簡単だが、高さを揃えるには、パラメータの調整が面倒(難しい)

全体を少し右に寄せているが、これには margin-left を使っている。

コード:
<div style="position:relative;border:solid;border-color:red;margin-left:10%;"> <div style="float:left;border:solid;border-color:blue;width:30%;"> <img src="lily.jpg" width="90%"><br> リリー </div> <div style="float:left;border:solid;border-color:green;width:30%;"> <img src="iris.jpg" width="90%"><br> アイリス </div> <div style="float:left;border:solid;border-color:yellow;width:30%;"> <img src="portyeraka.jpg" width="90%"><br> ポーチェラカ </div> <p style="clear:both"> ここは赤色区画の中です </div>

コメント:
以下、画像を直接含む div を「額縁」と呼ぶ。

全ての額縁の横幅を統一している。(ここでは全て30%)
その下で img の高さを、額縁の高さに対するパーセントで指定している。(ここでは全て 90%)
全ての額縁の style を position:static;float:left で統一している
float の影響を絶つために <p style="clear:both"> が実行されている

リリー

アイリス

ポーチェラカ

ここは赤色区画の中です

次の図はリリー、アイリス、ポーチェラカの額縁の幅を各々 28%, 30%, 32% にしたもの。
画像の縦横比が統一されていれば簡単なのだろうが、そうでなければ試行錯誤で決めていくことになろう。

リリー

アイリス

ポーチェラカ

ここは赤色区画の中です

調整は img の width でもできるが、額縁の方が見栄えが良い。

区画の中の複数の figure タグ

最後に紹介するのは figure を使った処理。これがうまく働くと楽なのだが...
親区画(赤)が画像を含むようにするために、空の div を導入して誤魔化している。

コード:
<div style="position:relative;border:solid;border-color:red;"> <figure style="position:absolute;left:10%;top:0px;height:250px"> <img src="lily.jpg" height="90%"> <figcaption> リリー </figcaption> </figure> <figure style="position:absolute;left:40%;top:0px;height:250px"> <img src="iris.jpg" height="90%"> <figcaption> アイリス </figcaption> </figure> <figure style="position:absolute;left:70%;top:0px;height:250px"> <img src="portyeraka.jpg" height="90%"> <figcaption> ポーチェラカ </figcaption> </figure> <div style="height:270px"> </div> 親区画が figure で指定した画像要素を含むようにするために工夫が必要である。 </div>

以下に結果を示す。

親区画が figure で指定した画像要素を含むようにするために工夫が必要である。

コメント:

figure タグで高さ(height)を指定している
img タグで、高さをパーセントで指定している。割り算の分母は、figure タグの高さのはず
空の区画(div)を追加している。高さは、figure タグの高さより少し大きい

figure の中に複数の写真

キャプションを図ごとに書かなくてもよい、つまり一括して書いてもよいのであれば、次の方法が簡便である。

コード:
<figure style="width:80%;border:solid;border-color:red;"> <img src="lily.jpg" width="30%"> <img src="iris.jpg" width="30%"> <img src="portyeraka.jpg" width="30%"> <figcaption> リリー、アイリス、ポーチェラカ </figcaption> </figure>

以下に結果を示す。

この結果はページの横幅の変化に見事に追随してくれる。残念ながら高さが揃っていないが、揃えたいのであれば width の値を図ごとに調整しなくてはならない。

次の図は高さを揃えるために、各々の img で height:200px を指定している。この方法の欠点はページの横幅によっては(図の大きさが固定しているために)必ずしも3つの写真が並んでくれないことだ。並ばせる必要がないならば、良い方法であろう。

float の取り消し

float の影響が不必要に後に続くことに悩まされることがある。

以下の写真は次の HTML コードで書いている。
<figure style="float:left;width:40%"> <img src="lily.jpg" width="90%"> <figcaption> リリー </figcaption> </figure>

ここからの文章は figure タグの後に続いて書かれている。
これらの行は float の対象になっていて、画像の右に流し込まれる。

流し込みはここで終わりたい。さて、どうするか?

ここで

	<p style="clear:both">

あるいは

	<p style="clear:left">

と書けばよい。

float 指定から解放されて、新たに開始された文章。