画像の位置を決めるには、たくさんの方法がある
画像だけに関わらず、文字も含め、自由にレイアウトするためにはたくさんの方法があります。ここではその方法を書いてみます。しかし、中でももっとも基本となるのは、表（テーブル）を使うことなので、まずは重点的に表の使い方を覚えておきましょう。テーブルの表示方法については「奥義！表(テーブル)を使う」で詳しく解説しますので、そちらを参考にして下さい。
■画像の位置を調整する方法
1 表（テーブル）を使う。→詳細
2 左、右、中央、上、下にそろえる。
3 画像のまわりのスペースを調整する。
*他にも、レイアウトコンテナ（DIV）を使ったり、スタイルシートを利用するなどの方法がありますが、ここでは触れません。
1 表（テーブル）を使う。
ページを大きくレイアウトするときには最もよく使う方法と言えます。
・こちらには
・メニューなど
・を表示したり。 |
 |
| ここにはタイトルなどを表示したり。 |
・こちらには
・メニューなど
・を表示したり。 |
|
| ロボットの色説明 |
|
緑色のロボット |
|
水色のロボット |
 |
オレンジ色のロボット |
２ 左、右、中央、上、下にそろえる。
同じくテーブルを使い、上下左右にそろえて表示します。
■右にそろえる
・こちらには
・メニューなど
・を表示したり。 |
|
■左右中央にそろえる
・こちらには
・メニューなど
・を表示したり。 |
|
■上下中央にそろえる
・こちらには
・メニューなど
・を表示したり。 |
|
３ 画像のまわりのスペースを調整する。
画像のまわりには余白を指定できます。
■左右余白を指定します
*上が余白なし。下が左右余白を10に設定しています。
■上下余白を指定します
*上が余白なし。下が上下余白を10に設定しています。そのため、上の左右ではロボットとロボット間の間隔がありませんでしたが、下では隙間ができています。
*現在では余白の指定などの微調整はスタイルシートを使って行うのが主流です。
|
