2009年1月16日 金曜日  著者:

画像のサイズを指定する

挿入する画像のサイズを設定する時は、「width」「height」を使用します。それぞれ「width」は横幅、「height」は縦幅となっています。サイズは数値(px,em…)やパーセント(%)で指定します。
画像挿入サイズ指定

縦の位置を指定する

行の中でテキストや挿入した画像などの縦の位置を指定する時は、「vertical-align」を使用します。

ベースライン baseline
上に揃える場合 top
中央に揃える場合 middle
下に揃える場合 bottom
テキストの上に揃える場合 text-top
テキストの下に揃える場合 text-bottom
上付き文字で揃える場合 super
下付き文字で揃える場合 sub

vertical-align
数値(px,em…)やパーセント(%)でも指定する事ができます。その場合は、ベースラインが基準となります。(下に移動されたい場合は、マイナスで表記します。)
vertical-align02

それぞれ以下のように表示されます。位置が把握しやすいように背景の色もつけています。オレンジで括られたテキストに「vertical-align」を使用しています。
(※ブラウザやバージョンの違いによって、表示されるスタイルが異なることがあります。)
vertical-alignスタイル

テキストを回り込ませる

行の中でテキストや挿入した画像などの縦の位置を指定する時は、「float」を使用します。

 
左に寄せる場合 left
右に寄せる場合 right
指定しない場合 none
継承する場合 inherit

float01

例として、「style="float:left;"」と指定して、下の画像(imgタグ)に挿入すると

HTML:
  1. <img src="/wp-content/uploads/2009/01/d13.jpg" alt="公園" style="float:left;">
  2. <p>文章が回りこみました。</p>
  3. <p>ひだりひだりひだりひだりひだりひだりひだりひだりひだりひだりひだりひだりひだりひだりひだりひだりひだりひだりひだりひだりひだりひだりひだりひだりひだりひだりひだりひだりひだりひだりひだりひだりひだりひだりひだりひだりひだりひだりひだり</p>

表示結果

公園

文章が回りこみました。

ひだりひだりひだりひだりひだりひだりひだりひだりひだりひだりひだりひだりひだりひだりひだりひだりひだりひだりひだりひだりひだりひだりひだりひだりひだりひだりひだりひだりひだりひだりひだりひだりひだりひだりひだりひだりひだりひだりひだり

 

次に、回り込みを解除したい場合は 「clear」を使用します。

 
左の回り込みを解除する場合 left
右の回り込みを解除する場合 right
指定しない場合 none
両側の回り込みを解除する場合 both

clear01

先ほどの文章で「文章が回りこみました。」の後に「clear:left;」を入力します。

HTML:
  1. <img src="/wp-content/uploads/2009/01/d13.jpg" style="float:left;">
  2. <p>文章が回りこみました。</p>
  3. <p style="clear:left;">ひだりひだりひだりひだりひだりひだりひだりひだりひだりひだりひだりひだりひだりひだりひだりひだりひだりひだりひだりひだりひだりひだりひだりひだりひだりひだりひだりひだりひだりひだりひだりひだりひだりひだりひだりひだりひだりひだりひだり</p>

表示結果

文章が回りこみました。

ひだりひだりひだりひだりひだりひだりひだりひだりひだりひだりひだりひだりひだりひだりひだりひだりひだりひだりひだりひだりひだりひだりひだりひだりひだりひだりひだりひだりひだりひだりひだりひだりひだりひだりひだりひだりひだりひだりひだり

「ひだり~」の文章は回り込みが解除されました。

人気ブログランキング にほんブログ村 IT技術ブログへ

関連する投稿

カテゴリー: 7日で覚えるHTML  | タグ: , , , , ,

コメントはまだありません >コメントする

コメントはまだありません。

コメントする