重要なお知らせ

「教えて! goo」は2025年9月17日(水)をもちまして、サービスを終了いたします。詳細はこちら＞

電子書籍の厳選無料作品が豊富！

横並びのリストで左端がはみ出る

解決済

  • 質問者：ham_kamo
  • 質問日時：
  • 回答数：4件

リストを横並びにしてメニューバーを作ろうとしているのですが、CSSの参考書に書いてある通りにHTMLとCSSを書いても、添付ファイルのように、どうしても左端がはみ出てしまいます。
（この例ではわかりやすいようにli要素の左にボーダーを入れています）

index.html

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>TITLE</title>
<link href="nav.css" rel="stylesheet" type="text/css">
</head>
<body>
<ul class="nav">
<li class="nav_item"><a href="index.html">ホーム</a></li>
<li class="nav_item"><a href="#">リンク１</a></li>
<li class="nav_item"><a href="#">リンク２</a></li>
</ul>
</body>


nav.css

.nav {
display: table;
width: 100%;
table-layout: fixed;

padding-top: 10px;
padding-bottom: 10px;
background-color: #dddddd;
}

.nav_item {
display: table-cell;
border-left: thick solid #000000;

}

.nav_item > a {
display: block;
list-style-type: none;
text-decoration: none;
text-align: center;
}

どのブラウザで確認しても同じ現象です。
どうやったら正常に表示されるのか、おわかりになれば教えてください。

「横並びのリストで左端がはみ出る」の質問画像
通報する

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

質問の本文を隠す

A 回答 (4件)

No.4ベストアンサー

  • 回答者： ORUKA1951
  • 回答日時：

＞という認識であってますでしょうか？


　プロパティには継承されるものと継承されないものがあります。
　borderやwidthは継承されません。
　line-heightやtext-align、font-familyなどは継承されます。
　　とは言っても常識的なものですね。
　　bodyに枠をつけたら子孫要素にすべてborderがつくわけない

