cssの記述方法について

質問

よろしくお願いします
現在、HTMlとcssで構成したホームページの勉強をしております。

私は、参考書を見ながら作成しているのですが、もしかすると所々に
不要な記述などがあるかもしれません。よろしければご指導頂けませんでしょうか？

まずは下記のサイトをご覧頂けませんでしょうか？
​http://technocompany.web.fc2.com​

ソース内の様々なところに<div id="header">や<div id="fontcolor5">
<div id="photo3">と設定をしておりますが、このまま作成を進めていくと、<div id="ooooo>等がどんどん増えていきますが、その点は特別問題は無いものなのでしょうか？
私は、もっとまとめて設定が出来ないものかと考えていたのですが、それは難しいものでしょうか？

現在、困っている内容と致しましては中央揃えしたい画像に対して<div>～</div>で囲んでtext-align: centerを指定しても
完全に中央に寄らないようです。右のほうが余白が多く空いているように見えます。

例えば画像は全て中央揃えとか、文字はwidthを設定して700pxとか
一部の文字についてはwidth800px等・・・まとめて設定するのは難しいものでしょうか？

また、前回、他の方に御指導いただいたのですがcssの記述なのですが、marginやpaddingは余白だと思いますが、
その他の部分が何を意味しているのかが分かりません。
今後のためによろしければご指導頂けませんでしょうか？

【CSS】

ul.hoge {
list-style: none;
margin: 0;
padding: 0;
}
ul.hoge li {
min-height: 20px;
_height: 20px;
margin: 0 0 1em 0;
padding: 0 0 0 25px;
background: url(img/ANI_059.gif) left top no-repeat;
}

回答No.2

kuroizell · ベストアンサー

div { margin: 0px padding: 0px }
.center { text-align: center }
.W700 { width: 700px }
.W800 { width: 800px; text-align: left }

<div class="center">
　<img src="./foo.gif">
　<div class="W700">これはfooです。</div>
　<img src="./bar.gif">
　<div class="W800">こっちのbarは、文章だけ左寄せです。</div>
</div>

こんなカンジ？
あまり恣意的に増やさず、事前にどのようなスタイルが必要かある程度まとめておいた方が良いと思います。

補足

ご回答ありがとう御座いました。大変恐縮ですが再度ご指導頂けませんでしょうか？
以下のようなcssを書いてみました。

<ul style="list-style-image: url(img/checkmark.gif);
background-image: url(img/mark.png);
list-style-position: outside">
<li>テスト</li>

上記のようにしたところ、■テスト　と表示はされたのですが■の部分が、右側によってしまい左側に余白が出来てしまいました。
padding: 0pxとしてみたのですが全く換わりません。
また、ＩＥとfirefoxでの表示を同じにすることは出来ないのでしょうか？

Firefoxでは枠ごと中央揃えになるのですがＩＥでは枠が左に寄ってしまいます。
何か良き方法御座いましたらご指導の程よろしくお願いします。

回答No.1

atsushifx

まずはボックスモデルとcssの意味を理解する必要があります。
cssの基礎なので、これを理解することが上達の早道です。

ボックスモデルを簡単に説明すると、文章をいくつかのブロックの塊として考えるのがブロックモデルです。

<div id="xxx">

が、典型的なボックスですが、<ul>,<table>などもボックスとして扱われます。
このボックスを修飾するのがcssです。
あとはcssリファレンスを見ながら試してみるのがよいでしょう

参考としては、
ThinkIt 【即実践！HTML+CSS】 http://www.thinkit.co.jp/article/39/1/
スタイルシートリファレンス http://www.htmq.com/style/index.shtml

があります。
読んでみてください

補足

ご回答ありがとう御座いました。大変恐縮ですが再度ご指導頂けませんでしょうか？
以下のようなcssを書いてみました。

<ul style="list-style-image: url(img/checkmark.gif);
background-image: url(img/mark.png);
list-style-position: outside">
<li>テスト</li>

上記のようにしたところ、■テスト　と表示はされたのですが■の部分が、右側によってしまい左側に余白が出来てしまいました。
padding: 0pxとしてみたのですが全く換わりません。
また、ＩＥとfirefoxでの表示を同じにすることは出来ないのでしょうか？

Firefoxでは枠ごと中央揃えになるのですがＩＥでは枠が左に寄ってしまいます。
何か良き方法御座いましたらご指導の程よろしくお願いします。