HTMLやcssに詳しい方教えてください

締切済

質問者：varuhalla
質問日時：2014/08/27 15:13
回答数：2件

HTML、cssに詳しい方、助言お願いします。 footerの部分なのですが、footerより上の部分（サイドのナビやメイン部分）にj Query、javascriptを入れる（入れたのはアコーディオン）と、footerの部分がおかしくなります（footerのbackground-colorが一部消えるなど）
どなたか、もしおかしい部分があるのでしたら、おかしい部分の指摘をお願いします。xxxはテキストを入れている部分です。

footerのHTML

<div class="footercolor clearfix">
<div id="footer">
<div class="footerbox1">
<ul class="footertext1">
<li><a href="../ranking.html">ｘｘｘ</a></li>
<li><a href="../area-top/area.html">ｘｘｘ</a></li>
</ul></div>

<div class="footerbox2">
<ul class="footertext2">
<li><a href="../index.html">ｘｘｘ</a></li>
<li><a href="../site.html">ｘｘｘ</a></li>
<li><a href="../info.html">ｘｘｘ</a></li>
<li><a href="../system.html">ｘｘｘ</a></li>
</ul></div>

<div class="footerbox3">
<ul class="footertext3">
<li><a href="../inquiry.html">ｘｘｘ</a></li>
</ul></div>

</div>

<address class="copyright">Copyright (C) ｘｘｘ.com 2014 All Rights Reserved.</address>

footerのcss

.footercolor{
background-color:#FFCC99;

}

#footer{
width:960px;
margin:0 auto;

}

.footerbox1{
width:320px;
float:left;

}

.footerbox2{
width:320px;
float:left;

}

.footerbox3{
width:320px;
float:left;

}

.footertext1{
text-align:center;
margin-top:12px;
list-style:none;
padding:3px;

}

.footertext2{
margin-top:12px;
list-style:none;
padding:3px;
text-align:left;
margin-left:80px;
}

.footertext3{
text-align:center;
margin-top:12px;
list-style:none;
padding:3px;
margin-left:50px;

}

.footertext1 a:hover{
filter:alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;

}

.footertext2 a:hover{
filter:alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;

}

.footertext3 a:hover{
filter:alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;

}

.copyright{
clear:both;
text-align:center;
font-weight:bold;
padding-top:50px;
padding-bottom:10px;
}

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

最新から表示
回答順に表示

No.2

回答者： ORUKA1951
回答日時：2014/08/27 19:57

そうですか・・

＞根本的な部分（divの閉じタグ）が無かったのでおかしくなっていました。
　むやみにDIV使うからです。HTMLが汚くなっちゃいますし、メンテナンスできなくなりますよ。DIVは
「DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )」ものであって、デザインのためではありません。
　HTML5では、安易にDIVは使えなくなります。
Note:Authors are strongly encouraged to view the div element as an element of last resort, for when no other element is suitable.( http://www.w3.org/TR/html5/grouping-content.html … )
　著者は他に適切な要素がないときの最後の最後の手段としてdiv要素を使用することを強く推奨する。・・

　また、スタイルシートのセレクタの書き方も見直されたほうが良いでしょう。
サンプルを一度表示してご覧なさい。
div.footer ul,div.footer p{}
と書いてあるのは、「footerブロック内(半角スペース)のul要素と、p要素は」と言う意味です。これを見るだけでHTML見なくても、なにをデザインしているか分かりますよね。

- 0
- 件

通報する

No.1

回答者： ORUKA1951
回答日時：2014/08/27 18:13

　なんというか・・jqueryにしろjavascriptにしろ、配布されている物は結構古いものが多くて、ちょっと手を加えようとすると色々な部分が競合して色々な問題が発生します。

与えられた情報の範囲では原因は分かりません。

　まずHTMLをstrictで、CSSを基本に忠実に作成してシンプルにして分かりやすくすることが慣用です。ざっと見る限りHTMLは
<div class="footer">
　<ul>
　　<li><a href="../ranking.html">ｘｘｘ</a></li>
　　<li><a href="../area-top/area.html">ｘｘｘ</a></li>
　</ul>
　<ul>
　　<li><a href="../index.html">ｘｘｘ</a></li>
　　<li><a href="../site.html">ｘｘｘ</a></li>
　　<li><a href="../info.html">ｘｘｘ</a></li>
　　<li><a href="../system.html">ｘｘｘ</a></li>
　</ul>
　<p><a href="../inquiry.html">ｘｘｘ</a></p>
　<address>Copyright (C) ｘｘｘ.com 2014 All Rights Reserved.</address>
</div>
だけでよいはずです。セレクタはHTMLの文書構造を元に書けば良い。そうすると通常は詳細度は期待通りになる。

　そのうえで、原因を特定すれば良いです。多分、より詳細度のもので上書きされているとか・・

[サンプル]
★Another HTML Lint - Gateway( http://www.htmllint.net/html-lint/htmllint.html )
　で検証済みのHTML4.01strict + CSS2.1 + CSS3のopacity
★スマホ(480px以上に対応してます)リキッド!!
★タブは＿に置換してあるので戻す。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
＿<meta http-equiv="content-type" content="text/html; charset=Shift_JIS">
＿<title>サンプル</title>
＿<meta name="author" content="ORUKA1951">
＿<meta http-equiv="Content-Style-Type" content="text/css">
＿<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" >
＿<link rel="START" href="../index.html">
＿<style type="text/css">

＿</style>
</head>
<body>
＿<div class="header">
＿＿<h1>タイトル</h1>
＿＿<p>このページでは・・・・</p>
＿</div>
＿<div class="section">
＿＿<h2>見出し</h2>
＿＿<p>本文はsection</p>
＿＿<div class="section">
＿＿＿<h3>項見出し</h3>
＿＿＿<p>本文項記事</p>
＿＿＿<p>sectionの階層でレベルが判断される</p>
＿＿</div>
＿＿</div>
＿</div>
＿<div class="footer">
＿＿<ul>
＿＿＿<li><a href="../ranking.html">ｘｘｘ1</a></li>
＿＿＿<li><a href="../area-top/area.html">ｘｘｘ2</a></li>
＿＿</ul>
＿＿<ul>
＿＿＿<li><a href="../index.html">ｘｘｘ3</a></li>
＿＿＿<li><a href="../site.html">ｘｘｘ4</a></li>
＿＿＿<li><a href="../info.html">ｘｘｘ5</a></li>
＿＿＿<li><a href="../system.html">ｘｘｘ6</a></li>
＿＿</ul>
＿＿<p><a href="../inquiry.html">ｘｘｘ</a></p>
＿＿<address>Copyright (C) ｘｘｘ.com 2014 All Rights Reserved.</address>
＿</div>
</body>
</html>