トップ > インターネット > ホームページ作成・素材 > HTMLの基礎−タグを覚えてウェブページを作ろう!−

ホームページはHTMLタグの知識とテキストエディタさえあれば作成できます。またタグを理解していればサイトの細かい部分まで手が届きます。でも、わからない・・そんな方にお送りする初心者向けのHTMLタグ講座「HTMLの基礎」。

RSS


メルマガの登録・解除

登録した方には、メルマ!からオフィシャルメルマガ(無料)をお届けします。



HTMLの基礎 Vol.32 列のグループ化(col・colgroup)

発行日:2/4

*――*――*――*――*――*――*――*――*――*――*――*――*――*――*

    HTMLの基礎 −タグを覚えてウェブページを作ろう!−

      2005/02/04(Fri) Vol.32       執筆:ykr
              http://ykr.main.jp/html/index.html

*――*――*――*――*――*――*――*――*――*――*――*――*――*――*

   ◆◇◇◇◆◇◇◇◆◇◇◇◆◇◇◇◆◇◇◇◆◇◇◇◆◇◇◇◆   

   1.テーブルの列のグループ化設定 <col><colgroup>

   ◆◇◇◇◆◇◇◇◆◇◇◇◆◇◇◇◆◇◇◇◆◇◇◇◆◇◇◇◆   


  連日続いたすさまじい寒さに比べると、今日はとても暖かい感じがしま
  す。水溜りも凍るような寒さで、ここ数日体調があまりすぐれません。
  子供の頃は雪が降ったら嬉しくてしょうがなかったのに、今は寒いと外
  出するのが億劫です。

  先ほど気付いたのですが、このメルマガのトップに書かれた日付の箇所
  が「2004」のままでした・・(汗)という事は年が明けてから、ずっと「
  2004」のままだったことになります。そんなに重要でないとは思います
  が、正しくは「2005」です。

  さて、今回は以前学習したテーブルに関するタグで、まだ学習していな
  かったものがあるので、それを説明します。しかし私はややこしくなる
  ので細かい指定は好きではないのですが・・

  それでは今回も最後までお付き合いよろしくお願い致します。


  ※注意  HTMLのバージョンは4.01です。
       発刊時点で非推奨とされてるものも掲載しています。
       表示確認しているブラウザは、WinIE6、WinNN7、MacIE5.2
       MacNN7です。その他のブラウザでの表示は未確認ですので
       意図したとおりにならないことがあります。


━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━


1.テーブルの列のグループ化設定 <col><colgroup>


  例えば、何列何行ものセルに分けられたテーブルがあるとし、文字列の
  配置やセルの背景色・セルの横幅等、列毎に異なった属性を指定したい
  場合に、<col>や<colgroup>を使用して列をグループ化し、属性を設定す
  ることができます。

  <colgroup>だけでも使用することが出来ますが、<colgroup>で何列かの
  グループ分けを行ってから、更に<col>で個々の列の設定を行う事もでき
  ます。わかりにくいと思うので例を挙げて説明します。


----------------------------------------------------------------------


 ■例

<table border="1">
  <colgroup width="100" align="center">
  </colgroup>
  <colgroup>
  <col span="2" width="50" align="center">
  <col span="1" width="100" align="right" bgcolor="#cccccc">
  </colgroup>
<tr>
<th>氏名</th><th>1地区</th><th>2地区</th><th>計</th>
</tr>
<tr>
<td>AAA</td><td>3</td><td>3</td><td>6</td>
</tr>
<tr>
<td>BBB</td><td>2</td><td>5</td><td>7</td>
</tr>
<tr>
<td>CCC</td><td>4</td><td>0</td><td>4</td>
</tr>
</table>


  上記のテーブルで、少しインデントされている部分が<col>、<colgroup>
  の使用されている部分です。

  まず、始めの<colgroup>では1列目に対し、横幅100ピクセル、中央揃え
  を指定しています。

  そして、次の<colgroup>・<col>では、まず<colgroup>で3列をグループ
  化し、<col>のspan属性に「2」を指定する事で真ん中の2列に、横幅50
  ピクセル・中央揃えを設定、次の<col>ではspan属性に「1」を指定して
  右端の1列に対して横幅100ピクセル・右揃え・背景色「#cccccc」を設
  定しています。

  <col>のspan属性には、<colgroup>内の個々の列に対して更に細かく設定
  を行いたい場合に、設定する列数を記述します。
  ただ、OSやブラウザによって対応している属性が違うので、注意して
  ください。


