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

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

HTML レイアウト要素

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

1. <ヘッダー>

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

コード:

    EduCba  
    Header Section

ログイン後にコピー

出力:

HTML レイアウト

2. <ナビ>

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

コード:

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

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

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

  
      Navigation Link1  
   Navigation Link2  
   Navigation Link3

ログイン後にコピー

出力:

HTML レイアウト

3. <セクション>

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

4. <記事>

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

5. <余談>

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

コード:

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

     Section Part 
  Some Text 
 
   Article Part 
  Some Detailed Text 
 
   Sidebar Part 
  This will contain static part or anything like advertisement etc.

ログイン後にコピー

出力:

HTML レイアウト

6.

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

7. <概要>

この要素は

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

コード:

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

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

ログイン後にコピー

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

HTML レイアウト

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

HTML レイアウト

8. <フッター>

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

コード:

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

 Footer Section
  © Copyright ( Year )

ログイン後にコピー

出力:

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 Section
  © Copyright ( Year )

ログイン後にコピー

出力:

HTML レイアウト

結論

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

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