- 締切済み
HTML、CSSのチェックをお願いします。
ORUKA1951の回答
- ORUKA1951
- ベストアンサー率45% (5062/11036)
まず、HTMLのほうから HTML4.01では、「構造とプレゼンテーションの分離( http://www.asahi-net.or.jp/~sd5a-ucd/rec-html401j/intro/intro.html#h-2.4.1 )」と言われながら、(文書)構造を示す要素は無くて、「DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。( http://www.asahi-net.or.jp/~sd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )」としか書かれていませんでした。そのため、wraperやcontnt,mail,leftなど、文書構造を付加するとは言い難い==プレゼンテーションの構造を付加するようなclass名が使われていました。その反省からHTML5では、意味的な(セマンティック)な要素が追加されます。その要素名こそ、HTML4.01で想定していた「文書に構造を付加するための」id、classの値です。 すなわち、文書には必ずheaderに当たる部分、section(本文)にあたる部分、footerに当たる部分かあると想定される。 HTML4で、期待されていたclass名が新たな要素として誕生した。 <div class="footer">→<header> <div class="section">→<section> <div class="footer">→<footer> それぞれがどのような意味合いであるかは ★HTML5 における HTML4 からの変更点の新しい要素 ( http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff/#new-elements ) を参照してください。 <div class="header></div> <div class="section"></div> <div class="footer"></div> が基本的な構造になるはずです。ここで、headerやsection,footerは文書内に何度も登場する可能性があるのでclass名のほうが良いでしょう。idを振るのはリンクターゲットやjavascriptのターゲットとするときに限定したほうが、スタイルシートを記述するとき便利です。(詳細度がc=1・・idだとb=1になってしまう) DOCTYPEが<!DOCTYPE html>となっていますが、これはHTML5であるのでしたら、stypeにtypeの指定は不要です。 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <style type="text/css"> でなくて、 <!doctype html> <html> <head> <meta charset="UTF-8"> <title>Example document</title> <style type="text/css"> <!-- body{ で良いです。 スタイルシート CSS2.1がウェブ標準とみなされていますが、CSS2.1では詳細度0の*(全称セレクタ)が導入され、出発点となるセレクタが書かれていない場合は、*があるとみなします。したがって、基点となるセレクタを書く癖をつけておいたほうが良いです。 一意セレクタ(id)を使う場合は、詳細度が高いうえに一意なので#だけでよいです。 続きは後ほど
関連するQ&A
- HTML・CSSタグの書き方教えてください！
画像では見づらいのですが、HOMEの左側にボーダーがピンク色で表示されています。 このHOMEの左側のボーダーを消したい（又は見えなくする）タグを教えてください。 最初のリンクのところだけグループ化して, CSSに{border-left-style: none;}と加えてみたり、 .menu ul li a .first {border-left: none;}等してみたのですが、 変わらず…。 どういうタグを加えれば、左側のボーダーが見えなくなりますでしょうか？ よろしくお願いいたします。 ＜HTML＞ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv= "content-style-type" content= "text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <link href="css/style.css"rel="stylesheet" type="text/css" /> </head> <body> <div id="wrapper"> <div id="header"> <h1> 作りかけページ </h1> <p>テストページ</p> </div><!-- header終わり --> <div class="menu"> <ul> <li><a href="#">HOME</a></li> <li><a href="#">サービス概要</a></li> <li><a href="#">会社概要</a></li> <li><a href="#">お問い合わせ</a></li> <li><a href="#">サイトマップ</a></li> </ul> </div><!-- menu終わり --> <div id="main"> <div id="contents"> ***コンテンツ*** </div><!-- contents終わり --> <div id="leftsidebar"> ***左サイドバー*** </div><!-- sidebar終わり --> </div><!-- main終わり --> <div id="rightsidebar"> ***右サイドバー*** </div><!-- sidebar終わり --> <div id="footer"> ***フッター*** </div><!-- footer終わり --> </div><!-- wrapper終わり --> </body> </html> ＜CSS＞ <style type="text/css"> * { margin: 0; padding: 0; } #wrapper{ width: 760px; /*全体の幅（#wrapper）を760pxの固定幅とする。 */ position: absolute;/*絶対位置*/ left: 50%;/*左端から右方向の位置を指定する */ margin-left: -380px;/*はみ出た半分を戻す */ } /*ヘッダー*/ #header{ width: 758px;/*ヘッダー部分の幅（#content）を758pxとする。*/ height: 200px; background-color:#ffd700; background-repeat: no-repeat; background-position: -50px -70px; text-align: right; border: solid 1px gray; } #header h1{ margin: 0; font-size: 30px; padding: 20px 10px 0px 0px; font-family:arial unicode ms; } #header p{ margin: 0; font-size: 1em; padding-right: 10px; margin-top: 8px; } /*ヘッダー終わり*/ /*body*/ /*menu部分*/ .menu {font-size:20px; height:30px; background-color:#0c907c; text-align:center; } .menu ul{ margin: 0; padding: 0; 760px; } .menu ul li{ float: left; list-style: none; margin: 0; padding: 0; } .menu ul li a{ display:block; width: 151.2px; line-height: 30px; border-left: solid 1px #FF3366; color:#ffffff; text-align: center; text-decoration: none; } .menu ul li a:hover{background-color: #99cc00} /*menu部分終わり*/ #contents{ width: 388px;/*コンテンツ部分の幅（#content）を388pxとする。*/ background-color:#0000FF; float: right;/* 右に配置 */ } #leftsidebar{ width: 166px; /*左サイドバー部分の幅を166pxとする。*/ background-color:#0000FF; float: left;/* 左に配置 */ } #main{ width: 574px; float: left;/* 左に配置 */ } #rightsidebar{ width: 166px;/*右サイドバー部分の幅を166pxとする。*/ background-color:#0000FF; float: right;/* 右に配置 */ } #footer{ width:760px; background-color:#FF3366; clear: both;/* float解除 */ height: 50px; }
- ベストアンサー
- HTML
- CSSが悪いんでしょうか？
下記ソースをIE6で見ていただくとわかりますが、ナビ部分にカーソルをもっていくと、footerの背景が伸びたり縮んだりします。 IE6だけでこのような現象が出ています。 ※手元のデータは外部リンクです。 -----ソース----- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <style type="text/css"> body {background: #EFEFEF;} #wrapper{background: #fff; padding: 0; width: 700px; line-height: 1.4em;} #header{border: 3px solid #333;} #nav{float: left; width: 150px;} #nav ul{margin:0; padding:0; list-style-type:none;} #nav li a{display:block; width:150px; margin:0 0 1px 0; background-color:#CCC;} #nav li a:hover{background-color:#FF9900; color:#000000;} #rightbox{padding:0 5px; width: 140px;} #main{border:4px solid #FF0000; float: right; width: 542px;} #footer{background-color:#CCC; clear: both;} </style> <title>test</title> </head> <body> <div id="wrapper"> <div id="header"> <h1>header</h1> </div> <div id="nav"> <ul> <li><a href="#">nav1</a></li> <li><a href="#">nav2</a></li> <li><a href="#">nav3</a></li> </ul> </div><!-- end nav --> <div id="main"> <h2>main</h2> <p>本文</p> <p>本文</p> <p>本文</p> <p>本文</p> <p>本文</p> <p>本文</p> <p>本文</p> </div><!-- end main --> <div id="footer"> footer </div><!-- end footer --> </div><!-- end wrapper --> </body> </html>
- ベストアンサー
- HTML
- 外部CSSがIEで無反映
Web制作初心者です。 ポートフォリオとしてサイトを2つくらい作ったのですが、2つとも Google Chromeで表示確認をしていて、出来上がってから Internet Explorerでも表示確認をしてみたら、IEでは 外部CSSが全く反映されていない状態でした。 何がダメなのか全くわかりません。 お手数ですがご助言お願い致します。 ------------HTML----------------- <!doctype html> <html> <head> <meta charset="text/html; charset=utf-8"> <meta name="descrption" content=""> <meta name="keywords" content=""> <link rel="stylesheet" type="text/style" href="common.css"> <link rel="stylesheet" type="text/style" href="index.css"> <title> Profile-TOP- </title> </head> <body> <div id="wrapper"> <!--*************ヘッダー部分*************--> <div id="header"> <h1>My Profile Site</h1> <!--ナビゲーション部分--> <div class="navi"> <ul> <li class="top">TOP</li> <li><a href="profile.html">Profile</a></li> <li><a href="design.html">Design</a></li> <li><a href="contact.html">Contact</a></li> </ul> </div><!--/navi--> </div><!--/header--> <!--************コンテンツ部分************--> <div id="content"> <a href="profile.html"><img src="images/NY.png" alt="ny"></a> <p class="please">↑<br>Please click the image!</p> <p class="site">当サイトは私のプロフィールやポートフォリオを掲載しています。</p> </div><!--/content--> <!--*************フッター部分*************--> <div id="footer"> <p>Copyright © 2013 nnn All Rights Reserved.</p> </div><!--/fotter--> </div><!--/wrapper--> </body> </html> --------------CSS----------------- -----common----- /*----------body部分---------*/ * { font-family: serif; } body,html { background: url("images/wood_texture4.jpg") ; color: #ffffcc; margin: 0; padding: 0; line-height: 20px; height: 100%; } img { border: none; } /*--------wrapper--------*/ #wrapper { width: 900px; margin: 0 auto; padding: 0; } /*---------header---------*/ #header { background-color: #000000; margin: 0; height: 120px; padding-top: 1px; } h1 { float: left; font-size: 40pt; padding-top: 10px; padding-left: 30px; padding-right: 60px; width: 440px; margin-top: 0; margin-right: 30px; } .navi ul { margin-top: 0; } .navi ul li { list-style-type: none; float: left; width: 80px; margin-top: 28px; margin-right: 2px; padding: 6px 10px; text-align: center; background-color: #151515; font-weight: bold; } a:link { color: #cccccc; text-decoration: none; } a:visited { color: #cccccc; } a:hover { color: #ff6600; } /*------------content---------------*/ #content { background-color: #6e6e3c; clear: left; color: #000000; margin: 0; height: auto; } /*-------footer-------*/ #footer { background-color: #000000; height: 40px; padding: 10px; clear: both; padding-right: 20px; margin-top: 0; margin-bottom: 0; } #footer p { text-align: right; vertical-align: middle; } --------index.css--------- /*content*/ #content img { position: relative; left: 50px; } p { text-align: center; margin-bottom: 0; } .please { color: #ffffff; font-weight: bold; font-size: 15pt; } .site { padding-bottom: 20px; } /*現在のページナビ*/ .top { color: #990000; }
- ベストアンサー
- CSS
- html、CSS共に初心者です。３段目の２列目の右に、４段目の右の内容
html、CSS共に初心者です。３段目の２列目の右に、４段目の右の内容を持っていきたいのですが、どうしてもうまくいきません！ 解決できる方がいましたら、どうかご教示願います！ <style type="text/css"> <!-- * { padding : 0 ; margin : 0 ; } #wrapper { width : 700px; margin-left : auto ; margin-right : auto ; background-color : #eeffff ; } #header { width : 700px; height : 150px ; background-color : #335555 ; } #navigation { /* background-color : #cceeee ; */ width : 300px; float : left ; } #navigation h2 { width : 150px; background-color : #99bbbb ; } #navigation ul { width : 150px ; } #navigation li { width : 150px ; height : 30px ; } #navigation a { width : 150px ; height : 30px ; background-color : #bbdddd ; display : block ; } #content { background-color : #eeeeee ; width : 350px; float : right ; } #subcontent { width:200 float : left ; clear :both ; } #subcontent h4 { width : 150px; background-color : #99bbbb ; } #subcontent ul { width : 150px ; } #subcontent li { width : 150px ; height : 30px ; } #subcontent a { width : 150px ; height : 30px ; background-color : #bbdddd ; display : block ; } #thirdcontent { background-color : #eeeeee ; width : 500px; float : right ; } #footer { background-color : #335555 ; width : 700px ; clear : both ; } //--> </style> </head> <body> <div id="wrapper"> <div id="header"> <h1>pppppppppppppppppppppppppppp</h1> </div> <div id="navigation"> <h2>pppppppp</h2> <ul> <li><a href="#">pppppppp</a></li> <li><a href="#">pppppppp</a></li> <li><a href="#">pppppp</a></li> <li><a href="#">pppppppp</a></li> </ul> </div> <div id="content"> <h2>welcome to my hp</h2> <br> <h3>ppppppp</h3> <p>ppppppppppp</p> <h3>pppppppp</h3> <br> <p>pppppppp</p> </div> <div id="subcontent"> <h4>この横にカテゴリーを配置させたいのです</h4> <ul> <li><a href="#">pppppppp</a></li> <li><a href="#">pppppppp</a></li> <li><a href="#">pppppppp</a></li> <li><a href="#">ppppppppp</a></li> </ul> </div> <div id="thirdcontent"> <h4>カテゴリー(これを一段上に)</h4> <br> <h5>pppppppppp</h5> <p>ppppppppp</p> <h5>ppppppp</h5> </div> <div id="footer"> <br> </div> </div> </body> </html>
- ベストアンサー
- HTML
- CSSでの質問です
初めて段組を作ってみたんですが、上の余白を無くするにはどうしたらいいのでしょうか？ ソースは以下のとおりです。 <style type="text/css"> <!-- #wrapper { width: 760px; margin: 0px auto; } #header { background-color: #9933FF; height: 50px; top: 0px; } #primary { background-color: #c7d5ed; float: right; width: 550px; margin-top: 10px; margin-bottom: 10px; } #secondary { background-color: #f9cfba; float: left; width: 200px; margin-top: 10px; margin-bottom: 10px; } #footer { clear: both; background-color: #99FFFF; height: 50px; } --> </style> </head> <body> <div id="wrapper"> <div id="header"></div> <div id="primary"> </div> <div id="secondary"> </div> <div id="footer"></div> </div> </body> </html> センタリングを維持したまま上の余白をクリアしたいのですが、何か解消法はありますか？
- 締切済み
- HTML
- CSSが正確に反映されません。
４つの枠を丸で囲み、かつそれぞれの枠を等間隔で空けたいと思います 丁度以下の2つを表示した場合の、contentsとmainの間の間隔が理想的です。 しかし書いたCSSの設定が正確に反映されません。 headerとfooterもこの大きさで広げたいと思うのですが、広がりません。 また、なぜheaderは丸くならず、footerはサイズからはみ出すのでしょうか。 背景を赤に設定しているのですが、それも反映されません。 なぜこうなるのかどなたかご存知の方、ご指摘いただけると助かります。 どうかよろしくお願いします。 以下、2つのファイルは同じフォルダに保存しました。 dreamweaverのアカデミック版で作り、firefox3.6.13で表示しています。 style.css ---------------------------------------------------------- @charset "utf-8"; /* CSS Document */ <!-- * { margin:0; padding:0; } h1, h2, p { margin: 0 1em; } <!--背景の設定--> body { background-color: red; } <!--コンテンツの幅を指定--> #wrapper, #main, #header, #menu, #footer { width:1120px; } <!--角を丸くする--> #header, #menu, #contents, #footer { background-color: #66FFFF; border:2px solid #999; padding: 8px; margin-bottom:5px; -webkit-border-radius: 5px; /* Safari,Google Chrome用 */ -moz-border-radius: 5px; /* Firefox用 */ } <!----> #wrapper { margin: 0 auto; line-height: 1.5; } #main { } #header { height: 50px; } #menu { width: 160px; float: left; } #menu ul { list-style: none; margin-left: 1em; } #contents { float: right; width: 900px; } #footer { clear: both; height: 50px; text-align: center; } --> ------------------------------------------------------------------------------------ index.html ------------------------------------------------------------------------------------ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="ja"><head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <title>勉強用</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div id="wrapper"> <div id="header"> <h1>Site Title</h1> </div> <div id="main"> <div id="menu"> <p><strong>float:left</strong></p> <ul> <li>Menu</li> <li>Menu</li> </ul> </div> <div id="contents"> <h2>Sub Title</h2> <p><strong>float:left</strong></p> <h2>Sub Title</h2> <p>text</p> </div> </div> <div id="footer"> <p>Footer</p> </div> </div> </body> </html>
- 締切済み
- CSS
- 至急！HTML.CSS分かる方！
なぜか記述していくCSSが反映されません。 コードみて、分かる方いらっしゃったら、なぜか、教えてください。 HTML <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.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" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <title>和小物 きさらぎ</title> </head> <body> <div id="wrapper"> <div id="header"> <p><a href="index.html"><img src="images/header_logo.jpg" width="266" height="154" alt="和小物 きさらぎ"/></a></p> <div id="menu"> <ul> <li id="about"><a href="about.html"><img src="images/btn_about.jpg" width="113" height="54" alt="きさらぎについて "/></a></li> <li id="m_recommend"><a href="recommend.html"><img src="images/btn_recommend.jpg" width="65" height="54" alt="おすすめ"/></a></li> <li id="m_catalogue"><a href="m_catalogue"><img src="images/btn_catalogue.jpg" width="63" height="54" alt="商品一覧"/></a></li> </ul> </div> <div id="main"></div> <div id="sub"> <div id="whatsnew"> <h3>古布携帯ケース大量入荷</h3> <p>人気の古布携帯ケースが大量に入荷しました。<br /> 日本古来の伝統絵柄の着物を再利用した携帯ケースは最新鋭の携帯と驚くほど相性が良いのです。ぜひ、店頭で携帯と合わせてご覧になって、自分だけのお気に入りを選び出してください。</p> <h3>おばあちゃんの布草履</h3> <p>スリッパ代わりに愛用の声が多い「おばあちゃんの布草履」が入荷しました。ひとつひとつおばあちゃんが編み込んでいますので、次回入荷は未定です。</p> </div> <div id="doc_req"> <a href="document.html">資料請求</a> <p>これまでの作品などの資料をお送りします。上の「資料請求」よりお申し込みください。</p> </div> </div> <div id="footer"> <p style="">Copyright 2012 KISARAGI All rights reserved.</p> </div> </div> </div> </body> </html> CSS @charset "utf-8"; /* 基本レイアウト ここから↓ */ * { padding: 0; margin: 0; } body{ font: 87.5%/1.6 Helvetica, "メイリオ", Meirio, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; background-image: url(../images/bg.jpg); background-repeat: repeat; } #wrapper{ width: 840px; margin: 0px auto; background-color: #FFFFFF; } #main{ float:left; width:560px; margin-left:30px; } #sub{ float:right; width:200px; margin-right:30px; } #footer{ clear:both; padding-top:2em; } #footer p{ height:60px; font-size:0.8em; color:#999999; line-height::30px; text-align:center; background-color:#000000; } #header{ padding:20px 0px 20px 0px; text-align:center; } #header p{ height:154px; margin-bottom:7px; } img{ border:none; } #menu{ height:54px; margin:0 30px 0 30px; background-color:#f6f2e6; } #menu ul li{ float:left; margin-left:10px; list-style-type:none; } #menu ul li a{ height:54px; padding-left:49px; display:block; background-image:url(../images/menu_btn_normal.jpg); background-position:left top; } /* 基本レイアウト ここまで↑ */
- ベストアンサー
- その他（インターネット・Webサービス）
- htmlとcssの文章構造、これは正しいですか？
<h1>にテキストを入れることが必須で、 画像の上にマウスをどこに置いてもクリックすれば トップページに行く状態にしたくて下記コードを作りました。 下記コードはサンプルですが、 <!-- 質問の対象はここから --> <!-- ここまで --> の間でhtmlやcssの文書構造にしたがって正しく書かれているか心配です。 <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title></title> <style> #container #header { width: 900px; height: 300px; margin: 0px auto; padding: 0px; top: 0px; left: 0px; float: left; display: block; } #container #header #sample{ height: 170px; position: relative; background-color: #333; /* goo質問用で実際は入れません。画像が表示されないため代わりに。 */ } #container #header #sample h1{ position: absolute; top: 0px; left: 150px; color: #fff; font-size: 11px; font-weight: bold; line-height: 130%; /* h1内の大文字と下の小さい文字との間隔をあけるため */ } #container #header #sample h1 span{ font-size: 22px; line-height: 220%; } #container #header #sample h1 a:link, #container #header #sample h1 a:visited, #container #header #sample h1 a:hover, #container #header #sample h1 a:active{ color: #fff; /* 画像の範囲内は全てリンクさせたいので、マウスにのせたときに色を変える必要はないので変化無し */ text-decoration: none; } #container #header #navigat { width: 900px; height: 40px; float: left; margin: 0px; padding: 0px; list-style-type: none; } #container #header #navigat li { width: 225px; float: left; } </style> </head> <body> <div id="container"> <div id="header"> <!-- 質問の対象はここから --> <div id="sample"> <h1><a href=""><span>サンプル</span><br /><span>サンプルサンプル</span><br />サンプルサンプルサンプルサンプルサンプルサンプル<br />サンプルサンプルサンプルサンプルサンプルサンプル</a></h1> <a href=""><img src="" alt="" /></a> </div> <!-- ここまで --> <ul id="navigat"> <li id=""><a href="">メニュー１</a></li> <li id=""><a href="">メニュー２</a></li> <li id=""><a href="">メニュー３</a></li> <li id=""><a href="">メニュー４</a></li> </ul> </div> </div> </body> </html>
- ベストアンサー
- HTML
- Dreamweaver CSS
Dreamweaver 8をMac OS10.5で使用しているものです。 Dreamweaverで、htmlファイルを作成し、CSSを添付しています。 Dreamweaver上では、問題なくCSSが反映されていますが、SafariやFireFoxなどのブラウザでプレビューで見ると、一部しかCSSが反映されていません。 WEBで検索して、文字コードなどを変更してみたのですが、改善されません。 簡単なミスかも知れませんが、コードを記述しておくので、ご指摘いただけると幸いです。 ちなみに、症状としては、CSSで設定したheaderの背景色は、htmlでは反映されているのですが、h1の文字色の変更などは、htmlでは反映されていません。 ━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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>無題ドキュメント</title> <style type="text/css" media="all"> <!-- @import url("price.css"); --> </style> </head> <body> <div id=wrapper> <div id=header> <h1>ヘッダー</h1> </div> <div id=content>本文</div> </div> </body> </html> ━━htmlここまで━━━━━━━━━━━━━━━━━━━━━━ ━━CSSここから━━━━━━━━━━━━━━━━━━━━━━ @charset "UTF-8"; /* CSS Document */ #wrapper { width: 800px; margin-right: auto; margin-left: auto; } #header { background-color: #00FFCC; height: auto; width: auto; padding-top: 5px; padding-bottom: 5px; } h1 { font-size: 2em; color: #FFFFFF; } ━CSSここまで━━━━━━━━━━━━━━━━━━━━━━━
- 締切済み
- CSS
- CSSがうまくレイアウトできない。。
こんにちは。 この度、ホームページを一新しようとCSSに挑戦中です。 いろいろな書籍等を参考にしながら、やってみているのですが、 出だしでつまずいています。 現在、下記のCSSにて http://www.masudaclub.com/newsite/ でテスト運用中なのですが、ヘッダー部分のロゴと、 その下のメニューがどうしてもずれます。 CSSは書籍のものをベースに改変していったのですが、 部分部分を編集してもいっこうに揃ってくれません。 ご教示願えましたら幸いです。 ※CSSを関連部分を載せました。(全文は文字制限で無理でした) @charset "utf-8"; /* All Layout -------------------------------------------------*/ body,div,ul,li,h1,h2,p { margin: 0; padding: 0; } h1,h2,h3,h4,ul,li,p,address { font-style: normal; font-weight: normal; font-size: 100%; } img { border: 0; vertical-align: bottom; } a { text-decoration: none; } a:link { color: #000000; } a:visited { color: #000000; } a:hover { color: #b6b5b5; } a:active { color: #000000; } body { font: 62.5% Verdana ,sans-serif; letter-spacing: 0.2em; color: #464646; } .clear:after { content: "."; display: block; height: 0; clear :both; visibility: hidden; } .clear { display: inline-table; } /* MacIE begin \*/ * html .clear { height: 1%; } .clear { display: block; } /* MacIE end */ #header, #contents, #gnavi ul { margin: 0 auto; width: 80em; max-width: 100%; min-width: 730px; text-align: left; } /* Wrapper -------------------------------------------------*/ #wrapper { text-align: center; } /* Header -------------------------------------------------*/ #header { padding: 0 0 0 0; text-align: center; } /* Gnavi -------------------------------------------------*/ #gnavi { clear: both; margin: 0 0 0 0; } #gnavi ul li { float: left; list-style-type: none; font-size: 1.2em; } #gnavi ul li a { /* float: left;*/ /* display: block;*/ } #gnavi ul li a:hover { color: #b0b0b0; }
- ベストアンサー
- HTML
お礼
詳説ありがとうございます。 <!DOCTYPE html>に関してはHTML4.01での記述をするつもりでしたが、自身のテスト用という事で簡略化してしまったものです。申し訳ありません。 また、HTML5では<meta http-equiv...が必要ないとは知りませんでした。
補足
HTML4.01からHTML5への移り変わりについてのご説明有難うございます。 hrdear,section,footerの意味合いも勉強します。 >idを振るのはリンクターゲットやjavascriptのターゲットとするときに限定したほうが... 確かにその方がいいように感じます。という事は、基本的にはclass名を設定すべきと思っていいのでしょうか？ 詳細度について勉強してみました。 http://www6.plala.or.jp/go_west/nextcss/ref/basic/cascade.htm#specificity ここを参照してみましたが、お恥ずかしい限りですが、知りませんでした。 詳細度が低いものから高いものへと上書きされていくという認識で大丈夫でしょうか？ もしあっているのならbody{margin:0;}ではなく*{margin:0;}の方がいいように思います。(下に書く基点という意味も含め) ちなみにCSS書かれる際は、この詳細度を意識しながら書かれていますか？ >基点となるセレクタを書く癖をつけておいたほうが良いです。 申し訳ありません。基点となるセレクタがよく分かりません。 詳細度0(*)のセレクタは書くようにすべき=そこが基点となるという事でしょうか？ >一意なので#だけでよいです。 こちらについても理解できませんでした。#だけでいいとは#{...}という事・・・ではないですよね。 長文になってしまいましたが、お時間ある時にまたお付き合い頂けたらと思います。