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

HTMLレイアウト入門：セマンティック要素と主要なレイアウト手法を徹底解説

HTMLレイアウトとは

HTMLレイアウトとは、Webページ上に配置される各コンポーネント（ヘッダー、ナビゲーション、本文、フッターなど）の配置構造を定義する仕組みのことです。HTMLには、ページ内のさまざまなセクションを意味的に示すためのセマンティック要素が数多く用意されており、これらを活用することで、検索エンジンやスクリーンリーダーにも伝わりやすい、アクセシブルなページ構造を作れます。

HTMLレイアウトで使用される主なセマンティック要素

以下は、HTMLレイアウトでよく使われるセマンティック要素の一覧です。

タグ説明
<header>セクションまたはドキュメント全体のヘッダー（見出し領域）を定義します。
<section>ドキュメント内のひとつのセクション（章や区切り）を表します。
<nav>ナビゲーションリンクのまとまり（メニューや目次など）を格納するコンテナです。
<article>単体で成立する独立した記事コンテンツ（ブログ記事やニュース記事など）を表します。
<aside>メインコンテンツから切り離された補足情報（サイドバーなど）を表します。
<footer>セクションまたはドキュメント全体のフッター（著作権表示や連絡先など）を定義します。
<details>ユーザーが開閉できる追加情報（詳細説明）を格納するタグです。
<summary><details> 要素の見出し（開閉ラベルとして表示される部分）を定義します。

HTMLレイアウトを実現する主な手法

Webページのレイアウトを組む際には、以下のような技術が利用されます。

  • CSS float プロパティ（従来からの定番手法）
  • CSS Flexbox（柔軟な1次元レイアウト）
  • CSSフレームワーク（Bootstrapなど）
  • CSS Grid（2次元グリッドレイアウト）
  • HTMLテーブル（現在は推奨されない旧式の手法）

コード例

それでは、HTMLレイアウトの具体的なサンプルコードを見てみましょう。ここでは <header>、<nav>、<article>、<footer> を組み合わせた基本的なページ構造を、CSS float を使って実装しています。

<!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>

出力結果

このコードをブラウザで表示すると、上部に黒背景のヘッダー、左側にナビゲーションメニュー、右側に白背景の記事エリア、下部にフッターが配置された、典型的な2カラムレイアウトのページが描画されます。

HTMLレイアウト入門：セマンティック要素と主要なレイアウト手法を徹底解説


  1. HTMLレイアウト入門：セマンティック要素と主要なレイアウト手法を徹底解説

    HTMLレイアウトとは HTMLレイアウトとは、Webページ上に配置される各コンポーネント（ヘッダー、ナビゲーション、本文、フッターなど）の配置構造を定義する仕組みのことです。HTMLには、ページ内のさまざまなセクションを意味的に示すためのセマンティック要素が数多く用意されており、これらを活用することで、検索エンジンやスクリーンリーダーにも伝わりやすい、アクセシブルなページ構造を作れます。 HTMLレイアウトで使用される主なセマンティック要素 以下は、HTMLレイアウトでよく使われるセマンティック要素の一覧です。 タグ説明 <header>セクションまたはドキュメント全体

  2. HTMLエディターとは？代表的な無料エディターの特徴を徹底解説

    HTMLエディターとはHTMLエディターとは、HTMLドキュメントの作成・編集を行い、場合によってはその場で実行までできるツールのことです。現在では、無料・有料を問わず、プロフェッショナル向けの高機能なHTMLエディターが数多く提供されています。Windows標準のメモ帳（Notepad）にはない、テーマのカスタマイズやターミナル連携といった付加機能を備えたエディターも多く、用途やスキルレベルに合わせて選ぶことができます。ここでは、特によく使われている代表的なHTMLエディターをご紹介します。Notepad（メモ帳）最も基本的な無料HTMLエディターの一つです。Windowsに標準搭載されてお