- 締切済み
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>
- みんなの回答 （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を書かない。デザインは無視する。 その上でスタイルシートを書けば、後であなたがどのように変更したいと思っても自由になるはずです。縦に並べようが、ロゴを逆に配置しようが・・
