HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTMLレイアウト

HTMLレイアウトは、HTMLWebページ上のコンポーネントの配置を指定します。 Webページのさまざまなセクションを定義する多くのHTMLセマンティック要素があります。

HTMLレイアウトに使用されるセマンティックHTML要素は次のとおりです。

タグ 説明
ヘッダー セクションまたはドキュメントのヘッダーを指定します。
セクション ドキュメント内のセクションを表します。
nav ナビゲーションリンクのコンテナを指定します。
記事 独立した自己完結型の記事を指定します。
脇 メインコンテンツ以外のコンテンツ（サイドバーなど）のタグを指定します。
フッター セクションまたはドキュメントのフッターを指定します。
詳細 追加の詳細のタグを指定します。
概要
要素のヘッダーを指定します。

HTML Webページのレイアウトに使用される手法：

  • CSSフロートプロパティ
  • CSSフレックスボックス
  • CSSフレームワーク
  • CSSグリッド
  • HTMLテーブル

例

HTMLレイアウトの例を見てみましょう：

<!DOCTYPE html>
<html>
<style>
   * {
      box-sizing: border-box;
   }
   body {
      color: #000;
      background-color: #8BC6EC;
      background-image: linear-gradient(135deg, #8BC6EC 0%, #9599E2 100%);
      text-align: center;
   }
   header {
      background-color: #000;
      padding: 20px;
      text-align: center;
      color: white;
   }
   nav {
      float: left;
      width: 20%;
      height: 200px;
      background: #282828;
      padding: 60px 10px;
   }
   nav ul {
      list-style-type: none;
      padding: 0;
   }
   nav ul li a {
      text-decoration: none;
      color: #fff;
   }
   article {
      float: left;
      padding: 80px 10px;
      width: 80%;
      background-color: #fff;
      height: 200px;
      text-align: center;
   }
   section:after {
      content: "";
      display: table;
      clear: both;
   }
   footer {
      background-color: #000;
      padding: 20px;
      text-align: center;
      color: white;
   }
</style>
<body>
<h1>HTML Layouts Demo</h1>
<header>This is Header</header>
<section>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<article>This is an article element.</article>
</section>
<footer>This is Footer</footer>
</body>
</html>

出力

HTMLレイアウト


  1. HTMLレイアウト

    HTMLレイアウトは、HTMLWebページ上のコンポーネントの配置を指定します。 Webページのさまざまなセクションを定義する多くのHTMLセマンティック要素があります。 HTMLレイアウトに使用されるセマンティックHTML要素は次のとおりです。 タグ 説明 ヘッダー セクションまたはドキュメントのヘッダーを指定します。 セクション ドキュメント内のセクションを表します。 nav ナビゲーションリンクのコンテナを指定します。 記事 独立した自己完結型の記事を指定します。 脇 メインコンテンツ以外のコンテンツ（サイドバーなど）のタグを指定します。 フッター セクション

  2. HTMLエディター

    HTMLエディターは、HTMLドキュメントを（場合によっては）作成して実行するためのツールです。ユーザーが利用できるプロのHTMLエディターがいくつかあります（有料と無料の両方）。 テーマ、端末サポートなど、特定のアドオン機能はメモ帳以外のさまざまなHTMLエディタで提供されます。 以下は、一般的に使用されるHTMLエディタの一部です- メモ帳 最も基本的な無料のHTMLエディタの1つ。 Notepad ++ Notepad++はフリーテキストエディタでもあります。 C ++で記述され、構文の強調表示、プログラミング、スクリプトなどの制限付きオートコンプリートなどの機