HTML レイアウト-htmlチュートリアル-php.cn

HTML レイアウト

王林

リリース： 2024-09-04 16:15:39

オリジナル

543 人が閲覧しました

Web ページをデザインするときは、Web ページの要素をエレガントな方法で配置する必要があります。ユーザーにとってナビゲートしやすく、シンプルである必要があります。これは、これらの要素を適切に構造化された方法で配置する方法を提供します。 HTML レイアウトは Web ページの見栄えを良くし、簡単にデザインできます。これは、単純な標準 HTML タグを使用して Web 要素をデザインできる簡単な方法です。 HTML にはさまざまなレイアウト要素が用意されており、それを使用して Web ページのさまざまな部分をデザインできます。

HTML レイアウト要素

この記事では、さまざまなレイアウト要素とその例を見ていきます。これらの要素を使用して、新聞に似た単純な構造を設計します。

1. <ヘッダー>

この要素は、Web ページのヘッダーを定義するために使用されます。ページのタイトル、ロゴ、または紹介コンテンツが含まれる場合があります。

コード:

<!DOCTYPE html>
<html>
<head>
<title> EduCba </title>
</head>
<body>
<header style = "height: 100px; width: 100%; background-color: #607D8B;" >
<h1 style=" color: #fff; text-align: center; padding-top: 25px; font-size: 30px;" > Header Section</h1>
</header>
</body>
</html>

ログイン後にコピー

出力:

HTML レイアウト

2. <ナビ>

この要素にはメニューリストへのリンクが含まれます。この要素は、さまざまなナビゲーションリンクのコンテナーのようなものです。リンクは別のページまたは同じページにあります。

コード:

最後の例のヘッダーの下にナビゲーション要素を追加してみましょう。 <スタイル>を追加

にパーツを追加します。要素と

ヘッダーセクションのすぐ下の部分。

<head>
<style>
li{
display: inline-flex;
padding: 25px
}
ul{
text-align: center;
}
</style>
</head>
<body>
<nav style = "background-color: #607d8b70;" >
<ul>
<li> <a href = "#"> Navigation Link1 </a> </li>
<li> <a href = "#"> Navigation Link2 </a> </li>
<li> <a href = "#"> Navigation Link3 </a> </li>
</ul>
</nav>
</body>

ログイン後にコピー

出力:

HTML レイアウト

3. <セクション>

この要素は Web ページのメインセクションに似ています。あらゆる種類の情報を含めることができます。テキストや画像などを含めることができます。

4. <記事>

名前が示すように、この要素には段落、何かの詳細な説明、またはあらゆる種類の情報などのコンテンツが含まれます。通常、これは Web ページ上の情報を含む主要な部分になります。

5. <余談>

この要素は、セクションや記事など、メインコンテンツの横にあるコンテンツを定義します。この情報要素はオプションであり、通常は追加情報または広告コンテンツが含まれます。

コード:

これら 3 つの要素をすべてナビゲーションバーの下にまとめて追加しましょう。

<style>
li { display: inline-flex;
padding: 25px
}
section{
background-color: #607D8B;
width: 79%;
position: absolute;
height: 150px;
}
article{
width: 79%;
background-color: #607d8b70;
position: absolute;
top: 368px;
height: 150px;
}
aside{
background-color: #607d8b99;
width: 20%;
position: absolute;
left: 80%;
height: 300px;
}
h2 , p {
text-align: center;
color: #9c27b0;
}
ul{
text-align: center;
}
</style>
<body>
<div class = "main" >
<section>
<h2> Section Part </h2>
<p> Some Text </p>
</section>
<article>
<h2> Article Part </h2>
<p> Some Detailed Text </p>
</article>
<aside>
<h2> Sidebar Part </h2>
<p> This will contain static part or anything like advertisement etc. </p>
</aside>
</div>
</body>

ログイン後にコピー

出力:

HTML レイアウト

6.

この要素は、Web ページに関する追加の詳細をユーザーに表示します。これには、ユーザーにとってオプションの追加情報が含まれる場合があります。この要素はデフォルトで、クリック時に詳細を表示または非表示にする機能を提供します。

7. <概要>

この要素は

とともに使用されます。要素。非表示にし、クリックすると表示する情報はこのタグ内にあります。この要素は、details 要素内にあります。

コード:

既存の例に、summary 要素とともに詳細要素を追加してみましょう。の余談セクションと記事要素部分の後に以下のコードを追加します。タグ。

<body>
<details>
<summary> Summary: click here to show details</summary>
<p> Details: Upon clicking summary element, details will be shown to the user </p>
</details>
</body>
<style>
details {
margin-top: 330px;
width: 100%;
padding-top: 10px;
padding-bottom: 50px;
padding-left: 15px;
background-color: #607d8bdb;
}
details p {
font-size: 18px;
}
summary {
color: white;
font-size: 22px;
}
</style>

ログイン後にコピー

出力 1: 詳細要素をクリックしません。

HTML レイアウト

出力 2: 詳細要素をクリックした後。

HTML レイアウト

8. <フッター>

各 Web ページの下部には、フッターと呼ばれるセクションが 1 つあります。この<フッター>要素は、Web ページの下部にあるフッターセクションを定義します。フッターセクションには通常、著作権、発行年、連絡先情報などが含まれます。Web ページの下部にフッターを配置するのが標準的な方法です。

コード:

Web ページの下部にフッターを追加しましょう。

<footer style = " height: 100px; background-color:#607D8B; width: 100%; text-align: center;">
<h3 style = " color: #fff; text-align: center; padding-top: 10px; font-size: 30px; " >Footer Section</h3>
<p> © Copyright ( Year ) </p>
</footer>

ログイン後にコピー

出力:

HTML レイアウト

最終的なコードとその出力は次のようになります。

コード:




 EduCba 




 Header Section 



  Navigation Link1  
  Navigation Link2  
  Navigation Link3  




 Section Part 
 Some Text 


 Article Part
 Some Detailed Text 


 Sidebar Part 
 This will contain static part or anything like advertisement etc. 



 Summary: click here to show details 
 Details: Upon clicking summary element, details will be shown to the user 

<footer style = " height: 100px; background-color:#607D8B; width: 100%; text-align: center;">
<h3 style = " color: #fff; text-align: center; padding-top: 10px; font-size: 30px; " >Footer Section</h3>
<p> © Copyright ( Year ) </p>
</footer>

ログイン後にコピー

出力:

HTML レイアウト

結論

つまり、HTML レイアウト要素は、Web ページをデザインするときに非常に役立ちます。これらは、開発者が適切に構造化された Web ページをデザインするのに役立ちます。これらのレイアウト要素を適切に使用すると、Web ページの読み取りエクスペリエンスが向上します。主要な HTML レイアウト要素のほとんどを詳しく説明しました。

以上がHTML レイアウトの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。