dポイントプレゼントキャンペーン実施中！

HTMLでCSSでボーダーが表示されません。

解決済

  • 質問者：aaiok
  • 質問日時：
  • 回答数：9件

HTMLでCSSでボーダーが表示されません。

右サイドバー（right）の左にボーダーを表示させたいのですが、
画像のように文字を記述したところまでしかボーダーが表示されません。
ボーダーをfooterの上まで引きたいのですが、
わかる方いらっしゃいましたら回答宜しくお願い致します。

■HTML
<html>
<body>
<div id="wrapper">
<div id="header"></div>

<div id="container">
<div id="left"></div>

<div id="right">
<div id="right_title"></div>
<div id="right_content"></div>
</div>
</div>

<div id="footer"></div>
</div>
</body>
</html>

■CSS
#right {
float: left;
height: auto;
}

#right_title {
}

#right_content {
border-left-width: 1px;
border-left-style: solid;
border-left-color: #000;
}

「HTMLでCSSでボーダーが表示されませ」の質問画像
通報する

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

質問の本文を隠す

A 回答 (9件)

No.8ベストアンサー

  • 回答者： ORUKA1951
  • 回答日時：

【以下長いです。

】
＞上記のようにした場合、ボーダーはfooterの上まで引くことは可能なのでしょうか。
　はい、この場合、rightには、常に親コンテナブロックよりも短い行数になるのでしたら、height:100%が使えます。(absoluteは、floatと異なり親コンテナブロックのサイズを参照できます。)
　下記にごく簡単なサンプルをHTML4.01strictで作成したものをあげておきます。マークアップは、私がテンプレートとして使用しているものを流用したものなので、aaiokさんのものとは、異なりますが、参考になると思います。
[ポイント]は、
　absoluteするブロックのheight:100%です。

★とりあえずブラウザはfirefox3.58、IE8、Opera9.26、Safari4.04で確認。
★整合性は、下記で検証
　Another HTML-lint gateway ( http://openlab.ring.gr.jp/k16/htmllint/htmllint. … )
　W3C CSS 検証サービス ( http://jigsaw.w3.org/css-validator/#validate_by_ … )
★本文テキスト幅はせまくしてあります。
・・・・・・div.footのborderのためだけに書き直したので、ウィンドウが極端に小さいときはずれます。・・・・

★★下記ソースは、視認性のためタブを全角スペース２個で置換してあります。表示確認するときは、タブに戻してください。
＿＿＿＿＿＿＿＿＿＿＿＿＿＿ここから
<!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 http-equiv="Content-Style-Type" content="text/css">
　　<link rev="made" href="mailto:hoge@hoge.com" title="send a mail" >
　　<link rel="START" href="../index.html">
　　<style type="text/css">
<!--
/* default.css */
html,body{margin:0px;padding:0px;background-color:gray;}
p{text-indent:1em;margin:0.2em 1em;}

/* screenShape.css */
h1,h2{ text-align: center;}
div#Top{margin:0px 20%;line-height:60px;}
div#Top h1{ font-size: 40px;margin:0px;}
div.bodyText{
　　margin: 40px 20% 0px 20%;
　　position:relative;
　　min-height: 400px;min-width:400px;
　　padding-right: 12%;
}
div.documentInfo ul#siteNav{
　　display:block;width:60%;min-width:400px;
　　margin:0px 20%;padding:2px;
　　position:absolute;top: 60px;left:0px;
}
div.documentInfo ul#siteNav li{
　　display:block;list-style:none;
　　float:left;line-height: 24px;
　　width:19%;min-width:60px;font-size: 16px;
　　border-style:solid;border-width: 2px;
}
div.documentInfo ul#siteNav li a{
　　display:block; width:100%;height:100%;
　　color:white;text-align:center;
}
div.bodyText div.memo{
　　font-size: 0.7em;
}
div.bodyText div.memo h2{
　　margin: 0.1em 1em;
}
div.bodyText div.foot{
　　position:absolute;
　　width: 20%;
　　top:0px;
　　right:0px;
　　border-style: solid;
　　border-width: 0px 0px 0px 2px;
　　height: 100%;
}
div.documentInfo{
　　margin:-15px 20% 0px 20%;
　　min-width:400px;
}
/* colorScheme.css */
div.documentInfo ul#siteNav{
　　background-color: rgb(180,180,180);
}
div.documentInfo ul#siteNav li{
　　border-color: gray;
　　background-color: rgb(100,100,100);
}
div.documentInfo ul#siteNav li a{
　　color:white;
}
div.documentInfo ul#siteNav li a:visited{
　　background-color: rgb(200,200,200);
}
div.documentInfo ul#siteNav li a:focus,
div.documentInfo ul#siteNav li a:hover{
　　background-color: white;
　　color:black;
}
div.documentInfo ul#siteNav li a:active{
　　background-color: red;
}
div.bodyText{
　　background-color: white;
}
div.bodyText div.foot{
　　border-color: blue;
}　　
div.documentInfo{
　　background-color: white;
　　font-size: 0.9em;
}
-->
</style>
</head>
<body>
<div id="Top">
<h1>サンプル</h1>
</div>
<div class="bodyText">
　　<h1>質問内容</h1>
　　<p>
　　　　HTMLでCSSでボーダーが表示されません。
　　</p>
　　<p>
　　　　右サイドバー（right）の左にボーダーを表示させたいのですが、画像のように文字を記述したところまでしかボーダーが表示されません。ボーダーをfooterの上まで引きたいのですが、わかる方いらっしゃいましたら回答宜しくお願い致します。
　　</p>
　　<div class="memo foot">
　　　　<h2>脚注</h2>
　　　　<p>
　　　　　　脚注部分に本文高さにわたってborderを引く
　　　　</p>
　　</div>
</div>
<div class="documentInfo">
　　<ul id="siteNav">
　　　　<li><a href="./index.html">Top</a></li>
　　　　<li><a href="./info.html">Infomation</a></li>
　　　　<li><a href="./product/index.html">Product</a></li>
　　　　<li><a href="./sample1.html">SiteMap</a></li>
　　　　<li><a href="./contactus.html">Contact</a></li>
　　</ul>
　　<h2>更新履歴</h2>
　　<dl class="document-version">
　　　　<dt id="FIRST-PUBLISHED">First Published</dt>
　　　　<dd>2005-06-10</dd>
　　　　<dt id="LAST-MODIFIED">Last Modified</dt>
　　　　<dd>2005-06-10 12:00:00 (JST)</dd>
　　</dl>
</div>
</body>
</html>