━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━


  それでは、いつもと同じ手順でHTML文書を作成して表示を確かめて
  みましょう。面倒な方は前回の続きに上書きしても良いでしょう。

  今回は上の例で使用したテーブルをそのまま表示してみます。


----------------------------------------------------------------------


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=Shift_JIS">
<title>列のグループ化</title>
<base href="http://ykr.main.jp/html/">
</head>

<body>
<h1>列のグループ化</h1>
<h2>テーブル内の列をグループ化してみる</h2>
<hr>
<table border="1">
<colgroup width="100" align="center">
</colgroup>
<colgroup>
<col span="2" width="50" align="center">
<col span="1" width="100" align="right" bgcolor="#cccccc">
</colgroup>
<tr>
<th>氏名</th><th>1地区</th><th>2地区</th><th>計</th>
</tr>
<tr>
<td>AAA</td><td>3</td><td>3</td><td>6</td>
</tr>
<tr>
<td>BBB</td><td>2</td><td>5</td><td>7</td>
</tr>
<tr>
<td>CCC</td><td>4</td><td>0</td><td>4</td>
</tr>
</table>

<p>
ブラウザなどによっては、対応していない属性もあるので意図したとおりに
表示されないこともあります。
</p>
</body>
</html>


----------------------------------------------------------------------


  さて、記述できたらファイルを保存します。
  前回のファイルに追加したという方は、上書き保存か名前をつけて、新
  しく保存して下さい。拡張子は「.html」です。


----------------------------------------------------------------------


  ・・説明するまでも無いですが・・

 ■<colgroup width="100" align="center">
  </colgroup>


  一番初めの列に横幅100ピクセル・中央揃えを指定しています。


 ■<colgroup>
  <col span="2" width="50" align="center">
  <col span="1" width="100" align="right" bgcolor="#cccccc">
  </colgroup>


  グループ化した3列のうち、左から2列は横幅50ピクセル・中央揃え
  を指定、一番右の列には横幅100ピクセル・右揃え・背景色「#cccccc」
  を指定しています。


━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━


来週は・・・

   ◆◇◇◇◆◇◇◇◆◇◇◇◆◇◇◇◆◇◇◇◆◇◇◇◆◇◇◇◆   

   1.削除された物である事を示す <del>

   2.キーボードから入力する文字列を示す <kbd>

   ◆◇◇◇◆◇◇◇◆◇◇◇◆◇◇◇◆◇◇◇◆◇◇◇◆◇◇◇◆   

(予告なく変更する事があります)


■ 雑記 ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■


  今回も最後まで付き合ってくださった方、お疲れ様でした。

  かなりの数のタグを掲載したと思っていましたが、改めて書き並べてみ
  るとまだ結構説明していないタグが残っている事に気づきました。
  とはいっても、余り使用されないものが大半だと思います。しかし一応
  説明していきます。

  私は頭痛持ちでしょっちゅう頭痛に悩まされます。仕事柄仕方がない部
  分もあるのですが、今朝もおきてからその兆候があり、しばらくすると
  いてもたってもいられないくらい辛くなったので、薬を飲んでしばらく
  横になっていました。薬が効いてきて楽になったと思った瞬間、メルマ
  ガを作成していない事に気付き、別の意味で頭が痛かったです・・

  さて次回学習するタグもものすごく簡単です。余り使用することは無い
  と思うので、こんなタグもあるんだなんて位に思っていてください。

  それではまた次回もよろしくお願いいたします。


━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

■■■「HTMLの基礎」姉妹サイトです。よろしくお願いします。■■■■

