<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>HTML/CSSでWebページ作成</title> <link rel="stylesheet" href="s.css"> </head> <body> <header> ここはヘッダーです。 </header> <div id="wrapper"> <div id="main"> <h1>HTML/CSSでWebページ作成</h1> <h2>Webサイトの仕組み</h2> <p>Webサイトとは、Webページをひとまとまりにして公開したWebページの集まりのことです。</p> <h3>Webブラウザとは</h3> <p>Webブラウザの説明が入ります。</p> <h3>Webページの構成</h3> <p>Webページの構成の説明が入ります。</p> <h3>Webページの表示</h3> <p>Webページの表示の説明が入ります。</p> </div> </div> <nav id="menu"> <ul> <li>Webサイトの仕組み</li> <li>HTMLのとCSSの概要</li> <li>HTMLの基本</li> <li>head要素内の記述</li> <li>body要素内の記述</li> <li>id属性とclass属性の設定</li> <li>HTMLチュートリアル</li> </ul> </nav> <footer> ここはフッターです。 </footer> </body> </html>
.clearfix::after { content: 'wrapper'; display: block; clear: both; } #wrapper{ width: 1000px; }header { background-color: #ffcccc ; width: 1000px; }div#main { margin:0 0 10px; float: left; width: 700px; background-color: #ccffcc ; }nav#menu { padding-bottom :0px; float: right; width: 300px; background-color: #ccccff ; }footer{ clear: both; background-color: #ffccff; width: 1000px; }
このCSSで何故レイアウトがブラウザによって異なってしまうのか理解ができません、
何をどのように改善すれば表示が均一になるのか知りたいです。
回答2件
あなたの回答
tips
プレビュー