幅を広げたいのに文字が隠れ（？）る

質問

下記のように分かれているページがあります。
┌───────┐
│へっだ　　　　　　│
├─┬───┬─┤
│め│めいん│※│
│に│　　　　 │　 │
│ゅ│　　　 　│　 │
├─┴───┴─┤
│ふった　　　　　　│
└───────┘
『※』の部分に文字などもなく不自然にスペースができています。
『めいん』の幅以上の文字を入れると、文字が隠れてしまいます。

『※』の部分まで『めいん』を伸ばし、2カラムにしたいのですが、
他所の幅を変更するだけでは解決できず、質問をさせていただきました。

質問部分のコードは下記の通りです。
（ヘッダ・フッタ省略）

【HTML部分】
<!-- メインコンテンツ -->
<div id="container">
<div id="contents">
～省略～
</div>
<!-- メインコンテンツ終わり -->
<!-- メニュー -->
<div id="menu">
～省略～
</div>
<!-- メニュー終わり -->
</div>
<!-- コンテンツ終わり -->

【CSS部分】
/*---------- コンテンツ ----------*/

#container {
width: 1000px;
overflow: visible;
margin: 0px;
padding: 6px;
background-color: #ffffff;
}

/*---------- メインコンテンツ ----------*/

#contents {
float: right;
margin: 0;
padding: 5px 10px 5px 0;
font-size: 12px;
line-height: 180%;
width: 1000px;
letter-spacing: 1px;
}

#contents #pannavi {
margin: 0;
padding: 0 0 5px 0;
font-size: 12px;
}

#contents h2 {
height: 27px;
margin: 0 0 4px 0;
padding: 8px 0 0 20px;
font-size: 12px;
color: #333333;
background-image: url(img/titlebar.gif);
background-repeat: no-repeat;
}

#contents h3 {
margin: 12px 5px 10px 6px;
padding: 8px 10px 5px 13px;
line-height: 110%;
font-size: 13px;
color: #444444;
border-left: solid 5px #aaaaaa;
background-color: #eeeeee;
}

#contents h19 {
margin: 12px 5px 10px 6px;
padding: 8px 10px 5px 13px;
line-height: 110%;
font-size: 13px;
color: #444444;
border-left: solid 5px #eeeeee;
background-color: #eeeeee;
}

h4,h5 {
font-size:18px;
font-weight:bold;
color:#7e603b;
}

h7 {
font-size:10px;
font-weight:lighter;
color:#7e603b;
}

h8 {
font-size:13px;
font-weight:bold;
color:#7e603b;
}

h9 {
font-size:13px;
font-weight:bold;
color:#cccccc;
}

h10 {
font-size:13px;
font-weight:bold;
color:#000000;
}

h11 {
font-size:18px;
color:#000000;
}

#contents p {
margin: 3px 0 3px 0;
padding: 0 5px 0 5px;
line-height: 180%;
font-size: 12px;
}

#contents a {
color: #c9171e;
font-size: 12px;
}

#contents a:hover {
color: #e83929;
font-size: 12px;
}

#contents img.head_photo {
margin: 0 0 10px 50px;
}

#contents img.photo {
float: left;
margin: 10px 20px 0 0;
}

#contents img.picture {
margin: 0 10px 10px 0;
float: left;
}

#contents p.photo {
margin: 0 0 20px 0;
padding: 0;
}

table#t01 {
border: solid 1px #999999;
border-collapse: collapse;
}

td#t01 {
border: solid 1px #999999;
border-collapse: collapse;
}

td#head {
padding: 7px 6px 5px 10px;
border: solid 1px #999999;
border-collapse: collapse;
}

table.table_line {
border-collapse: collapse;
margin : 10px 0 0 0;
}

td.table_line {
border-collapse: collapse;
padding : 9px 14px 7px 14px;
border-bottom: solid 2px #fffffc;
}

どうか、ご教授お願いいたします。

回答No.1

outbrave · ベストアンサー

#container(1000px) でその中に#contents(1000px) を入れているので、#menu を入れる場所がないですよ？

その肝心な#menu の内容もわかりませんね。

横幅の計算をやり直してはどうですか。

h1 とか a:hover など関係ないのは書かなくてもいいです。

お礼

人から引き継がれたもので、至急幅分だけ変更したかったのですが解決できず質問させていただくことと相成りました。
お手を煩わせてごめんなさい。

