- ベストアンサー
HTML・CSSタグの書き方教えてください！
- HTML・CSSタグの書き方について教えてください。また、ボーダーを消すタグについても知りたいです。
- HTML・CSSタグの書き方を教えてください。特に、ボーダーを消す方法について教えてください。
- お願いですが、HTML・CSSタグの書き方を教えてください。また、ボーダーを消す方法も教えていただきたいです。
- thankyou_e
- お礼率92% (339/365)
- HTML
- 回答数4
- ありがとう数5
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
こんにちは。 以下のソースにて試しました。 表示が崩れるので doctype の宣言を変えました。 これが違う表示になる原因かな？ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <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" /> <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.left a { border:0; } .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; } </style> </head> <body> <div id="wrapper"> <div id="header"> <h1> 作りかけページ </h1> <p>テストページ</p> </div><!-- header終わり --> <div class="menu"> <ul> <li class="left"><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>
その他の回答 (3)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
HTMLはタグですが、CSSはセレクタです。 もう、そろそろtransitinalは捨てましょう。 HTML4.01の仕様書(1999年)にも ＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿ HTML文書を作る場合には、この仕様における、他のDTDセットではなくstrict DTD に適合する文書を作るよう推奨る。 ￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣ HTML4.01仕様書(4 適合条件: 必須事項と推奨事項)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/conform.html#h-4.1 )より と明記してあります。 まず、HTMLは文書構造にしたがってマークアップしましょう。でないと提示されたようにDIVばっかりの--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 )］より なお、いくつかCSSの記法でも誤りがありますが、それは下記検証サイトで確認してください。 また、 ・同じプロパティを何度も書かないようセレクタホグループにする。 ・カスケーディング機能を活用するなどしてシンプルにわかりやすくしましょう。 下記サンプルは、あなたのものと比較してシンプルでわかりやすい。それでいてスマホにも幅広ディスプレイにも対応します。 ・*{margin:0;padding:0;}は某オーサリングツール由来ですが、使うのは止めましょう。すべてのセレクタで改めて設定しなければならなくなります。 そのうえで、HTMLとCSSのサンプルをあげておきます。 ★Another HTML-lint gateway( http://openlab.ring.gr.jp/k16/htmllint/htmllint.html ) ★The W3C Markup Validation Service( http://validator.w3.org/#validate_by_input ) で検証済み。＿はタブに戻すこと。 <!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 name="author" content="ORUKA1951"> ＿<meta http-equiv="Content-Style-Type" content="text/css"> ＿<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" > ＿<link rel="START" href="../index.html"> ＿<style type="text/css"> <!-- html,body{margin:0;padding:0;} p{text-indent:1em;line-height:160%;margin:0 1em;} div.header,div.section,div.footer{ ＿width:70%; ＿min-width:640px;max-width:760px;/* スマホ,幅広ディスプレイ対応 */ ＿position:relative;/* 子孫ボックスabsoluteの基準点 */ ＿border:solid 1px gray; } div.header{text-align:right;background-color:#ffd700;height:230px;} div.header h1,div.header p{margin-right:10px;} div.header ul,div.header ul li{ ＿display:block;list-style:none; ＿margin:0;padding:0; ＿text-align:center; ＿background-color:#0c907c; ＿line-height:30px; } div.header ul{ ＿position:absolute; ＿bottom:0; ＿width:100%; } div.header ul li{width:19%;float:left;} div.header ul li+li{border-left: solid 1px #FF3366;} div.header ul li a{display:block;width:100%;height:100%;text-decoration:none;} div.section{background-color:blue;color:white;min-height:300px;} div.section div.section{margin:0 21%;width:58%;min-width:0;} div.section div.tableContent, div.section div.aside{ ＿width:20%;height:100%; ＿position:absolute;top:0; } div.section div.tableContent{left:0;} div.section div.aside{right:0;} div.footer{background-color:#FF3366;} --> ＿</style> </head> <body> ＿<div class="header"> ＿＿<h1>サンプル</h1> ＿＿<p>テストページ</p> ＿＿<div class="nav"> ＿＿＿<ul> ＿＿＿＿<li><a href="/">HOME</a></li> ＿＿＿＿<li><a href="/s">サービス概要</a></li> ＿＿＿＿<li><a href="/b">会社概要</a></li> ＿＿＿＿<li><a href="/d">お問い合わせ</a></li> ＿＿＿＿<li><a href="/e">サイトマップ</a></li> ＿＿＿</ul> ＿＿</div> ＿</div> ＿<div class="section"> ＿＿<div class="section"> ＿＿＿<h2>見出し</h2> ＿＿＿<p>本文</p> ＿＿＿<p>***コンテンツ***</p> ＿＿</div> ＿＿<div class="tableContent"> ＿＿＿<h3>目次</h3> ＿＿</div> ＿＿<div class="aside"> ＿＿＿<h3>***右サイドバー***</h3> ＿＿</div> ＿</div> ＿<div id="footer"> ＿＿<h2>文書情報</h2> ＿＿<p>***フッター***</p> ＿</div> </body> </html>
お礼
まだまだ、勉強しなくてはいけないことがありますね。 ご回答ありがとうございました。
- LancerVII
- ベストアンサー率51% (1060/2054)
こんにちは。 左端のメニューにclass="left"を追加。 <div class="menu"> <ul> <li class="left"><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終わり --> CSSに以下の定義を追加。 .menu ul li.left a { border:0; } こんな感じで消えたりしませんか？ ボーダーがなくなる分、サイズの調整が必要かもしれません。
お礼
もし、できましたら、no.2で表示させたHTML・CSSタグを書きこんでいただけませんでしょうか？ LancerVII様のタグと自分のタグ、どこが違うのか見比べたいのですが。 何度も、申し訳ありません。どうかよろしくお願いいたします。
補足
さっそくのご回答ありがとうございます。 やはり消えませんでした。 質問前にもやってみたのですが、駄目で。 原因がわからず、悪戦苦闘しています。 ブラウザが関係したりするのでしょうか？ ちなみにクロームとIEです。
![その他([技術者向] コンピューター) イメージ](https://gazo.okwave.jp/okwave/spn/images/related_qa/c205_1_thumbnail_img_sm.png)
お礼
何度も、何度もご回答いただきまして助かりました！ ためしてみます☆ それと、doctypeの宣言についても、もう少し勉強していきたいと思います。 本当にありがとうございました。