![[関西]WEBデザイン 交流会[大阪]](https://logo-imagecluster.img.mixi.jp/photo/comm/94/64/4999464_227s.gif){kind=logo}
いつもお世話になります。
前回、他トピで皆様のご意見を伺わせて頂き、
本も色々と取り揃え、勉強しております。
なぜweb標準なのか？cssとxhtmlの定義をココ最近
読みあさっております。
色々な皆様のご意見大変参考になり有り難うございました。
以前の個人HPは仕事が忙しくなかなか修正できておりませんが・・・さておき、
本題
初めに、皆さんにとっては基本的な事かも知れませんが
ご了承下さいませ。（他トピも調べましたが解からなかったので）
-----------------------------------
ご質問。↓をご覧下さい（略儀で申し訳ないです。）
<body>
<div id="layout">
</div>
<div id="header">
</div>
<div id="navimenu">
</div>
<div id="contents">
</div>
<div id="footer">
</div>
</div>
</body>
の様なHPが有るとします。
１：h1,h2・・・っと見出し定義する際、色々と調べてましたら、
h1は最重要に押さえるポイント
↓
h2・・・っと順序を付けていく意味は解かるのですが、
HPを作成する際、よく会社名（header部：一番上に表示されるもの等）が
h1で定義されてるモノを良く見かけます。
しかし、h1の定義とは、上の様に見出しの定義とするならば、
例えばcontents内に一番重要な見出しh1を定義する場合は
その方が良いのかも？っと解釈しております。
例えば、一番上の表示に意味あるh1定義を出来るものがあれば良いのですが
サイトを作成する際、contents部にh1と定義する場合でも
正しいのでしょうか？
また、その際、header他にh1が出てくるまでは
<p>要素で指定しておけば、問題ないのでしょうか？
解かりづらいかな？
２：ブラウザの確認
前回トピを立ち上げるまで、IEにて確認後、
firefox等の確認をしていましたが、
皆さん、firefox他とうで、確認を進められていました。
実際その通りだと想います。
色々と勉強してくるとIEのcssに対応しきれてない場合もあるみたいで・・・
その際に、ブラウザ確認するのはどうすればいいのでしょうか？
内容：
例：サイトをある程度作成しました。
その際、一度UPして、各ブラウザで確認するのでしょうか？
それとも、UPしなくてもブラウザ確認は可能なのでしょうか？
またその際のツール等教えていただければ嬉しいのですが。
３：cssにて定義する際、初めに初期化をされてる方が
多いと聞きます。皆さんそれぞれだと想いますが
基本ラインこれで、その後は各要素にて修正・・と
何をベースにされているのか？皆さんのご意見を
お聞きしたいのですが・・・
４：上記<body>〜</body>のタグ整形
これに関しても皆さん様々だと想いますが
余りにもソースのタグが、あっち行ったり・・・と乱雑に
配置されており、非常に解かりくい・・・
上記は、全部タグは左寄せにしておりますが
皆さんが整形される際、一定のルールみたいなものを
敷かれていると想います。
是非、ご意見をお聞きしたく想います。
出来れば、他のタグ<p>等も織り交ぜていただくと
大変嬉しいです。
------------------------------------------------
皆様、文章等に不備がございます場合、申し訳ないです。
以上の点、ヨロシクお願い申し上げます。
前回、他トピで皆様のご意見を伺わせて頂き、
本も色々と取り揃え、勉強しております。
なぜweb標準なのか？cssとxhtmlの定義をココ最近
読みあさっております。
色々な皆様のご意見大変参考になり有り難うございました。
以前の個人HPは仕事が忙しくなかなか修正できておりませんが・・・さておき、
本題
初めに、皆さんにとっては基本的な事かも知れませんが
ご了承下さいませ。（他トピも調べましたが解からなかったので）
-----------------------------------
ご質問。↓をご覧下さい（略儀で申し訳ないです。）
<body>
<div id="layout">
</div>
<div id="header">
</div>
<div id="navimenu">
</div>
<div id="contents">
</div>
<div id="footer">
</div>
</div>
</body>
の様なHPが有るとします。
１：h1,h2・・・っと見出し定義する際、色々と調べてましたら、
h1は最重要に押さえるポイント
↓
h2・・・っと順序を付けていく意味は解かるのですが、
HPを作成する際、よく会社名（header部：一番上に表示されるもの等）が
h1で定義されてるモノを良く見かけます。
しかし、h1の定義とは、上の様に見出しの定義とするならば、
例えばcontents内に一番重要な見出しh1を定義する場合は
その方が良いのかも？っと解釈しております。
例えば、一番上の表示に意味あるh1定義を出来るものがあれば良いのですが
サイトを作成する際、contents部にh1と定義する場合でも
正しいのでしょうか？
また、その際、header他にh1が出てくるまでは
<p>要素で指定しておけば、問題ないのでしょうか？
解かりづらいかな？
２：ブラウザの確認
前回トピを立ち上げるまで、IEにて確認後、
firefox等の確認をしていましたが、
皆さん、firefox他とうで、確認を進められていました。
実際その通りだと想います。
色々と勉強してくるとIEのcssに対応しきれてない場合もあるみたいで・・・
その際に、ブラウザ確認するのはどうすればいいのでしょうか？
内容：
例：サイトをある程度作成しました。
その際、一度UPして、各ブラウザで確認するのでしょうか？
それとも、UPしなくてもブラウザ確認は可能なのでしょうか？
またその際のツール等教えていただければ嬉しいのですが。
３：cssにて定義する際、初めに初期化をされてる方が
多いと聞きます。皆さんそれぞれだと想いますが
基本ラインこれで、その後は各要素にて修正・・と
何をベースにされているのか？皆さんのご意見を
お聞きしたいのですが・・・
４：上記<body>〜</body>のタグ整形
これに関しても皆さん様々だと想いますが
余りにもソースのタグが、あっち行ったり・・・と乱雑に
配置されており、非常に解かりくい・・・
上記は、全部タグは左寄せにしておりますが
皆さんが整形される際、一定のルールみたいなものを
敷かれていると想います。
是非、ご意見をお聞きしたく想います。
出来れば、他のタグ<p>等も織り交ぜていただくと
大変嬉しいです。
------------------------------------------------
皆様、文章等に不備がございます場合、申し訳ないです。
以上の点、ヨロシクお願い申し上げます。
|
|
|
|
コメント(30)
>例えば、一番上の表示に意味あるh1定義を出来るものがあれば良いのですがサイトを作成する際、contents部にh1と定義する場合でも正しいのでしょうか？
別にdivはブロックを分けるために使っているだけでh1がid=headerにくる必然性は無いと思います。もちろん見出しの順序は守らないといけないですけどね。
h1に会社名は好ましくなく、ページのタイトル（たとえば会社概要とか）を割り当てた方が良いのかなと。
>その際、header他にh1が出てくるまでは<p>要素で指定しておけば、問題ないのでしょうか？
バリデーターでエラーはでませんので、いいんじゃないでしょうか。
>2
その際、一度UPして、各ブラウザで確認するのでしょうか？
それとも、UPしなくてもブラウザ確認は可能なのでしょうか？
htmlファイルをブラウザにドラドロすればローカルでプレビュー出来ると思いますけど。ただ絶対タグを利用している場合はアップして見た方が楽でしょう。
私はDreamweaverを使ってマークアップしてますが、ブラウザプレビューは比較的楽にできますよ。
>3
>何をベースにされているのか？皆さんのご意見をお聞きしたいのですが・・・
人それぞれかと思いますが、私は最近は全部フラットにした状態からスタイルを割り振っています。
>4
><body>〜</body>のタグ整形
私もタグは左寄せです。
Dreamweaverを使用すればタグ整形を好みに設定できます。
別にdivはブロックを分けるために使っているだけでh1がid=headerにくる必然性は無いと思います。もちろん見出しの順序は守らないといけないですけどね。
h1に会社名は好ましくなく、ページのタイトル（たとえば会社概要とか）を割り当てた方が良いのかなと。
>その際、header他にh1が出てくるまでは<p>要素で指定しておけば、問題ないのでしょうか？
バリデーターでエラーはでませんので、いいんじゃないでしょうか。
>2
その際、一度UPして、各ブラウザで確認するのでしょうか？
それとも、UPしなくてもブラウザ確認は可能なのでしょうか？
htmlファイルをブラウザにドラドロすればローカルでプレビュー出来ると思いますけど。ただ絶対タグを利用している場合はアップして見た方が楽でしょう。
私はDreamweaverを使ってマークアップしてますが、ブラウザプレビューは比較的楽にできますよ。
>3
>何をベースにされているのか？皆さんのご意見をお聞きしたいのですが・・・
人それぞれかと思いますが、私は最近は全部フラットにした状態からスタイルを割り振っています。
>4
><body>〜</body>のタグ整形
私もタグは左寄せです。
Dreamweaverを使用すればタグ整形を好みに設定できます。
ちと長いですf(^^;
1：ｈ１には何を指定するべきか？
HTMLは西洋の印刷物のルールを元に構造化を図ったものなので、そのあたりが参考になると思います。
たとえば、新聞で考えてみましょう。
ある新聞のあるページで、読者に一番注目してもらいたいのは、「◯◯新聞」というロゴでしょうか、それとも「◯◯地方で重大事件発生！」という記事タイトルでしょうか？
Webと印刷物は同じではありませんが、どちらもページ単位で記述されるものである以上、そのページが何を伝えようとしているか、が最重要とされるべきだと思います。
じっさい、検索エンジンも同じような判断をしています。
つまり、<title>〜</title>または<h1>〜</h1>を、そのページの内容に最も重要な語句が含まれていると判断します。
ですから、企業サイトなどでトップページの自社ロゴにh1が指定
されているのは、「◯◯サイトへようこそ」という意味が込められているのでしょうから、これはそれでいいと思います。
ですが、同サイトの他のページは違います。そのページが何について書かれたページなのか、それを端的に表した文、またはコピーにh1が指定されるべきです。
新聞のどのページを開いても、その新聞のロゴがいちばん大きく目立つのは、おかしいでしょ？
2：表示確認はどこまでする？
私たちは、世の中のすべてのブラウザで表示確認をすることは出来ません。
だとすれば、現在最もCSSの定義に準拠しているブラウザを、基準にするのが無難そうです。そうすれば、未知のブラウザであっても、HTMLやCSSに忠実であろうと目指しているブラウザならば、ほぼ思惑通りの表示が期待できます。
現在のところ、CSS2の定義に最も近いのは、Firefoxです（将来は変わるかもしれません）。
やっかいなのは、シェアNo.1にあぐらをかいて、HTMLやCSSの定義を無視して独自拡張をしたり、定義と違う解釈をしたりする、IEのようなブラウザです。
これも経験上、Web標準にもっとも準拠したブラウザで表示確認をしながらつくっていけば、あとは手前勝手な解釈をするブラウザに対する個別の指定をするだけで済むので、結果的には最小限の手間で済みます。
つまり、Firefoxで表示確認をしながらサイトをつくり、他のブラウザで意図したとおりに表示されない部分について、個別のブラウザごとのスタイルをしていしていくのが、結局は手間を最小限に抑えることが出来ます。
ちなみにブラウザごとの表示確認は、それぞれのブラウザを持っているのなら、ローカルディスク上で確認すれば大丈夫です。
3：初期化って何のため？
各ブラウザは、各々デフォルトのスタイルシートを持っています。だから例えば、
<ul>
<li>〜</li>
</ul>
などのリスト表示において、字下げをtext-indentでしたり、
paddingでしたり、marginでしたりと、各社ブラウザによってまちまちです。
なので、すべてのページの先頭でたとえば
margin:0; padding:0;
などとしておけば、たとえばULにおけるLIのデフォルトの設定がどのようなものであろうとも、
1）margin-leftによって字下げしない
2）padding-leftによって字下げしない
3）text-indentによって字下げする
などという、すべてのページの要素に共通する指定が可能になります。
またbodyのフォントサイズを、たとえば「12px」にしておくと、他の要素でfont-sizeをパーセント指定することで、ブラウザごとの表示の違いをある程度抑えることが出来ます。
CSSにおける「初期化」とは、すべての要素に対する定義をいったんチャラにして、個別に指定することで、ブラウザごとの解釈の違いを無効化することです。
1：ｈ１には何を指定するべきか？
HTMLは西洋の印刷物のルールを元に構造化を図ったものなので、そのあたりが参考になると思います。
たとえば、新聞で考えてみましょう。
ある新聞のあるページで、読者に一番注目してもらいたいのは、「◯◯新聞」というロゴでしょうか、それとも「◯◯地方で重大事件発生！」という記事タイトルでしょうか？
Webと印刷物は同じではありませんが、どちらもページ単位で記述されるものである以上、そのページが何を伝えようとしているか、が最重要とされるべきだと思います。
じっさい、検索エンジンも同じような判断をしています。
つまり、<title>〜</title>または<h1>〜</h1>を、そのページの内容に最も重要な語句が含まれていると判断します。
ですから、企業サイトなどでトップページの自社ロゴにh1が指定
されているのは、「◯◯サイトへようこそ」という意味が込められているのでしょうから、これはそれでいいと思います。
ですが、同サイトの他のページは違います。そのページが何について書かれたページなのか、それを端的に表した文、またはコピーにh1が指定されるべきです。
新聞のどのページを開いても、その新聞のロゴがいちばん大きく目立つのは、おかしいでしょ？
2：表示確認はどこまでする？
私たちは、世の中のすべてのブラウザで表示確認をすることは出来ません。
だとすれば、現在最もCSSの定義に準拠しているブラウザを、基準にするのが無難そうです。そうすれば、未知のブラウザであっても、HTMLやCSSに忠実であろうと目指しているブラウザならば、ほぼ思惑通りの表示が期待できます。
現在のところ、CSS2の定義に最も近いのは、Firefoxです（将来は変わるかもしれません）。
やっかいなのは、シェアNo.1にあぐらをかいて、HTMLやCSSの定義を無視して独自拡張をしたり、定義と違う解釈をしたりする、IEのようなブラウザです。
これも経験上、Web標準にもっとも準拠したブラウザで表示確認をしながらつくっていけば、あとは手前勝手な解釈をするブラウザに対する個別の指定をするだけで済むので、結果的には最小限の手間で済みます。
つまり、Firefoxで表示確認をしながらサイトをつくり、他のブラウザで意図したとおりに表示されない部分について、個別のブラウザごとのスタイルをしていしていくのが、結局は手間を最小限に抑えることが出来ます。
ちなみにブラウザごとの表示確認は、それぞれのブラウザを持っているのなら、ローカルディスク上で確認すれば大丈夫です。
3：初期化って何のため？
各ブラウザは、各々デフォルトのスタイルシートを持っています。だから例えば、
<ul>
<li>〜</li>
</ul>
などのリスト表示において、字下げをtext-indentでしたり、
paddingでしたり、marginでしたりと、各社ブラウザによってまちまちです。
なので、すべてのページの先頭でたとえば
margin:0; padding:0;
などとしておけば、たとえばULにおけるLIのデフォルトの設定がどのようなものであろうとも、
1）margin-leftによって字下げしない
2）padding-leftによって字下げしない
3）text-indentによって字下げする
などという、すべてのページの要素に共通する指定が可能になります。
またbodyのフォントサイズを、たとえば「12px」にしておくと、他の要素でfont-sizeをパーセント指定することで、ブラウザごとの表示の違いをある程度抑えることが出来ます。
CSSにおける「初期化」とは、すべての要素に対する定義をいったんチャラにして、個別に指定することで、ブラウザごとの解釈の違いを無効化することです。
おはようございます。
>皆様、文章等に不備がございます場合、申し訳ないです。
マークアップしやすい文章にするといいですよ（アプローチとしては逆ですけど）。
ダイさんの質問には2と3には見出しがありますが、1と4にはありません。HTMLに限らず、構造化を考えて文章を書くとわかりやすくなるかもしれません。
そうして見ると、ginnezさんの回答はそのままマークアップできそうな文章ですね。
■1.h1には何を指定するべきか
ginnezさんと同じです。「社内報」と「企画書」と「給料明細」があるとして、みんな表題が社名だったらおかしいです。
ただ、ブログなんかだとh1がブログタイトルに使われる前提で設計（そんな設計がダメなんですけど）してあったりするので、カスタマイズしようとしたら面倒だったり不可能だったりしますよね。
■2.ブラウザの確認の際にアップは必要か
ローカルで確認しています。CMSだとネット上での確認になりますが。
■3.初期化後に何をベースにしているのか
最初に*をクリアしたあとに何をベースにしているかということですよね。
私はよそのサイトなり雑誌なりから持ってきたものに手を加えたものを使っています。
このあたりも参考になるかも。
http://phpspot.org/blog/archives/2006/05/yahoocss.html
■4.ソースの整形をどうしているか
基本的には入れ子構造が正しくなるようにタブでインデントしています。
>皆様、文章等に不備がございます場合、申し訳ないです。
マークアップしやすい文章にするといいですよ（アプローチとしては逆ですけど）。
ダイさんの質問には2と3には見出しがありますが、1と4にはありません。HTMLに限らず、構造化を考えて文章を書くとわかりやすくなるかもしれません。
そうして見ると、ginnezさんの回答はそのままマークアップできそうな文章ですね。
■1.h1には何を指定するべきか
ginnezさんと同じです。「社内報」と「企画書」と「給料明細」があるとして、みんな表題が社名だったらおかしいです。
ただ、ブログなんかだとh1がブログタイトルに使われる前提で設計（そんな設計がダメなんですけど）してあったりするので、カスタマイズしようとしたら面倒だったり不可能だったりしますよね。
■2.ブラウザの確認の際にアップは必要か
ローカルで確認しています。CMSだとネット上での確認になりますが。
■3.初期化後に何をベースにしているのか
最初に*をクリアしたあとに何をベースにしているかということですよね。
私はよそのサイトなり雑誌なりから持ってきたものに手を加えたものを使っています。
このあたりも参考になるかも。
http://phpspot.org/blog/archives/2006/05/yahoocss.html
■4.ソースの整形をどうしているか
基本的には入れ子構造が正しくなるようにタブでインデントしています。
みなさん、どうも。トピ主のダイです。
色々なご意見大変勉強になります。
iwaimさん＞＞
私もそこが不明の部分がある為に、悩んでおります＾−＾
あきら@坊主頭さん＞＞
いつも勝手に日記楽しませていただいております。
■h1に会社名は好ましくなく、ページのタイトル（たとえば会社概要とか）を割り当てた方が良いのかなと。
なるほど、ページタイトルを割り当ても考慮に入れる・・・
早速、取り入れてみたいと想います。
その際に、ちょっとお聞きしたいのですが
例えば、SEO的なことも考えた場合、ちとトピずれになりますが、
タイトルに見出し内容＝タイトルとした場合、
例）株式会社ジャッパーンって感じに会社名があるとします。
見出し及びページタイトル重要＝面白い全国観光スポットご紹介
その際、タイトルに
面白い全国観光スポットご紹介-株式会社ジャッパーン
って入れた方がより友好的なのでしょうか？
ってこれは、ちとホントにトピずれですね
人により違うと想いますし、何を重要としてって
定義の問題ですもんね。
ただ、タイトルに入れる際、TOPは皆さん言われる要に
会社名もしくわそれに、変わるものを入れるので
良いと思うんですが、下位ページにも見出しページタイトル
＆会社名もしくわそれに変わるものも付随しておいた方が
HP作成側にとっては、どこのページってわかるから良いと
おもうんですが、ん〜微妙な質問ですねスイマセン。
■htmlファイルをブラウザにドラドロすればローカルでプレビュー出来る
知らなかったです。初歩ですか・・・？
今まで単純にIEでブラウザみてましたが
確かによく原理を考えると気づかなければならない要素ですね
有り難うございます。
■Dreamweaverを使用すればタグ整形を好みに設定できます。
そんな事も出来るんですか・・・同様の設定が
出来るか試してみます。
ginnezさん＞＞
■どちらもページ単位で記述されるものである以上、そのページが何を伝えようとしているかが重要・・・
凄く勉強になります。確かにそうですよね。
なぜか違和感があったh1の定義も、なっとくできます。
人により、何をコンセプトにしたいのかで変わるが
コンセプト自体の持つ意味・・・考えていく必要がありますね
■初期化って何のため？
コレに関しては、ご説明を読み大変理解できました。
今まで、なんとなしに作っておりましたが
最初に初期化することにより、いろんな意味で
全ての固有の要素を持たす事が出来るって事ですね
その分、一つ一つのタグの実用性を踏まえてないと
ぐちゃぐちゃにHPがなりそうなので、理解を
踏まえたいと想います。
□しかし、私やっかいなのがハック・・・
ハックに関しては、対応しきれてないブラウザを
正常に無理やり動かす為に
調整している・・・ぐらいにしか知識が無く
どの場合にどれを使うって事がまだまだ勉強不足でわからない
もしかして、皆さん作られるときは、
ハックの形式等はあらかた決まってるんでしょうか・・・
勉強します。
腹巻4世さん＞＞
■ginnezさんの回答はそのままマークアップできそうな文章
ほんとですね。何に対してもこういう理論付けと
構造化をすると解かりやすくなるものですね。
勉強になります。色んな事に活用できそうです。
■3.初期化後に何をベースにしているのか＞
これ、凄く解かりやすいですね。
参考にさせて頂きます。css zen・・・の
様に色んなレイアウトを引き出せるCSSの汎用性は
色んな媒体のこれからの課題にポイントを示した
感じに想います。
--------------------------------------
皆様、ご質問に応対いただきまして、誠に有り難うございます。
色々と悩んでた事も解消でき、また謎が出てくる・・・
日々勉強ですね。
また違った意見やこういう方法もあるって意見も是非
お聞きしたいです。
色々なご意見大変勉強になります。
iwaimさん＞＞
私もそこが不明の部分がある為に、悩んでおります＾−＾
あきら@坊主頭さん＞＞
いつも勝手に日記楽しませていただいております。
■h1に会社名は好ましくなく、ページのタイトル（たとえば会社概要とか）を割り当てた方が良いのかなと。
なるほど、ページタイトルを割り当ても考慮に入れる・・・
早速、取り入れてみたいと想います。
その際に、ちょっとお聞きしたいのですが
例えば、SEO的なことも考えた場合、ちとトピずれになりますが、
タイトルに見出し内容＝タイトルとした場合、
例）株式会社ジャッパーンって感じに会社名があるとします。
見出し及びページタイトル重要＝面白い全国観光スポットご紹介
その際、タイトルに
面白い全国観光スポットご紹介-株式会社ジャッパーン
って入れた方がより友好的なのでしょうか？
ってこれは、ちとホントにトピずれですね
人により違うと想いますし、何を重要としてって
定義の問題ですもんね。
ただ、タイトルに入れる際、TOPは皆さん言われる要に
会社名もしくわそれに、変わるものを入れるので
良いと思うんですが、下位ページにも見出しページタイトル
＆会社名もしくわそれに変わるものも付随しておいた方が
HP作成側にとっては、どこのページってわかるから良いと
おもうんですが、ん〜微妙な質問ですねスイマセン。
■htmlファイルをブラウザにドラドロすればローカルでプレビュー出来る
知らなかったです。初歩ですか・・・？
今まで単純にIEでブラウザみてましたが
確かによく原理を考えると気づかなければならない要素ですね
有り難うございます。
■Dreamweaverを使用すればタグ整形を好みに設定できます。
そんな事も出来るんですか・・・同様の設定が
出来るか試してみます。
ginnezさん＞＞
■どちらもページ単位で記述されるものである以上、そのページが何を伝えようとしているかが重要・・・
凄く勉強になります。確かにそうですよね。
なぜか違和感があったh1の定義も、なっとくできます。
人により、何をコンセプトにしたいのかで変わるが
コンセプト自体の持つ意味・・・考えていく必要がありますね
■初期化って何のため？
コレに関しては、ご説明を読み大変理解できました。
今まで、なんとなしに作っておりましたが
最初に初期化することにより、いろんな意味で
全ての固有の要素を持たす事が出来るって事ですね
その分、一つ一つのタグの実用性を踏まえてないと
ぐちゃぐちゃにHPがなりそうなので、理解を
踏まえたいと想います。
□しかし、私やっかいなのがハック・・・
ハックに関しては、対応しきれてないブラウザを
正常に無理やり動かす為に
調整している・・・ぐらいにしか知識が無く
どの場合にどれを使うって事がまだまだ勉強不足でわからない
もしかして、皆さん作られるときは、
ハックの形式等はあらかた決まってるんでしょうか・・・
勉強します。
腹巻4世さん＞＞
■ginnezさんの回答はそのままマークアップできそうな文章
ほんとですね。何に対してもこういう理論付けと
構造化をすると解かりやすくなるものですね。
勉強になります。色んな事に活用できそうです。
■3.初期化後に何をベースにしているのか＞
これ、凄く解かりやすいですね。
参考にさせて頂きます。css zen・・・の
様に色んなレイアウトを引き出せるCSSの汎用性は
色んな媒体のこれからの課題にポイントを示した
感じに想います。
--------------------------------------
皆様、ご質問に応対いただきまして、誠に有り難うございます。
色々と悩んでた事も解消でき、また謎が出てくる・・・
日々勉強ですね。
また違った意見やこういう方法もあるって意見も是非
お聞きしたいです。
すでに他の方もおっしゃってますが、
マークアップはページ毎に考えた方がいいと思いますよ。
■カメラメーカーHPの製品一覧ページを想定
<div id="contents">
<h1>製品一覧</h1>
<h2>フィルムカメラ</h2>
<ul>
<li>フィルムカメラA</li>
<li>フィルムカメラB</li>
</ul>
<h2>デジタルカメラ</h2>
<ul>
<li>デジタルカメラA</li>
<li>デジタルカメラB</li>
</ul>
</div>
■カメラメーカーHPの個別商品ページを想定
<div id="contents">
<h1>フィルムカメラA</h1>
<h2>機能</h2>
<h3>機能A</h3>
<p>機能Aに関する文章</p>
<h3>機能B</h3>
<p>機能Bに関する文章</p>
<h2>スペック</h2>
<h3>スペックA</h3>
<p>スペックAに関する文章</p>
<h3>スペックB</h3>
<p>スペックBに関する文章</p>
</div>
上記例は、hタグに焦点を当てていますが、
h3以降、dlタグやulタグが適切な場合もあります。
これはダイさんの質問2にも同じことが言えますが、
(x)htmlとCSSのテンプレートを作っておくと楽ですよ。
私は、まずモダンブラウザで確認しながら作成し、
その後、個別のバグ対策（主にIE）をしています。
マークアップはページ毎に考えた方がいいと思いますよ。
■カメラメーカーHPの製品一覧ページを想定
<div id="contents">
<h1>製品一覧</h1>
<h2>フィルムカメラ</h2>
<ul>
<li>フィルムカメラA</li>
<li>フィルムカメラB</li>
</ul>
<h2>デジタルカメラ</h2>
<ul>
<li>デジタルカメラA</li>
<li>デジタルカメラB</li>
</ul>
</div>
■カメラメーカーHPの個別商品ページを想定
<div id="contents">
<h1>フィルムカメラA</h1>
<h2>機能</h2>
<h3>機能A</h3>
<p>機能Aに関する文章</p>
<h3>機能B</h3>
<p>機能Bに関する文章</p>
<h2>スペック</h2>
<h3>スペックA</h3>
<p>スペックAに関する文章</p>
<h3>スペックB</h3>
<p>スペックBに関する文章</p>
</div>
上記例は、hタグに焦点を当てていますが、
h3以降、dlタグやulタグが適切な場合もあります。
これはダイさんの質問2にも同じことが言えますが、
(x)htmlとCSSのテンプレートを作っておくと楽ですよ。
私は、まずモダンブラウザで確認しながら作成し、
その後、個別のバグ対策（主にIE）をしています。
トピ違い＆中途半端な回答になりますが、ご容赦ください。
SEOに関して
SEOに最適化するのと、
文章として最適化する(自然な文章にする)のとでは
文章の書き方が変わります。
※googleのロボットを対象にしてます
例えば、
検索エンジンに「東京 賃貸」というキーワードで上位表示
させたいとします。
そうした場合、
まず<title>に「東京賃貸情報サイト」
といったように重要視するキーワードを頭に持ってきます。
次に<h1>に関しても同様に
「東京賃貸マンション・東京賃貸アパートなど東京都内の賃貸に関する情報は○○○にお任せください。」
という感じで重要視させるキーワードを先頭に持ってきます。
<h2><h3>・・・といった下位の見出しおよび<strong>等の強調も
考慮します。
ただ、東京・賃貸というキーワードを重要視するからといって、
書きすぎは逆効果。
ページ全体の文章で
重要視するキーワードの出現率が７％前後が最適とされています。
また重要視するキーワードの数は多くても３つというのが最適なようです。
ただし、トップページに関しては、
サイト全体のキーワードと考え、７つ程度まで。
話しがそれますが、被リンクの文字もかなり重要になります。
googleで「exit」と検索すると
yahooが最上位に表示されます。
この理由はアダルトサイトで出口のリンクがyahooに設定されているところが非常に多いから。
要は、どんな検索キーワードで上位表示させたいかという部分に重点を置いて文章を作成するということになります。
関係ないですが、
<img>の代替テキストaltは検索エンジンにとっては扱いが弱いので
<h1><img alt="東京賃貸情報サイト" src="hoge.png"></h1>
とするのはSEO的には良くない。
なのでCSSとJavascriptでテキストを画像に置換する等といった小手先の技が必要になります。
<h1 id="maintitle">東京賃貸情報サイト<h1>
という感じでHTMLソース上はシンプルにして、置換するということです。
外部ファイルは無視されますので
ロボット的には単なるテキストと解釈されます。
HTML上に直接style=""とか<head>内にCSS,JSを記述するのは
いまいちぽいです。
出来る限りHTMLはシンプルなものにするということ。
それか、画像とテキスト両方を入れる。
(これはhタグだけではなくaタグ等にも言えることです）
ただ、上位表示させたいキーワードが競合少なければ
普通(基本に忠実)に記述していけば、問題はない。
※競合多いところは、一旦作成して終わりにはならず、
常にアクセス解析を行い、それに合わせ定期的にサイトの更新を行わないといけません。
サイトの更新は結構重要。
単なるレイアウト変更は意味ないです。
また、表示内容を複数用意しといてサイクル表示も
更新とは見なされません。
(かなり長期間の履歴を見て、一致してるかどうか判断しているぽい)
SEOに関して
SEOに最適化するのと、
文章として最適化する(自然な文章にする)のとでは
文章の書き方が変わります。
※googleのロボットを対象にしてます
例えば、
検索エンジンに「東京 賃貸」というキーワードで上位表示
させたいとします。
そうした場合、
まず<title>に「東京賃貸情報サイト」
といったように重要視するキーワードを頭に持ってきます。
次に<h1>に関しても同様に
「東京賃貸マンション・東京賃貸アパートなど東京都内の賃貸に関する情報は○○○にお任せください。」
という感じで重要視させるキーワードを先頭に持ってきます。
<h2><h3>・・・といった下位の見出しおよび<strong>等の強調も
考慮します。
ただ、東京・賃貸というキーワードを重要視するからといって、
書きすぎは逆効果。
ページ全体の文章で
重要視するキーワードの出現率が７％前後が最適とされています。
また重要視するキーワードの数は多くても３つというのが最適なようです。
ただし、トップページに関しては、
サイト全体のキーワードと考え、７つ程度まで。
話しがそれますが、被リンクの文字もかなり重要になります。
googleで「exit」と検索すると
yahooが最上位に表示されます。
この理由はアダルトサイトで出口のリンクがyahooに設定されているところが非常に多いから。
要は、どんな検索キーワードで上位表示させたいかという部分に重点を置いて文章を作成するということになります。
関係ないですが、
<img>の代替テキストaltは検索エンジンにとっては扱いが弱いので
<h1><img alt="東京賃貸情報サイト" src="hoge.png"></h1>
とするのはSEO的には良くない。
なのでCSSとJavascriptでテキストを画像に置換する等といった小手先の技が必要になります。
<h1 id="maintitle">東京賃貸情報サイト<h1>
という感じでHTMLソース上はシンプルにして、置換するということです。
外部ファイルは無視されますので
ロボット的には単なるテキストと解釈されます。
HTML上に直接style=""とか<head>内にCSS,JSを記述するのは
いまいちぽいです。
出来る限りHTMLはシンプルなものにするということ。
それか、画像とテキスト両方を入れる。
(これはhタグだけではなくaタグ等にも言えることです）
ただ、上位表示させたいキーワードが競合少なければ
普通(基本に忠実)に記述していけば、問題はない。
※競合多いところは、一旦作成して終わりにはならず、
常にアクセス解析を行い、それに合わせ定期的にサイトの更新を行わないといけません。
サイトの更新は結構重要。
単なるレイアウト変更は意味ないです。
また、表示内容を複数用意しといてサイクル表示も
更新とは見なされません。
(かなり長期間の履歴を見て、一致してるかどうか判断しているぽい)
偉そうなことを書きましたが、ぼくも日々勉強中です(^^;A。
■ハックについて
制作していけばわかりますが、CSSの仕様に準拠してつくっていけば、ほとんどの場合、ハック（またはブラウザ振り分け）が必要になるのはIEだけです。
以前はアンダーバーハック（CSSの要素名の先頭にアンダーバーを付けるとIEしか読み込まないので、IE用の指定をここでする）をよく使っていましたが、IE7では効かないようですし、IE用に別のスタイルシートを用意したほうが効率的です（IEの不具合はそのスタイルシートだけを直せばいい）。
IEだけに読み込ませるハックは...ちょっとど忘れしたので、このコミュのなかを検索してみてくださいf(^^;
■タグのインデントについて
他の人とスタイルシートの制作を共同でするのでなければ、自分が見やすい方法でいいと思います。
入れ子が激しくなると、インデントしたほうが見やすくなりますが、さらに激しくなると、エディタによっては行が折り返されて、よけいに見づらくなることもありますよね。
ぼくはdivで大まかな範囲指定をするものについては、インデントより、閉じタグ（</div>）のすぐあとに、HTMLのコメントで「<!-wrapper end->」「<!-contents end->」などを付けています。
■ハックについて
制作していけばわかりますが、CSSの仕様に準拠してつくっていけば、ほとんどの場合、ハック（またはブラウザ振り分け）が必要になるのはIEだけです。
以前はアンダーバーハック（CSSの要素名の先頭にアンダーバーを付けるとIEしか読み込まないので、IE用の指定をここでする）をよく使っていましたが、IE7では効かないようですし、IE用に別のスタイルシートを用意したほうが効率的です（IEの不具合はそのスタイルシートだけを直せばいい）。
IEだけに読み込ませるハックは...ちょっとど忘れしたので、このコミュのなかを検索してみてくださいf(^^;
■タグのインデントについて
他の人とスタイルシートの制作を共同でするのでなければ、自分が見やすい方法でいいと思います。
入れ子が激しくなると、インデントしたほうが見やすくなりますが、さらに激しくなると、エディタによっては行が折り返されて、よけいに見づらくなることもありますよね。
ぼくはdivで大まかな範囲指定をするものについては、インデントより、閉じタグ（</div>）のすぐあとに、HTMLのコメントで「<!-wrapper end->」「<!-contents end->」などを付けています。
みなさん、ご意見有り難うございます。
SHIGEさん＞＞
すごく解かりやすいですね。
確かに私も色々と皆さんの意見をお聞きするうちに
マークアップの重要性と作り手側にも
解かりやすい定義となるものだと想いました。
そういうテンプレートを作成し、汎用できる要に
しておくと、便利ですね。
あっきーさん＞＞
■ページを切り替えたい場合に、どれがどのページを開いているのかわからなくなってしまいますよね
これ、私初心者だからカモシレマセンが、
目からウロコです。
確かに・・・株式会社ブラブラ-日本横断旅行のご案内 より
日本横断旅行のご案内-株式会社ブラブラ
の方が、ユーザーがページを切り替えても
解かりやすいですもんね。
メモメモ・・・
すろさん＞＞
私は、webのレベルは・・・ですが、
SEOは、結構自信があり、色々と実行、調査、実行・・・を
繰り返し、ある程度上位ランクする方法も解かってた
つもりですが、まだまだでした＾−＾
h1でも前に来る方が重要性があるんですね。
またキーワードの数は人により違うと想いますが
文章に意味付けをして文章の中にキーワードを
なるべくほりこんでいるので、キーワード出現数が
かなり多くなってる状況でした。
ですが、お読みさせていただき、
何でも言うたらええってもんちゃう！！
って事ですね。
多すぎるとスパム扱いされる恐れも今後ありますもんね
大変勉強になりました。
今後キーワード数も検査していきたいと想います。
パンダさん＞＞
お知らせいただき、有り難うございます。
先輩方（mixi）のご意見大変参考になります。
今後ともよろしくですー
ginnezさん＞＞
ご意見有り難うございます。
色々と皆さんのトピを見させていただき、
勉強にはげみます。
アンダー八苦ｗは、今日本を読んでいて知りました
IEが最強と思ってた私は・・・
ここ１ヶ月で色んな見方が変わりました。
---------------------------------------------
みなさん、本当に有り難うございます。
今後とも先輩方、よろしくです。
↓
SHIGEさん＞＞
すごく解かりやすいですね。
確かに私も色々と皆さんの意見をお聞きするうちに
マークアップの重要性と作り手側にも
解かりやすい定義となるものだと想いました。
そういうテンプレートを作成し、汎用できる要に
しておくと、便利ですね。
あっきーさん＞＞
■ページを切り替えたい場合に、どれがどのページを開いているのかわからなくなってしまいますよね
これ、私初心者だからカモシレマセンが、
目からウロコです。
確かに・・・株式会社ブラブラ-日本横断旅行のご案内 より
日本横断旅行のご案内-株式会社ブラブラ
の方が、ユーザーがページを切り替えても
解かりやすいですもんね。
メモメモ・・・
すろさん＞＞
私は、webのレベルは・・・ですが、
SEOは、結構自信があり、色々と実行、調査、実行・・・を
繰り返し、ある程度上位ランクする方法も解かってた
つもりですが、まだまだでした＾−＾
h1でも前に来る方が重要性があるんですね。
またキーワードの数は人により違うと想いますが
文章に意味付けをして文章の中にキーワードを
なるべくほりこんでいるので、キーワード出現数が
かなり多くなってる状況でした。
ですが、お読みさせていただき、
何でも言うたらええってもんちゃう！！
って事ですね。
多すぎるとスパム扱いされる恐れも今後ありますもんね
大変勉強になりました。
今後キーワード数も検査していきたいと想います。
パンダさん＞＞
お知らせいただき、有り難うございます。
先輩方（mixi）のご意見大変参考になります。
今後ともよろしくですー
ginnezさん＞＞
ご意見有り難うございます。
色々と皆さんのトピを見させていただき、
勉強にはげみます。
アンダー八苦ｗは、今日本を読んでいて知りました
IEが最強と思ってた私は・・・
ここ１ヶ月で色んな見方が変わりました。
---------------------------------------------
みなさん、本当に有り難うございます。
今後とも先輩方、よろしくです。
↓
さて、何度も申し訳ないのですが
もう２つほど、疑問に想いましたので
お聞きしたいのですが・・・
---------------------------------
http://kyotoenglishclub.web.fc2.com/sample.html
上をご覧下さい。
metaやalt等抜けておりますが、さて置き
デザイン性のかけらも感じさせないかも知れませんが
質問
上記HPにての疑問
■IEでは、文字表示を最大にしても
サイドコンテンツ部及びメインコンテンツ部の
文字はサイズが変わるが、header部は、指定しています。
しかし、firefoxにて確認すると、
なぜかheader部もサイズが変更され、レイアウトが
大きくなると崩れます。
これを指定してやる事は出来るのでしょうか？
■コンテンツ部下部のテーブルについて
こちらに関して、
左＝写真 次＝住所 真ん中＝価格 次＝景観 右＝受付
の順番にしておりますが、
このような場合、
table属性で作るかcssで作るか悩んでおります。
色々と以前のトピも見てましたが
テーブルに関しては、テーブルとして
定義されるものには、tableで作る方が良いと書いてありました。
しかし、実際どのような場合ってのが不明なので
お聞きしたく想います。
■IEでは、表がブルー色で表現されるが
firefoxでは、黒くなってしまう・・・
まぁこれに関しては、私の勉強不足だと想いますが
表組みをした事がないので、
何と無しに作っておりますが
皆さんならどういう形で作られますか？
今のままではセンスのかけらも感じないので
このような場合に、基本としてこう考えるってのが
ないので、悩んでおります。
table又はcssにて作成されるソース等
勉強させて頂ければ嬉しいのですが・・・
■ロールオーバー
これに関しても他トピを読みました。
私が疑問に思うのは、
私の知る限り方法は3つ
・javaでロールオーバー
・css(ul li)にて・・・一つ一つ切り離された画像を表現
・同上にて・・・・・・合体した画像を使用し、表現
等だと思っておりますが、
皆さんのご意見として使いやすい又は、
今後の事も考えこれがいいってのはありますか？
是非、お聞きしたのですが・・・
■ソースのダメだし・・・
先輩方、みなさんの率直な意見及びもし、お時間ございましたら、解かりやすく書いて頂けますと大変助かります。
以上、ながながといつも申し訳ないですが
ヨロシクお願いします。
もう２つほど、疑問に想いましたので
お聞きしたいのですが・・・
---------------------------------
http://kyotoenglishclub.web.fc2.com/sample.html
上をご覧下さい。
metaやalt等抜けておりますが、さて置き
デザイン性のかけらも感じさせないかも知れませんが
質問
上記HPにての疑問
■IEでは、文字表示を最大にしても
サイドコンテンツ部及びメインコンテンツ部の
文字はサイズが変わるが、header部は、指定しています。
しかし、firefoxにて確認すると、
なぜかheader部もサイズが変更され、レイアウトが
大きくなると崩れます。
これを指定してやる事は出来るのでしょうか？
■コンテンツ部下部のテーブルについて
こちらに関して、
左＝写真 次＝住所 真ん中＝価格 次＝景観 右＝受付
の順番にしておりますが、
このような場合、
table属性で作るかcssで作るか悩んでおります。
色々と以前のトピも見てましたが
テーブルに関しては、テーブルとして
定義されるものには、tableで作る方が良いと書いてありました。
しかし、実際どのような場合ってのが不明なので
お聞きしたく想います。
■IEでは、表がブルー色で表現されるが
firefoxでは、黒くなってしまう・・・
まぁこれに関しては、私の勉強不足だと想いますが
表組みをした事がないので、
何と無しに作っておりますが
皆さんならどういう形で作られますか？
今のままではセンスのかけらも感じないので
このような場合に、基本としてこう考えるってのが
ないので、悩んでおります。
table又はcssにて作成されるソース等
勉強させて頂ければ嬉しいのですが・・・
■ロールオーバー
これに関しても他トピを読みました。
私が疑問に思うのは、
私の知る限り方法は3つ
・javaでロールオーバー
・css(ul li)にて・・・一つ一つ切り離された画像を表現
・同上にて・・・・・・合体した画像を使用し、表現
等だと思っておりますが、
皆さんのご意見として使いやすい又は、
今後の事も考えこれがいいってのはありますか？
是非、お聞きしたのですが・・・
■ソースのダメだし・・・
先輩方、みなさんの率直な意見及びもし、お時間ございましたら、解かりやすく書いて頂けますと大変助かります。
以上、ながながといつも申し訳ないですが
ヨロシクお願いします。
すいません。
上のCSSソースです。
@charset "Shift_JIS";
/* 全体構造
---------------------------------------------------- */
body {
margin: 0;
padding: 0;
text-align: left;
font-size: 105%;
text-align: center; /* IEセンタリング */
}
#wrapper {
width: 783px;
margin: 5px auto;
text-align: left; /* IE様 */
}
/* 回り込み解除 */
br.clear{
clear:both;
line-height:0px;
}
h1 { font: normal 2.1em Arial, Sans-Serif; letter-spacing: -1px; padding: 2px 0 0 8px; margin: 0;
color: #6699ff; font-size:20px; font-weight:bold;}
h1 a:hover, h2 a:hover { color: #6699ff; background: inherit; }
h2 { margin: 10px 0 7px 2px; padding: 0 0 0 8px; font: bold 1.7em Arial, Sans-Serif; letter-spacing: -1px;}
h2 { font-size: 98%; color: #ff9966; background: inherit; border-bottom: 1px dashed #0099FF; text-align:center}
h3 { font-size: 95%; color: #0066FF; background-image:url(../img/z2.gif);
padding: 6px 0 6px 10px; font: bold; margin: 15px 0; }
p { color:#666666; line-height: 140%; margin: 0 0 5px 0; padding:0 7px; font-size:87%;}
/* リンク
---------------------------------------------------- */
a:link {
color: #3366ff;
background: transparent;
}
a:visited {
color: #800080;
background: transparent;
}
a:hover, a:active {
color: #ff9933;
background: transparent;
}
/* ヘッダ
---------------------------------------------------- */
#header {
background-image: url(../img/banner1.gif) ;
height: 80px;
}
.right {
float: right;
margin-top: 15px;
margin-right: 10px;
width: 450px;
text-align: right;
font-size: 14px;
color:#333333;
line-height:105%;
}
.left {
float: left;
margin: 0;
width: 310px;
text-align:left;
}
#footer {
clear: both; /* 寄せを解除 */
background-color: #DDDDDD;
height: 50px;
}
/* 左ナビゲーション及びサブカテゴリ
---------------------------------------------------- */
#navigation {
float: left;
width: 154px;
margin: 2px 0;
border-top: 8px solid #33CC99;
background-image: url(../img/zzzzz.gif) ;
}
#navigation ul {
margin: 0;
padding: 0;
border-top: 1px solid #cccccc;
border-bottom: 1px solid #cccccc;
list-style: none;
}
#navigation li {
margin: 0;
padding: 0;
width: 154px;
height: 35px;
background-color: #FFFFFF;
text-indent: -9999px;
}
#navigation li a {
text-decoration: none; /* ■Firefox等で線が表示されないようにする */
display: block;
width: 154px;
height: 35px;
}
#navigation li#top {
background: url(../img/top.jpg) no-repeat;
}
#navigation li#about {
background: url(../img/about.jpg) no-repeat;
}
#navigation li#buy {
background: url(../img/buy.jpg) no-repeat;
}
#navigation li#man {
background: url(../img/man.jpg) no-repeat;
}
#navigation li#rent {
background: url(../img/rent.jpg) no-repeat;
}
#navigation li#top a:hover {
background: url(../img/top1.jpg) no-repeat;
}
#navigation li#about a:hover {
background: url(../img/about1.jpg) no-repeat;
}
#navigation li#buy a:hover {
background: url(../img/buy1.jpg) no-repeat;
}
#navigation li#man a:hover {
background: url(../img/man1.jpg) no-repeat;
}
#navigation li#rent a:hover {
background: url(../img/rent1.jpg) no-repeat;
}
#subcategory {
margin:20px 2px;
}
.tr {
font-size:12px;
}
/* メイン・コンテンツ
---------------------------------------------------- */
#primary {
float: right;
width: 624px;
margin: 2px 0; /* 上下方向にマージンを指定 */
}
/* フッタ
---------------------------------------------------- */
#footer {
clear: both; /* 寄せを解除 */
background-color: #DDDDDD;
height: 50px;
}
上のCSSソースです。
@charset "Shift_JIS";
/* 全体構造
---------------------------------------------------- */
body {
margin: 0;
padding: 0;
text-align: left;
font-size: 105%;
text-align: center; /* IEセンタリング */
}
#wrapper {
width: 783px;
margin: 5px auto;
text-align: left; /* IE様 */
}
/* 回り込み解除 */
br.clear{
clear:both;
line-height:0px;
}
h1 { font: normal 2.1em Arial, Sans-Serif; letter-spacing: -1px; padding: 2px 0 0 8px; margin: 0;
color: #6699ff; font-size:20px; font-weight:bold;}
h1 a:hover, h2 a:hover { color: #6699ff; background: inherit; }
h2 { margin: 10px 0 7px 2px; padding: 0 0 0 8px; font: bold 1.7em Arial, Sans-Serif; letter-spacing: -1px;}
h2 { font-size: 98%; color: #ff9966; background: inherit; border-bottom: 1px dashed #0099FF; text-align:center}
h3 { font-size: 95%; color: #0066FF; background-image:url(../img/z2.gif);
padding: 6px 0 6px 10px; font: bold; margin: 15px 0; }
p { color:#666666; line-height: 140%; margin: 0 0 5px 0; padding:0 7px; font-size:87%;}
/* リンク
---------------------------------------------------- */
a:link {
color: #3366ff;
background: transparent;
}
a:visited {
color: #800080;
background: transparent;
}
a:hover, a:active {
color: #ff9933;
background: transparent;
}
/* ヘッダ
---------------------------------------------------- */
#header {
background-image: url(../img/banner1.gif) ;
height: 80px;
}
.right {
float: right;
margin-top: 15px;
margin-right: 10px;
width: 450px;
text-align: right;
font-size: 14px;
color:#333333;
line-height:105%;
}
.left {
float: left;
margin: 0;
width: 310px;
text-align:left;
}
#footer {
clear: both; /* 寄せを解除 */
background-color: #DDDDDD;
height: 50px;
}
/* 左ナビゲーション及びサブカテゴリ
---------------------------------------------------- */
#navigation {
float: left;
width: 154px;
margin: 2px 0;
border-top: 8px solid #33CC99;
background-image: url(../img/zzzzz.gif) ;
}
#navigation ul {
margin: 0;
padding: 0;
border-top: 1px solid #cccccc;
border-bottom: 1px solid #cccccc;
list-style: none;
}
#navigation li {
margin: 0;
padding: 0;
width: 154px;
height: 35px;
background-color: #FFFFFF;
text-indent: -9999px;
}
#navigation li a {
text-decoration: none; /* ■Firefox等で線が表示されないようにする */
display: block;
width: 154px;
height: 35px;
}
#navigation li#top {
background: url(../img/top.jpg) no-repeat;
}
#navigation li#about {
background: url(../img/about.jpg) no-repeat;
}
#navigation li#buy {
background: url(../img/buy.jpg) no-repeat;
}
#navigation li#man {
background: url(../img/man.jpg) no-repeat;
}
#navigation li#rent {
background: url(../img/rent.jpg) no-repeat;
}
#navigation li#top a:hover {
background: url(../img/top1.jpg) no-repeat;
}
#navigation li#about a:hover {
background: url(../img/about1.jpg) no-repeat;
}
#navigation li#buy a:hover {
background: url(../img/buy1.jpg) no-repeat;
}
#navigation li#man a:hover {
background: url(../img/man1.jpg) no-repeat;
}
#navigation li#rent a:hover {
background: url(../img/rent1.jpg) no-repeat;
}
#subcategory {
margin:20px 2px;
}
.tr {
font-size:12px;
}
/* メイン・コンテンツ
---------------------------------------------------- */
#primary {
float: right;
width: 624px;
margin: 2px 0; /* 上下方向にマージンを指定 */
}
/* フッタ
---------------------------------------------------- */
#footer {
clear: both; /* 寄せを解除 */
background-color: #DDDDDD;
height: 50px;
}
■文字サイズについて
pxは、画面解像度に依存する相対単位なので、
FirefoxはもちろんSafariやOpera等のモダンブラウザでは、
閲覧時にユーザーが文字を拡大・縮小することができます。
px指定で文字の拡大・縮小ができないのは逆にIEのバグです。
■テーブルの使用是非について
tableタグの使用については賛否両論色々ありますが、
レイアウトのためにtableタグを使用することは避け、
本人が適切だと考えるマークアップには良しというのが、
現在、多数派の意見であると認識しています。
個人的に思うのは、tableタグの使用を敬遠するあまり、
divタグの入れ子になってしまうのではナンセンスだなぁと。
それが表であるならば、どんどん使いましょう！
それから余談ですが、tableタグでレイアウトを行った場合、
ページが表示されるのは</table>が読み込まれた後になり、
ページが表示されるまでに時間もかかってしまいます。
■テーブルの表示不具合について
Windowsでの現状の確認はしていませんが、
CSSで以下のように記述してはどうでしょう？
table {
border-collapse: collapse;
}
td {
border: 1px solid #0cf;
}
■ロールオーバーについて
ロールオーバーに限らずCSSで背景画像を指定すると、
各ブラウザの初期設定によっては印刷されません。
構成上必要な画像は背景画像を避けた方が良いですよ。
ロールオーバーの画像を個別にするか1枚にまとめるかは、
将来のメンテナンス性を考えると、1枚の方が断然楽ですね。
特に大規模なサイトの場合、CSSで一括変更できますし。
小規模サイトで今後のメンテナンスの必要がない場合は、
JavaScriptで楽をすることもありますが（笑）
■ソースについて
不足しているのはhタグでのマークアップくらいでしょうか。
ダイさんはきちんと勉強されている方のようですので、
この際、tableタグもCSSで制御してはいかがでしょう。
いまは大変だと思いますが、この調子で頑張って下さいね。
pxは、画面解像度に依存する相対単位なので、
FirefoxはもちろんSafariやOpera等のモダンブラウザでは、
閲覧時にユーザーが文字を拡大・縮小することができます。
px指定で文字の拡大・縮小ができないのは逆にIEのバグです。
■テーブルの使用是非について
tableタグの使用については賛否両論色々ありますが、
レイアウトのためにtableタグを使用することは避け、
本人が適切だと考えるマークアップには良しというのが、
現在、多数派の意見であると認識しています。
個人的に思うのは、tableタグの使用を敬遠するあまり、
divタグの入れ子になってしまうのではナンセンスだなぁと。
それが表であるならば、どんどん使いましょう！
それから余談ですが、tableタグでレイアウトを行った場合、
ページが表示されるのは</table>が読み込まれた後になり、
ページが表示されるまでに時間もかかってしまいます。
■テーブルの表示不具合について
Windowsでの現状の確認はしていませんが、
CSSで以下のように記述してはどうでしょう？
table {
border-collapse: collapse;
}
td {
border: 1px solid #0cf;
}
■ロールオーバーについて
ロールオーバーに限らずCSSで背景画像を指定すると、
各ブラウザの初期設定によっては印刷されません。
構成上必要な画像は背景画像を避けた方が良いですよ。
ロールオーバーの画像を個別にするか1枚にまとめるかは、
将来のメンテナンス性を考えると、1枚の方が断然楽ですね。
特に大規模なサイトの場合、CSSで一括変更できますし。
小規模サイトで今後のメンテナンスの必要がない場合は、
JavaScriptで楽をすることもありますが（笑）
■ソースについて
不足しているのはhタグでのマークアップくらいでしょうか。
ダイさんはきちんと勉強されている方のようですので、
この際、tableタグもCSSで制御してはいかがでしょう。
いまは大変だと思いますが、この調子で頑張って下さいね。
■コンテンツ部下部のテーブルについて
若輩者の意見ですが、tableでもcssでも、どちらでもよろしいかと思います。
製作者の（回りも含めた）環境に、左右されることも多いでしょうし・・
このように繰り返しが多い表のようなものを製作するとき、皆さんはどのようにｃｓｓで組んでらっしゃるのでしょうか？
少し気になります。
個人的には、ulとliで組んで、後はｃｓｓでデザインいれというのを、よく使いますが・・・これっていいのでしょうか？
<ul class="枠">
<li class="写真">写真</li>
<li class="住所">住所</li>
<li class="価格">価格</li>
<li class="景観">景観</li>
<li class="受付">受付</li>
</ul>
このように組んでおくと、プログラムが入った後に全面的に表デザインの変更とか、酷なことになっても、何とか対応できたりするので・・・少々皆様のご意見をお伺いしたいです。
若輩者の意見ですが、tableでもcssでも、どちらでもよろしいかと思います。
製作者の（回りも含めた）環境に、左右されることも多いでしょうし・・
このように繰り返しが多い表のようなものを製作するとき、皆さんはどのようにｃｓｓで組んでらっしゃるのでしょうか？
少し気になります。
個人的には、ulとliで組んで、後はｃｓｓでデザインいれというのを、よく使いますが・・・これっていいのでしょうか？
<ul class="枠">
<li class="写真">写真</li>
<li class="住所">住所</li>
<li class="価格">価格</li>
<li class="景観">景観</li>
<li class="受付">受付</li>
</ul>
このように組んでおくと、プログラムが入った後に全面的に表デザインの変更とか、酷なことになっても、何とか対応できたりするので・・・少々皆様のご意見をお伺いしたいです。
初心者ですので私にも勉強させてください。
＞HEDDERの文字はSHIGE さんの言われるとおりだと思います。
firefoxの標準文字をターゲットにレイアウトをデザインするしかないかも。
＞コンテンツ部下部のテーブル
この場合はcssでやる必要がないと思います。
ただこれ以上画像が増えてテーブルがレイアウトとして使われるようになるならcssのほうがよいかと考えます。
でもそうなればDIVの入れ子になりソースが読みにくいかも知れないですね。
あみじろ さんのようにリストタグで処理かな。
＞表の枠の色
firefoxではtable trタグではbordercolorは属性でサポートされていないのでcssで設定したほうがよいと思います。
＞ロールオーバー
今までは画像をたくさん用意してｽｸﾘﾌﾟﾄで切り替えていましたが合体した画像を使ったところたった一つで済みました。
管理も楽でボタンの題名にテキストも使えて便利なので自分はいい方法だと思いましたが・・
流行り廃りがあり今は流行らないと書かれているものがありました。
どうなんでしょう。cssでhiddenがなにかの不具合になるかもですね。
＞HEDDERの文字はSHIGE さんの言われるとおりだと思います。
firefoxの標準文字をターゲットにレイアウトをデザインするしかないかも。
＞コンテンツ部下部のテーブル
この場合はcssでやる必要がないと思います。
ただこれ以上画像が増えてテーブルがレイアウトとして使われるようになるならcssのほうがよいかと考えます。
でもそうなればDIVの入れ子になりソースが読みにくいかも知れないですね。
あみじろ さんのようにリストタグで処理かな。
＞表の枠の色
firefoxではtable trタグではbordercolorは属性でサポートされていないのでcssで設定したほうがよいと思います。
＞ロールオーバー
今までは画像をたくさん用意してｽｸﾘﾌﾟﾄで切り替えていましたが合体した画像を使ったところたった一つで済みました。
管理も楽でボタンの題名にテキストも使えて便利なので自分はいい方法だと思いましたが・・
流行り廃りがあり今は流行らないと書かれているものがありました。
どうなんでしょう。cssでhiddenがなにかの不具合になるかもですね。
■コンテンツ部下部のテーブルについて
私は内容によって変えますが・・・
表に適した内容ならテーブルで。
ただ、１：１の内容なら
dlを使います。
テーブルにする際は、
どこまでのブラウザが対応しているか
把握はしきれていないのですが、
以下のようにテーブル内でヘッダとボディー(フッタがあればフッタも)を分けるといいかも。
以下サンプル(見やすいよう、幅等の指定は消してます。)
/////////////////////////////////////////////////////
<table>
<!--<caption>表の題名(ないときは省略)<caption>-->
<thead>
<tr>
<th>外観</th>
<th>物件名 / 所在地</th>
<th>価格</th>
<th>景観</th>
<th受付</th>
</tr>
</thead>
<!--
<tfoot>
<tr>
<th>フッタがある場合に。</th>
<th>※tbodyより先に記述する必要あり。</th>
<th>大概は、金額の計算で合計がフッタに</th>
</tr>
</tfoot>
-->
<tbody>
<tr>
<td><img src="img/sam.gif" width="100" height="75" /></td>
<td>日本のどこかの地域<br />
あなたならどこへ出かけますか？</td>
<td>価格</td>
<td>間取り</td>
<td>お問い合わせ</td>
</tr>
<tbody>
</table>
/////////////////////////////////////////////////////
theadとtbodyを明確に分けるのは、
<table>
<tr>
<td></td>
</tr>
</table>
といったように、<table>の直後に<tr>がある場合は
tbodyが省略されたものとみなされるので(仕様上)。
■ロールオーバー
すでに書かれていますが、
1枚画像でやったほうがいいと思います。
私の理由は単純に1枚画像のほうが動作軽いからです。
私は内容によって変えますが・・・
表に適した内容ならテーブルで。
ただ、１：１の内容なら
dlを使います。
テーブルにする際は、
どこまでのブラウザが対応しているか
把握はしきれていないのですが、
以下のようにテーブル内でヘッダとボディー(フッタがあればフッタも)を分けるといいかも。
以下サンプル(見やすいよう、幅等の指定は消してます。)
/////////////////////////////////////////////////////
<table>
<!--<caption>表の題名(ないときは省略)<caption>-->
<thead>
<tr>
<th>外観</th>
<th>物件名 / 所在地</th>
<th>価格</th>
<th>景観</th>
<th受付</th>
</tr>
</thead>
<!--
<tfoot>
<tr>
<th>フッタがある場合に。</th>
<th>※tbodyより先に記述する必要あり。</th>
<th>大概は、金額の計算で合計がフッタに</th>
</tr>
</tfoot>
-->
<tbody>
<tr>
<td><img src="img/sam.gif" width="100" height="75" /></td>
<td>日本のどこかの地域<br />
あなたならどこへ出かけますか？</td>
<td>価格</td>
<td>間取り</td>
<td>お問い合わせ</td>
</tr>
<tbody>
</table>
/////////////////////////////////////////////////////
theadとtbodyを明確に分けるのは、
<table>
<tr>
<td></td>
</tr>
</table>
といったように、<table>の直後に<tr>がある場合は
tbodyが省略されたものとみなされるので(仕様上)。
■ロールオーバー
すでに書かれていますが、
1枚画像でやったほうがいいと思います。
私の理由は単純に1枚画像のほうが動作軽いからです。
皆さん、色々なご意見本当に有り難うございました。
ちょっと出張で、ご返事遅れました。
SHIGEさん、 あみじろさん、ポルコさん、すろさん、ありがとうさん ＞＞
■文字のサイズ
IEのバグなんですね。ってことは、Firefox等にて
指定するタグも存在するって事かな・・・調べてみます。
■テーブルについて
やはりこれに関しても、何を表現するかにより
tableを使ったほうが良い場合と使わないほうが良い場合、
それを的確に判断するには、ある程度の慣れの必要性を
感じます。今後も頑張って作ります。
皆様のソース等かなり勉強になります。
あれからTABLEタグも勉強しましたが、やはり実践で
されてる方は、タグが綺麗だなっと・・・
本当に有り難うございます。
またリストタグを応用し・・・って考えもあるんですね。
■ロールオーバー
やはり、これも皆さん同じ考えの方も居られる様ですね。
私は単に１枚画像を作ってコピって変色等が簡単なので
使用していますが今後のcssの動向を見ていると
text主体で行く方が良いみたいですね
ただ、text主体で行くと文字拡大を使われたときに
かなり字単体が、悪く言えばダサくなるんですよね
ローマ字以外は・・・なんか良い方法が無いものか
あと、最近何かの本で読んだんですが、今後
cssの多様性は高まるが、javaの多様性に飛んだ使い方を
修得し、活用する方向が良いのでは？っとなってました。
確かにそれも先ほどのTABLEタグと一緒で
使い分けにより、色んな面で良いサイト作りを
していく定義・意識が必要なんだろうなっと想います。
■ソースについて
コレに関しても、ある程度どれがどういう役割を持って
どういう関係があるのか？特にレイアウトを起こす場合
主体とするものと子ボックス？の関係が解かってきました。
皆さんのご指導賜り、今カナリ楽しいです。
勉強がてらといいますか、友達のHPを作りまくっています。
ようやくやりたい表現も、そのまま起こせるようになって、
HPビルダーでただ、当てはめる・・・だけで作ってた頃を
思い出すと、一つ一つのタグや見出し、定義の重要性を
ものすごく感じさせられます。
あとは、今全部頭の中で、イメージしたものを
見出し定義・文章定義⇒xthmlタグ投入⇒css投入
⇒xthml・cssのブラウザ確認及び修正って感じです。
ただ、他トピで言われてますが
プロの方たちはイラレやfireworks等でデザインを
落としこみ作成されてると聞きます。
デザイン等あつかった事のない私はどこからどうすれば
っと初心者なりに考え、やって生きたいと想います。
またそういう勉強の際に、良い本やサイト等ございましたら
是非お教えいただけると、嬉しいです＾−＾
ちなみに私は以前トピで紹介いただいた本を実際見て
ほとんど買い、特にWEB標準・・・に関する本は
初心者にもわかりやすくまた重要性があるって事を
認識できました。
実際、以前他トピで個人HPのレイアウトくずれが起こった際、
皆様にお聞きし、わかったつもりで、訳の解らん
返信をして・・・とありましたが
そちらも今回トピックで勉強させていただいた事を
参考に、スグに修正でき、レイアウト崩れも直りました。
って、まだまだ不要タグを多いと想いますが・・・
■欲を言えば・・・
これは、初心者からのあくまでも希望なので
さらっと流していただければ良いですが・・・
このコミュの中には、デザイン・css・xhtml等、
に携わるお仕事されてる方が沢山居られると想います。
そんな先輩達が初心者にクイズ形式で
こういうものを作る場合、どうする？みたいな質問等
いただけるとカナリ勉強になります。
また、その際も先輩同士でもやり方が違うから
色んな意見が出てきて
初心者〜上級者までの考えを聞く事により
ある程度web標準の整合性が出てくるかな？っと
まぁそれをそのまま、鵜呑みにするのは怖いと想いますが・・・
ちょっと出張で、ご返事遅れました。
SHIGEさん、 あみじろさん、ポルコさん、すろさん、ありがとうさん ＞＞
■文字のサイズ
IEのバグなんですね。ってことは、Firefox等にて
指定するタグも存在するって事かな・・・調べてみます。
■テーブルについて
やはりこれに関しても、何を表現するかにより
tableを使ったほうが良い場合と使わないほうが良い場合、
それを的確に判断するには、ある程度の慣れの必要性を
感じます。今後も頑張って作ります。
皆様のソース等かなり勉強になります。
あれからTABLEタグも勉強しましたが、やはり実践で
されてる方は、タグが綺麗だなっと・・・
本当に有り難うございます。
またリストタグを応用し・・・って考えもあるんですね。
■ロールオーバー
やはり、これも皆さん同じ考えの方も居られる様ですね。
私は単に１枚画像を作ってコピって変色等が簡単なので
使用していますが今後のcssの動向を見ていると
text主体で行く方が良いみたいですね
ただ、text主体で行くと文字拡大を使われたときに
かなり字単体が、悪く言えばダサくなるんですよね
ローマ字以外は・・・なんか良い方法が無いものか
あと、最近何かの本で読んだんですが、今後
cssの多様性は高まるが、javaの多様性に飛んだ使い方を
修得し、活用する方向が良いのでは？っとなってました。
確かにそれも先ほどのTABLEタグと一緒で
使い分けにより、色んな面で良いサイト作りを
していく定義・意識が必要なんだろうなっと想います。
■ソースについて
コレに関しても、ある程度どれがどういう役割を持って
どういう関係があるのか？特にレイアウトを起こす場合
主体とするものと子ボックス？の関係が解かってきました。
皆さんのご指導賜り、今カナリ楽しいです。
勉強がてらといいますか、友達のHPを作りまくっています。
ようやくやりたい表現も、そのまま起こせるようになって、
HPビルダーでただ、当てはめる・・・だけで作ってた頃を
思い出すと、一つ一つのタグや見出し、定義の重要性を
ものすごく感じさせられます。
あとは、今全部頭の中で、イメージしたものを
見出し定義・文章定義⇒xthmlタグ投入⇒css投入
⇒xthml・cssのブラウザ確認及び修正って感じです。
ただ、他トピで言われてますが
プロの方たちはイラレやfireworks等でデザインを
落としこみ作成されてると聞きます。
デザイン等あつかった事のない私はどこからどうすれば
っと初心者なりに考え、やって生きたいと想います。
またそういう勉強の際に、良い本やサイト等ございましたら
是非お教えいただけると、嬉しいです＾−＾
ちなみに私は以前トピで紹介いただいた本を実際見て
ほとんど買い、特にWEB標準・・・に関する本は
初心者にもわかりやすくまた重要性があるって事を
認識できました。
実際、以前他トピで個人HPのレイアウトくずれが起こった際、
皆様にお聞きし、わかったつもりで、訳の解らん
返信をして・・・とありましたが
そちらも今回トピックで勉強させていただいた事を
参考に、スグに修正でき、レイアウト崩れも直りました。
って、まだまだ不要タグを多いと想いますが・・・
■欲を言えば・・・
これは、初心者からのあくまでも希望なので
さらっと流していただければ良いですが・・・
このコミュの中には、デザイン・css・xhtml等、
に携わるお仕事されてる方が沢山居られると想います。
そんな先輩達が初心者にクイズ形式で
こういうものを作る場合、どうする？みたいな質問等
いただけるとカナリ勉強になります。
また、その際も先輩同士でもやり方が違うから
色んな意見が出てきて
初心者〜上級者までの考えを聞く事により
ある程度web標準の整合性が出てくるかな？っと
まぁそれをそのまま、鵜呑みにするのは怖いと想いますが・・・
>■文字のサイズ
>IEのバグなんですね。ってことは、Firefox等にて
>指定するタグも存在するって事かな・・・調べてみます。
文字サイズ固定にする指定ということでしょうか？
あいにく、無理です。
cmやinといった絶対単位もCSSにはあるんですけど、
ブラウザ側が、ユーザビリティ・アクセシビリティを考慮し
サイズ変更可能になっています。
IE7では、他のブラウザと同じく変更可能になってます。
どうしても、サイズ固定の文字にしたいということであれば
画像にするしかありません。
ただ、レイアウトが崩れるからといって
画像にするのは、悩ましいところです。
レイアウトが崩れたとしても、要素の重なりが発生しなければ
文字自体は読めることになるので・・・
まぁ崩れないに越したことはないですけどね。
それすなわち、リキッドレイアウトにするということに。
(最近、職場の会議室に大型ディスプレイのPCが置かれて
それで幅固定のサイト閲覧すると、無駄な余白多すぎ
と思うこと多々あり・・・
まぁOpera使えば解決する問題なんですけどね。)
この辺りのことは
アクセシビリティに関することも関わってくるため
(私は目を通しきれていませんが)
下記のサイトで情報収集されると良いです。
WCAG1.0(勧告)
http://www.w3.org/TR/WAI-WEBCONTENT/
(↑原文。英語です)
http://www.zspc.com/documents/wcag10/
(↑翻訳。日本語です)
WCAG2.0(ドラフト)
http://www.w3.org/TR/WCAG20/complete.html
(↑原文。翻訳はない模様)
JIS X 8341-3
http://www.jisc.go.jp/app/JPS/JPSO0020.html
(JIS検索する際は、「X8341-3」で検索してください。)
>IEのバグなんですね。ってことは、Firefox等にて
>指定するタグも存在するって事かな・・・調べてみます。
文字サイズ固定にする指定ということでしょうか？
あいにく、無理です。
cmやinといった絶対単位もCSSにはあるんですけど、
ブラウザ側が、ユーザビリティ・アクセシビリティを考慮し
サイズ変更可能になっています。
IE7では、他のブラウザと同じく変更可能になってます。
どうしても、サイズ固定の文字にしたいということであれば
画像にするしかありません。
ただ、レイアウトが崩れるからといって
画像にするのは、悩ましいところです。
レイアウトが崩れたとしても、要素の重なりが発生しなければ
文字自体は読めることになるので・・・
まぁ崩れないに越したことはないですけどね。
それすなわち、リキッドレイアウトにするということに。
(最近、職場の会議室に大型ディスプレイのPCが置かれて
それで幅固定のサイト閲覧すると、無駄な余白多すぎ
と思うこと多々あり・・・
まぁOpera使えば解決する問題なんですけどね。)
この辺りのことは
アクセシビリティに関することも関わってくるため
(私は目を通しきれていませんが)
下記のサイトで情報収集されると良いです。
WCAG1.0(勧告)
http://www.w3.org/TR/WAI-WEBCONTENT/
(↑原文。英語です)
http://www.zspc.com/documents/wcag10/
(↑翻訳。日本語です)
WCAG2.0(ドラフト)
http://www.w3.org/TR/WCAG20/complete.html
(↑原文。翻訳はない模様)
JIS X 8341-3
http://www.jisc.go.jp/app/JPS/JPSO0020.html
(JIS検索する際は、「X8341-3」で検索してください。)
僕の勘違いだったら申し訳ないんですが、
tableに枠線をつけるときに
table.hoge{
border-collapse:collapse;
border-top:1px solid #CCC;
border-left:1px solid #CCC;
}
table.hoge td,
table.hoge th{
border-right:1px solid #CCC;
border-bottom:1px solid #CCC;
}
ってやると思うのですが、tableにwidthを指定しないと線が一部消えたりしませんか？ 蛇足ですが。
あと、
table-layout:fixedというオプションで、描画を一行目から始めることができたような気がします。
http://msdn.microsoft.com/workshop/samples/author/dhtml/refs/tables3.htm
tableに枠線をつけるときに
table.hoge{
border-collapse:collapse;
border-top:1px solid #CCC;
border-left:1px solid #CCC;
}
table.hoge td,
table.hoge th{
border-right:1px solid #CCC;
border-bottom:1px solid #CCC;
}
ってやると思うのですが、tableにwidthを指定しないと線が一部消えたりしませんか？ 蛇足ですが。
あと、
table-layout:fixedというオプションで、描画を一行目から始めることができたような気がします。
http://msdn.microsoft.com/workshop/samples/author/dhtml/refs/tables3.htm
- mixiユーザー
- ログインしてコメントしよう！
|
|
|
|
CSSテクニック 更新情報
CSSテクニックのメンバーはこんなコミュニティにも参加しています
人気コミュニティランキング
- 1位
- 千葉 ロッテマリーンズ
- 37151人
- 2位
- mixi バスケ部
- 37847人
- 3位
- 楽天イーグルス
- 31945人