みんなの「教えて(疑問・質問)」にみんなで「答える」Q&Aコミュニティ

こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

ホームページの質問。

ホームページの質問。

(x)html+cssでぐろーばるなびを作りました。

ぐろーばるなびにはバグもあると聞いてますが、以下の書き方で大丈夫でしょうか?
IE6等で起きるバグとかもあるらしいんですが、慣れてる方にみてほしいです。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>時間割</title>
<style type="text/css">
<!--
ul {
display: inline;
line-height: 2em;
font-size: 1.5em;
}
ul li {
background-color: #F00;
float: left;
width: 150px;
height: 50px;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: dotted;
border-bottom-style: dotted;
border-left-style: dotted;
border-top-color: #990;
border-right-color: #990;
border-bottom-color: #990;
border-left-color: #990;
font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "MS Pゴシック", "MS PGothic", sans-serif;
font-size: 1em;
list-style-type: none;
text-align: center;
margin: 0px;
padding: 0px;
}
a {
display: block;
height: 50px;
width: 150px;
}
-->
</style>
</head>

<body>

<ul>
<li><a href="Untitled-1.html">国語</a></li>
<li><a href="Untitled-1.html">図工</a></li>
<li><a href="Untitled-1.html">算数</a></li>
<li><a href="Untitled-1.html">社会</a></li>
<li><a href="Untitled-1.html">理科</a></li>
</ul>
</body>
</html>

問題があれば、追加・変更タグを添えて回答願います。

投稿日時 - 2010-08-29 23:51:54

QNo.6145157

困ってます

質問者が選んだベストアンサー

参考までに
・xhtmlではcssはコメントアウトしない方がいいです
・親子要素で全く同じwidth、heightの値を指定するのは極力避ける方が無難です
・ul要素のmarginとpaddingをリセットしました(li要素はもともと0なので削りました)
・borderの指定を短くしました
・ul要素にwidthとheightを指定しました

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>時間割</title>
<style type="text/css">
ul {
width:755px;
height:52px;
margin:0;
padding:0;
line-height: 2em;
font-size: 1.5em;
}
ul li {
background-color: #F00;
float: left;
width: 150px;
border: 1px dotted #990;
border-right: 0;
font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "MS Pゴシック", "MS PGothic", sans-serif;
list-style-type: none;
text-align: center;
}
a {
display: block;
height: 50px;
}
</style>
</head>

<body>

<ul>
<li><a href="Untitled-1.html">国語</a></li>
<li><a href="Untitled-1.html">図工</a></li>
<li><a href="Untitled-1.html">算数</a></li>
<li><a href="Untitled-1.html">社会</a></li>
<li><a href="Untitled-1.html">理科</a></li>
</ul>
</body>
</html>

投稿日時 - 2010-08-30 01:24:25

お礼

コメントアウトとはcssは別ページ(.css)にしたほうがいいということでしょうか?
色々勉強になりました。
ありがとう。

投稿日時 - 2010-08-31 16:34:07

このQ&Aは役に立ちましたか?

1人が「このQ&Aが役に立った」と投票しています

回答(2)

ANo.1

この段階では問題なさそうに見えますが、
下にコンテンツが追加されるとulの高さのブラウザごとの差異が余白の違いを生みそうな気がします。

ulはブロック要素のままliタグに合わせてfloatをかけておいたほうが安定しそうです。

ul {
float: left;
width: 750px;
height: 50px;
line-height: 2em;
font-size: 1.5em;
}

全般的にはきちんとしている内容だと思います。

投稿日時 - 2010-08-30 00:24:44

あなたにオススメの質問