締切済み

簡素化したHTMLを書けるようCSSを勉強中です

2012/10/30 11:43

出来るだけ簡素化したHTMLを書けるよう、CSSを勉強中なのですが、今はドリームウィーバーのCS5.5なのですが、ホームページビルダーでホームページ作りを勉強し始めたため、どうしてもホームページビルダーの癖が出てしまいますし、ＣＳＳの云わんとするところは理解出来るのですが、「じゃあ具体的にどうしたらいいの？！」ってなってしまいます。具体的には、ＨＴＭＬだけで、TABLEを多重化させ書いていたページを、見た目を変えずに、ＴＡＢＬＥを使わずに、HTML（出来ればＸＨＴＭＬ）＋ＣＳＳ（外部ファイル）でweb2.0で書くとどうなるかとか、画像のロールオーバーを≪<body onload=≫で書いていたのを同じくHTML（出来ればＸＨＴＭＬ）＋ＣＳＳ（外部ファイル）で書くとどうなるかとか、比較してあると「私は」分かりやすいのですが、そういうサイトをなかなか探し出せないでいます。こういう事を比較して書いてあるサイトがありましたら、教えて頂きたいです。また、検索エンジン最適化（Search Engine Optimization、SEO）にもＣＳＳは有効だという事ですが、≪<meta name="Keywords" content=≫等は、ＨＴＭＬファイルに書くか、ＣＳＳファイルに書いた方が良いのか、ＣＳＳに書くなら書き方は同じで良いのか等、分からない事だらけです。よろしくお願いします。

kichi4182
お礼率38% (52/136)

CSS
回答数5
ありがとう数2

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

みんなの回答

1818komatta
ベストアンサー率0% (0/0)

2012/10/31 13:24 回答No.5

CSSはHTMLからデザイン・装飾などの見栄えの部分を分離させたものです。なのでメタタグのKeywordsはHTMLに記述します。（ちなみにKeywordsがSEOに有効かどうかは現時点では不確かです。記述しない人も増えています。）ホームページビルダーは使った事はありませんが、私も昔テーブルレイアウトから（X）HTML+CSSに移行した経験があります。一番早いのはテーブルレイアウトの事は忘れて、一から（X）HTML+CSSでサイトを1つ作ってみるといいと思います。テーブルレイアウトと比較するサイトは少なくても、divでのレイアウト、リストでのナビゲーション、画像のロールオーバー等々、それぞれ検索すれば説明してるサイトはたくさん出てきます。（ただ、やり方は1つではないですし、あまり古いサイトだとすでに推奨されていないタグなどを使っている場合もあるので、信用できるサイトを探してください。）こつこつ1つずつ覚えていくのがいいのではないでしょうか。あと私がやっていたのは、Firebugなどのツールを使って、他のサイトの構造を学ぶことです。私はこれでだいぶ勉強になりました。

質問者

お礼 2012/11/01 09:28

色々教えて頂きありがとうございます。ホームページビルダーの、「どこでも配置モード」で失敗したため、divタグが元凶だと思い込んでしまい、divタグを避けていました。divタグ自体は有効だという事が今回の事で良く分かりました。勉強してみます。

質問者

補足 2012/11/01 11:36

すみません。見て頂いた時は、本来のページ構成にはなっておりませんでした。現在は何とか本来のページが「私の環境からは」見えております。

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

2012/10/31 08:18 回答No.4

＞元々のページには、サイトマップは無いのですが、これは、ページ上部の横並びのメニューのcontents部分だと解釈して良いのでしょうか？　サイトとは、ひとつのドメインにこだわらず、そのサイトにとっての全体の構成を示すナビゲーションのようなものです。　そのページの本文の一部ではないので、footerに入れたほうがしっくり来るので、footerに入っているだけです。それをページのトップにスクロールさせずに固定して配置しようが、headerの上下に配置しようが、それはスタイルシートで指定します。　<h2>私たちの活動</h2>とか<h2>サイトマップ</h2>は、スクリーンで見る分には、なくても意味がわかるので表示したくなければ、それもスタイルシートで指定すればよいのです。　実際にスタイルシートを利かせれば、これらのことがわかるでしょう。

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

