七鍵＠楽天

今日は実践編として・・・
リストの右側に絵をいれる方法を解説します(〃⌒▽⌒)
いろいろな方法があると思いますが
なるべくシンプルな方法を解説していきますね(￣▽￣人)

まずはテーブルを使った方法

例）
<table border=0><tr><td>
<ul>
<li>リスト１</li>
<li>リスト２</li>
<li>リスト３</li>
</ul>
</td><td>
<img src="http://my.plaza.rakuten.co.jp/img/user/85/05/6678505/7.gif">
</td></tr></table>

表示結果）

リスト１ リスト２ リスト３

表示がくずれる際はセルの幅を指定してみましょう(￣▽￣人)

例）
<table border=0><tr><td style="width:300px;">
<ul>
<li>リスト１</li>
<li>リスト２</li>
<li>リスト３</li>
</ul>
</td><td>
<img src="http://my.plaza.rakuten.co.jp/img/user/85/05/6678505/7.gif">
</td></tr></table>

表示結果）

リスト１ リスト２ リスト３

さらに・・・
画像の上から文字を記述したい場合は・・・
画像をセルの背景にしてやればよさそうですよね(￣▽￣人)

例）
<table border=0><tr><td style="width:300px;">
<ul>
<li>リスト１</li>
<li>リスト２</li>
<li>リスト３</li>
</ul>
</td><td style="background-image:url(http://my.plaza.rakuten.co.jp/img/user/85/05/6678505/7.gif);width:300px;height:140px;background-repeat:no-repeat;">
ここに文字(￣▽￣人)
</td></tr></table>

表示結果）

リスト１ リスト２ リスト３

ここに文字(￣▽￣人)

テーブルって本当に応用範囲広いですよね(￣▽￣人)
アイデア次第でいろいろなことができちゃいます。
しっかり使いこなしたいですよね(〃⌒▽⌒)

最後に、テーブルを使わない方法もひとつ紹介しておきましょう。

例）
<div style="background-image:url(http://my.plaza.rakuten.co.jp/img/user/85/05/6678505/7.gif);width:300px;height:140px;background-repeat:no-repeat;background-position:right;">
<ul>
<li>リスト１</li>
<li>リスト２</li>
<li>リスト３</li>
</ul>
</div>

表示結果）


実は・・・
今日はある方からの質問を元にお送りいたしました(〃⌒▽⌒)
皆さんも解説してもらいたい内容がもしありましたら・・・
遠慮なくどうぞ(￣▽￣人)

では、またあしたー(ﾟ▽^*)ﾉ⌒☆