この回答への補足

無駄のない綺麗な記述でお手本のようで大変参考になりました。
positionプロパティとheight:100%;を利用したボーダーを
理解することができました。

スタイルシートの記述方法は目から鱗でした。
見たことのない記述方法で驚きました。
以下に疑問点が残りましたので回答の方宜しくお願い致します。


(1)div.bodyTextやdiv.bodyText div.footが2回出てくるのですがスタイルシート上でこのように追記できるのですか？

(2)div.bodyText div.footのような記述方法。（divのclass=bodyText内にあるdivのclass=footのスタイルシートは…という意味ですか？）

(3)div.documentInfo ul#siteNavのような記述方法。（divのclass=documentInfo内にあるulのid=siteNavのスタイルシートは…という意味ですか？）

(4)liを使用した横並びメニューは、inlineを使用してXHTMLでしかできないと某CSSの雑誌で学んだのですが、実際質問者様がHTML4.01でliで横並びのメニューをdisplay:block;を利用して作成しているので、できるのですか？

(5)/* default.css */のhtml,bodyという記述方法は、どういう時にbodyの前にhtml,を付けるのでしょうか？

(6)<div class="memo foot">という表記は、divにmemoというclassとfootというclassを２つ指定しているのでしょうか？では、仮にclassにclass="A B C D"という４つのclassも指定可能なのでしょうか？

(7).footと表記せずにdiv.bodyText div.footと長い表記するのは何か理由があるのでしょうか？（また、div.bodyTextとdiv.footの間の半角スペースは「～の内ブロックの」という意味でしょうか？


その都度、質問などをして理解するようにはつとめているのですが、CSSを経験した年数に比べると、まだまだ私はCSSを理解していないと思います。質問者様のようにCSSを上達できるようになるには、どういうサイトもしくは参考書などを見れば宜しいのでしょうか。