2012/10/30 19:46 回答No.3

わすれてました。＞XHTMLでとのことでしたが、私はXHTMLは・他のアプリケーションで使用する・mathMLなどを使うなど、よほど必要がないとき以外は、使うことをやめました。　なぜなら、次期HTML5はHTML4.01strictの改訂版だからです。そのあたりの事情は、古いですが・・連載インデックス「HTML5“とか”アプリ開発入門」 - ＠IT ( http://www.atmarkit.co.jp/fwcr/design/index/index_html5appli.html ) や HTML5が持つ本当の意味－＠IT ( http://www.atmarkit.co.jp/news/200801/25/html.html ) を読まれるとわかると思います。要は楽だからです。(^^) 　HTML5であってもXHTMLで書く方法はあります。XHTMLが廃れたわけではありません。　＞<meta name="Keywords" content=≫等は、　これは、HTMLに書きます。スタイルシートは検索エンジンは利用しません。先のサイトをLynxなどのテキストブラウザで見たように見てます。『Lynx などのテキストブラウザを使用して、サイトを確認します（ほとんどの検索エンジンのスパイダーには Lynx で見えるようにサイトが映ります）。 ( http://support.google.com/webmasters/bin/answer.py?hl=ja&answer=35769#2 )』　私がjavascriptの使用を必要最小限、もしくはなくても良い程度にしか使わないのもこの理由です。　ただgoogleは、meta name="Keywords"は利用しません。　スタイルシートはアットマークのせいで・・検閲にかかってますが(^^)・・・そのうち表示できるようになるでしょう。　簡素なHTMLとそれに対するスタイルシートのサンプルになるでしょう。文書構造とプレゼンテーションの分離の・・。　そして、きっと私がHTMLとCSSに関しては、原則としてテキストエディタ( 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 )を使う理由もわかるでしょう。そのほうがツールで作成するより、はるかに楽なのです。同じものをツールで作ろうとすると、きっと、とてつもなく大変な作業になるでしょう。

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

2012/10/30 19:09 回答No.2

[CSS]index.htmlと同じ場所にCSSフォルダーを作成して入れることこちらも URLは、http：//****.info のように、:(半角)を：(全角)にすると同時に、URLの一部を伏字にしてあります。なお、文字コードはShift_JISです。オリジナルと異なるのは、・ディスプレイ幅に関わらず、中央に表示されること　スマホなどに対応させるためには、デバイスの表示幅によってスタイルシートを切り替えるか、背景画像をbackground-sizeプロパティで伸縮できるようにして、リンクを%による位置指定にすると良いでしょう。＞簡素化したHTMLを書ける　のは、ご覧の通り決して難しいものではありません。簡単すぎるでしょう。ひたすら文書構造だけ書けばよいのですら・・　難しいのは、スタイルシートのセレクタの書き方でしょう。 →6. 値の割り当て、カスケード処理、継承 ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/cascade.html ) standard.css @charset "Shift_JIS"; html,body{margin:0;padding:0;} div.header,div.section,div.footer{width:80%;margin:0 auto;} div.header:before{content:url(http：//****.info/images/goant.gif);} div.nav h2{display:none;} div.footer div.nav{position:absolute;top:28px;text-align:center;} div.nav ul, div.nav ul li{display:block;list-style:none;margin:0;padding:0;height:27px;} div.footer div.nav ul li{display:inline-block;} div.footer div.nav ul li a{background-color:rgb(183,76,40);font-weight:bold;color:white;text-decoration:none;padding:0.2em} div.footer div.nav ul li a:hover{background-color:rgb(250,240,220);color:rgb(210,100,60)} #contentTable{background:url(http：//*****.info/topillust/topillust.jpg);width:744px;height:484px;font-size:10px;position:relative;} #contentTable a{color:black;text-decoration:none;background-color:white;position:absolute;font-weight:bold;} #contentTable a:hover{color:blue;} /* 詳細な位置指定 */ #contentTable a[href="/katsudou/vegetables/vegetables.htm"]{top:53px;left:207px;width:10em;} #contentTable a[href="/katsudou/sell/sell_vege.htm"]{top:100px;left:573px;} #contentTable a[href="/katsudou/syokuiku/syokuiku.htm"]{top:130px;left:110px;} #contentTable a[href="/katsudou/experience/experience.htm"]{top:220px;left:230px;} #contentTable a[href="/katsudou/harb/harb.htm"]{top:280px;left:450px;} #contentTable a[href="/katsudou/space/space.htm"]{top:300px;left:580px;} #contentTable a[href="/katsudou/soil/soil.htm"]{top:320px;left:230px;;} #contentTable a[href="/katsudou/katsudou.htm"]{top:360px;right:600px;} #contentTable a[href="/community.htm"]{top:410px;left:280px;font-size:16px;} #contentTable a[href="/community.htm"]:before{content:url(http：//*****.info/topillust/topillustc1.gif); position:absolute;top:0px;right:105%;} #contentTable a[href="/community.htm"]:after{content:url(http：//*****.info/topillust/topillustc3.gif);position:absolute;left:100%;top:0px} a[href="/community.htm"] span{display:block;position:absolute;top:1.4em;left:0;font-weight:normal;font-size:0.9em;width:30em;} print.css @charset "Shift_JIS"; a{color:black;text-decoration:none;} a:after{content:"\A(http：//****.info"attr(href)")";white-space:pre;} a[href="http：//****.at.webry.info/"]:after{content:"\A("attr(href)")";} a[href="/community.htm"] span{display:block;margin:0;font-size:0.8em;}

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

2012/10/30 18:58 回答No.1

　せっかくですので、簡単なサンプルを・・　まず、HTMLには文書構造しか書かないこと・・これでスマホや携帯、テキストブラウザだけじゃなく検索エンジンにも内容が理解できるHTMLになります。もちろん、何年後かにあなた自身が変更することになっても容易に内容が理解できるでしょう。　スタイルシートは、その文書構造にしたがって書きます。たとえば、div.nav{}だったらどこにあるナビゲーションにも適用されますが、footer内にあるナビゲーションについては、div.footer div.nav{}といううに指定すれば良いです。　これらのclass名は、「HTML5の新しい要素 ( http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff/#new-elements )」ですから、そのまま、<div class="header">を<header>にすれば、HTML5になります。　HTMLの仕様書で『DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )』と書いてあるのは、そういう意味です。　今回、スタイルシートは、とりあえずmedia=screenと、print.cssだけ用意しました。ディスプレイ幅で振り分けていないので、スマートホン(media=screen)にも適用されます。印刷プレビューで見ると印刷イメージもわかるでしょう。　ご覧になると、一目瞭然にシンプルなこと、そのため、HTMLに何が書かれているかは無論、スタイルシートでの指定もわかりやすくなっていると思います。HTMLを見なくてもスタイルシートだけ編集していくこともできますね。　※文章を読み解き、構成要素に分解して最適なタグを選択してマークアップするとか、その文書構造にしたがってスタイルシートのセレクタ(div.footer div.nav{})を書くことは(人工知能でない)ツールでは出来ません。そのため、テキストエディタで作成しましたが、ご覧になるとわかるように難しいものではありません。　この程度なら、テキストエディタのほうが楽でしょう。　スタイルシートは次の回答で・・ ★HTML4.01strict+CSS2.1 のウェブ標準です。 →Another HTML-lint 5 ( http://www.htmllint.net/html-lint/htmllint.html ) →W3C CSS 検証サービス ( http://jigsaw.w3.org/css-validator/#validate_by_input ) でチェック済み【注意】URLは、このサイトのルールのため次のように変換してあります。 URLは、http：//****.info のように、:(半角)を：(全角)にすると同時に、URLの一部を伏字にしてあります。タブは＿に置換してあります。 [HTML]index.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="./CSS/standard.css"> ＿<link rel="stylesheet" type="text/css" media="print" href="./CSS/print.css"> </head> <body> ＿<div class="header"> ＿＿<h1><img src="http：//****.info/images/titlebar.gif" width="744" height="72" alt="まちの生ゴミ活かし隊"></h1> ＿</div> ＿<div class="section"> ＿＿<div id="contentTable" class="nav"> ＿＿＿<h2>私たちの活動</h2> ＿＿＿<ul> ＿＿＿＿<li><a href="/katsudou/vegetables/vegetables.htm">生ゴミリサイクルで元気野菜作り</a></li> ＿＿＿＿<li><a href="/katsudou/sell/sell_vege.htm">野菜販売</a></li> ＿＿＿＿<li><a href="/katsudou/syokuiku/syokuiku.htm">地域ぐるみで食育</a></li> ＿＿＿＿<li><a href="/katsudou/experience/experience.htm">生物多様性を体感</a></li> ＿＿＿＿<li><a href="/katsudou/harb/harb.htm">ハーブガーデン</a></li> ＿＿＿＿<li><a href="/katsudou/space/space.htm">みんなの居場所</a></li> ＿＿＿＿<li><a href="/katsudou/soil/soil.htm">生ごみリサイクルで土づくり</a></li> ＿＿＿＿<li><a href="/katsudou/katsudou.htm">ようこそせせらぎ農園へ</a></li> ＿＿＿＿<li><a href="/community.htm">コミュニティガーデンとは<span>身近な空き地や既存の緑地を住民の手で美しい美しい庭(庭園)に変え、安全で緑豊かな美しいまちを創造していく協働の庭づくり活動のことです。</span></a></li> ＿＿＿</ul> ＿＿</div> ＿</div> ＿<div class="footer"> ＿＿<div class="nav"> ＿＿＿<h2>サイトマップ</h2> ＿＿＿<ul> ＿＿＿＿<li><a href="/">ホーム</a></li> ＿＿＿＿<li><a href="/katsudou/katsudou.htm">私たちの活動</a></li> ＿＿＿＿<li><a href="http：//******.at.webry.info/">ニュース</a></li> ＿＿＿＿<li><a href="/seseragi/seseragi.htm">せせらぎ農園</a></li> ＿＿＿＿<li><a href="/tsuushin.htm">リサイクル通信</a></li> ＿＿＿＿<li><a href="/link.htm">リンク</a></li> ＿＿＿＿<li><a href="/toiawase/toiawase.htm">お問い合わせ</a></li> ＿＿＿</ul> ＿＿</div> ＿＿<p> ＿＿＿このサイトで使用している全てのデータ・画像の著作は「まちの生ごみ活かし隊」に帰属し、無断複製・転載は固くお断り致します。利用許諾については<a href="/site_policy.htm">サイトポリシー</a>をご覧下さい。＿＿</p> ＿</div> </body> </html>

質問者

お礼 2012/10/30 23:55

早速のお応え、ありがとうございます。私が思っていた以上にシンプルなHTMLなので、或る意味、「気が抜けた」状態です。その分CSSでの指定が、私の理解を超えているかもしれませんが。まだ、現時点で見られていないので何とも言えないのですが。

質問者

補足 2012/10/30 23:56

一つお訊きしたいのは、元々のページには、サイトマップは無いのですが、これは、ページ上部の横並びのメニューのcontents部分だと解釈して良いのでしょうか？

簡素化したHTMLを書けるようCSSを勉強中です