レイアウトの検討

　閲覧者にとって、Web ページの見易さは必須の要件です。そのため見易いレイアウトが望まれます。
　レイアウトをある程度固定するためには下記の様な方法が考えられます。
　１．table タグを使う。(現在は非推奨ですが、初心者には便利です)
　２．grid レイアウトを使う。(２次元的な配置が出来て、table よりも優れたレイアウトが可能)
　３．フレックスボックスを使う。(１次元的な配置が出来て、折返しなどを含めてレイアウトします)
　４．float を使う。(従来よく使われましたが、今は本来の回り込み配置に限定して使用すべきです)

　以下では、これらの実例を見てみます。　レイアウトサンプル
１．TABLEタグを使う　(非推奨ですが、初心者には便利です)

　　HTMLで作ったホームページは、基本的にレイアウトの設定が甘くなります。

　例えばこのように、ページをレイアウトしたときには、ブラウザウインドを左右に広げたり縮めたりすると、図などのレイアウトが動いてしまいます。

　これを防ぐために、<Tableタグ>を使います。　<Tableタグ>は、<tr>、<th>、<td>と組み合せてテーブル（表）を作成します。
　tr でテーブルの行を、th でヘッダ部分の、td でその他のセルの内容を記述します。

Ⅰ．TABLEタグの使用例

TABLEタグの記述は次のように書き、各セル毎に分かれて表示されます。
このように書くと、右下のような表が出来ます。

こうすると、レイアウトが安定し、見栄えも良くなりますね。

この文自体もテーブル表記になっています。TABLEタグ内の BORDER=1を BORDER=0に変えると、次の第Ⅱ項のようになります。

HTMLソース

<table border=1 style="width:160px;
  text-align:center; background:#cfc;">
<caption>【テーブルの例】</caption>
<tr><td colspan="3">top セル</td></tr>
<tr>
<td rowspan="2" style="width:1em;">左</td>
<td rowspan="2" style="width:60%; height:200px;">
  中央</td>
<td>右上</td>
</tr>
<tr><td>右下</td></tr>
</table>

【テーブルの例】
top セル
左	中央	右上
		右下

Ⅱ．TABLEタグの枠を取る

TABLEタグの記述は次のように、各セルに分割して記述します。
このように書くと、右下のような表が出来ます。

こうするとレイアウトが安定し、見栄えも良くなります。

この記述自体もテーブル表記になっています。TABLEタグ内の BORDERを BORDER=0 に変えると枠線が消え、このようになります。

HTMLソース

<table border=0 style="width:160px;
  text-align:center; background:#cfc;">
<caption>【テーブルの例】</caption>
<tr><td colspan="3">top セル</td></tr>
<tr>
<td rowspan="2" style="width:1em;">左</td>
<td rowspan="2" style="width:60%; height:200px;">
  中央</td>
<td>右上</td>
</tr>
<tr><td>右下</td></tr>
</table>

【テーブルの例】
top セル
左	中央	右上
		右下

２．grid レイアウトを使う

　grid レイアウトは html5 より利用できるようになりました。
table のように２次元的な配置が出来て、更に効果的なレイアウトも可能です。
　使い方は、
　１．親要素で全体の枠組みを決め、
　２．各子要素をその枠に嵌め込む、
ように、レイアウトを行います。
　このため枠組みの変更や子要素の配置順も変えられて、レスポンシブ対応にも適しています。

　この項の部分を書き出すと以下のような HTML構成になり、右下の図の様な配置になります。

この項の HTML 構成 →

<div class="boxrl" style="width:160px; margin:0 auto;
  display:grid; grid:32px 60px 60px/ 1fr 60px; background:#cfc;">
  <div style="grid-row:1; grid-column:1 / 3; padding:4px;">
    top テキスト</div>
  <div style="grid-row:2/4; grid-column:1; padding:8px 16px;">
    メイン</div>
  <div style="grid-row:2 ; grid-column:2">
    画像</div>
  <div style="grid-row:3 ; grid-column:2">
    右下</div>
</div>

top テキスト

メイン

画像

右下

３．フレックスボックスを使う

　flex box も html5 より利用できるようになりました。
grid が２次元的な配置なのに対して、flex は折返しも含めた１次元的な配置をする時に便利で、メニューを横に並べたりする時に使われます。
　使い方は、
　１．親要素で全体の枠組みを１次元的な配列で決め、
　２．各子要素をその枠に嵌め込み、
　３．子要素の上下左右位置なども決めることが出来て、
レイアウトが可能です。

　勿論、枠組みの変更や子要素を配置する順序も変えられるので、レスポンシブへの対応にも適しています。
　この項の部分を flex で書くと以下のような HTML構成で、右下図の様な配置になります。

この項の HTML 構成 →

<div style="width:160px; margin:0 auto; background:#eff;
  text-align: center; border: solid 1px #ccc;">
  <div style="padding:4px; border-bottom:solid 1px #ccc;">
    top テキスト</div>
  <div style="display:flex; background:#cfc;">
    <div style="flex:1; border-right:solid 1px #ccc;">
      メイン<br><br>左右が flex</div>
    <div style="width:60px;">
      <div style="height:60px; border-bottom:solid 1px #ccc;">
        画像</div>
      <div style="height:60px;">
        右下</div>
    </div>
  </div>
</div>

top テキスト

メイン

左右が flex

画像

右下

４．float を使う

　flex や grid の無かった Html5 より前の html では、図などのレイアウトを float を使って行っていました。
　float は本来、文字の回り込みを指定するものですから、そのようなような利用は現在も有用ですが、ページのレイアウトに力ずくで利用するのはやはり無理があります。
　ここでは確認を含め、float の回り込みでレイアウトをしてみました。

　この項の部分を float で書くと以下のような HTML構成で、右下図の様な配置になります。

top テキスト

テキスト

右下

テキスト

この項の HTML 構成 →

<div style="width:160px; background:#cfc;">
 <div style="border:solid 4px #ddf;">top テキスト</div>
 <div style="border:solid 4px #ddf; border-top:0px;">
  <img src="fuji.jpg" style="width:40px; float:right; margin:16px;
   vertical-align:top;" alt="富士">
  テキスト          
  <br style="clear:right;"><br>
  <div style="float:right; width:40px; height:30px; margin:0 auto; 
   background:#eff; text-align:center; border:solid 1px #ccc;">
   右下</div>
  <div style="width:80px; height:50px; border:solid 5px #ccc;
   margin-left:8px;">テキスト
  </div>
 </div>
</div>

Top ページ> ＨＰ作りTop> HTMLの初歩/ 初歩解説/ ソース表示/ 画像貼付/ リンク/ Tableタグ/ 演習sample/