七鍵＠楽天

コメント新着

うしまる＠ @ Re:タグを覚えよう【第１５回目】　-　中央寄せ表示の際の小技(08/21) タグの検索でぐぐってたらコチラに辿り着…

k.kyouka @ すきやき占い『しいたけ』の重要度27% 『しいたけ』…

なな@ Re:迷っています(11/01) レオ　がいいですよ☆★

マロン@ かわいいキュート

ｆｏｏｌｉｓｈ☆ｆｏｏ @ Re[1]:お久しぶりです。(07/15) ＞実演を踏まえてテストをしておりました…

バックナンバー

Nov , 2024
Oct , 2024

Sep , 2024

フリーページ

HTMLタグに挑戦

< 新しい記事

新着記事一覧(全310件)

過去の記事 >

Sep 17, 2004

タグを覚えよう【第３８回目】　-　リストの向かって右側に絵を入れる方法

(8)

テーマ：タグに挑戦！(102)

カテゴリ：カテゴリ未分類

今日は実践編として・・・

いろいろな方法があると思いますが
なるべくシンプルな方法を解説していきますね(￣▽￣人)

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

例）
<table border=0><tr><td>
<ul>
<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>
</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>

表示結果）