両端を開けたデザイン

2013/03/28 20:15

このQ&Aのポイント

他のサイトと比較して、ブラウザの横幅を最大限に活用しないウェブサイトが増えています。
テーブルの横幅を100％にし、文字を左詰めにしているが、少し両端を開けて中央に表示させる方法が知りたい。
サイトの見やすさを向上させるために、テーブルでコンテンツを囲み、センターに配置する方法があるか検討している。

yaru32qws
お礼率100% (24/24)

HTML
回答数3
ありがとう数3

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

質問者が選んだベストアンサー

ベストアンサー

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

2013/03/31 11:42 回答No.3

参考にされているマニュアルがとっても古いようです。これには理由があります。人の目で追いやすい一行の文字数は、横書きで、60文字程度でしょう。最近は、テレビや1900pxのような幅広のものから、スマホのように横幅600px程度、携帯電話の480px程度まで、様々なディスプレイが存在するために、最大幅を指定することが多くなりました。　わざわざHTMLを使う理由は【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここからどんな環境からもWebの情報を利用できるようにすべきだという方針の下に開発されている。例えば、様々な解像度や色深度のグラフィックディスプレイを持つPCや、携帯電話、モバイル機器、音声入出力機器、帯域が広いコンピュータや狭いコンピュータ、等の環境である。￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［HTML4.01仕様書( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.2.1 )］より　これらを考えれば、幅広ウィンドウでも適当な幅で表示されるように作成するほうが良いでしょう。 ★なお、＞テーブルの横幅も100％にしているし、　tableはあくまで二次元以上のデータをマークアップするためのもので、デザインに使用すべきではありません。使用してはなりません。・単に文書内容を整形する目的だけで表を用いるべきでない。( 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 ) 　と厳しい口調で指摘されていることです。1999年12月のHTML4.01の勧告以来!!!すでに13年経ってますから、さすがに今は、その形式で作成する人はないでしょう。具体的には HTML5(まだ未勧告です) <body> 　<header>文書のヘッダ　</header> 　<section> 　　本文　</section> 　<footer> 　　フッタ(文書情報) 　</footer> </body> [HTML4.01] <body> 　<div class="header">文書のヘッダ　</div> 　<div class="section"> 　　本文　</div> 　<div class="footer"> 　　フッタ(文書情報) 　</div> </body> などになるでしょう。　その上で下記サンプルのように指定するだけで、ウィンドウ幅の90%だけど、最小640px,最大900pxで中央に配置されるようになります。 ★文字コードはShift_JISです。タブは＿に置換してあるので戻すこと。 ★Another HTML-lint 5( http://www.htmllint.net/html-lint/htmllint.html# ) 　でチェック済みのHTML4.01strictです。右上のDATAタブでソースをチェックできます。 ★印刷プレビューで印刷の状況も確認すること。 ★ブラウザの表示メニューでスタイルシートなしにすると検索エンジンが見ている姿もわかる。 ★このようにHTMLにはデザイン的要素は何もないので、デザインはHTMLに手を加えることなく自由に変更できます。 <!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> ＿<style type="text/css" media="print">  ＿</style> </head> <body> ＿<div class="header"> ＿＿<h1>タイトル</h1> ＿＿<p>このページでは・・・・</p> ＿</div> ＿<div class="section" id="SECTION1"> ＿＿<h2>見出し</h2> ＿＿<p>・・・</p> ＿＿<div class="section"> ＿＿＿<h3>第一章</h3> ＿＿＿<p>記事</p> ＿＿</div> ＿＿<div class="section" id="SECTION2"> ＿＿＿<h3>第二章</h3> ＿＿＿<p>記事</p> ＿＿</div> ＿＿<div class="contentTable"> ＿＿＿<h3>本文目次</h3> ＿＿＿<ol> ＿＿＿＿<li><a href="#SECTION1">一章</a></li> ＿＿＿＿<li><a href="#SECTION2">ニ章</a></li> ＿＿＿</ol> ＿＿</div> ＿</div> ＿<div class="footer"> ＿＿<h2>文書情報</h2> ＿＿<dl class="documentHistry"> ＿＿＿<dt id="FIRST-PUBLISHED">First Published</dt> ＿＿＿<dd>2012-08-10</dd> ＿＿</dl> ＿＿<address>© ORUKA1951 2012 - 2016 All Rights Reserved mailto:*****</address> ＿</div> </body> </html>

質問者

お礼 2013/04/09 21:40

ご回答ありがとうございます。

その他の回答 (2)

eagle060
ベストアンサー率77% (17/22)

2013/03/28 21:28 回答No.2

　<body>に囲まれた部分を左右に余裕を持たせて中央に配置したいということでしたら、 CSSに次の様に記述するとできます。 body { margin-right : auto; margin-left : auto; width : ?px /*左の?にページの幅を記述*/ } こうするとブラウザの幅を縮めても(ページの幅以上なら)自動で中央に表示されます。＞頭からお尻までテーブルで囲ってセンターに配置し、横幅を設定すればいいのでしょうか？ちょっと違いますが、確かに同じようにする方法もあります。 <table>をページ内部を区切るものとして使いたいイメージなのかと思いますがページ内を部分ごとに分けて記述するためには<div>というタグを使います。このタグについては他のサイトの方を見たほうが分かりやすいと思うのでそちらで参照してください。このタグ（若しくはそのクラスかID）にCSSを設定すればそのようにすることもできます。この用途以外でも、とても汎用性が高いタグなので是非とも使い方を覚えてみてはいかがでしょうか。　ちょっとしたアドバイスですが、「このサイト、いいレイアウトだな」と感じたサイトを見つけた時そのページ上で右クリックし「ページのソースを表示」をクリックしてみて下さい。そうすると、そのページの中身がどうなっているのかが分かります。結構ごちゃごちゃして見えますが、気になる部分を写して試すことで自分のホームページでも実践できます。特にCSSは参考になりますよ！ちょっと余計に書いてしまいましたが、ホームページ製作の参考になれば幸いです。

質問者

お礼 2013/04/09 21:40

ご回答ありがとうございます。

kaisinjuku04
ベストアンサー率46% (743/1584)

2013/03/28 21:26 回答No.1

テーブルでデザインしなくてもセンタリングはできますよ。というか、テーブルを表以外に使うのは好ましくありません。「css 中央寄せ」とか「margin auto」とかで検索してください。ま、あくまでW3Cが非推奨だと言ってるだけで、ほとんどのブラウザで表示できるし、違法でもなんでもありませんが。ご自身のスキルで実現するのに、「テーブルをセンタリングするほうが簡単、それによってソースが複雑になって検索にヒットしなくても構わない」というのであれば、そういうやり方もありですね。変質狂的にWEB標準にこだわるよりは、情報発信することのほうが大切ですから。