MB-Support

パソコン初心者のサポートページ

画像タグの前後に文字を書きます

 単純に画像の両サイドに文章を表示させる高さを指定します。折り返されるほどの長い文章の場合、画像を回りこませた方が違和感が無いと思われますが、短い文章の場合は画像の高さを気にせず、画像の高さの中間に文字を表示させる事ができるので重宝します。



画像タグの前後に文字を書きます

画像の右に文字を表示する。



HTMLソース(メモ帳)

<html>
<head>
<title>題名</title>
</head>
<body>
<img src="画像のアドレス" alt="MB-Support logo" border="0"
 width="100" height="104" />
各OSのインストール方法と、再インストールする前後の作業、
FDISKによる領域作成/削除方法など、基本的な内容を掲載しています。
</body>
</html>

ブラウザ


画像の左に文字を表示する。

HTMLソース(メモ帳)

<html>
<head>
<title>題名</title>
</head>
<body>
各OSのインストール方法と、再インストールする前後の作業、
FDISKによる領域作成/削除方法など、基本的な内容を掲載しています。
<img src="画像のアドレス" alt="MB-Support logo" border="0"
 width="100" height="104" />
</body>
</html>

ブラウザ


画像横の文字の開始位置を指定する
  align="top" align="middle" align="bottom"

画像の横上に文字を表示する。  align="top"

HTMLソース(メモ帳)

<html>
<head>
<title>題名</title>
</head>
<body>
<img src="画像のアドレス" alt="MB-Support logo" border="0"
 width="100" height="104" align="top" />
各OSのインストール方法と、再インストールする前後の作業、
FDISKによる領域作成/削除方法など、基本的な内容を掲載しています。
</body>
</html>

ブラウザ


画像の横中央に文字を表示する。  align="middle"

HTMLソース(メモ帳)

<html>
<head>
<title>題名</title>
</head>
<body>
<img src="画像のアドレス" alt="MB-Support logo" border="0"
 width="100" height="104" align="middle" />
各OSのインストール方法と、再インストールする前後の作業、
FDISKによる領域作成/削除方法など、基本的な内容を掲載しています。
</body>
</html>

ブラウザ


画像の横下に文字を表示する。  align="bottom"  align で指定しなくても、画像横に文章を入力しても同じです。

HTMLソース(メモ帳)

<html>
<head>
<title>題名</title>
</head>
<body>
<img src="画像のアドレス" alt="MB-Support logo" border="0"
 width="100" height="104" align="bottom" />
各OSのインストール方法と、再インストールする前後の作業、
FDISKによる領域作成/削除方法など、基本的な内容を掲載しています。
</body>
</html>

ブラウザ


Align を指定しない場合は、align="bottom" と同じ表示となります。短い文章の場合、align="middle" を指定すれば、画像の高さを気にせず、真ん中に文字を表示する事ができます。 しかし、折り返しが発生する長い文章の場合、折り返された以降の文章は画像の下へと続きます。


ブラウザ

この指定とは別に、画像に回り込ませるタグを挿入する事で、長い文章の左右に違和感無く画像を挿入する事もできます。 その方法は、次のページへすすみます。




戻る 一覧表示 次へ


BTOパソコン・ゲームPC・自作パソコンなら【TSUKUMO】 - 自作PCに必要なパーツ、豊富な品揃え

Copyright © 2013 MB-Support パソコン初心者のサポートページ All Rights Reserved.

管理人サイト閲覧方法プライバシーポリシー著作権/免責事項