画像の位置を調整する方法
画像の位置を設定するステップ
①デザインビューに画像を貼り付けます。
ファイルパネルで作業用フォルダに画像用フォルダを作成し、画像ファイルを格納し、そこから画像を引っ張ってくるとアップロードする時楽です。
②imgタグにクラスを指定します。
<img class="cls01" src="image/1.jpg" width="160" height="107" />・IDでも良いのですがプロパティの再利用頻度を考えると、一回きりしか使えないIDより何度も使えるクラスのほうが使い勝手が良いような気がします。
③CSSでimgのクラスタグにpadding,background-color,marginを指定します。
img.cls01 {
padding: 30px;
background-color: #396;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}paddingはbackground-color（背景色）で塗りつぶされる内側の余白の事でmarginは上下左右隣り合うボックス要素とどれぐらい離すか設定できる、paddingよりもさらに外側の余白の事です。CSSの設定は関連付けるのが上手くいかない場合もありますが、なんとか頑張りましょう。どうしてもできない時はCSSスタイルパネルで新規CSSルールボタンからCSSファイルを作るのも一つの方法です。
④marginタグの数値を微調整していきます。
margin-top（上）
margin-right（右）
margin-bottom（下）
margin-left（左）
をpx（ピクセル）等で指定できます。
Tips
・bodyタグのmarginとpaddingを0pxにすると画像がぴったり端に配置できます。
body {
margin: 0px;
padding: 0px;
}・メニューの下にあるドキュメントツールバーのマルチスクリーンボタンを押すとスマートフォン・タブレットなど様々な解像度でＷｅｂページがどのように表示されるか、簡単なプレビューテストを行う事ができます。
関連キーワード（検索のヒント）
画像 lt quot Dreamweaver 表示 タグ CSS 作成 設定 テーブル 指定 ページ amp サイト リンク ファイル セル リスト 挿入 方法 入力 テキスト ホームページ 質問 背景 選択
広告
関連コンテンツ