000000

ホーム | 日記 | プロフィール

【フォローする】【ログイン】

七鍵＠楽天

コメント新着

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

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

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

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

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

バックナンバー

Feb , 2025
Jan , 2025

Dec , 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>

表示結果）

リスト１

リスト２

リスト３

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

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

お気に入りの記事を「いいね！」で応援しよう

最終更新日 Sep 17, 2004 07:44:07 AM
コメント(8) | コメントを書く

■コメント

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

な～～るさん

先生。有難う御座いましたっ。
なんて分かりやすい解説なんでしょうっ(T^T)感動っ！
是非、実践したいと思います。
有難う御座いました。(^^;)ゞ (Sep 18, 2004 01:14:40 PM)

返事を書く

Re[1]:タグを覚えよう【第３８回目】　-　リストの向かって右側に絵を入れる方法(09/17)

＃七鍵さん

な～～るさん

いらっしゃいませー(〃⌒▽⌒)

いえいえー
早速使ってやってください(￣▽￣人)

(Sep 21, 2004 11:54:27 PM)

返事を書く

Re[1]:タグを覚えよう【第３８回目】　-　リストの向かって右側に絵を入れる方法(09/17)

な～～るさん

な～～るさん
-----
早速リストに使ってみたのですが、ちょっとなぜかズレタ。なぜだろう？？
まあ、料理の材料を書くのに使ってみたのですが、
分量の所が微妙にずれちゃいました。
後は、日記の所でも使ってみた。そちらは、
旨くまとまりました。
有難う御座います。ヽ（*＾＾*）ノ (Sep 22, 2004 02:37:38 AM)

返事を書く

Re[2]:タグを覚えよう【第３８回目】　-　リストの向かって右側に絵を入れる方法(09/17)

＃七鍵さん

な～～るさん

いらっしゃーい(〃⌒▽⌒)

ずれたリストの材料って・・・
適量・適量ってとこですか？（笑
あぁ言うのって難しいですよね(´･ω･`)
何回も言ってますが見る環境によって長さって変わっちゃうのよ。
どんなにカンペキに長さそろえても別の人はずれたページを見てる・・・って感じで。

それはそーとアクセスってMS Accessですか？
仕事では良く使うのですが全く使いこなせません（笑
すごいですねー(￣▽￣人)
せっかく行ったのでうろうろしてきたので・・・
こんなところに感想を書いておきました(〃⌒▽⌒)

(Sep 23, 2004 04:04:54 AM)

返事を書く

Re[3]:タグを覚えよう【第３８回目】　-　リストの向かって右側に絵を入れる方法(09/17)

な～～るさん

＃七鍵さん

＞それはそーとアクセスってMS Accessですか？

そうです。でも、私もクエリー組む辺りまでしか使えません。独学でここまで覚えたんだから、社員も覚えろよ・・と思っています。人が何でも出来るものだと思い押し付けられています(^_^;)

来てくれて有難御座います。うれしいです。
そうそう、料理のね・・色々、考えたんだけど、
あれって、別々にテーブルでまとめたらずれないのでは？？とおもったので、そっちでやってみますね。（思いついたら吉日な女なので・・(^^;)）
有難う御座いました。又、来てくださいね
(Sep 23, 2004 09:37:57 AM)

返事を書く

Re[4]:タグを覚えよう【第３８回目】　-　リストの向かって右側に絵を入れる方法(09/17)

＃七鍵さん

な～～るさん

いらっしゃーい(〃⌒▽⌒)

クエリー使えたらすごいですよ(￣▽￣人)
応用範囲広いですしデータベース扱う上で全ての基本となる考え方ですし。
何より独学でここまでできた(￣^￣*)
って自信は次の学習へのステップにも繋がりますよね(〃⌒▽⌒)

>別々にテーブルでまとめたらずれないのでは？？
その通りです(￣▽￣人)
汎用性はなくなりますが・・・
私がよくするのは画像にしてしまう方法（笑
誰が見てもずれませんからね(〃⌒▽⌒)

(Sep 23, 2004 01:35:13 PM)

返事を書く

Re[5]:タグを覚えよう【第３８回目】　-　リストの向かって右側に絵を入れる方法(09/17)

な～～るさん

＃七鍵さん
-----
えへへ・・（＾◇＾；）
テーブルでまとめようとしたんだけど
どうしたらいいか、すぐに出来なかったりして・・。
もうちょっと考えます。
気が向いたら又、見に来てくださいねぇ・・（；￣▽￣A　 (Sep 23, 2004 02:44:03 PM)

返事を書く

Re[6]:タグを覚えよう【第３８回目】　-　リストの向かって右側に絵を入れる方法(09/17)

＃七鍵さん

な～～るさん

いらっしゃーい(〃⌒▽⌒)

テーブル使うと今度は左側を揃えるのが難しいですよね(´･ω･`)
なかなかええ方法が思いつきません（笑
なーるさんの部屋にはちょこちょこ遊びに行ってますよ(￣▽￣人)

(Sep 24, 2004 11:03:17 PM)

返事を書く