宜しければ教えてください。

補足日時：2010/02/26 18:57
通報する
    • good
    • 0
    • 件
通報する

No.9

  • 回答者： ORUKA1951
  • 回答日時：

まず最初に


＞CSSを上達できるようになるには、どういうサイトもしくは参考書などを見れば宜しいのでしょうか。
　それは、直接仕様書を参照することです。仕様書自体はそんなに大きな量ではないですし、知りたいことがすべて書いてあるはずです。参考書にしろウェブ上のものにしろ、そのほとんどは「孫引き」や「孫孫引き」で直接仕様書を見ているとは思えません。
REC-CSS2 邦訳 ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2 … )
HTML 4.01 Specification (ja) ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )
　極論すれば、これ以外に見なくてもない(笑)

　CSSとは、Cascading Style Sheetsのことです。Cascading(継承される)と書かれているのに、詳細度や子孫セレクタなどセレクタを活用していないマニュアルなんておかしいですね。何でもかんでも#で指定してある時点で、そのマニュアルはおかしい!!たぶん、オーサリングツールを使うと、そうするしか指定方法がないためでしょう。


以下簡単に
(1)スタイルシート上でこのように追記できるのですか？
　　6.4.1 カスケード処理の順序 ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2 … )の4.

(2)div.bodyText div.footのような記述方法。
　　5.5 子孫セレクタ（Descendant selectors） ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2 … )

(3)div.documentInfo ul#siteNavのような記述方法。
　　同上

(4)liを使用した横並びメニューは、
　　CSSの仕様、HTMLの仕様には関係ない。とはいってもHTML4.01以降

(5)/* default.css */のhtml,bodyという記述方法は、
　　5.2.1 グループ化（Grouping） ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2 … )

(6)<div class="memo foot">という表記は、
　これはHTMLの仕様
　　class = cdata-list [CS] ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )

(7).footと表記せずにdiv.bodyText div.footと長い表記するのは何か理由があるのでしょうか？
　　6.4.3 セレクタの詳細度を計算する（Calculating a selector's specificity） ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2 … )

（また、div.bodyTextとdiv.footの間の半角スペースは「～の内ブロックの」という意味でしょうか？
　(2)(3)に同じ

★基本的に#の指定は行いません。classや詳細度、子孫セレクタ、兄弟セレクタ・・を駆使すれば、基本的に不要というか、邪魔
　たとえば本文ブロック内のメモブロックについては、すべてフォントサイズを0.8emとする場合、div.mainText div.memo で済む。

★仕様書を通しで見ながら、ひとつずつ試してみる。それが一番の早道です。
    • good
    • 0
    • 件
通報する
この回答へのお礼

回答して頂き有難う御座います。
また、色々教えて頂き感謝しています。
質問のボーダーについては背景画像やpositionを利用することで解決できるという事を学ぶことが出来ました。また、CSSの記述方法など教えて頂いた内容は一朝一夕にはいきませんが、今後理解していきたいと思います。

通報する
お礼日時：2010/02/27 11:28

No.7

  • 回答者： tkmojo
  • 回答日時：

＞rightに背景画像を使用しても


＞途中までしか表示されないのではないでしょうか。

floatしたボックスではなく、その親ボックスに背景を指定します。
すると当然親ボックスの下まで背景が表示されます。
今回の場合はcontainerですね。

この回答への補足

containerにボーダーの背景画像を使用するということは
rightの高さが増加すれば当然背景画像のボーダーも
その都度訂正しなくてはならないということでしょうか。

補足日時：2010/02/25 18:04
通報する
    • good
    • 0
    • 件
通報する

No.6

  • 回答者： infinity38
  • 回答日時：

<div id="container">にボーダーの背景画像を指定します。


そうすればfooterの上まで表示させられます☆

この回答への補足

containerにボーダーの背景画像を使用するということは
rightの高さが増加すれば当然背景画像のボーダーも
その都度訂正しなくてはならないということでしょうか。

補足日時：2010/02/25 17:30
通報する
    • good
    • 0
    • 件
通報する

No.5

  • 回答者： ORUKA1951
  • 回答日時：

<div id="container">


