締切済み

テーブルタグを使わず、テーブルの中に文字を入れる

2014/10/25 22:37

http://www.tagindex.com/html_tag/index.html こちらのサイトで、「HTMLタグリファレンス」の部分や、「HTMLタグ」の部分は、文字の背景がテーブルっぽくなっているのに、ソースを見ると <h1>HTMLタグリファレンス</h1>や <h2>HTMLタグ</h2>になっていて、テーブルのタグは使われていないのはなぜなのでしょうか？テーブルタグを使わず、テーブルの中に文字を入れるように表示するには、どうすればいいでしょうか？ <div id="title">等で、操作しているのですか？

zigolvizv
お礼率84% (33/39)

HTML
回答数4
ありがとう数0

みんなの回答 （4）
専門家の回答

みんなの回答

-has
ベストアンサー率100% (1/1)

2014/11/01 03:19 回答No.4

Tableタグを使うのが古い方法で、表（table）を作らない場合はスタイルシートで表のように見せる（デザインする）ようにしましょう、という流れになっているためです。例を挙げます。 ■htmlファイルで直接デザインするケース（昔） <h1 style="border:1px solid #000;background:#ccc">HTMLタグリファレンス</h1> とHTMLファイルに書いてみましょう。 style="○○"とは、「1ピクセルのまっすぐな黒い線で囲って、背景をグレーにしなさい」というデザインの指示です。 h1タグに背景色をつけると、tableタグのようにその行いっぱいに色がつきます。 tableタグを使わなくても、このようにデザインすることができます。 ■外部スタイルシートでデザインするケース（今） <h1>HTMLタグリファレンス</h1> とタグだけシンプルにHTMLファイルに書いてみます。そのHTMLファイルの<head>～</head>の間に <link rel="stylesheet" type="text/css" href="style.css" media="all"> と書き、そのhtmlファイルが置いてあるルートと同じ場所にstyle.cssというファイルを作ります。これは、このHTMLファイルはstyle.cssというファイルに書いてあるデザインを読み込みなさい、という指示です。 style.cssというファイルの中には、 h1{border:1px solid #000;background:#ccc} とstyle.cssに記述すると、（昔）のケースと全く同じように表示されます。仮に、1万ページhtmlファイルのある巨大サイトを作ったあとに、デザインを変えたくなった時のことを考えてみてください。例えば線のデザインを1pxではなく5pxにしたくなった場合、各1万ページ分のhtmlファイルがstyle.cssという1枚のファイルを読み込んでいる場合は、style.css1枚の内容を1か所書き換えれば、1万ページ全部のhtmlファイルは何の変更をせずにすべて5pxのデザインに変更することができます。しかしもし昔のようにCSSファイルを使わず、各1万ページのHTMLのh1やtableタグに、色や線の情報をそれぞれ書き込むと、1万ページ全部、h1タグの1pxというところを5pxに直さなければなりません。そのようなメンテナンスの煩雑さを避けるために、見た目のデザインなどはスタイルシートに書きましょう、となってきました。これが、外部スタイルシートの始まりです。がんばって学んでみてくださいネ。

ORUKA1951
ベストアンサー率45% (5062/11036)

2014/10/26 11:07 回答No.3

スタイルシート部分です。 ★ 印刷には適用しないようにしてある。文字が白いので印刷しても見えないのでね、　携帯電話でアクセスすると、シンプルなHTMLで表示される。 ★ ウィンド幅に依存しない。　ウィンド幅を狭めたり、Ctrl+＋,Ctrl+－で拡大したり縮小してみる。 ★HTMLにはtableはもちろん、プレゼンテーションに関わる一切の事は書かれていないので、　・文書の改訂がとても楽・・例えば<li>項目を増やすとかしてもtableじゃないので　・印刷用、携帯用とデザインを分けられる。　　　黒の背景で白文字なんかだと分けないと　・視覚障害者がスクリーンリーダーや点字端末で利用できる。　・デザインは、HTML本体を弄らず、あとから自在に変更できる。　　例えば、ナビゲーションリストを様々にデザインしてみよう。( http://www.ichiya.com/WebService/Howto/sample/HTML/nav/navigation1.html )のサイトで、ブラウザの[表示]→[スタイル(シート)]で、スタイルを変更するとHTMLはそのままでデザインが変わる。　・スタイルシートを外部ファイルにするとスタイルシート書き換えるだけですべてのページのデザインが変えられる。 <style type="text/css">  </style> <style type="text/css" media="screen">  </style> <style type="text/css" media="print">  </style> ＞<div id="title">等で、操作しているのですか？　HTMLでは文書構造だけをマークアップし、デザインはスタイルシートに任せてあるだけです。

ORUKA1951
ベストアンサー率45% (5062/11036)

2014/10/26 10:27 回答No.2

＞テーブルタグを使わず、テーブルの中に文字を入れるように表示するには、どうすればいいでしょうか？　そもそも、最初から間違っている。1999年(15年前)のHTML4.01の勧告以来、とても強く!! 『単に文書内容を整形する目的だけで表を用いるべきでない。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/tables.html#h-11.1 )』『ページレイアウトの目的で表を用いる。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/present/styles.html#h-14.1 )』　と言われ続けてきたことです。tableはあくまで２次元以上の表データをあらわすものでデザインにだけは使ってはならない。　HTMLでは、あくまでその文書の文書構造だけをマークアップし、プレゼンテーション(表現)はスタイルシートで行ないます。これを『構造とプレゼンテーションの分離( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.4.1 )』といい、HTMLで作成する場合の根幹とも言える大事な事です。短文ですので読んでおきましょう。　この場合、率直に文書構造だけをHTMLでマークアップして、デザインはスタイルシートで行なっています。スタイルシートの簡単な説明は上記　14.1 スタイルシートの概説( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/present/styles.html#h-14.1 ) 　にあるので目を通しておくこと。　ごく簡単なサンプル上げておきます。このサンプル、ブラウザで表示した物と印刷プレビューで見た物、まったく異なります。検索エンジンには「スタイルシートなし」の状態で理解されます。 ★Another HTML Lint - Gateway( http://www.htmllint.net/html-lint/htmllint.html# ) 　のDATA(右上)でチェックしてみてください。 ★<style type="text/css" media="screen">  ＿</style> 　は次の回答で書きます。 ★タブは＿に置換してあるので戻す。文字コードはShift_JISです。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> ＿<meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> ＿<title>サンプル</title> ＿<meta name="author" content="ORUKA1951"> ＿<meta http-equiv="Content-Style-Type" content="text/css"> ＿<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" > ＿<link rel="START" href="../index.html"> ＿<style type="text/css" media="screen">  ＿</style> </head> <body> ＿<div class="header"> ＿＿<h1>タイトル</h1> ＿＿<p>このページでは・・・・</p> ＿</div> ＿<div class="section"> ＿＿<h2>見出し</h2> ＿＿<ul> ＿＿＿<li> ＿＿＿＿<dl> ＿＿＿＿＿<dt>ページ全般タグ</dt> ＿＿＿＿＿<dd>基本要素、タイトル、背景色、背景画像、マージン、範囲指定、META情報、罫線</dd> ＿＿＿＿</dl> ＿＿＿</li> ＿＿＿<li> ＿＿＿＿<dl> ＿＿＿＿＿<dt>テキスト・フォントタグ</dt> ＿＿＿＿＿<dd>見出し、段落、改行、文字サイズ、文字の装飾、強調、略語、引用、整形済み</dd> ＿＿＿＿</dl> ＿＿＿</li> ＿＿＿<li> ＿＿＿＿<dl> ＿＿＿＿＿<dt>リンクタグ</dt> ＿＿＿＿＿<dd>別ページへのリンク、ページ内のリンク、表示先の指定、メール送信用のリンク ...</dd> ＿＿＿＿</dl> ＿＿＿</li> ＿＿＿<li> ＿＿＿＿<dl> ＿＿＿＿＿<dt>リストタグ</dt> ＿＿＿＿＿<dd>箇条書きのリスト、番号付きのリスト、定義型リスト、マーカーの変更 ...</dd> ＿＿＿＿</dl> ＿＿＿</li> ＿＿</ul> ＿</div> ＿<div class="footer"> ＿＿<h2>文書情報</h2> ＿＿<dl class="documentHistry"> ＿＿＿<dt id="FIRST-PUBLISHED">First Published</dt> ＿＿＿<dd>2013-03-03</dd> ＿＿</dl> ＿</div> </body> </html>