- ベストアンサー
横並びのリストで左端がはみ出る問題の解決方法
- CSSの参考書に書いてある通りにHTMLとCSSを書いても、横並びのリストの左端がはみ出てしまう問題が発生しています。
- 現在のコードでは、li要素の左にボーダーを設定していますが、このボーダーが横幅を超えてしまっているため、はみ出る現象が起きています。
- 解決方法としては、ボーダーの幅を調整するか、代わりにパディングやマージンを使用して要素間の区切りを作成することができます。
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
＞という認識であってますでしょうか？ プロパティには継承されるものと継承されないものがあります。 borderやwidthは継承されません。 line-heightやtext-align、font-familyなどは継承されます。 とは言っても常識的なものですね。 bodyに枠をつけたら子孫要素にすべてborderがつくわけない 他人に薦めている＝私自身が役立ったと思う仕様書は HTML 4.01 仕様書邦訳( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/cover.html ) Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification (ja)( http://momdo.s35.xrea.com/web-html-test/spec/CSS21/cover.html ) 特に「5 セレクタ」「6 プロパティ値とカスケーディング、継承の割り当て」 HTML5,CSS3に比較してずっと簡単ですからね。 その後、HTML5なら、その上で HTML 5 differences from HTML 4( http://www.html5.jp/trans/w3c_differences.html ) とか・・
その他の回答 (3)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
＞お察しの通り、初心者で入門書に載っている例を、１つずつ<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> ＞参考サイトや仕様書をきちんと読んで、基礎の基礎から勉強しようと思います。 まず仕様書を通して読んでおきましょう。その上であちこちのサイトをめぐられると良いでしょう。 私はこの世界１７年になりますが、その方法が最も早い上達方法です。理系科目の勉強とまったく同じで、基礎からきちんと積み上げていくととっても簡単ですが、対症療法的な学び方では挫折します。
お礼
すみません、mainは何個も使っているわけではなく、mainの中身を書き換えて 試している、という意味でした。 今まではプログラマーでオブジェクト指向をやっていたので、親で要素を定義して、 子孫では親の属性を継承し、そのセレクタに関する指定をする、ということは理解 できました。（という認識であってますでしょうか？） 今まではいろんなサイトをインスペクタで研究していたりしたのですが、 付け焼き刃はためですね。仰るとおり基礎から積み上げていきたいと思います。 たびたびのご回答、ありがとうございました。
- outbrave
- ベストアンサー率60% (231/380)
UL要素のデフォルトの余白が原因では。 /* padding-top: 10px; padding-bottom: 10px; */ padding: 10px 0;
- ORUKA1951
- ベストアンサー率45% (5062/11036)
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/CSS21/selector.html ) 6 プロパティ値とカスケーディング、継承の割り当て( http://momdo.s35.xrea.com/web-html-test/spec/CSS21/cascade.html ) はじめはややこしいかもしれないが、この二項目はCSSを利用するときに絶対に必修です。 ※ 縦の中央に配置する目的でtableなのでしょうが、line-heightで制御できるはず divで囲んでそれにclass="nav"としているのは、 「DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するため( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )」 および、HTML5の新しい要素( http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff/#new-elements )によります。 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を持つブラウザが多い。
お礼
お察しの通り、初心者で入門書に載っている例を、１つずつ<main>～</main>に 入れて試しているような段階です。 よくわかりました、と言いたいところですが、まだまだ理解できてないところが 多いので、参考サイトや仕様書をきちんと読んで、基礎の基礎から勉強しようと 思います。 丁寧で詳しいご説明、ありがとうございました。
お礼
たびたびのご回答、ありがとうございます。 かなりボリュームがあって、これは時間がかかるな、と思ったのですが、 ここで時間をかけないと、今回のように困ることばかりになって、 かえって時間がかかりますね。 土台がしっかりしていないと、その上に何も乗せられないので、頑張って 勉強します。 今日は本当に何度もありがとうございました。