ベストアンサー

もっとも理想の構造HTML

2013/02/01 12:21

HTML・CSSレイアウトで質問します。（添付画像）の書き方はいろいろあると思うのですが、もっともシンプルで理想的な書き方を教えてください。よろしくお願いします。

nekogeruge
お礼率33% (16/48)

HTML
回答数2
ありがとう数1

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

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

ベストアンサー

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

2013/02/01 17:25 回答No.1

どのようにデザイン(プレゼンテーション)するかはスタイルシートの問題で、HTMLは文書構造だけを記述します。 ★HTML5を目前に控えた今、この文書構造とプレゼンテーションの分離は最も重要なポイントの一つです。例えば、下記のようなナビゲーションリンクのリストがあるとします。 1) これはナビゲーションリンクを箇条書きにしたものですから、序順リストOLを使ってマークアップするのが良いと判断したばあい。 <div class="nav"> 　<ol> 　　<li>HTML4.01の仕様書は、<a href="http://www.asahi-net.or.jp/~sd5a-ucd/rec-html401j/cover.html">HTML4.01仕様書</a></li> 　　<li>HTML5の仕様書は、<a href="http://www.html5.jp/tag/index.html">HTML5仕様書</a></li> 　</ol> </div> 2) これは用語とその説明だから定義リストを使ってマークアップしようと判断するなら <div class="nav"> 　<dl> 　　<dt><a href="http://www.asahi-net.or.jp/~sd5a-ucd/rec-html401j/cover.html">HTML4.01仕様書</a></dt> 　　<dd>HTML4.01の仕様書</dd> 　　<dt><a href="http://www.html5.jp/tag/index.html">HTML5仕様書</a></dt> 　　<dd>HTML5の仕様書</dd> 　</dl> </div> でしょう。　どのようにデザインするかは、一切考えずに文書にとって、その部分がどのような構成要素であるかをタグを使ってマークアップするのです。　そうしてマークアップされたHTMLの文書構造をスタイルシートでデザインしていくのです。　あるデザインを想定すると言うことは、その文書にとって、そのように表示したほうがよいのですから、文書構造がきちんとマークアップされていれば自在にデザインできるのです。将来、他のデザインに変更することも、スマホなどにあわせたスタイルシートを作成することも、印刷用のスタイルシートを書くことも、・・・なんでも。＞もっともシンプルで理想的な書き方を教えてください。　それが、どのような要素であるかが判らないので、理想的な書き方は判りませんが、下記にサンプルを上げておきます。　HTMLさえきちんと書かれていれば、デザインは文書構造と矛盾しない限り自由自在にデザインできますから、デザインのためにHTMLを捻じ曲げる必要はありません。 [回答] 　とにかく率直にHTMLを書きましょう。--デザインは無視して構いません。そのうえで、このHTMLをこの様にデザインしたいと質問してください。 ★逆の意味(同じHTMLでデザインを変更する)典型的なサンプルが　ナビゲーションリストを様々にデザインしてみよう。( http://www.ichiya.com/WebService/Howto/sample/HTML/nav/navigation1.html )にあります。ブラウザの[表示]メニューから「スタイルシート」を選択したり、[ファイル]から印刷プレビューを選択すると良いでしょう。スタイルシートなしだと検索エンジンが見ている姿も想像できます。 [サンプル] ★HTML4.01strict + CSS2.1の場合 ★タブは、＿に置換してあるので戻すこと。 ★Another HTML-lint 5( http://www.htmllint.net/html-lint/htmllint.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">  ＿</style> </head> <body> ＿<div class="header"> ＿＿<h1>タイトル</h1> ＿＿<p>このページでは・・・・</p> ＿</div> ＿<div class="section"> ＿＿<h2>見出し</h2> ＿＿<div class="nav"> ＿＿＿<ol> ＿＿＿＿<li>HTML4.01の仕様書は、<a href="http://www.asahi-net.or.jp/~sd5a-ucd/rec-html401j/cover.html">HTML4.01仕様書</a></li> ＿＿＿＿<li>HTML5の仕様書は、<a href="http://www.html5.jp/tag/index.html">HTML5仕様書</a></li> ＿＿＿</ol> ＿＿</div> ＿＿<div class="nav"> ＿＿＿<dl> ＿＿＿＿<dt><a href="http://www.asahi-net.or.jp/~sd5a-ucd/rec-html401j/cover.html">HTML4.01仕様書</a></dt> ＿＿＿＿<dd>HTML4.01の仕様書</dd> ＿＿＿＿<dt><a href="http://www.html5.jp/tag/index.html">HTML5仕様書</a></dt> ＿＿＿＿<dd>HTML5の仕様書</dd> ＿＿＿</dl> ＿＿</div> ＿</div> ＿<div class="footer"> ＿＿<h2>文書情報</h2> ＿＿<dl class="documentHistry"> ＿＿＿<dt id="FIRST-PUBLISHED">First Published</dt> ＿＿＿<dd>2013-02-01</dd> ＿＿</dl> ＿＿<address>© ORUKA1951 2012 - 2016 All Rights Reserved mailto:*****</address> ＿</div> </body> </html>

その他の回答 (1)

metametamu
ベストアンサー率51% (153/295)

2013/02/01 19:01 回答No.2

■HTML <form> <fieldset> <legend>FOO</legend> <ol> <li class="inputText"><label for="GOO">テキストフォーム</label><input type="text" value="" id="GOO" /></li> <li class="inputSubmit"><input type="submit" value="検索" /></li> </ol> </fieldset> </form> ■CSS form { overflow:hidden; } form * { margin:0; padding:0; border:0; list-style:none; } form fieldset { float:left; } form ol { position:relative;} form li.inputText input { position:absolute; left:0; width:200px; line-height:normal; } form li.inputSubmit input { display:block; margin-left:200px; } form legend, form label { display:none; } /* ボックスの設定値 */ form fieldset { padding:5px; /* 余白の幅 */ background:#444; /* 余白の色 */ } form li input { height:1.2em; /* ボックスの高さ(em) */ font-size:100%; /* フォントサイズ */ } form li.inputText input { background:#ddd; /* テキストボックスの背景色 */ } form li.inputSubmit input { padding-left:0px; /* 実行ボタンの左右の余白(上下は不可) */ padding-right:0px; background:#ddd; /* 実行ボタンの背景色 */ } そこそこの範囲のブラウザに対応できると思います。 XHTMLor標準準拠モード用。フォームの上下の余白を調整したい場合はinputに直接paddingを指定するのは避け、背景画像等で調整します。

質問者