みんなの「教えて(疑問・質問)」にみんなで「答える」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;
}

投稿日時 - 2011-11-22 08:27:00

QNo.7147636

すぐに回答ほしいです

質問者が選んだベストアンサー

こんにちは。
以下のソースにて試しました。
表示が崩れるので 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>

投稿日時 - 2011-11-22 15:19:29

お礼

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

投稿日時 - 2011-11-22 16:27:32

このQ&Aは役に立ちましたか?

1人が「このQ&Aが役に立った」と投票しています

回答(4)

ANo.4

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>

投稿日時 - 2011-11-22 15:23:56

お礼

まだまだ、勉強しなくてはいけないことがありますね。
ご回答ありがとうございました。

投稿日時 - 2011-11-22 16:21:00

ANo.2

こんにちは。

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

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

投稿日時 - 2011-11-22 09:24:20

補足

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

投稿日時 - 2011-11-22 09:30:51

お礼

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

投稿日時 - 2011-11-22 09:28:08

ANo.1

こんにちは。

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

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

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

投稿日時 - 2011-11-22 08:52:02

補足

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

投稿日時 - 2011-11-22 09:12:02

お礼

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

投稿日時 - 2011-11-22 13:32:26

あなたにオススメの質問