HTMLコードメモ 画像の位置とか大きさとか回りこみとか
ブログの画像をセンタリングしたり、リサイズしたり、横にならべたり、文字の回りこみしたりを覚えたのでここにメモっておきます。
私もしばらくはコピペして使おうと思います。
覚えられない@@;
私もしばらくはコピペして使おうと思います。
覚えられない@@;
通常表示

<img src="http://blog-imgs-42.fc2.com/m/i/c/mickymac/41Aj19jQMJLSL500_AA300_.jpg" alt="41Aj19jQMJLSL500_AA300_.jpg" border="0" width="300" height="300" />
縮小表示
<img src="http://blog-imgs-42.fc2.com/m/i/c/mickymac/41Aj19jQMJLSL500_AA300_.jpg" alt="41Aj19jQMJLSL500_AA300_.jpg" border="0" width="150" height="150" />
センター寄せ
<div style="text-align: center">
<img src="http://blog-imgs-42.fc2.com/m/i/c/mickymac/41Aj19jQMJLSL500_AA300_.jpg" alt="41Aj19jQMJLSL500_AA300_.jpg" border="0" width="300" height="300" />
</div>
文字の回りこみ

Panasonic
Lumix
G10
<img src="http://blog-imgs-42.fc2.com/m/i/c/mickymac/41Aj19jQMJLSL500_AA300_.jpg" alt="41Aj19jQMJLSL500_AA300_.jpg" border="0" width="300" height="300" Align="left" />
</p>
Panasonic</p>
</p>
Lumix</p>
</p>
G10</p>
</p>
<p clear="left"></p>
画像と文字の横ならび
<table>
<tr>
<td>
<img border="0" alt="41Aj19jQMJLSL500_AA300_.jpg" width="300" height="300" src="http://blog-imgs-42.fc2.com/m/i/c/mickymac/41Aj19jQMJLSL500_AA300_.jpg" />
Panasonic Lumix G10
</td>
<td>
<img border="0" alt="41Aj19jQMJLSL500_AA300_.jpg" width="300" height="300" src="http://blog-imgs-42.fc2.com/m/i/c/mickymac/41Aj19jQMJLSL500_AA300_.jpg" />
Panasonic Lumix G10
</td>
</tr>
</table>

<img src="http://blog-imgs-42.fc2.com/m/i/c/mickymac/41Aj19jQMJLSL500_AA300_.jpg" alt="41Aj19jQMJLSL500_AA300_.jpg" border="0" width="300" height="300" />
縮小表示

<img src="http://blog-imgs-42.fc2.com/m/i/c/mickymac/41Aj19jQMJLSL500_AA300_.jpg" alt="41Aj19jQMJLSL500_AA300_.jpg" border="0" width="150" height="150" />
センター寄せ

<div style="text-align: center">
<img src="http://blog-imgs-42.fc2.com/m/i/c/mickymac/41Aj19jQMJLSL500_AA300_.jpg" alt="41Aj19jQMJLSL500_AA300_.jpg" border="0" width="300" height="300" />
</div>
文字の回りこみ

Panasonic
Lumix
G10
<img src="http://blog-imgs-42.fc2.com/m/i/c/mickymac/41Aj19jQMJLSL500_AA300_.jpg" alt="41Aj19jQMJLSL500_AA300_.jpg" border="0" width="300" height="300" Align="left" />
</p>
Panasonic</p>
</p>
Lumix</p>
</p>
G10</p>
</p>
<p clear="left"></p>
画像と文字の横ならび
![]() Panasonic Lumix G10 | ![]() Panasonic Lumix G10 |
<table>
<tr>
<td>
<img border="0" alt="41Aj19jQMJLSL500_AA300_.jpg" width="300" height="300" src="http://blog-imgs-42.fc2.com/m/i/c/mickymac/41Aj19jQMJLSL500_AA300_.jpg" />
Panasonic Lumix G10
</td>
<td>
<img border="0" alt="41Aj19jQMJLSL500_AA300_.jpg" width="300" height="300" src="http://blog-imgs-42.fc2.com/m/i/c/mickymac/41Aj19jQMJLSL500_AA300_.jpg" />
Panasonic Lumix G10
</td>
</tr>
</table>
関連記事:
SHARE: