♯wrapper?

ホームページをテーブルだけで作っていましたが、
cssスタイルシートで作ろうと思ってタグを見ていた所 ソースで
♯の付いたものが所々有りますが、♯の意味が分かりません
ソフトはDW MX 2004を使っています

また、此れを出すにはキーボードからでなく何処のパネルから「メニュー」
表示するのか 判る人教えてください、

No.1 回答者： ORUKA1951 回答日時： 2014/10/11 17:36

tableでデザインしていたものを本来のHTML+CSSに変更したいと言う事ですね。

　本当の意味で再出発になると思います。

以下、長文ですが、リンクと共に説明しておくのでリンク先も含めてよく読んでください。

　今から１５年も前の1999年のHTML4.01の勧告以来、tableでのレイアウトは強く非推奨でした。
・tableでデザインするのは
　『単に文書内容を整形する目的だけで表を用いるべきでない。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )』
　『 スタイルシートの概説( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )』
その最大の目的は『構造とプレゼンテーションの分離( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )』です。
　いまさらの感はありまが、まず↑は、しっかり読んで何のためにHTML+CSSにする目的を理解しましょう。

　さて、Dreamweaverに限らず、Webオーサリングツール( http://ja.wikipedia.org/wiki/Web%E3%82%AA%E3%83% … )を使用するときは、テキストエディタで直接HTMLやCSSを書ける人【 以上にHTMLやCSS　】の知識が必要です。決して逆ではありません。
　ここを誤解している人がとっても多いし、低級なツールではそう自称しているものある野で無理もないが、すくなくともDWは、そんな事一言も言ってないですし、HTML/CSS完璧でないと使いこなせない。
　Dreqmweaverは、オーサリングツールの中では高価な部類に入りますが、HTML/CSSを知らないと「宝の持ち腐れ」「豚に真珠」で、かえって[御荷物]になるでしょう。

＞cssスタイルシートで作ろうと思ってタグを見ていた所 ソースで♯の付いたものが所々有りますが
　スタイルシートで#は［一意セレクタ］と呼ばれるものです。それはHTMLで言うところの、ID属性やA要素のNAME属性の値を言います。

　ここから基礎の基礎
1) HTMLはHyper Text Markup Languageの略でリンク機能をもつマークアップテキスト
2) HTMLでは、タグによってその文書を構成する要素をマークアップします。
　　<h1>見出し</h1>　←　このタグは"見出し"と言う文字列が見出しであることを示す。
　　<p>ここは一つの段落です。</p>←段落を示す
　　※決して太字で大きな文字で表示しろ、とか前後あけて表示しろと言う意味ではない!!
　　SGMLの背景( http://ja.wikipedia.org/wiki/Standard_Generalize … )を読むと、その意味がとってもよく分かります。

3) ブラウザはテキストだけの羅列であるHTMLを見やすく表示するために、スタイルシートを持っています。
　(h1要素が大きな文字で表示されるのはブラウザの持つスタイルシートです。)
　スタイルシートは、デザイン(プレゼンテーション)を適用したい要素を特定しなければなりませんが、そのために使用するのがセレクタ(選択子)で、その要素に文書構造に基づいてデザインを適用する要素を指定します。
　例えば
　p{color:red;} とすると段落内の文字は赤くなります。pというセレクタ

＞♯wrapper?
　これは「一意セレクタ」と呼ばれるもので、ID属性の値が"wrapper"である要素と言う意味です。
　※wrapperやcontenerというIDは良く見かけますが、好ましくはありません。(後述)

★ tableでの整形から HTML+CSSに移行するときの最大の壁は、「構造とプレゼンテーションの分離」への移項です。
それがどんなものか・・
　ナビゲーションリストを様々にデザインしてみよう。( http://www.ichiya.com/WebService/Howto/sample/HT … )
　のサイトを（chrome以外の）ブラウザで表示させて
・ウィンドウ幅を変えてみる。
・Ctrl + や　Ctrl + -でカクダイや縮小
・印刷→プレビューで印刷時を確認
・ブラウザの[表示]メニュー→[スタイル(シート)］に進みスタイルを変えてみる
● そしてソースを見てみましょう。

　HTMLは極めてシンプルで、
・どこがこの文書の(header)か、どこが本文(section)か、フッタ(Footer)か、どこがナビゲーション(nav)かが、class名で示されているため分かると思います。
　<div class=section">ここは本文ブロック</div>
　デザインらしきことは一切ありませんから・・・、内容を変更したいときどこに手を加えたらよいか誰でもわかりますよね。検索エンジンも内容を理解できる。
　視覚障害者用のスクリーンリーダーは、最初からきちんと読んでくれますし、携帯電話からだとシンプルなHTMLとして表示されるはずです。

★そしてなによりも、HTMLは一切手を加えずにスタイルシートを変更するだけでデザインは一挙に変更できます。
　同じ事をtableで行なっていたら、そんなこと不可能でしょう。

(付録)wraperが駄目なわけ
　『DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )』
　idやclassは、HTMLに用意されているタグ--要素では（意味としての）文書構造を示しきれないので、それを保管するためのもので、wrapper(包み紙)じゃ変です。
　また、CSS2.1移項、セレクタを書くときは必ず基点セレクタを書くことになりました。このように省略されていてもブラウザは解釈してくれますが、本来はdiv#wrapper{}や*#wrapper{}と書くべき。

　ここからが難しいが絶対に必要なこと
・HTMLはひたすら文書構造だけをマークアップすること。
　それでは文書構造が示しきれないときは、適当なidやclassをつかう。
　その値としては、HTML5の新しい新しい要素( http://standards.mitsue.co.jp/resources/w3c/TR/h … )名と使い先を参考にすると良い。　

・スタイルシートを学ぶときは、まず
5 セレクタ( http://momdo.s35.xrea.com/web-html-test/spec/CSS … )
6 プロパティ値とカスケーディング、継承の割り当て( http://momdo.s35.xrea.com/web-html-test/spec/CSS … )
　をマスターすること。CSSとはカスケーディングスタイルシートの略ですが、このカスケーディングを知らないと、#wrapper{}のようなスタイルシートを書いてしまいます。

　今まである程度のウェブページを作ってこられた方にとって、この手法は文字通りゼロからの再出発になります。

　大変だと思いますが、皆が乗り越えてきた道です。頑張ってください。ちなみに私がホームページ最初につくったのは、今から17年前45歳のときです。幸いに早くからtableは止めていましたので、あなたよりは楽だったかも。

まず
HTML 4.01 仕様書邦訳( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )
CSS 2.1仕様（日本語訳）( http://momdo.s35.xrea.com/web-html-test/spec/CSS … )
は目を通して見られるとよいかと。私はそこから出発しました。

　

この回答へのお礼

親切丁寧に教えて頂きました、有難うございました、
何せ、HTMLテーブルだけでHOME Paje作って居りましたが、皆さん
cssでのhpが結構多く少しボケ防止にとcssで自分のサイトを直してみようと
皆さんのhpのソースを拝見させていただき、見慣れないタグがあちこち有り

少しずつ解読？「勉強」しようと思って居ます
お教えて頂いたものは一度に理解するのは大変だと思いますが
楽しみに勉強してみます、cssスタイルは簡単だと書籍に書いてありましたが、
何でも、奥が深いですね、
長文の回答、本当にありがとうございました。

urlをクリックしながら未知の世界を覗いてみます、
当年70、覚えて孫に教えるのが楽しみです、
再度、「♯」の使い方と意味教えて頂き有難うございました。

お礼日時：2014/10/11 20:58