ホムつく式 Webデザイン講座

人気ホームページが作れる簡単作成講座
文章構造の基本は見出しとパラグラフ (<h1>〜<h6>,<p>)

文章構造の基本は見出しとパラグラフ (<h1>〜<h6>,<p>)

テキストは見出しとなる部分と、その見出しの内容を書いた本文とに分かれます。
XHTML/HTMLでの文章構造を示す上で、最も基本的な部分ですのでしっかりマスターしてください。

見出しには<h1>〜<h6>を使う

見出しを示すのがhタグで、<h1>〜<h6>まで6段階に分かれます。<h1>〜<h6>で囲まれた見出しは文字の大きさや、太さが変化します。また、タグに囲まれた文字の前後には余白が入りますが、余白が不要な場合<margin>で指定することが可能です。

<h1>や<h2>は極端に大きな文字サイズなので、一般的にCSS(スタイルシート)の
font-sizeによって文字サイズを指定して使われることが多いです。

<h1>見出し1</h1>
<h2>見出し2</h2>
<h3>見出し3</h3>
<h4>見出し4</h4>
<h5>見出し5</h5>
<h6>見出し6</h6>
hタグ使用時の文字の大きさ

重要度と使用順序

hタグはそれぞれ重要度に違いがあり、最も重要な見出しには<h1>を使い、番号が上がるにつれ重要度も下がります。そのため、文章構造を組み立てるためには<h1>〜<h6>を正しい順序で使用し、文章構造を全体で組み立ててください。また、<h1>は最も重要な見出しであるため、同じWebページ内には1度しか使うことはできません。

<h1>はホームページ名(企業名、ショップ名)に使われることが多いですが、ホームページ名が重要でない場合、ページタイトルに<h1>を使うこともあります。


<h1> </h1>
<h2> </h2>
<h2> </h2>
<h3> </h3>
<h3> </h3>
<h4> </h4>
<h4> </h4>

<h1> </h1>
<h2> </h2>
<h3> </h3>
<h3> </h3>
<h2> </h2>
<h3> </h3>
<h4> </h4>
×
<h1> </h1>
<h3> </h3>
<h3> </h3>
<h4> </h4>
<h2> </h2>
<h3> </h3>
<h4> </h4>
×
<h1> </h1>
<h2> </h2>
<h3> </h3>
<h1> </h1>
<h2> </h2>
<h3> </h3>
<h4> </h4>

hタグは見た目を変えるために使うべきではない

XHTML/HTMLは文章の構造を指定するものです。<h1>〜<h6>を使うと、自動的に文字の大きさが変更されますが、<h1>〜<h6>を視覚効果(見た目、デザイン)のために使用するべきではありません

デザインの指定はCSS(スタイルシート)を使います。
文字のサイズを変えるのであれば、font-size
文字を太字にするのであれば、font-weidht
を使います。

本文には<p>を使う (パラグラフ・段落)

見出しとともに使われることが多いのが<p>(パラグラフ・段落)です。見出しの下へ、見出しが示す内容を<p>を使って記載します。<h>同様、文字の大きさが変化し、前後に余白が含まれます。

とても使用頻度が高く、ホームページ作成ソフトでは自動的に挿入されることもありますが、<p>もパラグラフ、段落という意味を持ち、コンテンツの重要なテキストに使われます。特に重要でないテキストは、<div>タグで囲むのが一般的。

<h2>ホームページ【home page】</h2>
<p>Webサイト、もしくはそのトップページ。サイトのトップではないWebページをホームページと呼ぶこともある。また、Webブラウザを起動したとき最初に表示されるページ。</p>
<h3>当初は・・</h3>
<p>ブラウザ起動時に最初に表示されるページのだったが、転じてWebサイトのトップページのことを意味するようになり、さらに、Webサイト・Webページの同義語として用いられるようになった。</p>
<h3>現在では・・</h3>
<p>ブラウザ起動表示ページは「スタートページ」と呼ぶのが一般的で、「ホームページ」をこの意味で用いられることはほとんどなくなった。初期のなごりとして、Webブラウザのメニューや設定に「ホーム」「ホームページ」という項目が残っている。</p>
hタグとpタグの使い方

(「ホームページ」について IT用語辞典 e-Wordsより抜粋)

このページをブックマークする→ Yahoo!ブックマークに登録 Yahoo!ブックマークに登録

Webデザイン

Webデザイン力を磨いて、自分らしいホームページを作ろう
分かりやすいがアップさせるWebデザイン
  • 見るメディアではなく、使うメディア
  • ホームページ全体のデザインに統一性を持たせる
  • レイアウトにルールを持たせる
  • ナビゲーションに統一性を持たせる
  • 現在地を示す
  • リンクをはっきりと示す
色を味方に付けるWebデザイン
  • 色の基本を学ぶ
  • 色の持つイメージからテーマカラーを決める
  • 配色のポイント(減らす、無彩色)
  • 読みやすさを損なわない配色
XHTMLとCSS(スタイルシート)の理解を深める
  • XHTMLとCSSを理解することがデザイン性を高める
  • ホームページ作成ソフトがダメにした

▼すぐに役立つXHTML/HTML

▼すぐに役立つCSS(スタイルシート)

このページのトップへ戻る
ホムつく講座の講師は
こんなヤツ!

ホムつく講座の講師はこんなヤツ!ホームページを作っていたら、この楽しさを、あなたに伝えてくなりました。ホムつく式のホームページの作り方を体験してみてください。

→メッセージ

ホームページ作成に
必要なものは?

ホムつく講座がおすすめするソフトやレンタルサーバーを紹介しています。初心者の方や、悩んでいる方は是非参考にしてみてください。

→スタートガイド

ホームページを初めて作るのですが・・

ホームページはXHTMLとCSSで作ります。ほむつく講座では初心者の方にわかりやすいと評判の初心者講座があります。

→初心者講座

もっとデザインを
良くしたい

ホムつく講座では見た目だけが良いデザインではなく、ユーザー(利用者)の方が安心して、ホームページを閲覧できるデザインを学べます。

→Webデザイン

ホームページにアクセスが集まりません

ホームページは作れば沢山のアクセスが集まるわけではありません。そして、アクセスが多いだけのホームページでも意味がありません。あなたのファンができる人気ホームページを作り方を学びましょう。

→人気ホームページ