掲示板/スタイルシート質問板/過去ログ/一覧/ 4カラムのトップページ

0 名前：りえ： 2006/02/21 13:41: まずヘッダーがあって、
その下にポップアップのメニューバーをスタイルシートで入れて
その下の部分を縦に4分割（４カラム？）に分けた、トップページを
これから作ろうとしています。

ヘッダー、メニューバーはそれぞれ絶対位置を指定し
更に、縦4分割のカラムもそれぞれ絶対位置を指定する。

これって、賢いスタイルの指定方法なのでしょうか？

それとも、メニューバーの下の、4分割のカラムは
floatで、並べた方が賢いのでしょうか？

これからページを作るので、正しい（？）方向へ
進んで行きたいので、アドバイスがもらえると助かります。

なんだか、私ばかり質問していて申し訳ないのですが。

よろしくお願いします。

1 名前： カヅサツ ： 2006/02/21 13:41 ［URL］: うーん、文章だとイマイチ伝わってこないので、図とか画像とか、あれば良いのですが…

まあ原則として、ウィンドウサイズをグイグイ動かしても崩れないのであれば、どちらでも良いような気がします。

2 名前： Pid ： 2006/02/21 13:41: ご質問とは直接は関係ありませんが，

http://www.webdesignfromscratch.com/current-style.cfm
最近流行している Web デザインの特徴の分析だそうです（英文）。作りたいデザインと似たものを探して，ソースを研究してみてはいかがですか。

3 名前：りえ： 2006/02/21 13:41: 情報ありがとうございます。

明日、図をアップしますので、またお答えいただけたら
助かります。

よろしくお願いします。

確かに、素敵なデザインが多いですね。
↓
http://www.webdesignfromscratch.com/current-style.cfm

4 名前：りえ： 2006/02/21 13:41: 私の質問の意味は、理解していただくのが難しかったようなので
図をアップしました。

http://thai777.web.fc2.com/test.gif

昨日は、メニューバー以下を、4分割しようと考えたのですが、
思い直して、3分割で作りたいと思います。

2つのパターンを使って、サイトを作る計画です。

まず参考書に書かれていたように、body以下を<div class="contents">で
括ります。（それが正しいのかどうかわからないのですが・・）

ヘッダー、メニューバーはそれぞれ絶対位置を指定し
更に、縦３分割のカラムもそれぞれ絶対位置を指定する。

これって、賢いスタイルの指定方法なのでしょうか？

それとも、メニューバーの下の、３分割のカラムは
floatで、並べた方が賢いのでしょうか？

これからページを作るので、正しい（？）方向へ
進んで行きたいので、アドバイスがもらえると助かります。

5 名前： 匿名希望 ： 2006/02/21 13:41: >>1でカヅサツさんも仰ってますが、ウィンドウをリサイズしても崩れなければ良いと思いますよ？
勿論、htmlが適切にマークアップされてることが前提ですが。

「賢いCSSを書く」というより「馬鹿なCSSを書かない」ことが大切だと思います。

6 名前： カヅサツ ： 2006/02/21 13:41 ［URL］: あー、ただ「親切なデザイン」という観点から行けば違いが出てくるかもしれません。

CSSをオフにしたとき、

h1→メニュー→サイドバー(左)→本文→サイドバー(右)

という順序で表示されてもかまわないのならどちらでもいいのですが、

たぶん

h1→メニュー→本文→サイドバー(左)→サイドバー(右)

という順序の方が親切だろうと思われます。
この場合ですと、positionを使う方法しか思いつきません。

7 名前： Pid ： 2006/02/21 13:41: サイドバーにどんな情報を載せるかにもよりますが，私も

h1→本文→サイドバー→サイドバー

のように，できるだけ本文が前方に来るようマークアップしたい所です。マークアップが決まれば，自ずとスタイルの書き方も絞られてくると思いますが。

なお，最低限のナビゲーションさえあれば，メニューは全てスクリプト生成でも良いかもしれません（携帯端末で詳細なメニューが最初にくると，とっても鬱陶しいので）。いずれにせよ，Java と JavaScript は全く別の言語ですので念のため。

※ WinIE6 を捨てられるなら（WinIE7 を待てるのであれば）「ポップアップメニュー」は CSS だけで可能です。

【追記】「賢いスタイルの指定方法」ということにこだわっておられるようなので，以下を紹介してみる。

class="sidebar" とか，ありがちな class 名の付け方がなぜ良くないか
・http://homepage1.nifty.com/VET06031/web/lint100.html
・http://adp.daa.jp/archives/000163.html

float 段組の問題点と他の方法
・http://gowest.blog2.fc2.com/blog-entry-38.html