<div id="left"></div>
<div id="right">
<div id="right_title"></div>
<div id="right_content"></div>
や
#right {
float: left;
}
　このHTMLとしては奇妙なマークアップ、最近本当によく上がってくるのですが、皆さん何を参考にしているのでしょう。

★floatは、本来はコンテナブロック内に画像などのブロックの周囲に他のブロック要素・インライン要素を回り込ませるためのプロパティですから、当然
1) そのブロックが短ければ、【そこで終了して】他の要素は回り込んで本来の位置に戻る
2) 長ければ、解除されない限りすべての要素はfloatする。
3) 【親コンテナブロック】【後続する要素】のサイズを引き継がない・無視する
　が期待されています。
　どすから、本来は、本文やメニューなどを配置するものではなく、あくまで本文中の画像の周囲に本文を回り込ませる用途に限定して使用するものです。
　そんな使い方をしたら、本文中に画像があってfloatさせ、どこかで解除したら、すべてずれてしまう。
　このような２カラムや３カラムの配置に使用すべきではありません。
　^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
　この場合、コンテナブロックをrelativeでいったん指定してから、各カラムをabsoluteで指定すると、(親コンテナブロックがstatic以外に指定されていると)親ブロック内のサイズも参照してくれる。

この回答への補足

HTML4.01までは本来floatの使用方法は画像のみに使用していましたが、
HTML5やXHTMLではサイトのデザインは基本的にCSSで作ることを推奨ということで、
Tableタグを使用しないで、大手ブログのテンプレートやホームページで多用されている
floatでデザインする方法しか思いつきませんでした。

floatではそもそも質問にあるようなボーダーの記述は無理と言うことですが
positionプロパティを使用すれば可能と言うことでしょうか？
positionプロパティでrelativeを使用するデザイン方法は、
まだ使用したことがありません。質問なのですが、

containerにposition:relative;width:800px;とし
rightにposition:absolute;top: 10px;left:600px;width:200px;、
rightt_titleにposition:absolute;top: 10px;left:600px;width:200px;height:20px;、
right_contentにposition:absolute;top: 30px;left:600px;width:200px;height:auto;
border-left:solid 1px #000000;

というようにrightのpositionをしていするということでしょうか。
（分かりやすいように余白等は省略しています）
上記のようにした場合、ボーダーはfooterの上まで引くことは可能なのでしょうか。
宜しくお願い致します。

補足日時：2010/02/25 18:03
通報する
    • good
    • 0
    • 件
通報する

No.4

  • 回答者： tkmojo
  • 回答日時：

floatというのはそういうものです。


そういう場合は背景画像で対応するのが一般的だと思いますが、
背景画像では駄目なのですか？

この回答への補足

rightに背景画像を使用しても
途中までしか表示されないのではないでしょうか。

補足日時：2010/02/25 02:52
通報する
    • good
    • 0
    • 件
通報する

No.3

  • 回答者： TanakaHiro
  • 回答日時：

横幅固定か横幅可変かによって違ってきますが、横幅固定でしたら・・・



#wrapper {
width: 800px;
}

#left {
float: left;
width: 600px;
}

#right {
float: left;
width: 200px;
}

#footer {
clear: left;
}

みたいな感じにすると、うまくいくかもしれません。
    • good
    • 0
    • 件
通報する
この回答へのお礼

回答有難う御座います。
そのように記述していたのですが
できませんでした。

通報する
お礼日時：2010/02/24 18:49

No.2

  • 回答者： ORUKA1951
  • 回答日時：

float自体がそういう仕様なので、無理です。


そもそもマークアップが適切でない。
relative内でabsoluteで指定する。高さは100%・・

この回答への補足

回答有難う御座います。
relativeではできませんでした。

補足日時：2010/02/24 18:45
通報する
    • good
    • 0
    • 件
通報する

No.1

  • 回答者： totomac
  • 回答日時：

to-RさんのheightLine.jsを組み込んでみたらどうですか？



参考URL：http://blog.webcreativepark.net/2007/07/26-01033 …
    • good
    • 0
    • 件
通報する
この回答へのお礼

回答有難う御座います。
機会があれば使用してみたいと思います。

通報する
お礼日時：2010/02/24 18:47

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報