1. 水平メニューバーを作成する
1.1 単純なハイパーリンクの水平メニューバーを作成する
表示属性
表示属性は、要素を表示するかどうか/どのように表示するかを指定します。
すべての HTML 要素には、要素タイプに応じてデフォルトの表示値があります。ほとんどの要素のデフォルトの表示値はブロックまたはインラインです。
block: ブロックレベル要素のデフォルトのメソッド
inline: インライン要素のデフォルトのメソッド
ヒント: none 属性値を使用してナビゲーション バーを非表示にし、JS を使用して表示をブロックするように変更できます。
ブロックレベル要素: 水平幅全体を占め、
インライン要素: 残りの幅を占めます。
水平バーを実現するには、インライン要素を水平ナビゲーション バーに変更します。
デフォルトの表示値をオーバーライドする:
前述したように、すべての要素にはデフォルトの表示値があります。ただし、これをオーバーライドすることはできます。
インライン要素をブロック要素に、またはその逆に変更すると、Web 標準に従いながらページを特定の方法で表示するのに役立ちます。
<li>一般的な例は、水平メニューのインライン要素を生成することです。
<!DOCTYPE html>
<html>
<head>
<style>
li {
display: inline;
}
</style>
</head>
<body>
<p>把链接列表显示为水平导航栏：</p>
<ul>
<li><a href="/html/default.asp" target="_blank">HTML</a></li>
<li><a href="/css/default.asp" target="_blank">CSS</a></li>
<li><a href="/js/default.asp" target="_blank">JavaScript</a></li>
</ul>
</body>
</html>
拡張子:float水平バーを使用します。以下を参照してください。
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: #111;
}
.active {
background-color: red;
}
</style>
</head>
<body>
<ul>
<li><a href="#home" class="active">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
</body>
</html>
1.2 メニューバーを非表示にする
display属性をnone に設定すると、要素を非表示にできます。要素は非表示になり、ページは要素が存在しないかのように表示されます。visibility:hidden; 要素を非表示にすることもできます。ただし、要素は以前と同じスペースを占有します。要素は非表示になりますが、レイアウトには影響します。
js と css を組み合わせて、メニュー バーを非表示にしたり表示したりします。
<!DOCTYPE html>
<html>
<head>
<style>
#panel, .flip {
font-size: 16px;
padding: 10px;
text-align: center;
background-color: #4CAF50;
color: white;
border: solid 1px #a6d8a8;
margin: auto;
}
#panel {
display: none;
}
</style>
</head>
<body>
<p class="flip" onclick="myFunction()">点击这里来显示面板</p>
<div id="panel">
<p>该面板包含一个 div 元素，默认情况下该元素是隐藏的（display: none）。</p>
<p>它使用 CSS 进行样式设置，我们使用 JavaScript 来显示它（display: block）。</p>
<p>工作原理：请注意，带有 class="flip" 的 p 元素有 onclick 属性。当用户单击 p 元素时，将执行一个名为 myFunction() 的函数，该函数将 id="panel" 的 div 样式从 display:none（隐藏）更改为 display:block（可见）。</p>
<p>您将在我们的 JavaScript 教程中学到有关 JavaScript 的更多知识。</p>
</div>
<script>
function myFunction() {
document.getElementById("panel").style.display = "block";
}
</script>
</body>
</html>
要約:
| 属性 | 説明 |
|---|---|
| 画面 | 要素をどのように表示するかを指定します。 |
| 可視性 | 要素を表示するかどうかを指定します。 |
1.3 メニューバーを中央に配置する
カスケード スタイル シートでは、 を使用しますmargin:auto。
div.ex1 {
width: 500px;
margin: auto;
border: 3px solid #73AD21;
}
2. 位置決め
2.1 位置属性
position属性:position 属性は、要素に適用される位置決め方法のタイプを指定します。
5 つの異なる位置値があります。
static: 静的に配置された要素は、上、下、左、右のプロパティの影響を受けません。要素ボックスは正常に生成されます。ブロックレベル要素はドキュメント フローの一部として長方形のボックスを生成しますが、インライン要素は親要素内に配置する 1 つ以上のライン ボックスを作成します。
relative: 通常の位置を基準とした位置。相対的に配置された要素の top、right、bottom、および left プロパティを設定すると、要素は通常の位置から調整されます。コンテンツの残りの部分は、要素によって残されたスペースに合わせて調整されません。。要素ボックスは一定の距離だけオフセットされます。要素は配置されていない形状を保持し、元の位置にあったスペースも保持されます。
absolute: 要素は、祖先元素(固定のようにビューポートに対してではなく) 最も近い位置に対して相対的に配置されます。要素ボックスはドキュメント フローから完全に削除され、そのボックスを含むブロックに対して相対的に配置されます。包含ブロックは、文書内の別の要素または最初の包含ブロックである場合があります。通常のドキュメント フローで要素が以前に占めていたスペースは、その要素が存在しなかったかのように閉じられます。この要素は、通常のフローで最初に生成されたボックスのタイプに関係なく、ブロック レベルのボックスを生成するように配置されます。
ただし、絶対配置要素に祖先がない場合は、ドキュメント本文を使用し、ページのスクロールとともに移動します。
注: 「位置決めされた」要素とは、位置が静的ではない要素です。
relativeコンテンツ ブロックを決定し、absolute内部のコンテンツを変更するためによく使用されます。
fixed: 要素はビューポートを基準にして配置されます。つまり、ページをスクロールしても常に同じ位置にあります。この要素を配置するには、top、right、bottom、および left プロパティを使用します。固定位置の要素は、ページ上で通常配置される場所に隙間を残しません。
違い
fixedに注意してくださいsticky
sticky:要素ユーザーのスクロール位置に基づいた位置決め。
スティッキー要素は、スクロール位置に基づいて相対と固定の間で切り替わります。最初に、ビューポート内で指定されたオフセットに遭遇するまで相対的に配置されます。その後、所定の位置に「貼り付けられます」(例:position:fixed)。
注: Safari には、-webkit- プレフィックスが必要です (以下の例を参照)。また、固定配置を機能させるには、上、右、下、左の少なくとも 1 つを指定する必要があります。
相対的な位置決めヒント: 要素の位置は通常のフロー内の位置を基準にしているため、相対配置は実際には通常のフロー配置モデルの一部と見なされます。通常のストリーム位置から少しオフセットします。
絶対位置決めヒント: 絶対に配置されたボックスはドキュメント フローとは関係がないため、ページ上の他の要素を覆うことができます。z-indexこれらのボックスの積み重ね順序は、プロパティを設定することで制御できます。
div.sticky {
position: -webkit-sticky; /* Safari */
position: sticky;
top: 0;
background-color: green;
border: 2px solid #4CAF50;
}
要素は実際には、top、bottom、left、right プロパティを使用して配置されます。ただし、これらのプロパティは、position プロパティが最初に設定されない限り、効果がありません。位置の値に応じて、動作が異なります。
2.2 CSS の位置決めメカニズム
CSS には、通常のフロー、float、および絶対配置という 3 つの基本的な配置メカニズムがあります。
- 特に指定がない限り、すべてのボックスは通常の流れに配置されます。つまり、通常のフロー内の要素の位置は、(X)HTML 内の要素の位置によって決まります。
- ブロックレベルのボックスが上から下に次々と配置され、ボックス間の垂直距離はボックスの垂直マージンによって計算されます。
- インラインボックスは横一列に配置されます。水平方向のパディング、境界線、およびマージンを使用して間隔を空けることができます。ただし、垂直方向のパディング、境界線、およびマージンはインライン ボックスの高さには影響しません。横一列に並んだ箱を「横箱」といいます。ラインボックス、ライン ボックスの高さは常に、それに含まれるすべてのインライン ボックスを保持できる十分な大きさになります。ただし、行の高さを設定すると、このボックスの高さが大きくなる可能性があります。
2.3 要素のクリッピング
単体で表示される要素の場合、clip: rect(0px,60px,200px,0px);要素は切り取られ、指定されたサイズの形状のみが表示され、元の要素のサイズは変形されません。
2.4 オーバーラップまたはカスケード
- 要素を配置する場合、他の要素と重なることがあります。z-index 属性は、要素の積み重ね順序 (どの要素を他の要素の前または後ろに配置するか) を指定します。
- 要素は正または負に設定できます重ね順: 画像の z-index は -1 であるため、テキストの後ろに配置されます。
- より高いスタック順序を持つ要素は常に、より低いスタック順序を持つ要素よりも前にあります。
注: z-index を指定せずに配置された 2 つの要素が重なる場合、HTML コードの最後の要素が一番上に表示されます。
- img タグ: インライン ブロック要素。inline-block と同様に、p タグでラップできます。
<p><img src="1.jpg"></p>たとえば、 p は中央に配置されmargin:auto、画像も中央に配置されます。- p タグ: ブロックレベルの要素。デフォルトの幅は 1 行を占めます。
概要:
| 属性 | 説明 |
|---|---|
| 下 | 配置されたボックスの下マージンの端を設定します。 |
| クリップ | 絶対的に配置された要素をクリップします。 |
| 左 | 配置されたボックスの左マージン端を設定します。 |
| 位置 | 要素の配置タイプを指定します。 |
| 右 | 配置されたボックスの右マージン端を設定します。 |
| 上 | 配置されたボックスの上マージンの端を設定します。 |
| Zインデックス | 要素の重なり順を設定します。 |
3. オーバーフロー
overflowこの属性は、要素の内容が大きすぎて指定した領域に収まらない場合に、内容をクリップするかスクロールバーを追加するかを指定し、以下の値を設定できます。
visible- デフォルト。オーバーフローはクリップされません。コンテンツは要素のボックスの外側にレンダリングされますhidden- オーバーフローが切り取られ、コンテンツの残りの部分が表示されなくなります。scroll- 残りを表示するためにスクロールバーを追加すると、オーバーフローがクリップされますauto- スクロールに似ていますが、必要な場合にのみスクロールバーを追加します。
注: オーバーフロー プロパティは、指定された高さのブロック要素にのみ適用されます。一般的に、タオバオのような Web サイトを作成する場合、クロールされるビジネス写真のサイズと高さ、テキストの長さがわからないため、固定の高さを設定する必要はありません。を設定し、内容に応じて柔軟に拡張できます。
| 属性 | 説明 |
|---|---|
| オーバーフロー | コンテンツが要素のボックスをオーバーフローした場合の動作を指定します。 |
| オーバーフロー-X | 要素のコンテンツ領域がオーバーフローした場合に、コンテンツの左端/右端を処理する方法を指定します。 |
| オーバーフローっぽい | 要素のコンテンツ領域がオーバーフローした場合に、コンテンツの上端/下端を処理する方法を指定します。 |
4. フローティングして画像で囲まれたテキストを実現します
float 属性は要素をどのようにフローティングするかを指定します。コンテンツの位置決めと書式設定に使用されるフローティングにより、要素がドキュメント フローから切り離されます。これは、ドキュメント フローの上にフローティングすることと同等であり、他の要素がそれを補います。次のいずれかの値を設定できます。
left- 要素はコンテナの左側にフローティングされます。right- 要素はコンテナの右側にフロートしますnone- 要素はフローティングされません (テキスト内で直前に出現した場所に表示されます)。デフォルトinherit- 要素は親から float 値を継承します。
注: float に関連するすべてのプロパティ
| 属性 | 説明 |
|---|---|
| ボックスのサイジング | 要素の幅と高さの計算方法、つまりパディングとボーダーを含めるかどうかを定義します。 |
| クリア | どの要素がクリアされる要素の隣でどの側にフローティングできるかを指定します。 |
| 浮く | 要素をどのようにフローティングするかを指定します。 |
| オーバーフロー | コンテンツが要素のボックスをオーバーフローした場合の動作を指定します。 |
| オーバーフロー-X | 要素のコンテンツ領域からはみ出した場合に、コンテンツの左端/右端を処理する方法を指定します。 |
| オーバーフローっぽい | 要素のコンテンツ領域からはみ出す場合に、コンテンツの上端/下端を処理する方法を指定します。 |
最も単純な使用法は、float 属性を使用して、(新聞上で) 画像を囲むテキストの効果を実現できることです。
<!DOCTYPE html>
<html>
<head>
<style>
img {
float: right;
}
</style>
</head>
<body>
<h1>向右浮动</h1>
<p>在本例中，图像会在段落中向右浮动，而段落中的文本会包围这幅图像。</p>
<p><img src="https://s1.ax1x.com/2023/03/20/pptssjx.jpg" alt="海贼王" style="width:220px;height:170px;margin-left:15px;">
《海贼王》是一部热血漫。 传说中‘海贼王’哥尔·D·罗杰在死前说出他留下了具有财富、名声、力量世界第一的宝藏“ONE PIECE”,许多人为了争夺“ONE PIECE”,争相出海,许多海贼开始树立霸权,而形成了“大海贼时代”。十年后,蒙其·D·路飞为了要实现与因救他而断臂的‘红发’香克斯的约定而出海,并在快乐的航海中拥有了一群值得信赖的伙伴,一起进入“伟大航道”,目标当上“海贼王”。每个伙伴都有自己的梦想,自由,友情,梦想是它的主题!</p>
</body>
</html>
注:
1. サラウンド効果の実現は、ブロック ラベルでのインライン ラベルの定義に基づいており、インライン ラベルはフロートし、上の図に示すように、ブロック ラベルのコンテンツが画像を囲みます。
2. 2 つのライン ボックス (インライン ボーダー) で定義されている場合、フローティング ラインの 1 つがもう 1 つのライン ボックスを覆います。
3. CSSclearプロパティは、どの要素がクリアされた要素の隣にどの側にフローティングできるかを指定します。
5. 写真上への文字説明の形成とカード形式の表示の形成を実現
前提上の注意:
1. 上ではなく画像上に表示されるテキストを実現するには、z-index属性を使用しても要素を制御するだけz-index な垂直階層[つまり、上層に最初に表示されるが、適切なブロックを形成できない人は、行フレームの行全体を占有することになります] が、要素の水平方向の位置に影響を与えることはできません。
2. 親要素は float に設定されます。主な目的は、画像とテキストを同じ行または列に配置したり、テキストを画像の上下または左右に表示して、特定のレイアウト効果を実現することです。同時に、フローティングにより、他のコンテンツを写真やテキストの周囲に密集して配置できるため、ページのレイアウトがよりコンパクトで美しくなります。float を使用して画像上にテキストを表示できますが、いくつかの詳細に注意する必要があります。
3. 画像上にテキストが表示されていることを確認します。
- にいる必要がある写真を重ね合わせるテキスト要素、その
positionプロパティを絶対または相対に設定します [親要素は相対に設定され、内部のテキスト要素はこのブロック内で変形するのが難しい絶対に設定することが望ましいです]。これにより、画像に対して相対的に配置できるようになります。 、次に、top、left、right、bottom 属性を使用してテキストの位置を制御します。
次のように進めます。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.float {
float: left;
position: relative; /*添加position:relative*/
}
.caption {
position: absolute;
bottom: 0;
left: 0;
z-index: 1;
background-color: rgba(0, 0, 0, 0.5);
color: #fff;
width: 100%;
padding: 10px;
box-sizing: border-box;
}
.container {
float: left;
position: relative;
}
.text {
position: absolute;
bottom: 20px;
left: 20px;
color: white;
font-size: 16px;
font-weight: bold;
}
</style>
</head>
<body>
<div class="float">
<img src="https://s1.ax1x.com/2023/03/20/pptssjx.jpg" alt="pptssjx.jpg" style="width:220px;height:170px;margin-left:15px;">
<div class="caption">这里是文字说明</div>
</div>
<div class="container">
<div class="text">这是要显示在图片上的文字</div>
<img src="https://s1.ax1x.com/2023/03/20/pptssjx.jpg" alt="pptssjx.jpg" style="width:220px;height:170px;margin-left:15px;">
</div>
</body>
</html>
シックスクリアフロート
6.1 背景色が浮いている問題を解決する
clearライン ボックスがフローティング ボックスの周囲に回り込まないようにするには、ボックスにプロパティを適用する必要があります。clear 属性の値は、左、右、両方、またはなしのいずれかになります。ボックスのどの側面がフローティングボックスに触れてはならないかを示します。
周囲の要素（背景色など） 周囲の浮遊要素：
注：
- 上の画像に示すように、クリーニングを適用する既存の要素がないため、空の要素を追加してクリーニングすることしかできないため、新たな問題が発生します。HTMLの親要素に追加します
<div class="clear"></div>
.clear {
clear: both;
}
- コンテナの div をフローティングにするという別の方法もあります。残念ながら、次の要素はこの浮動要素の影響を受けます。これを回避するために、レイアウト内のすべてをフローティングし、適切な意味のある要素 (多くの場合、サイトのフッター) でそれらのフロートをクリーンアップすることを選択する人もいます。これは、不要なマークアップを削減または削除するのに役立ちます。
| 価値 | 説明 |
|---|---|
| 左 | フローティング要素は左側では許可されません。 |
| 右 | 右側ではフローティング要素は許可されません。 |
| 両方 | フローティング要素を左側または右側に配置することはできません。 |
| なし | デフォルト。フローティング要素を両側に表示できるようにします。 |
| あなたは継承します | clear 属性の値を親要素から継承することを指定します。 |
6.2 高さを設定しないことによるオーバーフロー問題の解決 (上記の問題と同様)
要素がその要素を含む要素よりも高く、フローティングされている場合、その要素はコンテナーの外に「オーバーフロー」します。この問題は、含まれる要素に overflow: auto; を追加することで修正できます。
.clearfix {
overflow: auto;
}
clearfix hack レイアウト フローを処理します。マージンとパディングを制御できる限り、overflow: auto clearfix 正常に動作します(そうでない場合、スクロールバーが表示される可能性があります)。ただし、最新の Clearfix ハック手法の方がはるかに安全に使用でき、次のコードがほとんどの Web サイトで使用されています。
/* 写在父标签内。*/
.clearfix::after {
content: "";
clear: both;
display: table;
}
6.3 浮き上がりを解消する 4 つの方法
1.高さが崩れないように親ラベルボックスに高さを追加します。
.father {
width: 100%;
border: 2px solid red;
height: 300px;
}
2. 空のラベルを追加します
.box {
width: 100%;
height: 300px;
}
.clear {
clear: both;
記述したレイアウトの下に同レベルの空タグを追加し、その空タグ内に上記のクラスを追加します。
3. 親にオーバーフロー属性を追加します
親タグに追加 overflow: hidden;
4. after 疑似要素を親に追加します
このメソッドの原理はエクストラ タグ メソッドと同じですが、疑似クラスを使用してフローティング要素の親ボックスの後ろにブロック レベルの要素が追加される点が異なります。
.clearfix::after {
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
/* IE6、7 专有 */
*zoom: 1;
}
7. フローティングを使用してレイアウトを実現する [グリッド レイアウト]
3 つのフローターを並べて簡単に作成できます。ただし、各ボックスの幅を広げるもの (パディングやボーダーなど) を追加すると、ボックスが壊れます。ボックスのサイズ設定プロパティを使用すると、ボックスの全体の幅 (および高さ) にパディングとボーダーを含めることができ、パディングが壊れることなくボックス内に留まるようにすることができます。
簡単に言えば、要素に box-sizing: border-box; が設定されている場合、幅と高さにはパディングとボーダーが含まれます。
* {
box-sizing: border-box;
}
.box {
float: left;
width: 33.33%; /* 三个框（四框使用 25%，两框使用 50%，以此类推） */
padding: 50px; /* 如果需要在图片间增加间距 */
}
拡張機能 1:Grid布局
グリッド レイアウトは Web ページ レイアウト用の CSS モジュールであり、行と列の交差点に要素を配置して整列させる強力な方法を提供します。グリッド レイアウトを使用すると、開発者は、従来のレイアウト方法のように水平軸または垂直軸に沿って一方向に配置されるのではなく、Web ページ上の要素を 2 次元グリッドで定義して配布できます。これにより、開発者は Web ページ上の要素の位置とサイズをより細かく制御できるようになり、より複雑で多様なレイアウト効果を実現できます。
グリッド レイアウトは次のように定義されます。グリッドコンテナ(グリッドコンテナ)とグリッド項目(グリッド項目) が機能します。グリッド コンテナーは、グリッド アイテムを含む要素であり、表示プロパティが Grid または inline-grid に設定されたボックスとして定義されます。グリッド項目はグリッド コンテナーの子要素であり、グリッド内のセルに配置され、複数のセルにまたがることができます。
グリッド レイアウトには、グリッド内の行と列を制御するための一連のプロパティ ( 、grid-template-rows、grid-template-columns、、、、など)が用意されていますgrid-template-areas。これらのプロパティを設定することで、開発者はグリッドの行と列の数、サイズ、間隔を定義し、特定のセルにグリッド項目を配置できます。grid-rowgrid-columngrid-row-startgrid-row-endgrid-column-startgrid-column-end
一般に、グリッド レイアウトは柔軟で強力なレイアウト方法であり、開発者により多くの制御と自由を提供し、Web ページのレイアウトをより多様で洗練されたものにします。
以下は、グリッド レイアウトの共通の属性とその機能です。
| 属性 | 効果 |
|---|---|
| グリッド テンプレートの列/グリッド テンプレートの行 | 列/行のサイズとグリッド コンテナの数を定義します。 |
| グリッドテンプレートエリア | グリッドコンテナ内の領域のレイアウトを定義します。 |
| グリッド行/グリッド列 | グリッド項目の行/列の位置を指定します。 |
| グリッド行の開始/グリッド行の終了/グリッド列の開始/グリッド列の終了 | グリッド項目の開始と終了の行/列の位置を指定します。 |
| グリッド列ギャップ/グリッド行ギャップ | グリッドの行/列間の間隔を定義します。 |
| justify-items/align-items | 行/列上のグリッド項目の配置を制御します。 |
| コンテンツの位置揃え/コンテンツの整列 | 行/列上のグリッドの配置を制御します。グリッド コンテナーのサイズがグリッドのコンテンツより大きい場合に使用されます。 |
| グリッド自動行/グリッド自動列 | グリッド コンテナー内で明示的にサイズが設定されていない行/列のサイズを定義します。 |
| グリッド自動フロー | グリッド コンテナー内に自動的に配置されるグリッド アイテムの方向と順序を定義します。 |
| グリッドテンプレート | 列/行のサイズとグリッド コンテナの数、およびグリッド領域のレイアウトを定義します。 |
| グリッドエリア | グリッド項目のサイズと位置を指定し、グリッド テンプレート領域で使用する名前を項目に与えます。 |
| 注文 | グリッド コンテナー内のグリッド項目の順序を定義します。 |
| Zインデックス | スタック効果を使用して、グリッドのスタック順序におけるグリッド アイテムの順序を定義します。 |
拡張 2: 弾力性のあるフレームワークを作成します。Flexbox 布局 ここをクリックして学習してください。
8. フロートを使用して Web サイトを作成する
<!DOCTYPE html>
<html>
<head>
<style>
* {
box-sizing: border-box;
}
body {
margin: 0;
}
.header {
background-color: #2196F3;
color: white;
text-align: center;
padding: 15px;
}
.footer {
background-color: #444;
color: white;
padding: 15px;
}
.topmenu {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #777;
}
.topmenu li {
float: left;
}
.topmenu li a {
display: inline-block;
color: white;
text-align: center;
padding: 16px;
text-decoration: none;
}
.topmenu li a:hover {
background-color: #222;
}
.topmenu li a.active {
color: white;
background-color: #4CAF50;
}
.column {
float: left;
padding: 15px;
}
.clearfix::after {
content: "";
clear: both;
display: table;
}
.sidemenu {
width: 25%;
}
.content {
width: 75%;
}
.sidemenu ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.sidemenu li a {
margin-bottom: 4px;
display: block;
padding: 8px;
background-color: #eee;
text-decoration: none;
color: #666;
}
.sidemenu li a:hover {
background-color: #555;
color: white;
}
.sidemenu li a.active {
background-color: #008CBA;
color: white;
}
</style>
</head>
<body>
<ul class="topmenu">
<li><a href="#home" class="active">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
<div class="clearfix">
<div class="column sidemenu">
<ul>
<li><a href="#flight">The Flight</a></li>
<li><a href="#city" class="active">The City</a></li>
<li><a href="#island">The Island</a></li>
<li><a href="#food">The Food</a></li>
<li><a href="#people">The People</a></li>
<li><a href="#history">The History</a></li>
<li><a href="#oceans">The Oceans</a></li>
</ul>
</div>
<div class="column content">
<div class="header">
<h1>The City</h1>
</div>
<h1>Shanghai</h1>
<p>Shanghai is one of the four direct-administered municipalities of the People's Republic of China. Welcome to Shanghai!
</p>
<p>You will learn more about responsive web pages in a later chapter.</p>
</div>
</div>
<div class="footer">
<p>Footer Text</p>
</div>
</body>
</html>
補足: タグのネストルール
ほとんどのタグは自由にネストできますが、いくつかの特別なルールがあります。たとえば、p タグや div タグなどのブロックレベルのタグを p タグ内にネストすることはできません。
1. ブロックレベル要素のネストルール
① 特別な<p>、<h1> ~ <h6>、<dt>ブロックレベル要素
これらの要素には特別なルールがあります。これらのタグはブロックレベル要素をネストできません。ブロックレベル要素を指定した場合でも、インライン要素またはインラインブロック要素のみをネストできます。表示:インラインも機能しません。
これらの特別な要素内にブロックレベルの要素をネストすると、ブラウザは要素の前後の 2 つのタグを 2 つのタグのペアに解析します。現時点では、要素に設定したスタイルをネストされた要素に適用することはできません。