CSS を書くときのちょっとした 10 箇条
・http://kidachi.kazuhi.to/blog/archives/001490.html

もちろん，何が本当に「賢い」かはケースバイケースだと思いますが。

8 名前：りえ： 2006/02/21 13:41: 出張に出ておりまして、返信が遅くなってしまいました。
ごめんなさい。

h1→メニュー→本文→サイドバー(左)→サイドバー(右)

私もこの形で、行きたいので
positionを使って、サイトを作ろうと思います。

カヅサツさんが、「ウィンドウサイズが崩れなければ良い」とありましたが、
positionで、絶対位置を指定したら、

ん？？

メニューや、サイドバー、本文の幅をピクセルで指定すると、
ウィンドウサイズを変えてもスクロールバーが出るだけで、
外観は崩れないと理解していたのですが・・

positionで絶対位置を指定して、幅は％で指定したときに
ウィンドウサイズが変わったら、親要素の幅に対して、％が適用されて
表示されるのだろうと、理解していたのですが・・

この理解って間違っているのでしょうか？

それからPidさんは、以下のように書かれてましたが、

‘なお，最低限のナビゲーションさえあれば，
メニューは全てスクリプト生成でも良いかもしれません
（携帯端末で詳細なメニューが最初にくると，とっても鬱陶しいので）。
いずれにせよ，Java と JavaScript は全く別の言語ですので念のため。’
‘※ WinIE6 を捨てられるなら（WinIE7 を待てるのであれば）
「ポップアップメニュー」は CSS だけで可能です。’

私が入れようと思っていた、ポップアップメニューはＣＳＳとＪａｖａｓｃｒｉｐｔ
を両方使用するもので、ＩＥ６では問題なく表示されるのだと思って
いたのですが、これは間違った理解なのでしょうか？

お忙しいところ、大変恐縮なのですが、教えていただけると
助かります。

9 名前： S ： 2006/02/21 13:41: >>私が入れようと思っていた、ポップアップメニューはＣＳＳとＪａｖａｓｃｒｉｐｔ
>>を両方使用するもので、ＩＥ６では問題なく表示されるのだと思って
>>いたのですが、これは間違った理解なのでしょうか？
　正しいか誤りかというと、誤ってる。

1.CSSはユーザースタイルシートで上書きできる（または製作者シートを無視できる）場合もあるため、製作者が用意したCSSで見ているとは限らない。

http://members.jcom.home.ne.jp/jintrick/Personal/usrstyle.html
http://members.jcom.home.ne.jp/pctips/www/cssintro.html
http://nekoshiki.poke1.jp/guidline/style.html

2.インターネットエクスプローラでもJavaScriptをOFFにすればJavaScriptのみに依存した挙動は無視される。

http://bakera.jp/html/opinion/zannen1.html
http://bakera.jp/html/opinion/zannen2.html
http://nekoshiki.poke1.jp/guidline/script.html
http://nekoshiki.poke1.jp/guidline/link.html

10 名前：神崎： 2006/02/21 13:41: > http://homepage1.nifty.com/VET06031/web/lint100.html
> linkbar
ただの英単語の問題で、class名としてどうとかではないような気がしますが、、、
それにbarは横棒のことだからといって、
縦に使っているMozillaはどうとか、そう言う話も出てなさそうですし。

> http://adp.daa.jp/archives/000163.html
class="red"が使いたくないからといって、

class="attention"
.attention{color:red;}

として、赤くしたいなら「attentionを使って下さい」というのは、その方がばからしいと思いますね。
（こういうのはそのページのコメントに書くべきでしょうが）

.attention{color:red;}
.red{color:red;}

「警告を示したいときはattentionを使用して下さい。」
「文字を赤くしたいときはredを使用して下さい。」

と、内容は同じでも、目的ごとに２つでも３つでも、
その内容にあった名前で定義していく方が良いのではないでしょうか？

class名は、内容の要約と見ることもできますから、
「可能な限り」その内容や目的がわかるclass名をつける方がいいでしょうが、
赤文字、青文字などが何種類もある時には、かえって汎用性のある"red"の方が分かりやすいと思います。

スタイルシートを使わない設定にしている人がどれほどいるかわかりませんが、
数％程度の、場合によっては無視できるような人数なら、無視してしまうのも手でしょう。
JavaScriptの、document.getElementByIdだけでdocument.allやdocument.layerの分岐を使わないサイトも多いですし、
Flash 100%のいわゆるオフィシャルサイトもあります。
つまり、約3%（Macromedia公表）のFlash未対応訪問者は無視している、と言うことですね。

私はIEのみスクロールバーだけユーザー指定スタイルシートを使っています。
これは、スタイルシートを消されるのを防ぐ為ですが、そういう人は多いと思います。
が、liやleftを制御している人は、対応を考えなければならないほど多いでしょうか？

