- ベストアンサー
ホームページビルダーについて
私は手打ちでホームページを作っています。最初は一切HTMLなどの知識が無くビルダーを使ってみましたが、なんかなじまなかったので手書きで作っています。 ・ビルダーで作ったHTMLは大文字や小文字がごちゃごちゃ混ざっている物もありますがあれはビルダーの仕様ですか？ ・テーブルとCSSのBOXは両方ともほとんど同じですが貴方はどちらのほうが好きですか？
- takuya12421242
- お礼率96% (494/514)
- HTML
- 回答数3
- ありがとう数3
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
末席ながら投稿させて頂きます。 ジェネレーター（ビルダー）でソースを作れば汚くなります。 ヤフーとかgooとかの大手サイトも褒められたものではないそうです。 テーブルとはテーブル組のことですね。ボックスはCSSで作るべきです。 既にHTML5ではheader、navi、article等のタグが用意されています。 これらはdivがそれぞれ専用のタグに変更になったものです。 テーブルでのデザインは10年以上昔のものです。 ただ、指しているテーブルが本当の意味での表ならば、 勿論テーブルで作るべきです。その場合もCSSは必須でしょう。
その他の回答 (2)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
＞回答有難うございます。外見についてです tableだろうがdivだろうが、あなたが言われるように、デザインはまったく同じにできます。 【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから スタイルシートはこれらの問題を解決すると同時に、HTMLにおける制限されたプレゼンテーション機構に取ってかわる。スタイルシートでは、行間の設定やインデントの設定、テキスト色や背景色、フォントのサイズとスタイル、その他様々なプロパティの設定が簡単にできる。 ￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［Style Sheets in HTML documents (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/present/styles.html#h-14.1 )］より これは決して「どちらが好きか」と言う問題ではなく、その部分が表でしたらtable以外に選択肢はありませんし、表でなければ他の要素--ulだったり、olだったり、dlだったり、pだったり、spanだったり、それらで括れないときはdivやspanを使います。ul(順不同リスト)かol(序列リスト)かで悩むことはありますが。 好き嫌いではなく、必然的にそれしかないです。 ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 具体的な例を挙げるとわかりやすいと思います。以下のソース、タブは＿に置換してありますから戻してください。 ★Another HTML-lint gateway ( http://openlab.ring.gr.jp/k16/htmllint/htmllint.html ) で検証済みの、極めてシンプルなHTML4.01strictです。 先に紹介した、Wikiの「HTMLエディタで作成するシンプルなコードはSEO（検索エンジン最適化）にも効果的である ( http://ja.wikipedia.org/wiki/Web%E3%82%AA%E3%83%BC%E3%82%B5%E3%83%AA%E3%83%B3%E3%82%B0%E3%83%84%E3%83%BC%E3%83%AB#HTML.E3.82.A8.E3.83.87.E3.82.A3.E3.82.BF )」を絵に描いたような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"> ＿<link rel="stylesheet" type="text/css" media="screen" href="./style.css"> ＿</head> <body> ＿<h1>サンプル</h1> ＿<ol id="nav"> ＿＿<li><a href="./index.html">トップ</a></li> ＿＿<li><a href="./books/">著書</a></li> ＿＿<li><a href="./profile.html">自己紹介</a></li> ＿＿<li><a href="./contactus.html">連絡</a></li> ＿＿<li><a href="./sitmap.html">サイトマップ</a></li> ＿</ol> </body> </html> [スタイルシート]style.css ★W3C CSS 検証サービス ( http://jigsaw.w3.org/css-validator/#validate_by_input ) で検証済み @charset "Shift_JIS"; #nav,#nav li{ ＿display:block;margin:0;padding:0;list-style:none; } #nav{ width:640px;height:480px; margin:0 auto; position:relative; } #nav,#nav li a{background-image:url(./sample.jpg);} #nav li{width:180px;height:30px;line-height:50px;text-align:center;} #nav li a{ display:block;width:180px;height:50px;position:absolute; font-weight:bold; border:outset blue 3px; } #nav li a:hover,#nav li a:focus{ border-color:red; } #nav li a:active{ border-style:inset; } #nav li a[href="./index.html"]{ left:30px;top:40px; background-position:-33px -43px; } #nav li a[href="./books/"]{ left:50px;top:200px; background-position:-53px -203px; } #nav li a[href="./profile.html"]{ left:400px;top:20px; background-position:-403px -23px; } #nav li a[href="./contactus.html"]{ left:50px;top:300px; background-position:-53px -303px; } #nav li a[href="./sitmap.html"]{ left:300px;top:300px; background-position:-303px -303px; } #nav li a:active[href="./index.html"]{ background-position:-28px -38px; } #nav li a:active[href="./books/"]{ background-position:-48px -198px; } #nav li a:active[href="./profile.html"]{ background-position:-398px -18px; } #nav li a:active[href="./contactus.html"]{ background-position:-48px -298px; } #nav li a:active[href="./sitmap.html"]{ background-position:-298px -298px; } 別途640px×480pxの画像(sample.jpg)を用意してください。スタイルシートも画像の同じディレクトリに入れてください。HTML/CSSもShift_JISです。 これが私がオーサリングツールなんて使わない理由です。このようなシンプルなHTMLもCSSもオーサリングツールでは書けないでしょう。 先の回答とこの回答であげたリンク先も必ず目を通してください。「どちらが好きですか」という質問が意味を成さないことがご理解いただけると思います。
お礼
回答有難う御座いました！
- ORUKA1951
- ベストアンサー率45% (5062/11036)
＞ビルダーの仕様ですか？ はい ＞テーブルとCSSのBOXは両方ともほとんど同じですが これは外見ですか？・・・・。tableとdivでは、まったく違います。 そもそも、HTML(Hyper Text Markup Language)は文書をそれを構成する要素(Element)に分解し、それをタグを用いてマークアップするものです。それがリストなら<ul><ol><dl>で、それが段落なら<p>、見出しなら<h1～h6>で。もしそれが表なら<table>でマークアップしますが、表でないものを<table>でマークアップするのは、間違いですね。ですから「テーブルとCSSのBOXは両方ともほとんど同じ」と言うことはありえないのです。意味が違いますから。 divは仕様書( http://www.asahi-net.or.jp/~sd5a-ucd/rec-html401j/cover.html )に下記のように書かれています。 【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。 ￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［7.5.4要素のグループ化: DIV要素とSPAN要素( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )］より これは、HTMLに「文書の構造を示すタグ」が足りないときに、この部分は文書のヘッダ部分なら<div class="header"></div>として使用しなさい!!と言う意味です。次期HTMLであるHTML5では、この部分が徹底しなかった反省から、文書構造を示す(セマンティック)タグが追加されます。 →3.1. 新しい要素 ( http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff/#new-elements ) すなわち、<header><nav><section><footer><aside><article><figure>などです。これらは、HTML4.01では、次のように使うことを求められていたものですね。 <div class="header"><!-- ここからヘッダ --> <h1>見出し</h1> <div class="nav"><!-- ナビゲーション --> <ul> </ul> </div> <div class="section"> <h2>本文見出し</h2> <p>段落</p> <div class="section"> <h3>見出し</h3> <p>段落</p> <div class="figure"> <h4>挿絵</h4> <p><img></p> </div> <div class="aside"> <p>コラム</p> </div> </div> </div> <div class="footer"> 文書情報 </div> ・・・・・ 当然、これらのclass名はgoogleなどの検索エンジンは理解しますから--- HTML5の新しい要素はgoogleが強く求めていたもの----検索エンジンにも文書の構成が理解できます。それがdivの目的であり、class名の使い方。 もちろん、それが文書構成上、表でしたら<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 )」 ビルダーのようなオーサリングツールは(タグの綴りを正確に覚えてなくても良いなど)大変便利ですが、決してHTMLやタグを知らなくて良いというものではありません。それどころか、HTMLやタグの正確な意味は手書でタグを書く人以上に知っておかなければならないのですよ。 どんなに逆立ちしても・・オーサリングツールは文章の意味を読み取って、構成要素に分解し最適なタグを選ぶという、HTMLの製作でもっとも大事な作業は出来ません!!!--これは著者自身が行うしかない。 手書きの長所は「HTMLエディタ ( http://ja.wikipedia.org/wiki/Web%E3%82%AA%E3%83%BC%E3%82%B5%E3%83%AA%E3%83%B3%E3%82%B0%E3%83%84%E3%83%BC%E3%83%AB#HTML.E3.82.A8.E3.83.87.E3.82.A3.E3.82.BF )」にも書かれていますが、正しいHTMLが作成できることに尽きます。・・・正確に言うとHTMLの正しい知識があればオーサリングツールを使う必要はない--勝手に変なものを付け加えるので邪魔になることもある---と言うことでしょうね。所詮、使用するタグなんて数十個---中学校で学ぶ２０００語の英単語に比較したら微々たる物です。一か月もしたら、すべて覚えられるでしよう。ビルダーのマニュアルに比較したら仕様書なんて数分の一ですし(^^) もう一点、HTML4.01が勧告されて12年たとうと言うのに、いまだにtransitinalが標準であること・・ 【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから HTML文書を作る場合には、この仕様における、他のDTDセットではなく strict DTD に適合する文書を作るよう推奨する。 ￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［4.1 定義( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/conform.html#h-4.1 )］より 非推奨な要素や属性を使わなければHTMLは極めてシンプルでわかりやすくなる。 たとえば別の質問で回答した「フッターのCSSに関して - Webデザイン・CSS - 教えて！goo ( http://okwave.jp/qa/q7427803.html#9 )」などのHTMLは極めてシンプルでしょ!!!
お礼
回答有難う御座いました！
補足
回答有難うございます。外見についてです
お礼
回答有難う御座いました！