- 締切済み
CSSの応用がわかりません。
使用目的に合うCSSスタイルをダウンロードしてきました。 これはdivの高さを揃えられるcssです。 しかし、内容を理解していないので自分のホームページに適用できていません。 やりたいことは、col1が155px,col2が14px,col3が382px,col4が14px,col5が190pxにして使用したのですがこのcssを変更して使いたいのですがどのように変更すればよいでしょうか? /* Start of Column CSS */ #container5 { clear:left; float:left; width:100%; overflow:hidden; background:#eee; /* column 5 background colour */ } #container4 { clear:left; float:left; width:100%; position:relative; right:20%; background:#b2f0f9; /* column 4 background colour */ } #container3 { clear:left; float:left; width:100%; position:relative; right:20%; background:#89ffa2; /* column 3 background colour */ } #container2 { clear:left; float:left; width:100%; position:relative; right:20%; background:#ffa7a7; /* column 2 background colour */ } #container1 { float:left; width:100%; position:relative; right:20%; background:#fff689; /* column 1 background colour */ } #col1 { float:left; width:16%; position:relative; left:82%; overflow:hidden; } #col2 { float:left; width:16%; position:relative; left:84%; overflow:hidden; } #col3 { float:left; width:16%; position:relative; left:90%; overflow:hidden; } #col4 { float:left; width:16%; position:relative; left:94%; overflow:hidden; } #col5 { float:left; width:16%; position:relative; left:98%; overflow:hidden; } 以上がCSSです <body> <div id="container5"> <div id="container4"> <div id="container3"> <div id="container2"> <div id="container1"> <div id="col1"> <!-- col1 start --> <p>Each column is 20% percent wide with 2 percent padding on each side.</p> <!-- col1 end --> </div> <div id="col2"> <!-- col2 start --> <h2>No Images</h2> <!-- col2 end --> </div> <div id="col3"> <!-- col3 start --> <p>The HTML in this layout validates as XHTML 1.0 strict.</p> <!-- col3 end --> </div> <div id="col4"> <!-- col4 start --> <h2>This layout is FREE for anyone to use</h2> <!-- col4 end --> </div> <div id="col5"> <!-- col5 start --> <li>Opera 8 & 9</li> <!-- col5 end --> </div> </div> </div> </div> </div> </div> </body>
- y_japan
- お礼率60% (84/138)
- HTML
- 回答数1
- ありがとう数3
- みんなの回答 （1）
- 専門家の回答
みんなの回答
- ORUKA1951
- ベストアンサー率45% (5062/11036)
簡単に変更できるHTML、CSSじゃないですね。本当に酷いものです。 DIVを多用して文書構造を無視してHTMLが作成してある。 CSSのためだけにIDを指定して、カスケーディング機能(CSSの最も重要な仕組み)が無視されている。 それは無視して、最初から作り直しましょう。そもそもHTMLは『文書をそれを構成する要素に分解してその要素をマークアップするHyper Text Markup Languageです。』 したがってDIVについても 【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。 ￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［The global structure of an HTML document (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )］より と書かれています。ここでいう構造はデザインではなく、それが、その文書を構成するどんな要素であるかをidやclass名でつけるのですから、<div class="header"><div class="section">とかのはずですね。<div class="col1">なんて書かれていたら検索エンジンは無論、あなただって半年後には、そこに何が書かれているかの構造を理解できなくなる。そのようなHTMLはtableでデザインするのと変わりません。 「col1が155px,col2が14px,col3が382px,col4が14px,col5が190px」・・随分と細かい数字ですが、トップのバナー部分か何かですか？だとしたらHTMLは <div class="header"> <h1><span>見出し</span></h1> <div class="nav"> <p><img src="./imges/LOGO/top.gif" class="topLogo" alt="トップへ"></p> <p>なんたらかんたら</p> </div> だけで済むはずです。・・これなら、あなたは無論、検索エンジンもこの部分がヘッダー部分で、簡単なナビゲーションを含むことが理解できる。数年後にソースを見直してもね。それがDIVにidやclass名をつけて構造を示すの意味です。 当然CSSもずっと簡単になって、しかもHTMLを開かなくても何をしているかわかる。変更も自由自在・・。 div.header{ /* headerのデザイン[詳細度0,0,1,1] */ min-height:160px;/* ロゴの画像サイズ(高さ) */ width:100%; position:relative; background-color:#eeeeee; } div.h1{ text-align:center; background:url([バナーの画像URL]) 50% 50% #FAA; margin-left:155px; padding:0 14px; } div.p{/* header内のpのデザイン[詳細度0,0,1,1] */ position:absolute; margin-left:565px; width:190px; background-color:aqua; } div.header div.nav img.topLogo{ /* header内のnavのimgデザイン 詳細度[0,0,3,3] */ /* header(relative)を基準に絶対配置 */ top:0;left:0; } 位で済むはず。 そのようにデザインしたくなるということは、それぞれのブロックに何らかの文書構成上の意味があるはずです。それにしたがってHTMLを書くこと--デザインのためにHTMLを書かない。デザインは無視する。 その上でスタイルシートを書けば、後であなたがどのように変更したいと思っても自由になるはずです。縦に並べようが、ロゴを逆に配置しようが・・
関連するQ&A
- Firefoxでheight:100%がきかない？
ソースは以下のとおりです。 IEでは#container内のDIV要素は全てheight:100%で表示されるのですが、Firefoxでは、高さ：100％がききません。 Firefoxでもページの下まで表示されるようにしたいと思います。 よろしくお願いいたします。 <!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" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-type" content="text/html; charset=UTF-8" /> <title>サンプル</title> <style type="text/css"> <!-- /*全体の設定*/ * { margin: 0px; padding: 0px; font-size: 12px; font-family:"ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3"; font-weight: normal; line-height: 150%; color: #000; } /*ページ全体の設定*/ html,body { height:100%; } body { background-color: #FFF; } /*カラムの設定・IE6のハック*/ #wrapper { width: 1000px; float:left; height: 100%; min-height:100%; margin: 0px 0px 0px 0px; overflow:hidden; _overflow: show; background-color:#FF0000; } body > #wrapper { height:auto; } /*ヘッダの設定*/ #header { width: 1000px; height: 123px; clear: both; } /*メインコンテンツの設定*/ #container { width: 1000px; clear: both; height: 100%; min-height:100%; margin: 0px 0px 0px 0px; overflow:hidden; _overflow: show; background-color:#00FF00; } /*左カラム外側（2カラム内包）*/ #container_left01 { width: 732px; float:left; height: 100%; min-height:100%; margin: 0px 0px 0px 0px; overflow:hidden; _overflow: show; } /*左カラム（左側）*/ #container_left02 { width: 268px; float:left; height: 100%; min-height:100%; margin: 0px 0px 0px 0px; overflow:hidden; _overflow: show; } /*左カラム（右側）*/ #container_left03 { width: 463px; float: right; border-left-width: 1px; border-left-style: solid; border-left-color: #000000; height: 100%; min-height: 100%; margin: 0px 0px 0px 0px; overflow:hidden; _overflow: show; background-color:#FFFF00; } /*右カラム*/ #container_right01 { width: 267px; float:left; border-left-width: 1px; border-left-style: solid; border-left-color: #000000; height: 100%; min-height:100%; margin: 0px 0px 0px 0px; overflow:hidden; _overflow: show; } --> </style> </head> <body> <div id="wrapper"> <div id="header"> <h1>あああ</h1> </div> <div id="container"> <div id="container_left01"> <div id="container_left02">あああ</div> <div id="container_left03">あああ</div> </div> <div id="container_right01">あああ</div> </div> </div> </body> </html>
- 締切済み
- HTML
- CSSでの背景色の出し方でつまりました。
独学で学んでいる初心者です。 HTML <link rel="stylesheet" href="hp.css" type="text/css"> <div id="container"> <div id="header">ヘッダー</div> <div id="main">メイン</div> <div id="sidebar">サイドバー</div> <div id="footer">フッター</div> </div> CSS #container{ width:940px; overflow:hidden; } #main{ width:620px; float:left; color:black; } #sidebar{ width:320px; float:right; background:green; } #footer{ clear:both color:red; } 簡単なものにしてみても出なかったので、 なぜ出ないのか教えていただければと思います。 ブラウザはオペラです。 サイドバーのグリーンしかつきません。 過去の似たような質問をいくつかみて overflow:hidden; や .clearfix:after { content: ""; display: block; clear: both; } を入れてみてもダメでした。 お願い致します。
- ベストアンサー
- CSS
- 3カラムのカラム落ちについて質問です。
3カラムのカラム落ちについて質問です。 IE6だけ3カラムのうち右カラムだけカラム落ちしてなおりません。 ネットで検索して色々試した結果「clear: right;」を追加したら右に戻ったのですが、今度は隙間ができました。 <div id="wrap"> <div id="left">左カラム</div> <div id="left">メインカラム</div> <div id="left">右カラム</div> </div> という形です。 --CSS-- #wrap{ width: 970px; margin: 0 auto; background-color: #FFFFFF; height: 100%; min-height: 100%; position:relative; overflow: hidden; } #left{ width: 175px; margin: 15px 15px 0 15px; padding: 0; float: left; display: inline; } #contents{ width: 560px; float: right; margin-top: 15px; display: inline; clear: right; } #right{ width: 175px; margin: 15px; float: right; display: inline; clear: right; } です。 それぞれの中にはmargin やpaddingを使っています。 2日間それで悩まされていますができずに困っています。 IE6以外はすべて大丈夫なので、分かるかた教えてください。
- ベストアンサー
- ホームページ作成ソフト
- divタグ+CSSでのレイアウトで、Firefox, Operaで不必要な余白ができてしまいます。
divタグ+CSSでレイアウトしようとしています。 横関係では全体がセンタリングされていて、縦関係においては、各ブロック要素間の余白がなくぴったりくっついている状態にしたいのですが、Firefox 1.0やOpera 8などを使ってレイアウトを確認すると、上下や要素間に余白が出来てしまい、なかなかうまくいきません。 以下、HTMLとCSSのソースを、レイアウトに関する部分だけ載せます。 [--HTML--] <body> <div id="all"> <div id="header"> <p>header</p> </div> <div id="body"> <p>body</p> </div> <div id="sidebar"> <p>sidebar</p> </div> <div id="footer"> <p>footer</p> </div> </div> </body> [--CSS--] @charset "shift_jis" body { margin: 0 auto; padding: 0; text-align: center; } div#all { width: 760px; background-color: blue; margin: 0 auto; padding: 0 0 20px; text-align: left; overflow: hidden; } div#header { position: relative; left: 17px; width: 717px; height: 50px; background-color: yellow; margin: 0; padding: 0; text-align: left; } div#body { position: relative; left: 17px; width: 522px; height: 200px; background-color: lime; margin: 0 0 2em; padding: 0; text-align: left; float: left; } div#sidebar { position: relative; left:32px; width: 180px; height: 200px; background-color: red; margin: 0 0 3em; padding: 0; float: left; } div#footer { position: relative; left: 17px; width: 717px; height: 100px; background-color: fuchsia; margin: 0; padding: 0; clear: both; } ---------- marginやpaddingを"0"にしているにもかかわらず、余白が生まれてしまうのはなぜなのでしょう・・？
- ベストアンサー
- CSS
- 3カラムのサイトでfloatができない
３カラムのホームページを作っているのですが、 中央と右のカラムがどうしてもfloatできません。。 左カラムをfloat:leftにして、中央と右のカラムを#contentsBoxで囲ってfloat:rightさせています 【ＨＴＭＬ】 <div id="wrapper_2"><!--div id wrapper_2 START--> <div id="contentsBox"><!--div id contentsBox START--> <div id="560"><!--div id 560 START--> 中央カラム </div><!--div id 560 END--> <div id="175"><!--div id 175 START--> 右カラム </div><!--div id 175 END--> </div><!--div id contentsBox END--> <div id="205"><!--div id 205 START--> 左カラム </div><!--div id 205 END--> </div><!--div id Wrapper_2 END--> 【ＣＳＳ】 /*+++wrapper_2++++++++++++++++++++++++++*/ #wrapper_2 { width: 984px; background-color:#fff; padding: 8px; margin: 10px auto 10px auto; overflow: hidden; } /*+++contentsBox++++++++++++++++++++++++++*/ #contentsBox { width: 757px; float: right; } #contentsBox:after { height: 0; visibility: hidden; content: "."; display: block; clear: both; } /*+++左カラム+++++++++++++++++++++++++++++*/ #205{ width: 205px; margin: 0 22px 0 0; float: left; } /*+++中カラム+++++++++++++++++++++++++++++*/ #560{ width: 560px; float: left; } /*+++右カラム+++++++++++++++++++++++++++++*/ #175{ width: 175px; float: right; margin-left: 22px; } まだ勉強中なので、初歩的なミスなのかもしれませんが、 どうしても中央カラムの下に右カラムがきてしまいます。 （ドリームウィーバーで見たら、望み通りの配置になっているのですが、ブラウザでチェックすると、中央カラムの下に右カラムがきてしまいます） アドバイスいただければ嬉しいです。 よろしくお願い致します。
- ベストアンサー
- CSS
- カラム高さ揃え+固定フッター
いつもお世話になります。 ●確認ブラウザIE6、IE7、FF、 Mac Safari FF 左側幅可変のリキッドレイアウトの中で、 div#wrapの中にある「#boxB、#boxC」のカラム高さが揃った上で #footerはページ下部に固定されている、添付図の状態にしたい。 ●できてること： IE7、FFにおけるカラム高さの統一、固定フッタ ●ここができない： 1.IE6にてboxBとCの高さが揃わない（Cが足らない） 2.#wrapと#footerにすきまが空く（boxBとCの背景色がfooterの上まで来てほしいのです）（全部のブラウザにて） ★CSS /*リキッドレイアウト部分*/ * { margin:0; padding:0; } body { text-align:center; } #container { width:96%; margin-left:auto; margin-right:auto; text-align:left; } #boxA { background:#ffc; } #boxB { background:#fcc; width:100%; float:left; margin-right:-200px; } #boxB p { margin-right:200px; } #boxC { background:#ccf; width:200px; float:left; } #boxD { background:#cfc; width:100%; float:left; } /*100%固定フッタのためのCSS*/ *{ margin:0; padding:0; } html,body{ height:100%; background-color: #000000; color: #000000; } html{ overflow-y:scroll; } #container { width: 100%; position: relative; height: auto !important; height: 100%; min-height: 100%; } div#footer{ position:fixed; bottom:0; left:0; text-align:center; width:100%; } /* * * IE6 * * * */ * html, * html body{ overflow-y:hidden; } * html div#maincontents{ height:100%; overflow-y:scroll; } * html div#footer{ position:absolute; } /* カラム高さが違うものを揃える */ #wrap { overflow:hidden; } #boxB,#boxC { padding-bottom: 32768px; margin-bottom: -32768px; }
- ベストアンサー
- HTML
- ブログを３カラム右右から左右両サイドにしたい。
現在CSSは下記のようになっています。 どこをいじれば右右から左右両サイドにできるのか教えていただけたら嬉しいです。 宜しくお願い致します。 /** 03. Layout - レイアウトの設定 */ /* ----------------------------------------------- */ body { margin: 0; padding: 0; min-width: 960px; text-align: center; background-image: none; background-repeat: repeat; background-position: 50% top; } div#containerWrap { width: 960px; margin: 0 auto 5px; } div#container {} div#content { padding: 10px 0; border-width: 1px; border-style: solid; } div#main , div#sub , div#extra { overflow: hidden; } div#main { float: left; display: inline; width: 538px; } div#main div.column-inner { padding: 0 10px 10px; } div#sub { float: left; display: inline; width: 210px; } div#sub div.column-inner { padding: 5px 10px 0; overflow: hidden; border-width: 1px; border-style: none none none solid; } div#extra { float: left; display: inline; width: 210px; } div#extra div.column-inner { padding: 5px 10px 20px; overflow: hidden; border-width: 1px; border-style: none none none solid; }
- ベストアンサー
- HTML
- HTMLのCSS(float)の設定がよくわかりません
HTMLのCSS(float)の設定がよくわかりません 画像のように各配置はうまく表示されているのですが footerのCSSを #footer { width: 100%; float: left; clear: both; } と表記するとwrapperのCSSで表記した外枠のボーダーが footerの前で切、footerの左横に1px～2pxの隙間が できてしまうのですが、その理由をわかる方いらっしゃいますか。 宜しくお願い致します。 footerの表記を #footer { width: 100%; clear: both; } とすると、ボーダーも1pxの隙間もなく正常に表示されます。 宜しくお願い致します。 ■HTML <html> <body> <div id="wrapper"> <div id="header"></div> <div id="container"> <div id="left"></div> <div id="right"></div> </div> <div id="footer"></div> </div> </body> </html> ■CSS #wrapper { width: 700px; border-right-width: 1px; border-left-width: 1px; border-right-style: solid; border-left-style: solid; border-right-color: #000; border-left-color: #000; } #container { overflow: hidden; } #left { float: left; } #right { float: left; } #footer { width: 100%; float: left; clear: both; } わかる方いらっしゃいましたら 宜しくお願い致します。
- ベストアンサー
- HTML
- CSSでのレイアウトが崩れてしまうんです。
お世話になります。ＣＳＳビギナーなのですが、どうかご教授ください。800pxの画面のセンター表示のサイトを作りたいのですが、divでheader800px/container800px/contents600px（contensの中にleftmenu150px/centermenu450px/footer600pxとさらにdiv分けしてあります。）/leftmenu200pxという具合にレイアウトしたいのですが、leftmenuがcontensの右横にきてくれません。footerの下に表示されます。さらに言うとcontens自体が真ん中に表示されてしまいます。float:leftを指定するとブラウザ画面の左側にいってしまいますし...。これはどうしてでしょう？素人ゆえ基本的なことを見落としているかもしれませんがどなたか教えていただけないでしょうか？ ■HTML </head> <body> <div id="header">省略</div> <div id="container">省略</div> <div id="contens"> <div id="leftmenu">省略</div> <div id="centermenu">省略</div> <div id="footer">省略</div> </div> <div id="rightmenu">省略</div> </body> </html> ■CSS div#header { padding-top:0px; width:800px; margin-left:auto; margin-right:auto; background-color:#00CC00; } div#container { width:800px; margin-left:auto; margin-right:auto; } div#contens { width:600px; margin-left:auto; margin-right:auto; } div#leftmenu { width:150px; float:left; } div#centermenu { width:450px; float:left; margin-left:auto; margin-right:auto; background-color:#FFFFFF; } div#footer { float:left; width:600px; padding-top:50px; } div#rightmenu { width:200px; float:right; background-color:rgb(147,182,110); padding-bottom:5px; } body { background-attachment:scroll; background-color:#FFFFFF; background-image:url(../image/bg.jpg); background-repeat:no-repeat; background-position:center top; }
- ベストアンサー
- ブログ
- フルCSSでFirefoxでデザインが崩れてしまいます。
フルcssHPに挑戦しようと思っています。 cssでIEでは思ったような表示が可能ですが Firefox、Operaでは「contents」内のコンテンツが 「container」>を突き抜けて表示されてしまいます。 下記がhtml、cssソースになります。 【HTML】 <body> <div id="container"> <!--メインナビ--> <div id="contents"> <div id="subnavi"> <ul> <li>サブナビ1</li> <li>サブナビ2</li> <li>サブナビ3</li> <li>サブナビ4</li> </ul> </div> <div id="main"> メインコンテンツが入ります </div> </div> <!--フッター--> </div> </body> メインナビ、フッターアンカーリンクは文字数制限上削除しています。 【CSS】 body{ text-align:center; background-color:#ffffff; font-size:10px; color:#333333; } body div { text-align:left; margin: 0 auto; } #container{ text-align:left; width:724px; background-color:#ffffff; padding:15px 18px; position: relative; border:1px solid #666; } #contents{ width:724px; background-color:#ffffff; text-align:left; border-bottom:8px solid #666666; margin-bottom:10px; position: relative; clear:both; } #subnavi{ float:left; width:200px; } #main{ float:left; width:495px; padding-left:29px; } この突き抜けを防止するにはどうしたらよろしいのでしょうか。 「contents」 を削除して表示するとどのブラウザでも表示が可能ですので <div id="contents">の記述が何かおかしいのでしょうか。 それとも根本的にブラウザの問題なのでしょうか？ (ブラウザは最新版を使っています) 皆様、よろしくご回答お願いいたします。
- ベストアンサー
- CSS