> http://members.jcom.home.ne.jp/jintrick/Personal/usrstyle.html
こちらのサイトは以前にも読んだことがありますが、
「調べもの」という観点で書かれていますので、
BBSやブログ（該当サイトの時期にはブログはなかったと思いますが）を読んだり、
ネットショッピングをしたり、というような人にとっては、
逆にこういうスタイルシートは使いづらいと思いますし、使ってない人の方が圧倒的に多いと思います。

製作されるサイトの特徴に応じて、
これらのスタイルシートでも閲覧しやすくなるような作り方をするのは良いと思いますが、
一般的には、そこまで考えなくても良いと思います。
少なくともブログを見るには、ユーザー指定CSSを使うとどこも特徴がなくなりますね。
そういう特徴を見るのも、ブログの良さだと思いますし、
それをわざわざ見られなくするのは、もったいないと思います。

何を持って「賢い」とするかは人それぞれだと思います。
私の場合は、わずか数％に満たない利用率のブラウザや、ブラウザのカスタマイズに対応するのは、
対応策を考えるだけ、時間の無駄ではなかろうか、
という考えがありますので、人によっては手抜きだのなんだのと言われると思います。
（ただし、必要性があれば、コンマ数％の人に対してでも対応しようと思いますが。）

11 名前： カヅサツ ： 2006/02/21 13:41 ［URL］: > ただの英単語の問題で、class名としてどうとかではないような気がしますが、、、

> class="red"が使いたくないからといって、

とりあえず件の記事を擁護をグッと堪えてお尋ねしますが、本件（製作者のあらゆる見栄えは閲覧者に改変されうるから気をつけてね）と何か関係があるのでしょうか。

関係なさそうな気がしますので、別途スレッドをお立てになるとよろしいかと存じます。

12 名前： カヅサツ ： 2006/02/21 13:41 ［URL］: > メニューや、サイドバー、本文の幅をピクセルで指定すると、
> ウィンドウサイズを変えてもスクロールバーが出るだけで、
> 外観は崩れないと理解していたのですが・・

合っています。

> positionで絶対位置を指定して、幅は％で指定したときに
> ウィンドウサイズが変わったら、親要素の幅に対して、％が適用されて
> 表示されるのだろうと、理解していたのですが・・

合っています。

13 名前： カヅサツ ： 2006/02/21 13:41 ［URL］: > 私が入れようと思っていた、ポップアップメニューはＣＳＳとＪａｖａｓｃｒｉｐｔ
> を両方使用するもので、ＩＥ６では問題なく表示されるのだと思って
> いたのですが、これは間違った理解なのでしょうか？

「製作者のあらゆる見栄えは閲覧者に改変されうるから気をつけてね」問題については S さんが投稿された通りです。

というか、別に難しい話をしているわけではないのですね。

まずテキストを書き、論理的にマークアップを行い、一部のテキストを画像に置き換え、スタイルシート（あるいは物理属性）で見栄えを整え、必要に応じて JavaScript を使う。

HTMLをベースとするウェブページは、上記の手順で作れば「良いウェブページになる」というだけの話です。

そうすれば、世の中の圧倒的多数（CSS Level2 + DOM対応）には作成者の（ほぼ）望むとおりの見栄えを提供し、かつ、矛盾しない範囲でごく少数の環境への配慮もでき「易い」というだけのことです。

そして、少数者にとって使い易いものは、多数にとっても使いやすさを提供します。建築におけるバリアフリーは、健常者とっても使い勝手が良いものです。

「今、貴方が作ろうとしているウェブページを、少数者にも配慮するように設計しろ」ではなく「普通に HTML を作れば結果的に少数者にも配慮できるようになります」という、それだけのハナシです。

この考えでポップアップメニューを作ってみましょう。

・まずテキストを書く
・マークアップする（ul, li要素あたりが適当）

これだけで、ほぼどんな環境でも直感的にわかり易い「ツリー式のメニュー」が出来ます。視覚ブラウザでなくても、箇条書きというのは概ね読み易いものです。

・一部のテキストを画像に置き換え

元テキストをalt属性値にすれば解決です。

・CSSで見栄えを整える

ここで、「子ツリーをどうするか」という問題と相談します。
親ツリーのリンク先に、子ツリーのリンク先があるのでしたら、子ツリーは非表示（display:none;）にして、親ツリーの箇条書きを横に並べれば良いでしょう。

・JavaScriptを使う
親ツリーをポイントしたら子ツリーを表示する。

私はこの流れが単純明快だと思います。そして単純明快な作りが、多様な環境に対する親切なデザインへの早道です。