このプログラムにある問題点を教えて下さい

質問

プログラムを自分で作ってみました。
形はイメージ通りですが自信がありません。
何か問題点があるように思えてなりません。
これで正しいのでしょうか？

<style type="text/css">
#aaa{
width: 850px;
background-color: #eee;
}
.CCC {
width: 750px;
height: 133px;
margin-left: 35px;
margin-top: 15px;
}
.CCC ul{
margin: 0;
padding: 0;
list-style: none;
}
.CCC li.C0 {
float: left;
}
.CCC li.C0 img {
padding: 5px;
border: 1px solid #ccc;
}
.CCC li.C1 {
width: 200px;
padding: 3px 20px 3px 12px;
margin-left: 25px;
font-size: 16px;
font-weight: bold;
font-family: "MS UI Gothic";
color: #F05;
border-bottom: 1px solid #F05;
float: left;
}
.CCC li.C2 {
width: 300px;
font-size: 14px;
float: left;
line-height:150%;
margin-left: 50px;
margin-top: 15px;
}
.CCC li.C3 {
width: 160px;
float: right;
}
.CCC li.C3 .C4 img{
border: 0;
border-style: none;
margin-bottom: 25px;
}
.cf {
clear:both;
font-size: 15px;
color: #ccc;
text-align: center;
}
</style>

<div id="aaa">
<div class="CCC">
<ul>
<li class="C0"><img src="image/image_case01.jpg" width="185" height="123"></li>
<li class="C1">タイトルタイトル &nbsp&nbsp&nbsp/ タイトル</li>
<li class="C2">コメントコメントコメントコメントコメントコメントコメントコメントコメントコメントコメントコメント</li>
<li class="C3"><span class="C4"><a href=""><img src="1.jpg" width="160" height="30"></a></span><span class="C4"><a href=""><img

src="2.jpg" width="160" height="30"></a></span></li>
</ul>
</div>

<div class="cf">・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・</div>

<div class="CCC">
<ul>
<li class="C0"><img src="image/image_case01.jpg" width="185" height="123"></li>
<li class="C1">タイトルタイトル &nbsp&nbsp&nbsp/ タイトル</li>
<li class="C2">コメントコメントコメントコメントコメントコメントコメントコメントコメントコメントコメントコメント</li>
<li class="C3"><span class="C4"><a href=""><img src="1.jpg" width="160" height="30"></a></span><span class="C4"><a href=""><img

src="2.jpg" width="160" height="30"></a></span></li>
</ul>
</div>

<div class="cf">・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・</div>
</div>

回答No.2

DrFell · ベストアンサー

＞何か問題点があるように思えてなりません。
その思いは正しいと思います。
ｈｔｍｌをわかっていないと思われます。文章構造的にタグが正しくありません。

タイトルとimageとコメントが同じl箇条書きリストなのですか？
1.jpgは装飾以外の意味があるのですか？（タイトルへのアイキャッチでは？）アイキャッチなら、htmlには入れません。
class cfはデザイン以外の何の意味がありますか？水玉罫線を区切りに入れたいだけなら、htmlには入れません。

意図した文章構造はtekkenman7 さんしかわからないですが、見た感じでは箇条書きリストではなく、定義リストか、hxとpの内容に思えます。タイトルは見出しとしてタグをつけるのがhtmlのルールです。アイキャッチなら、htmlにいれずにｃｓｓに入れることをｈｔｍｌ+ｃｓｓでは推奨されます。水玉罫線を区切りにしたいならブロックの下にｃｓｓでdottedの罫線をひきましょう。

ふさわしくないマーク付けで形はイメージ通りできる腕があるのですから、適したタグを使えばもっと楽に、イメージ通りのhtml+cssを書けます。製作者にも閲覧者にも優しいサイトになる筈です？

dtまたはｈｘへのアイキャッチは、backgroundとpadding-leftの プロパティを、水玉罫線bottomにはborder:dottedを試してみてください。

お礼

質問して良かったです。
不安がはっきりして、安心しました。

>タイトルとimageとコメントが同じl箇条書きリストなのですか？
ulからdlに直します。

