cssの記述について

質問

よろしくお願いします。

0ピクセル×20ピクセルの画像を左側に表示させて、その右側に
文字を入れたいと先日ご質問させて頂いたところ、他の方が下記の
記述をご丁寧に作成していただけました。
確かに、その際画像は下記のように表示されましたが他の画像を
表示させたく以下の画像ファイル名を変更したところ表示されなくなってしまいました。
なお、その際backgroundに指定した画像も表示されなくなってしまいました。

(img/ani059.gif);　←ここを変更しました

例）■テスト
　　　テスト1

　　■テスト2
　　　テスト3

.ulfont1 {color: #ff0000;
font-weight: bolder;
width: 800px;
font-size: 1.0em;
line-height: 2.0;
margin-left: -20px;
}

.ulfont ul1 {list-style-position: outside;
list-style-image: url(img/ani059.gif);　←ここを変更しました
background-image: url(img/mark.png);
}

画像を変えようとすると上記の記述もファイル名以外どこかを変える必要があるのでしょうか？
お手数では御座いますが、ご指導の程よろしくお願い致します。

700pxの枠を作成してありますが、その中に更に500px程度の枠を作成して、その
枠を二分割や四分割などはできるものでしょうか？

例）日や田など・・・

どなた様か、ご指導のほどよろしくお願いいたします。

回答No.4

abril

No.3への補足を拝見しました。

> ul1の件で御座いますがul1という記述方法は無いのですね。しっかりと覚えました。

「ul1という記述方法は無い」…単に言い回しの問題かもしれませんがちょっと不安が残りますね。
「”ul1”という要素（タグ）がHTMLには存在しない」ので、CSSの記述が間違っている、という事ですから。
質問履歴を拝見した感じでは、基本的なCSSの文法がよくおわかりになっていない様に思われましたので、できるだけ早い段階で、きちんと勉強しておくことをお奨めします。基礎的な理解ができていない状態では結局今後も応用をきかせるのが難しくなりますから。

> 上記のようにしたところ、背景は表示されましたが左側のチェツクマークが表示されなくなってしまいました。

そんな筈はないのですが。こちらの検証ではちゃんと表示されています。

> 下記のようにすると表示されるようなのですが？
> （省略）

入れ子にすると表示される、というのであれば、”他のCSSの指定”が干渉している可能性がありますが、その部分は公開されていない以上、原因はわかりかねます。一度、テストファイル（CSSには今回の”.ulfont {（省略）}”の指定だけを記述し、HTMLはbody内の記述を<ul class="ulfont">～</ul>の部分だけにしたものを別途用意する）を作ってそちらで検証してみる事をお奨めします。それでリストマークも背景も問題なく表示されるのであれば、先述の様に原因は（こちらに公開されていない）CSS及びHTMLの部分にある事になりますので。

いずれにせよ、”スタイルが上手く表示されないから”という理由だけでリストを入れ子にしているのなら、それはNGです。あくまでHTML側の構造が論理的になっている状態で、スタイルを調整するのがCSSの役目です。

> 文字の左側に異なる画像を表示されたいという場合cssの記述の部分を.ulfont1 としてhtmlの部分を<ul class="ulfont1">とすれば良いのでしょうか？
> もちろん、画像のimg/checkmark.gifの部分も変えるわけで御座いますが。

そうです。
＃CSSの他の指定やHTMLの全体の構造によっては、もっとセレクタを整理する事も可能かもしれませんが、ここでの回答はあくまで提供された情報を元にしかできませんので。

もう一つのご質問ですが。

ダミーになっている左と右上の画像はそれぞれ「値段」と「お申し込みボタン」に対してどの様な意味を持つ内容ですか？
推測ですが、左側はもしかして「商品イメージ」の様なもので、右上は「商品名」の様なものですか？
それによってもマークアップ（HTMLコーディング）が違ってきますので…

補足

abril様
何度もご連絡を、ご回答頂きまして誠にありがとう御座います。

回答No.3

abril

補足を拝見しました…が、No.1で指摘させて頂いた以下の部分の意味、ちゃんとわかって頂けているでしょうか？
----------抜粋ここから----------
この指定は有り得ないですよ？これだと、「"ulfont"というclass属性のついた某かの要素（タグ）の子要素である"ul1"というタグ」に対する指定、という記述になってしまうのですが、"ul1"というタグは存在しないからです。"ul"の間違いでは？
----------抜粋ここまで----------

