HTML・CSSタグの書き方教えてください！

解決済

質問者：thankyou_e
質問日時：2011/11/22 08:27
回答数：4件

画像では見づらいのですが、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>

<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>

<div id="main">

<div id="contents">
***コンテンツ***
</div>

<div id="leftsidebar">
***左サイドバー***
</div>

</div>

<div id="rightsidebar">
***右サイドバー***
</div>

<div id="footer">
***フッター***
</div>

</div>

</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;
}

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (4件)

No.1

回答者： LancerVII
回答日時：2011/11/22 08:52

こんにちは。

左端のメニューに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>

CSSに以下の定義を追加。
.menu ul li.left a {
border:0;
}

こんな感じで消えたりしませんか？

ボーダーがなくなる分、サイズの調整が必要かもしれません。

この回答への補足

さっそくのご回答ありがとうございます。
やはり消えませんでした。
質問前にもやってみたのですが、駄目で。
原因がわからず、悪戦苦闘しています。
ブラウザが関係したりするのでしょうか？
ちなみにクロームとIEです。

補足日時：2011/11/22 09:12

通報する

- 0
- 件

通報する

この回答へのお礼

もし、できましたら、no.2で表示させたHTML・CSSタグを書きこんでいただけませんでしょうか？
LancerVII様のタグと自分のタグ、どこが違うのか見比べたいのですが。
何度も、申し訳ありません。どうかよろしくお願いいたします。

通報する

お礼日時：2011/11/22 13:32

No.2

回答者： LancerVII
回答日時：2011/11/22 09:24

こんにちは。

試してみたとありましたね、すみません。

しかし、No.1の対応を行なったところ画像のような表示になっています。
バージョン違いなのか、何かほかに原因があるのか。

この回答への補足

LancerVII様のご回答を拝見いたしますと、左側のボーダー消えてますね。
半角の打ち方が悪いってことなんでしょうか…。
もう一度、タグを見直してみます。

補足日時：2011/11/22 09:30

通報する

- 0
- 件

通報する

この回答へのお礼

＞試してみたとありましたね、すみません。
そんな！とんでもない！
ご回答いただけて、助かりました。
ありがとうございます。

通報する

お礼日時：2011/11/22 09:28

No.3ベストアンサー

回答者： LancerVII
回答日時：2011/11/22 15:19

こんにちは。

以下のソースにて試しました。
表示が崩れるので 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>
<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>
<div id="main">
<div id="contents">
***コンテンツ***
</div>
<div id="leftsidebar">
***左サイドバー***
</div>
</div>
<div id="rightsidebar">
***右サイドバー***
</div>
<div id="footer">
***フッター***
</div>
</div>
</body>
</html>

- 0
- 件

通報する

この回答へのお礼

何度も、何度もご回答いただきまして助かりました！
ためしてみます☆
それと、doctypeの宣言についても、もう少し勉強していきたいと思います。
本当にありがとうございました。

通報する

お礼日時：2011/11/22 16:27

No.4

回答者： ORUKA1951
回答日時：2011/11/22 15:23

HTMLはタグですが、CSSはセレクタです。

もう、そろそろtransitinalは捨てましょう。
HTML4.01の仕様書(1999年)にも
＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿
HTML文書を作る場合には、この仕様における、他のDTDセットではなくstrict DTD に適合する文書を作るよう推奨る。
￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣
HTML4.01仕様書(4 適合条件: 必須事項と推奨事項)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )より
と明記してあります。

まず、HTMLは文書構造にしたがってマークアップしましょう。でないと提示されたようにDIVばっかりの--divスープが出来てしまいますし、後日見直したときに中に何が書かれているかわからなくなりますし、検索エンジンも理解できません。
【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［The global structure of an HTML document (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )］より

なお、いくつかCSSの記法でも誤りがありますが、それは下記検証サイトで確認してください。
また、
・同じプロパティを何度も書かないようセレクタホグループにする。
・カスケーディング機能を活用するなどしてシンプルにわかりやすくしましょう。
　下記サンプルは、あなたのものと比較してシンプルでわかりやすい。それでいてスマホにも幅広ディスプレイにも対応します。
・*{margin:0;padding:0;}は某オーサリングツール由来ですが、使うのは止めましょう。すべてのセレクタで改めて設定しなければならなくなります。

　そのうえで、HTMLとCSSのサンプルをあげておきます。
★Another HTML-lint gateway( http://openlab.ring.gr.jp/k16/htmllint/htmllint. … )
★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">

＿</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>