>1.jpgは装飾以外の意味があるのですか？（タイトルへのアイキャッチでは？）
>アイキャッチなら、htmlには入れません。
よく分かりませんでした。
アイキャッチ（ユーザーの興味を引き次への行動を促すことを目的とするもの）の場合、imgならcssに入れるということですか。

>水玉罫線を区切りにしたいならブロックの下にｃｓｓでdottedの罫線をひきましょう。
dottedを使ってない理由ですが、htmlにテキストとして水玉下線を表現した方が
水玉と水玉の間隔が開いて、dottedよりもよかったからです。
これは諦めた方がよさそうですね。

ありがとうございました。

回答No.3

DrFell

>>アイキャッチなら、htmlには入れません。
　　>よく分かりませんでした。
　　>アイキャッチ（ユーザーの興味を引き次への行動を促すことを目的とするもの）の場合、imgならcssに入れるということですか。
http://okwave.jp/qa/q6587753.htmlを例にしますと、
回答受付中の質問の前の？や回答の前の！がアイキャッチです。
それは、目を引くためのデザインであって、本質的には不要のものですよね。デザインとしての1.jpgなら、ｃｓｓに入れます。説明文とセットの写真、本文の中身であって飾りではない場合はhtmlにいれます。

>>水玉罫線を区切りにしたいならブロックの下にｃｓｓでdottedの罫線をひきましょう。
　　>dottedを使ってない理由ですが、htmlにテキストとして水玉下線を表現した方が
　　>水玉と水玉の間隔が開いて、dottedよりもよかったからです。
上の説明と同じになりますが、デザインとしての水玉でしたら、cssにいれましょう。
コメントとドットの間はpadding-bottomで調整しドットと次の何かの間はmargin-bottomか次の要素のmargin-topで調整します。

見た目だけでOKというなら、それはそれでありだと思います。正しいhtml+cssなんて自己満足の世界ですし、正しいhtml+cssを書いても各ブラウザが正しくない表示をしますので、理想を追っかけても仕方のない話です。でも、基本は、文章の論理構造はhtmlでデザインはcssで記述することです。

回答No.1

kmee

文法間違いが無いか調べたいのなら、各種チェッカーを使って御自身でどうぞ。
例えば
http://validator.w3.org/
http://jigsaw.w3.org/css-validator/
「HTML 文法チェック」「CSS 文法チェック」などで検索

ただ、これらではチェックできるのは文法は正しいこととだけ。
内容、慣例、運用については基本的にチェックできない。

なんにせよ、部分だけ抜き出されても、こちらでは判断のしようがない。
・DOCTYPE等が省略されているので、どの規格として判定すればいいかわからない。
でも実際には書いてあるかもしれない
・classやidにaaaだのC1だのというものが使われているが、こういうのは使用目的のわかる名前にするのがよい。
ただ、例示のために使っているだけで本当はちゃんとした名前になっているかもしれない。
・<a href="">とかはあきらかにおかしいけど、これも例示のために省略しているだけかもしれない
・これだけCSSが大きくなってくると、外部ファイルにした方がいい。
・ font-family: "MS UI Gothic";
Windows以外の環境をまったく考慮してない。
・&nbsp
実体参照は&から;まで。&nbsp;が正解。ブラウザ側で補って解釈してくれるケースが多いけど。
もっとも,&nbsp;で字間とるのがいいのかどうか。

あと、HTML+CSSだけでは、単に文章を書いただけ。
ワープロで書くのと実質同じ。
「プログラム」とは呼ばない。

お礼

ありがとうございます。

>・DOCTYPE等が省略されているので、どの規格として判定すればいいかわからない。
XHTML 1.0 Transitional

>・ font-family: "MS UI Gothic"; Windows以外の環境をまったく考慮してない。
他にも追加でフォントを設定してみます。

>・&nbsp実体参照は&から;まで。&nbsp;が正解。
>もっとも,&nbsp;で字間とるのがいいのかどうか。
そういえば;が必要でした。
&nbsp;はやめた方がいいのでしょうか。