補足を見ると、問題なく表示されている部分のCSSの指定は：
------------------------------------------------------------------------------------------
.ulfont {（省略）}
.ulfont ul {（省略）}
------------------------------------------------------------------------------------------
となっていますから、このセレクタの意味は「"ulfont"というclass属性のついた某かの要素（タグ）の子要素である"ul"という要素（タグ）に適用」となりますので、HTML側の：
------------------------------------------------------------------------------------------
<ul class="ulfont">←"ulfont"というclass属性のついた某かの要素
<li>
<ul>←の子要素である"ul"という要素
<li>テスト1<br />ほげほげ</li>
(省略）
</ul>
</li>
</ul>
------------------------------------------------------------------------------------------
というマークアップはそのセレクタの条件に合致していますので、そこで指定されたスタイルが適用されるのです。

しかし一方、
> 異なる画像を表示したく以下のようにしたところ、表示されなくなってしまいました。
と仰っている方のソースを見ましたら、私の最初の指摘通り、CSSの指定が：
------------------------------------------------------------------------------------------
.ulfont1 {（省略）}
.ulfont1 ul1 {（省略）}
------------------------------------------------------------------------------------------
となってしまっている為、「"ulfont"というclass属性のついた某かの要素（タグ）の子要素である"ul1"という要素（タグ）に適用」という意味になりますが、先に申し上げました通り、HTMLに"ul1"などという要素（タグ）は存在しないのです。
＃".ulfont1"という記述は、classの名前（一定の規則に準じて制作者の任意でつけられる）であり、"ul1"という記述は、要素（タグ）名（予め決められたものしか存在しない）を示す意味になるのです。

しかし当然ながら、これに対してHTML側は：
------------------------------------------------------------------------------------------
<ul class="ulfont1">←"ulfont1"というclass属性のついた某かの要素
<li>
<ul>←の子要素である"ul"という要素
<li>テスト1<br />ほげほげ</li>
(省略）
</ul>
</li>
</ul>
------------------------------------------------------------------------------------------
というマークアップ（こちらはHTMLの要素の記述としては正しい）ですから、”.ulfont1 {（省略）}”のスタイルは適用されますが、”.ulfont ul1 {（省略）}”の方で指定したスタイルは「HTML側にどこにもそのセレクタで指定した条件に合致する部分がない」為、質問者様が思っている（思いこんでいる）様な表示にはならないのです。

…随分くどい説明（しかも重複）で本意ではないのですが、もう「どの部分が間違っていた」かはおわかりになって頂けましたよね？
つまり、

> 私は異なる画像を表示させるため同じclass名を指定しても同じ画像が表示されるだけだと思いましたので<ul class="ulfont">や
<ul class="ulfont1">を使い分けて、

この考え方は間違っておらず、

> htmlの部分もそのようにしたつもりなのですが、

HTML側のマークアップも妥当だったのですが、CSSの記述が間違っていた、という事です。

あとこれは単純に疑問なのですが、このリストはなんで入れ子になっているんでしょうか？
------------------------------------------------------------------------------------------
<ul class="ulfont">
<li>テスト1<br />ほげほげ</li>
<li>テスト2</li>
<li>テスト3</li>
</ul>
------------------------------------------------------------------------------------------
でマークアップして、CSSの方は：
------------------------------------------------------------------------------------------
.ulfont {
list-style: url(img/checkmark.gif) none;
background-image: url(img/mark.png);
color: #ff0000;
font-weight: bolder;
width: 750px;
font-size: 1.0em;
line-height: 2.0;
margin: 0;
}
------------------------------------------------------------------------------------------
ではだめな理由が何かあるのですか？
勿論、提供されているソースでは省略されているだけで、実際のコンテンツでは：
------------------------------------------------------------------------------------------
<ul class="ulfont">
<li>直接の子要素のリストアイテム1
<ul>
<li>テスト1<br />ほげほげ</li>
<li>テスト2</li>
<li>テスト3</li>　　　　
</ul>
</li>
<li>直接の子要素のリストアイテム2</li>
<li>直接の子要素のリストアイテム3</li>
</ul>
------------------------------------------------------------------------------------------
という様に、<ul class="ulfont">～</ul>の直接の子要素であるリストアイテム<li>～</li>が存在しているのでしたら何の疑問もありませんが。

もう一つの質問「枠を二分割や四分割」の方は、実際の内容がどういうものになるかにもよって適切なマークアップの仕方・スタイルの設定の仕方、が変わってきますので、できればもっと具体的なイメージを画像にして添付するなりしてくれませんか？

補足

abril様
ご丁寧にご指導頂きまして誠にありがとう御座います。この場を借りて感謝申し上げます。以下にご説明させて頂きたく態への手数では御座いますが、再度のご指導の程お願い致します。

まず、ul1の件で御座いますがul1という記述方法は無いのですね。しっかりと覚えました。
次に、前回ご指導頂きました下記の件で御座いますが
↓
あとこれは単純に疑問なのですが、このリストはなんで入れ子になっているんでしょうか？

今回ご指導いただいたとおりに実行したつもりなのですが・・・

【css】

.ulfont {
list-style: url(img/checkmark.gif) none;
background-image: url(img/mark.png);
color: #ff0000;
font-weight: bolder;
width: 750px;
font-size: 1.0em;
line-height: 2.0
margin: 0;
}

【html】

<ul class="ulfont">
<li>テスト1<br />ほげほげ</li>
<li>テスト2</li>
<li>テスト3</li>
</ul>

上記のようにしたところ、背景は表示されましたが左側のチェツクマークが表示されなくなってしまいました。

下記のようにすると表示されるようなのですが？

【css】

.ulfont {
list-style: url(img/checkmark.gif) none;
background-image: url(img/mark.png);
color: #ff0000;
font-weight: bolder;
width: 750px;
font-size: 1.0em;
line-height: 2.0
margin: 0;
}

【html】

<ul class="ulfont">
<li>
<ul>
<li>テスト1<br />ほげほげ</li>
<li>テスト2</li>
<li>テスト3</li>
</ul>
</li>
</ul>

次に、前回記載させていただきました文字の左側に異なる画像を
表示されたいという場合cssの記述の部分を.ulfont1 としてhtmlの部分を<ul class="ulfont1">とすれば良いのでしょうか？

もちろん、画像のimg/checkmark.gifの部分も変えるわけで御座いますが。

次に＞もう一つの質問「枠を二分割や四分割」の方は、実際の内容がどういうものになるかにもよって適切なマークアップの仕方・スタイルの設定の仕方、が変わってきますので、できればもっと具体的なイメージを画像にして添付するなりしてくれませんか？

で御座いますが、画像を添付させて頂きます。
添付した内容そのものでは無いのですが、感じと致しましては
添付したような感じで御座います。
何度も、お手数では御座いますがどうかご指導の程よろしくお願い致します。

回答No.2

abril

No.1です。
前回までの質問をざっとだけ見ました。今回の質問、【質問番号：5105119】でのお礼と被ってますね。このままだとマルチポストとみなされてこっちが消されてしまうかもしれないですし、マナー上もよろしくありませんのでとりあえずあちらの質問を急いで閉めた方がいいですよ。
で、あちらの質問のお礼の段階からこのソースで上手く行かない、と書いてありますが、ほんとにこのままのソースだったらうまく行きようがないのですよ。CSSのセレクタに明かな間違いがあるので。現状の正確な把握ができないと検証条件と一致させる事ができないので、

・HTMLのDOCTYPE
・問題を抱えている部分のマークアップ（例として揚げ居てるリストの部分の実際のHTMLのコード）
・問題を抱えている部分に対してのスタイルとして設定した実際のCSSの記述
・list-style-imageに設定したい画像の縦横サイズ
・background-imageに設定したい画像の縦横サイズ

最低これだけ明らかにして下さい。
それから、この一連の質問、CSSとHTMLに関する事なのでカテゴリとして相応しいのは「HTML」の方だと思いますが。次回からはそうされた方が答えが早く付きやすいかも…

お礼

abril様
何度もすいません。

補足

abril様
すいません。
添付出来ると思ったのですが添付が出来ませんでした
すいませんでした。

どうしたら良いものですかね？
何か良き方法御座いましたらご指導の程よろしくお願い致します。

回答No.1

abril

前回までの質問に未だ目を通していませんが、

.ulfont ul1 {
list-style-position: outside;
list-style-image: url(img/ani059.gif);
background-image: url(img/mark.png);
}

この指定は有り得ないですよ？これだと、「"ulfont"というclass属性のついた某かの要素（タグ）の子要素である"ul1"というタグ」に対する指定、という記述になってしまうのですが、"ul1"というタグは存在しないからです。"ul"の間違いでは？

もしこれが投稿する際の単なるコピペのミスであり、本来のCSSファイル上での記載が間違っておらず、且つ"list-style-image: url(img/ani059.gif);"の記述でani059.gif（こちらを変更前の画像と仮定した場合）という画像がリストマークとしてちゃんと表示されていたのだとしたら、ani059.gifを他の画像ファイル名に書き換えただけであれば支障なくリストマークの画像が替わる筈です。それでも替わらないとしたら、画像ファイルのバスを間違っている可能性が高いです。ani059.gifと（差し替えたい画像である）hoge.gifは「同じ階層」にありますか？

それから、

> 700pxの枠を作成してありますが、その中に更に500px程度の枠を作成して、その
> 枠を二分割や四分割などはできるものでしょうか？
> 例）日や田など・・・

こちらの質問は、上記の部分とは全く別の部分の事ですか？
できますけど、どんな内容を入れるかによっても違ってきますので、もっと具体的なイメージを補足して下さい。

補足

abril様
ご回答ありがとう御座います。
詳細を記載させて頂きますのでいつも大変お手数では御座いますが再度ご指導の程いただけませんでしょうか・・・
■まず、DOCTYPEは以下で御座います。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

次にulの件に付きまして記載させて頂きます。
【html】に以下のように記述をしました。

<ul class="ulfont">
<li>
<ul>
<li>テスト1<br />ほげほげ</li>
<li>テスト2</li>
<li>テスト3</li>　　　　
</ul>
</li>
</ul>

【css】には以下のように記述しました。

.ulfont {color: #ff0000;
font-weight: bolder;
width: 750px;
font-size: 1.0em;
line-height: 2.0;
margin-left: -20px;
}

.ulfont ul {list-style-position: outside;
list-style-image: url(img/checkmark.gif);
background-image: url(img/mark.png);
}

checkmark.gifは20×20です。
mark.pngは15×17です。

上記のようにしますとブラウザには以下のように表示されます

■テスト1
　ほげほげ
■テスト2
■テスト3
backgroundに指定した画像は文字の背景前面に表示されました。これは何も問題は無いのですが、異なる画像を表示したく以下のようにしたところ、表示されなくなってしまいました。

【html】
<ul class="ulfont1">
<li>
<ul>
<li>テスト1<br />ほげほげ</li>
<li>テスト2</li>
<li>テスト3</li>　　　　
</ul>
</li>
</ul>

【css】には以下のように記述しました。

.ulfont1 {color: #ff0000;
font-weight: bolder;
width: 750px;
font-size: 1.0em;
line-height: 2.0;
margin-left: -20px;
}

.ulfont ul1 {list-style-position: outside;
list-style-image: url(img/ani059.gif);
background-image: url(img/mark.png);
}

私は異なる画像を表示させるため同じclass名を指定しても同じ画像が
表示されるだけだと思いましたので<ul class="ulfont">や
<ul class="ulfont1">を使い分けて、htmlの部分もそのようにしたつもりなのですが、その記述が間違っていましたでしょうか？また画像については同じimgフォルダに入っております。

次に　> 枠を二分割や四分割などはできるものでしょうか？
の部分なのですが、枠の中に枠を作成して横に２分割した枠を作成して２分割した左の枠に画像を入れて、右には文字や画像を入れるようにしたいと考えております。雰囲気的には以下のような感じで御座います。

画像画像画像画像画像　　　　　　　　　画像画像画像画像
画像画像画像画像画像　　　　　　　　　文字文字文字文字
画像画像画像画像画像　　　　　　　　　
画像画像画像画像画像　　　　　　　　　画像画像画像画像

↑一枚の画像です

大変お手数では御座いますがどうかご指導の程よろしくお願い致します。