人気ホームページが作れる簡単作成講座

人気ホームページが作れる簡単作成講座
テーブル、表はレイアウトに使うものではない 　（<table>,<tr>,<th>,<td>）

テーブル、表はレイアウトに使うものではない 　（<table>,<tr>,<th>,<td>）

プロのWebデザイナーでさえ、レイアウトに使っている<table>ですが、レイアウトに使うものではありません。CSSの登場によりCSSでのレイアウト構築が可能となり、テーブルレイアウトは減っているものの、まだまだ間違った使い方をしているホームページがあります。

並列的な箇条書き

<table>はレイアウトを構築するためのタグではありませんが、表を構築する重要なタグです。時間割のようなブロック分けされる一覧表を構築することで、多くの情報を分かりやすくまとめたり、見やすくすることができます。

<table>の中に横一列を示す<tr>、ヘッダーセル・見出しセルの<ｔｈ>、データセルの<td>で形成され、タグが多いため複雑ですが、HTMLソースとプレビュー画像を比べて、タグと表の位置関係を覚えてください。

<th>は自動的に太字、中央揃えになります。<table>タグにはsummary属性で表、テーブルの要約を入れることで、音声ブラウザで読まれるため、何をまとめた表かがわかります。

<table summary="テーブルタグの使い方">
<tr>
<th>ヘッダーセル１</th>
<th>ヘッダーセル２</th>
</tr>
<tr>
<td>データセル１</td>
<td>データセル２</td>
</tr>
<tr>
<td>データセル３</td>
<td>データセル４</td>
</tr>
</table>
table
table tr
table tr th td
テーブルタグの使い方

  ↑CSSでスタイルを指定しています

複雑な表の組み方

rowspan, colspanという属性を指定することで、セルを連結し複雑な表を構築することができます。

<table summary="rowspan, colspanの使い方">
  <tr>
    <th>th1</th>
    <th>th2</th>
    <th>th3</th>
    <th>th4</th>
  </tr>
  <tr>
    <th rowspan="2">th5 rowspan="2"</th>
    <td>td1</td>
    <td>td2</td>
    <td>td3</td>
  </tr>
  <tr>

    <td>td4</td>
    <td>td5</td>
    <td>td6</td>
  </tr>
  <tr>
    <th>th6</th>
    <td>td7</td>
    <td colspan="2">td8 colspan="2"</td>

  </tr>
</table>
th1 th2 th3 th4
th5 rowspan="2" td1 td2 td3
td4 td5 td6
th6 td7 td8 colspan="2"

↑スタイルを指定してるため、色が付いています。

表のデザイン

線の色を変える

<table style="background-color:#ff0000">
th1 th2 th3 th4
th5 rowspan="2" td1 td2 td3
td4 td5 td6
th6 td7 td8 colspan="2"

セル内の背景色を変える

<th style="background-color:#ffcccc">
<td style="background-color:#ffffff">
th1 th2 th3 th4
th5 rowspan="2" td1 td2 td3
td4 td5 td6
th6 td7 td8 colspan="2"

線の幅を変える

<table cellspacing="2">
th1 th2 th3 th4
th5 rowspan="2" td1 td2 td3
td4 td5 td6
th6 td7 td8 colspan="2"

セルの内側の余白の幅を変える

<table cellpadding="15">
th1 th2 th3 th4
th5 rowspan="2" td1 td2 td3
td4 td5 td6
th6 td7 td8 colspan="2"
＜＜前のページ　　次のページ＞＞
このページをブックマークする→　Yahoo!ブックマークに登録 Yahoo!ブックマークに登録

Webデザイン

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

▼すぐに役立つXHTML/HTML

▼すぐに役立つCSS（スタイルシート）

ホムつくメールマガジン　〜プロが明かす〜 これが人気ホームページの裏側だ！

メルマガ配信スタンド「まぐまぐ」　まぐまぐ殿堂入りメルマガ  （「まぐまぐ」にて殿堂入りしました）
ホームページ作成を一人で頑張るのもいいですが、仲間と一緒に頑張りませんか？
人気ホームページの作り方やホームページ運営者の生の声などの情報を発信していますので、ぜひあなたも購読してみてください。

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

ホムつく講座の講師はこんなヤツ！ホームページを作っていたら、この楽しさを、あなたに伝えてくなりました。ホムつく式のホームページの作り方を体験してみてください。
→プロフィール
→お問い合わせ

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

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

→スタートガイド

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

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

→初心者講座

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

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

→Webデザイン

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

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

→人気ホームページ