回答No.4

ORUKA1951

他人から引き継がれたものとのこと・・
不可能です。
　拝見した限りでは、HTMLはとっても酷いものです。
Another HTML-lint 5( http://www.htmllint.net/html-lint/htmllint.html )
　でチェックしてみてください。
　そのようなものをデザインしなおすなんて、私でしたら百万円もらっても請合いません。数ヶ月忙殺される。
　No.1で示したようなHTMLでしたら、喜んで引き受けますよ。実際にコピーして試して御覧なさい。

　ゼロから作り直すほうが、はるかに早くよいものが出来るでしょう。時間も労力も・・

お礼

No.1のものはいただいてすぐ試させていただきました、ありがとうございました！！

>>百万円もらっても請合いません。数ヶ月忙殺される。
HTML知識が趣味の範囲だったもので、ビジネス的な考え初めて知りました・・・

知識が少ないなりにも、ゼロから作り直す予定でしたが、
PHPで作成されたブログ機能がどうしても外せないらしく四苦八苦でした（汗

最終的にブログ以外のデザインを、
地～道～～～～～に、作り直します。

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

回答No.3

ORUKA1951

いいや、サイトナビゲーションを左にと言われるならスタイルシートの最後に
div.header{position:relative;}
div.header div.nav{
width:20%;
position:absolute;
top:100%;
z-index:10;
}
div.section h2{margin-top:20px;}
#contentTable{width:78%;margin-left:20%;height:auto;height:20px;}
#contentTable ol,#contentTable ol li{margin:0;padding:0;text-align:center;}
#contentTable ol li{display:inline-block;}

を付け加える。

　文書構造さえ、きちんと正しく書かれていれば、どのようにもデザインできます。デザインとは所詮内容に見合ったものになるのですからね。
1) まずデザインを切り離してHTMLを書く練習をすること。
　　そうするととても楽でしょう。
2) スタイルシートはHTMLの文書構造を利用して書く。デザインのためにHTMLを書くのではない!!
　　そうすれば、HTMLに変なclass/id名を書かなくて済むので、後々もとても楽
div.section h2
　とは「classにsectionの値を持つdiv要素の子孫のh2」という意味です。HTML開かなくても、何をしようとしているか判る。

お礼

ごめんなさい。ありがとうございます。

回答No.2

ORUKA1951

