HTML コーディングガイド

デザイン（レイアウト）からHTMLのベースを作る（４：サイドバー）

サイドバーは<body>要素全体から見た場合、本文ではないということで、<aside>を使うか、汎用的なブロックを示す<section>を使います。

レイアウトイメージ

前回までに作成したブロックの内容を、個別に作成していきます。 Read on …

HTMLファイルのベースは、<html>タグ、<head>タグ、<body>タグの3つがあり、<body>タグの中に全ての内容を記述します。


<html>
    <head>
        <title>ページタイトル</title>
    </head>
    <body>
        <h1>ページタイトル<h1>
        <p>この部分が本文<p>
    </body>
</html>

レイアウトをおおまかに矩形（ブロック）で分割し、それぞれに矩形がどのような意味を持っているかを考えます。 Read on …

レイアウトからＨＴＭＬに変換する方法です。

このようなレイアウトのウェブページを作る場合、Dreamweaverやホームページビルダーで作成する時は、レイアウトテーブルを挿入してそれぞれのセルにヘッダーやフッター、本文などを記入していくという方法が採られていました。（テーブルレイアウト）

ですが、この方法は、レイアウトがきっちり出来るという反面、音声ブラウザやテキストブラウザで読む場合に、文章の前後関係がつかみにくいなどの問題があり、また、検索サイトに登録されるときに文章の抜粋、キーワードの取得がうまくいかず、登録されないなどの問題もありました。 Read on …