複数の画像を背景の一部として使用する手法。

質問

複数の画像を背景の一部として使用する手法。

最近fc2ブログを使い始めまして、初めてhtmlとスタイルシートをいじり始めました。
試行錯誤しながらも、一応は形になってきたのですが一つだけどうしても分からないことが出てきましたので、質問させていただきます。
どうかよろしくお願いします。

まず、理想としましては下記のサイト様のような
（　http://jyouhouya3.net/2010/03/324_akb.html　）
羅列されているニュースの左側に複数の画像（上記サイト様ですと、『≫』や『☆』といった画像です）を貼り付ける手法です。

私は一番初め、スタイルシートに

im1 { background-image: url("画像のアドレス"); /* 画像の指定 */　background-repeat: no-repeat; /* 画像の並び */ padding-left: 25px; /* 余白 */ line-height: 130%; /* 行の高さ */　font-weight: bold;　}

というようなものを3つ作成しました。
im1～im3という形です。
ちなみに『im』というのは自分で勝手につくった要素です。

そしてブログの文章中に『 <im1>ここに何かしらの文章</im1>　』
このような形で入力しました。

すると、FireFoxではうまく表示されたのですが、IEでは表示されませんでした。

何故か分からなかったので、次は『im』のところだけを『p』に置き換えてみました。

すると、今度は
『　<p>何かしらの文章</p>　』
この文章のみ、FireFox、IE共に表示されるようになりました。
しかし
『　<p1>何かしらの文章</p1>　』
『　<p2>何かしらの文章</p2>　』
『　<p3>何かしらの文章</p3>　』
は表示されません。
（スタイルシートの入力は全部同じようにしてあります）

一体何が問題になっているのでしょうか。
よろしくお願いします。

回答No.1

zeff · ベストアンサー

＞ちなみに『im』というのは自分で勝手につくった要素です。
そういうことが出来るらしいけれど全くわからない程度の知識の者です。

わざわざユーザー独自のタグ？を作るなんて難しいことをしないで、
普通にリストでやったほうが良いと思いますけれども。

それと、複数行の場合に1行目の文頭に来るように、
background-position:を左上に固定するように指定・調節すると良いでしょう。

※いくつか全角スペースがあったので全て半角にするよう注意しましょう。
（/* 行の高さ */の後ろとか）

例：
【CSS】
ul.ul1{
list-style : none outside;
margin:0;padding:0;
}
/*一括指定*/
ul.ul1 li{
background-repeat: no-repeat; /* 画像の並び */
padding-left: 25px; /* 余白 */
line-height: 130%; /* 行の高さ */
font-weight: bold;
background-position:○○px ○○px;
}
li.im1 {
background-image: url("画像1のアドレス"); /* 画像の指定 */
}
li.im2 {
background-image: url("画像2のアドレス"); /* 画像の指定 */
}
li.im3 { background-image: url("画像3のアドレス");
}

【HTML】
<ul class="ul1">
<li class="im1">1の画像を文頭に置く</li>
<li class="im2">2の画像を文頭に置く</li>
<li class="im3">3の画像を文頭に置く</li>
</ul>

お礼

ありがとうございます！
無事、出来ました。

やはり基礎からきちんと勉強しないと駄目ですね。