■■■「全部まるごとスタイルシート」
■   http://ykr414.com/css/index.html
■   スタイルシート辞典です。プロパティごと、または目的ごとに引
■   け、ブラウザの対応状況なども掲載しています。
■   HTMLに加える事で、より細かいレイアウトの指定が可能に。
■   コピーペーストするだけで利用できるテンプレートのページも。

■■■「コマンドプロンプトを使ってみよう!」
■   http://ykr414.com/dos/index.html
■   コマンドプロンプトとは何かから始まり、バッチファイルの作成
■   法や、コマンド別・目的別に引けるコマンド辞典。
■   初心者でもわかるよう細かく説明。

■■■「伸び縮みマークアップ言語 XML」
■   http://ykr414.com/xml/index.html
■   SGMLのサブセットであるXMLは、ネット上で扱うデータを
■   記述するためのデータフォーマットで、柔軟性のある言語構造を
■   持っており、プログラムで自在にデータを情報処理できます。そ
■   のXMLを実際に文書を作成しながら解説。随時追加更新。

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■


・makers     http://ykr414.net/makers/
         ダイエットグッズ、美味しいもの、かわいいもの
         セレクトショップ。ちょっと珍しいグッズ・便利な
         サービスなどの情報も掲載。
         コラムなどのコンテンツもあります。


*――*――*――*――*――*――*――*――*――*――*――*――*――*――*
  Auther       ykr
  Mail         ykr414@yahoo.co.jp
  URL          http://ykr.main.jp/html/index.html
  Copyright    (C)2004 ykr414. All rights reserved.
  Attention    掲載記事の無断転載を禁じます
*――*――*――*――*――*――*――*――*――*――*――*――*――*――*

最新の記事

ブックマークに登録する

TwitterでつぶやくLismeトピックスに追加するdel.icio.usに追加Buzzurlにブックマークニフティクリップに追加Yahoo!ブックマークに登録記事をEvernoteへクリップ
My Yahoo!に追加Add to Google

規約に同意してこのメルマガに登録/解除する

登録した方には、メルマ!からオフィシャルメルマガ(無料)をお届けします。


この記事へのコメント

コメントを書く


上の画像で表示されている文字を半角英数で入力してください。

※コメントの内容はこのページに公開されます。発行者さんだけが閲覧できるものではありません。
コメントの投稿時は投稿者規約への同意が必要です。

  1. コメントはありません。

このメルマガもおすすめ

  1. @(あっと)驚く!エクセル好きルアップ  

    最終発行日:
    2011/05/26
    読者数:
    4068人

    エクセル(Excel)の基礎から裏ワザまで... D-UP発行のマガジンは、1問1答の形式、詳細な解説付きで配信。さらに連動した懸賞サービスもあり、スキルとプレゼントを同時にゲット。映画情報もあるよ

  2. これ知ってます?Wordの小ワザ&便利ワザ

    最終発行日:
    2011/05/26
    読者数:
    4683人

    D-UPが送る、ほほー!っと納得ワード(Word)の小ワザ&便利ワザをクイズ形式で楽しく学んでいきます。知ってて損することはありません。あなたの文章にアクセントをつけてみませんか?懸賞のチャンスもWでお得。

  3. 全部フリーソフト!!

    最終発行日:
    2014/02/26
    読者数:
    4888人

    ネット上にはこんなに便利なソフトがいっぱい。仕事にも、遊びにも、あると絶対にお得で楽しいソフトを1つずつご紹介します。

  4. 高橋浩子の日本一“お気楽”なパソコンマガジン

    最終発行日:
    2017/01/14
    読者数:
    1130人

    「クスッと笑えてタメになる」をモットーとするテクニカルライター高橋浩子が魂を込めてお届けする週刊メルマガ。パソコン講座を中心に、便利ネタやおすすめサイトもご紹介。とにもかくにも、“お気楽”に楽しめる異色のエンターテイメントマガジンである。

  5. C#プログラミングレッスン

    最終発行日:
    2014/09/30
    読者数:
    973人

    C#での .NETプログラミングを易しく丁寧に解説するメールマガジンです。「C#プログラミング・レッスン」で、.NETプログラミングをマスターしましょう。

発行者プロフィール

過去の発行記事