このCSSでおかしいところは？

質問

お世話になります。
またサイト制作で分からないところがでてきましたので助言をいただけたらなと思います。divで分けたcentermenu（630px）の中にテキストとリンクを貼ったボタンを設置したいと思っています。テキストは<p>要素で450pxの横幅にテキストを流し込み、残りの180pxの部分にボタン<a>要素として置きたいと思っています。ボタンはテキストに回り込ませて、テキストと下揃えにしたいのです。ところが現状ではテキストの下の段落になってしまいます。これはどこがおかしいのでしょう？
どうか教えていただけないでしょうか？

■HTMLソース
<div id="centermenu">
<p><img src="company-title.jpg" width="630" height="70"></p>
<p>省略</p>
<a class="shousai"><img src="shousai.jpg" width="123" height="30" align="right"></a><div align="right"><br>
</div>

■CSSソースです。
div#centermenu{
width:630px;
float:left;
margin-left:auto;
margin-right:auto;
background-color:#FFFFFF;
}
p{
font-size: 12px;
font-family:"ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3";
color: #666666;
font-style: normal;
line-height: normal;
font-weight: normal;
width:450px;
}
a:shousai{
padding-left:20px;
padding-right:20px;
float:right;
}

回答No.5

wolfmuller · ベストアンサー

#1です。

いまいちどういう表示結果が望みのものか分かりづらく(^^;
罫線を使って書いてもらうと分かりやすいのですが・・・。

あと、ブロック要素についてですが、
基本的にＣＳＳは積み木のようなものだと考えれば
分かりやすいと思います。

┌─────────────────────┐
│　　　　　　　　　　　　　　　 　　　　　　　　　　　　　　　　　│
└─────────────────────┘
┌──────────────┐┌─────┐
│　　　　　　　　　　　　　　　┌──┐　││　　　　　 　　│
│　　　　　　　　　　　　　　　│　　 　│││　　　　 　　　│
│　　　　　　　　　　　　　　　└──┘　││　　　　　 　　│
│　　　　　　　　　　　　　　　　　　　　　　││　　　 　　　　│
│　　　　　　　　　　　　　　　　　　　　　　││　　　 　　　　│
│　　　　　　　　　　　　　　　　　　　　　　││　　　 　　　　│
│　　　　　　　　　　　　　　　　　　　　　　││　　　 　　　　│
│　　　　　　　　　　　　　　　　　　　　　　││　　　 　　　　│
└──────────────┘└─────┘

こんな感じで四角に囲んだところの一つ一つを
ブロック要素と呼びます。
こういう風に四角を組み合わせてデザインができる
ようなサイトなら、ＣＳＳを使って表現可能である
と思えばいいです。

だから、紙のメモでもいいので四角を組み合わせて
表現したいウェブサイトのデザインを描いてみて、
それぞれの四角について、どうやってＣＳＳで表現
すればいいかを考えてみると意外と簡単です。
四角の幅を変えたいのなら width を指定しますし
四角を右側にもってきたいなら float:right です。
四角の大きさや配置、四角の枠の太さ、隣の四角との隙間
四角の枠と中の文章との隙間など、全ては四角を
意識することで解決方法が見つかると思います。

上のように罫線を使って、作りたいデザインを説明して
もらうと分かりやすいですし、ブロック要素の考え方が
分かると思いますよ。

回答No.4

xenotactic

インライン要素・ブロック要素に関してはこちらを読んでください。
http://www.tohoho-web.com/html/memo/elem.htm#blockinline

<div id="centermenu">
<p align="justify"><img src="company-title.jpg" width="630" height="70"></p>
<p align="justify">省略</p>
<div id="shousai"><img src="shousai.jpg" width="123" height="30" align="right"></div>
<div align="right"><br>
</div>

これに関してですが。
<div align="right">に関する閉じタグがありません。
省いているだけなのでしょうか。
また<div><br></div>とやるのも微妙なので、
<div>&nbsp:</div>とやってみてはどうですか？

<div id="shousai"><img src="shousai.jpg" width="123" height="30" align="right"></div>に関してですが、
<a>がなくなっているので「ボタン」ではなく単なる「画像」になってますよ。

#shousaiのwidth:180pxで、paddingが左右合計40px、
加えてpがwidth:450px;、合計670pxになっているので、
630pxの中に横に並べて入れることはできませんね。

他にも問題があるとは思いますが。

回答No.3

xenotactic

＃１で回答済みなので補足程度に

#2の方が、
div#idのdivは必要ないといっていますが、
私的にはあってもなくてもいいけど、あったほうが分かりやすいと思います。

#idだけ書いてあっても、CSSだけを見たとき
「これは何に指定したidだったか」と分からなくなってしまいかねません。

そんなどうでもいいことより、なぜここを指摘しなかったのかと疑問に思います。
ひょっとして、知らなかったのかな…ｗ
>div#centermenu{
>p{
>a:shousai{
ここはルール上次のように書きます。
そうでないと一部のブラウザで認識されなくなります。
div#centermenu {
p {
a:shousai {
ようは間に半角スペースをいれるということです。

a:shousaiって何ですかこれ。
[:]は一般的に定義済みクラスを指定するときに使いますが、
a.sousaiのミスでしょうか。

他に、かなり主観的なことですが。
>margin-left:auto;
>margin-right:auto;
これはmargin:0 auto;と書いたほうが分かりやすいですね。

>font-style: normal;
>line-height: normal;
>font-weight: normal;
normalであることが当たり前のものに関して、
わざわざnormalと指定する必要はありません。

aはインライン要素だから…ということですが、
それならaをdisplay:blockでブロック要素にしたほうが
かっこいいのでは？と思いました。

回答No.2

noname#49614

＃１さんが回答済みなのでほんの補足程度に…

とりあえず
div#centermenu
の
div
は要りません。
idはページ内一回ということになってますのでclassのようにタグ名を付けて細かく区別の必要もないですし。

あと、フォントサイズの絶対的な指定はよほどのことが無い限り避けてください。可読性を下げます。

なお、質問に対しての回答とはなっていないのでお礼コメントなどは結構です。

回答No.1

wolfmuller

a はブロック要素ではなくインライン要素のため
CSSで float の指定ができません。

div を使ってブロック要素にした上で float を
指定してやるのがよいと思います。

補足

wolfmullerさん＞
早速のお回答ありがとうございます。a要素はfloatができないんですね、初心者で知識が足らない者ですので参考になりました。無知なことをきいてしまうかもしれませんが、インライン要素とは何ですか？
アドバイスの通り
div#shousai{
width:180px;
padding-left:20px;
padding-right:20px;
float:right;
}
としてみました。
paddingなどは適用されたのですがテキストと下揃えにならないのですが、重ね重ねおききしてしまいますがこれはどこか足らない部分があるのでしょうか？
HTMLは
<div id="centermenu">
<p align="justify"><img src="company-title.jpg" width="630" height="70"></p>
<p align="justify">省略</p>
<div id="shousai"><img src="shousai.jpg" width="123" height="30" align="right"></div>
<div align="right"><br>
</div>
です。