![]()
- ２コラムのサイトをCSSで指定する方法
以下のようにtest.htmlとtest.cssを作成して２コラム（左がメニュー、右がコンテンツ）のレイアウトのサイトを作成した場合、左のメニュー部分のデータ（文字、画像等）の行数が右のコンテンツ部分のデータの行数よりも多い場合、コンテンツの下部に空白ができ下地のカラー（緑）が表示されてしまいます。逆に、右のコンテンツ部分のデータ（文字、画像等）の行数が左のメニュー部分のデータの行数よりも多い場合、メニューの下部に空白ができ下地のカラー（緑）が表示されてしまいます。 どのようにすれば、左のメニュー部分のデータ（文字、画像等）の行数が右のコンテンツ部分のデータの行数よりも多い場合でも、右のコンテンツ部分のデータ（文字、画像等）の行数が左のメニュー部分のデータの行数よりも多い場合でも下地のカラー（緑）が表示されないようにできるのでしょうか？ 通常、このような問題はどのように対処するのか教えて下さい。 やはり、コンテンツ部分のデータの行数がメニュー部分のデータの行数よりも多くなると推測して下地のカラーの色（id=”main”のbackground-color）をメニュー部分の色（id="sidebar"のbackground-color）と同じ色にしておくしかないのでしょうか？ただし、このようにすると、推測どおりに行かずに左のメニュー部分のデータ（文字、画像等）の行数が右のコンテンツ部分のデータの行数よりも多い場合、コンテンツの下部に空白ができ下地のカラー（緑）が表示されてしまいます。 ＜test.htmlコード＞ <!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"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <link rel="stylesheet" href="css/test.css" type="text/css"> </head> <body> <div id="base"> <div id="header"> <p>ヘッダー</p> </div> <div id="main"> <div id="sidebar"> <p>サイドバー</p> </div> <div id="content"> <p>コンテンツ</p> </div> </div> <div id="footer"> <p>フッター</p> </div> </div> </body> </html> ＜test.cssコード＞ body { background-image:url(../img/example.gif); background-repeat:repeat; margin:0px; padding:0px; } #base { border:2px solid #000000; width:740px; margin:0px auto; text-align:left; background-color:#00FF00; } #header { background-color:#FFFF00; width:740px; height:130px; } #sidebar { width:150px; float:left; min-height:100%; background-color:#FF0000; } #content { width:550px; float:right; padding-left:20px; padding-right:20px; background-color:#FFFFFF; } #footer { clear:both; background-color:#FF00FF; height:130px; } 参考サイト等ありましたら、URL教えて下さい。 よろしくお願いします。
- tableタグで作るような表をCSSで作る方法
一つのページに表（横：600px、縦：155px）を20～30個くらい表示させたいのですが、tableタグを多用するとページが重くなると聞きました。 そこで、CSSを使って表を作ろうと思うのですが、どのように作れば良いのか分かりません。 ご存知でしたら教えてください。 私が作りたい表は下記になります。 XHTML 1.0 Transitional 横幅：600px 縦幅：155px 4行3列で、一番左の列の4行を繋げて(tableタグでの記述は<td rowspan="4">）一つの空間になっているのもの。 セルとセルの間隔は5pxのもの。 HTMLとCSSの記述を教えていただけると幸いです。 よろしくお願いします。
- ベストアンサー
- zxcpoikjha
- HTML
- 回答数3
- 右寄せ時の背景画像
cssでテキストを右寄せするだけなら問題ないのですが背景画像をつける場合下記の他にどのような方法がありますか？ <p class="hoge">ここに右寄せのテキストが入ります。</p> .hoge { margin-top: 5px; font-size: 80%; color: #888; text-align: right; background: url(../img/common/hoge.png) no-repeat 420px 1px; } 420pxを0とすると当然ながら左端を基準に画像が表示されテキストは右を基準に表示されてしまいます。 ここで妥当なpxを指定する事によりうまく調整は可能なのですがサイト内でフォントサイズを変更 できるようにしておりフォントサイズMAXの幅に合わせてcssを定義するとMINの際に大きく幅が空いてしまい 不格好になってしまいます。 解決方法としてどのような方法がありますでしょうか？
- どのように書くでしょうか
日本語を勉強中の中国人です。下記の（ ）に１、２、３、４、５の意味を含む文を入れたいのですが、どのように書くでしょうか。私は「上述証憑の内容は完全明晰で正確真実でなければならない」と書きましたが、自然な日本語に添削していただけないでしょうか。 上述証憑の内容は（ ）。 １．はっきりしている。明晰である。 ２．すべて揃っている。全部整っている。 ２．正確である。 ４．真実である。本当である。 ５．でなければならない。 また、質問文に不自然な表現がありましたら、それも教えていただければ幸いです。よろしくお願いいたします。
- ベストアンサー
- 1mizuumi
- 日本語・現代文・国語
- 回答数2
- 真中にならない
HTML <div align="center"> <ul class="u"> <li><a href="index.html"><img onmouseover="this.src='images/home2.jpg'" onmouseout="this.src='images/home.jpg'" src="images/home.jpg" alt="" border="0" /></a></li> <li>・・・・・ </li> </ul> </div> CSS ul.u { list-style:none; margin: 0px; padding: 0px; } ul.u li{ float: left; list-style:none; display:inline; margin: 0; } これで中央に来ないのですがどうしてでしょうか？ ulではなくtableですと真中にちゃんときます。
- ベストアンサー
- kurobon619
- HTML
- 回答数1