他人に薦めている＝私自身が役立ったと思う仕様書は
HTML 4.01 仕様書邦訳( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )
Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification (ja)( http://momdo.s35.xrea.com/web-html-test/spec/CSS … )
　特に「5 セレクタ」「6 プロパティ値とカスケーディング、継承の割り当て」
HTML5,CSS3に比較してずっと簡単ですからね。
その後、HTML5なら、その上で
HTML 5 differences from HTML 4( http://www.html5.jp/trans/w3c_differences.html )
とか・・
    • good
    • 0
    • 件
通報する
この回答へのお礼

たびたびのご回答、ありがとうございます。
かなりボリュームがあって、これは時間がかかるな、と思ったのですが、
ここで時間をかけないと、今回のように困ることばかりになって、
かえって時間がかかりますね。
土台がしっかりしていないと、その上に何も乗せられないので、頑張って
勉強します。

今日は本当に何度もありがとうございました。

通報する
お礼日時：2014/11/06 18:04

No.3

  • 回答者： ORUKA1951
  • 回答日時：

＞お察しの通り、初心者で入門書に載っている例を、１つずつ<main>～</main>に入れて試しているような段階です。


　main要素はHTML5の勧告直前に追加された要素ですが非常に制約が多いです。文書の中で一箇所しか使えません。
★ article, aside, footer, header, nav 要素の内部・子孫には存在してはならない。
　端的に言うとそのページの主題となっている部分の目印として一箇所だけ用いる。

HTML5の典型的なマークアップ
<body>
　<header>
　　文書のヘッダ
　　<nav>グローバルナビ</nav>
　</header>
　<section>
　　<h2>sectionは一つだけ見出し要素を持つ</h2>
　　<section>
　　　<h3>見出し</h3>
　　　<article>
　　　　<header></header>
　　　　<section></section>
　　　　</footer>
　　　</article>
　　　<aside></aside>
　　</section>
　</section>
　<footer></footer>
</body>

mainを使う例
<body>
　<header>
　　文書のヘッダ
　　<nav>グローバルナビ</nav>
　</header>
　<main>
　　<h2>sectionは一つだけ見出し要素を持つ</h2>
　　<article>
　　　<header></header>
　　　<section></section>
　　　</footer>
　　</article>
　</main>
　<footer></footer>
</body>

＞参考サイトや仕様書をきちんと読んで、基礎の基礎から勉強しようと思います。
　まず仕様書を通して読んでおきましょう。その上であちこちのサイトをめぐられると良いでしょう。
　私はこの世界１７年になりますが、その方法が最も早い上達方法です。理系科目の勉強とまったく同じで、基礎からきちんと積み上げていくととっても簡単ですが、対症療法的な学び方では挫折します。
    • good
    • 0
    • 件
通報する
この回答へのお礼

すみません、mainは何個も使っているわけではなく、mainの中身を書き換えて
試している、という意味でした。
今まではプログラマーでオブジェクト指向をやっていたので、親で要素を定義して、
子孫では親の属性を継承し、そのセレクタに関する指定をする、ということは理解
できました。（という認識であってますでしょうか？）

今まではいろんなサイトをインスペクタで研究していたりしたのですが、
付け焼き刃はためですね。仰るとおり基礎から積み上げていきたいと思います。

たびたびのご回答、ありがとうございました。

通報する
お礼日時：2014/11/06 15:42

No.2

  • 回答者： outbrave
  • 回答日時：

UL要素のデフォルトの余白が原因では。



/* padding-top: 10px;
padding-bottom: 10px; */
padding: 10px 0;
    • good
    • 0
    • 件
通報する

No.1

  • 回答者： ORUKA1951
  • 回答日時：

HTMLやスタイルシートの書き方を知らない(^^)というだけ。

仕様書を見たこともないのじゃないかと
<div class="nav"><!-- なぜこうなのか後述 -->
　<ul>
　　<li><a href="index.html">ホーム</a></li>
　　<li><a href="/A">リンク１</a></li>
　　<li><a href="/B">リンク２</a></li>
　</ul>
</div>
div.nav{width:100%;background-color:silver;line-height:2em;text-align:center;}
div.nav ul,div.nav ul li{margin:0;padding:0;list-style:none;}
div.nav ul li{font-size:16px;display:inline-block;width:30%;position:relative;}
div.nav ul li+li{border-left:solid blue 3px;}
div.nav ul li a{display:block;width:100%;height:100%;text-decoration:none;}
div.nav ul li a:hover{background-color:white;}

※ CSS2以降、セレクタは原則として基点となるセレクタを書く。
　.navは、クラスセレクタですが、ブラウザは*.navと解釈して処理します。
　　*は全称セレクタ
※ いちいちclass="nav_item"のようなclassは書かない。煩雑になる。
　きちんと子孫セレクタ,子供セレクタを使うと継承や詳細度で悩まなくてすむ。
5 セレクタ( http://momdo.s35.xrea.com/web-html-test/spec/CSS … )
6 プロパティ値とカスケーディング、継承の割り当て( http://momdo.s35.xrea.com/web-html-test/spec/CSS … )
　はじめはややこしいかもしれないが、この二項目はCSSを利用するときに絶対に必修です。

※ 縦の中央に配置する目的でtableなのでしょうが、line-heightで制御できるはず


divで囲んでそれにclass="nav"としているのは、
「DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するため( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )」
および、HTML5の新しい要素( http://standards.mitsue.co.jp/resources/w3c/TR/h … )によります。
HTML5では
<nav><!-- ナビゲーション -->
　<ul>
　　<li><a href="index.html">ホーム</a></li>
　　<li><a href="/A">リンク１</a></li>
　　<li><a href="/B">リンク２</a></li>
　</ul>
</nav>
となるべきだからです。
nav{width:100%;background-color:silver;line-height:2em;text-align:center;}
nav ul,nav ul li{margin:0;padding:0;list-style:none;}
nav ul li{font-size:16px;display:inline-block;width:30%;position:relative;}
nav ul li+li{border-left:solid blue 3px;}
nav ul li a{display:block;width:100%;height:100%;text-decoration:none;}
nav ul li a:hover{background-color:white;}
nav ul li a[href="/A"]:hover{background-color:lime;}

はみ出した理由
たぶんオリジナルは、互換モードを前提としているのでしょう。互換モードはブラウザによって大きな差異が出るため使うべきではない。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
として（旧）IEで見るとはみ出ないのでは？
　また、ブラウザによってmarginかpaddingかの差はありますがul,liはmarginを持つブラウザが多い。
    • good
    • 0
    • 件
通報する
この回答へのお礼

お察しの通り、初心者で入門書に載っている例を、１つずつ<main>～</main>に
入れて試しているような段階です。
よくわかりました、と言いたいところですが、まだまだ理解できてないところが
多いので、参考サイトや仕様書をきちんと読んで、基礎の基礎から勉強しようと
思います。

丁寧で詳しいご説明、ありがとうございました。

通報する
お礼日時：2014/11/06 12:14

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報