なぜそんな膨大な、そして訳がわからないCSSになり、しかも期待通りにならないかと言うと、HTMLが正しくないからです。
書かれたHTMLだけを
　⇒Another HTML-lint 5( http://www.htmllint.net/html-lint/htmllint.html )
でチェックすると100点は無論 マイナス点になるのでしょうね。

※HTMLには文書構造しか書かない。
　用意された要素(タグ)では足りないときに限り、divやspanとid,class名を組み合わせて文書構造を補完します。(デザインのためにidやclass名をつけるのではない。そのclass名などで示されている文書構造を利用してスタイルシートでデザインしていくのです。★これってとても重要です。

　HTMLにh7,h8～なんて要素はありません。

　添付された画像から判断するとそのHTTMLは、header,本文(section),footerの構成で、本文中にメニューを持つと推察できます。判らないのは★HTMLが示されていないので★メニューの内容で、サイトナビゲーションのような本文と関係ないものか、本文の目次のように本文に関連したものかがわかりません。

<body>
　<div class="header">
　　<h1>ページタイトル</h1>
　　<div class="nav">
　　　<ol>
　　　　<li><a href="/">Top</a></li>
　　　</ol>
　　</div>
　</div>
　<div class="section">
　　<h2>質問と回答</h2>
　　<div class="section">
　　　<h3>質問</h3>
　　　<p>
　　　『※』の部分に文字などもなく不自然にスペースができています。『めいん』の幅以上の文字を入れると、文字が隠れてしまいます。
　　　</p>
　　　<p>
　　　『※』の部分まで『めいん』を伸ばし、2カラムにしたいのですが、他所の幅を変更するだけでは解決できず、質問をさせていただきました。
　　　</p>
　　</div>
　　<div class="section">
　　　<h3>回答</h3>
　　　<p>
　　　　添付された画像から判断するとそのHTTMLは、header,本文(section),footerの構成で、本文中にメニューを持つと推察できます。判らないのは★HTMLが示されていないので★メニューの内容で、サイトナビゲーションのような本文と関係ないものか、本文の目次のように本文に関連したものかがわかりません。
　　　</p>
　　　<p>
　　　　とりあえず、簡単なサンプル書いておきます。
　　　</p>
　　</section>
　</section>
　<div class="footer">
　　<h2>文書情報</h2>
　</div>
</body>
　だったとします。これだったら誰が見ても、あなたが10年後に見てもどこに何が書いてあるか簡単にわかる。もちろん機械(検索エンジンにも理解できます)
　そしてデザインは一切ないですから、デザインを劇的に変更することも出来ます。
　このHTMLにスタイルシートでデザインした例を書きに示しておきます。
★Another HTML-lint 5( http://www.htmllint.net/html-lint/htmllint.html )
★W3C CSS 検証サービス( http://jigsaw.w3.org/css-validator/#validate_by_input )
　で検証済み
★タブは＿に置換してあるので戻すこと。
<!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">
<!--
/* 基本 */
html,body{margin:0;padding:0;}/* セレクタをグループ化 */
h1,h2,h3,h4,p{margin:0 auto;line-height:1.6em;}
p{text-indent:1em;}
div.header,div.section,div.footer{
＿width:90%;
＿min-width:460px;max-width:980px;
＿margin:0 auto;
＿padding:10px;
＿position:relative;
}
div.section div.section,
div.section h2{
＿width:78%;
＿min-width:0;
＿margin:5px 5px 5px 20%;
}
#contentTable{
width:18%;height:100%;
position:absolute;
top:0;left:0;
}
/* 判りやすいように色分け */
body{background-color:gray;}
div.header{background-color:yellow;}
div.section{background-color:aqua;}
div.section div.section{background-color:white;}
div.footer{background-color:silver;}
#contentTable{background-color:lime;}
div.section h2{
height: 27px;font-size: 12px;
color: #333333;background: url(img/titlebar.gif) no-repeat;
}
div.section div.section h3{
line-height: 1.1em;
font-size: 13px;
color: #444444;
border-left: solid 5px #aaaaaa;
background-color: #eeeeee;
}
-->
＿</style>
</head>
<body>
＿<div class="header">
＿＿<h1>ページタイトル</h1>
＿＿<div class="nav">
＿＿＿<ol>
＿＿＿＿<li><a href="/">Top</a></li>
＿＿＿＿<li><a href="/profile">profile</a></li>
＿＿＿</ol>
＿＿</div>
＿</div>
＿<div class="section">
＿＿<h2>質問と回答</h2>
＿＿<div class="section" id="question">
＿＿＿<h3>質問</h3>
＿＿＿<p>
＿＿＿『※』の部分に文字などもなく不自然にスペースができています。『めいん』の幅以上の文字を入れると、文字が隠れてしまいます。
＿＿＿</p>
＿＿＿<p>
＿＿＿『※』の部分まで『めいん』を伸ばし、2カラムにしたいのですが、他所の幅を変更するだけでは解決できず、質問をさせていただきました。
＿＿＿</p>
＿＿</div>
＿＿<div class="section" id="Answer">
＿＿＿<h3>回答</h3>
＿＿＿<p>
＿＿＿＿添付された画像から判断するとそのHTTMLは、header,本文(section),footerの構成で、本文中にメニューを持つと推察できます。
＿＿＿</p>
＿＿</div>
＿＿<div id="contentTable">
＿＿＿<ol>
＿＿＿＿<li><a href="Question">質問</a></li>
＿＿＿＿<li><a href="Asswer">回答</a></li>
＿＿＿</ol>
＿＿</div>
＿</div>
＿<div class="footer">
＿＿<h2>文書情報</h2>
＿＿<dl class="documentHistry">
＿＿＿<dt id="FIRST-PUBLISHED">First Published</dt>
＿＿＿<dd>2012-08-10</dd>
＿＿</dl>
＿＿<address>&copy; ORUKA1951 2012 - 2016 All Rights Reserved mailto:*****</address>
＿</div>
</body>
</html>

お礼

人から引き継がれたもので、至急幅分だけ変更したかったのですが解決できず質問させていただくことと相成りました。
お手を煩わせてごめんなさい。

サンプルまでいただきすみません、恐縮です。

補足

CGIのブログでも同じスタイルシート使われてたので現在あるもので何とかできないかと質問させていただいておりました。すみません。