CSSで見た目が美しく使い易い日本のサイト

**Name_Not_Found** · 2006/01/06(金) 16:29:36

1.見た目が美しければ少々の文法違反は気にしない（指摘は可だが、論争に持ち込まない）。
　
2.海外サイトは紹介しない事。日本のみ。

3.strict房はお断り。

**Name_Not_Found** · 2006/01/30(月) 12:06:50

display:noneとtext-indent:-9000pxは全く動作が違うんだが・・・
noneは「ボックスを生成しない」んだぞ？

**Name_Not_Found** · 2006/01/30(月) 12:26:05

text-indentででかい数字入れて表示させない方法は、
結構前からある手法っじゃないか？

**Name_Not_Found** · 2006/01/30(月) 12:55:20

>>101
position: absoluteしてるから画面外においやったらBOXなくなるのと同じレイアウトになるじゃん

音声ブラウザで読み上げられないのは、そもそも表示したくないものなんだから読み上げられない方が希望の挙動なんでは？

**Name_Not_Found** · 2006/01/30(月) 13:04:19

>>103
display:none;とspeak:none;の違いを学んでこい。
display:none;で読み上げられないことを希望するのは単に無知。

**Name_Not_Found** · 2006/01/30(月) 13:30:30

だったらなおさら「display:noneだと音声ブラウザで読んでくれない」って指摘が的外れなんじゃないの？
そんなの単に特定のブラウザのバグってだけじゃないか

**Name_Not_Found** · 2006/01/30(月) 13:48:16

現実の問題としてあるんだから
仕方が無いじゃないか。
ムキになるなよ。

**Name_Not_Found** · 2006/01/30(月) 14:01:06

つまり>98の方法を使うのは表示したくないけど読んで欲しい場合
ということでいいの？
普通に存在しないことにしたい場合はdisplay:noneでいいんだろ

**Name_Not_Found** · 2006/01/30(月) 14:27:39

>>105
仕様としてはdisplay:none;は読み上げられるべき。
だから「読み上げられないことを期待して」display:none;を選択するのは間違い。
ところが実装の問題として読み上げられない場合がある。
だから妥協として現実問題display:none;を「読み上げたいられたいから使わない」という選択肢はあり得る。

**Name_Not_Found** · 2006/01/30(月) 17:29:15

>音声ブラウザで読み上げられないのは、そもそも表示したくないものなんだから読み上げられない方が希望の挙動なんでは？
そもそも>>98のやり方は「テキストを表示したくないけど読み上げられたいから」の処理。
imgでalt属性を付ければ画像でも読み上げられるが
backgroundで画像を表示させている場合は内容物が読み上げられない。
だから>>98のようにテキストの表示は画面外へおいやってるわけ。

あとはアクシビリティやCSSのスレでやってくれ。

**Name_Not_Found** · 2006/01/30(月) 17:38:39

読み上げて欲しいような意味のある画像をbackground-imageで張り込むのがそもそも間違いなのでは
画像自体に意味があるならimgで入れて読み上げて欲しい文章をaltで指定すべき

**Name_Not_Found** · 2006/01/30(月) 17:50:30

>>110
根本的に勘違いしてるだろ。
「読み上げられたい」のは背景画像じゃなくて、内容物（テキスト）。

**Name_Not_Found** · 2006/01/30(月) 18:15:21

>>111
いやそうじゃなくて、話の元になってる95を見ると、背景画像に「中ノ森BAND」って文字列が画像として書いてあるわけ
んでh1の内容も「中ノ森BAND」で、画像が表示出来る環境ではh1を見せなくしてるんだけど
画像自体に「中ノ森BAND」って意味内容がちゃんとあるわけで、ただの装飾でしかないbackgroundで表示させるべきではないでしょ
その画像はまさしく見出しそのものなんだからh1の中にimgで入れて、音声ブラウザなどの画像を表示出来ない環境向けに代替テキストを指定するのがスジ

**Name_Not_Found** · 2006/01/30(月) 18:22:29

知ってるのか知ってないのか分からんが
・画面表示を読み上げる
・HTMLを解析して読み上げる
この２つは違う。

1 · 2006/01/30(月) 19:02:15

久しぶりに来たら荒れてるな。
文法その他の論争はしないルールのはずだぞ。

**Name_Not_Found** · 2006/01/30(月) 19:38:58

ホームページ・リーダ3.02からは display:none も
読み上げますよ、と。

**Name_Not_Found** · 2006/01/30(月) 22:08:07

>>112
いやだからそれが勘違いだと（ｒｙ

**Name_Not_Found** · 2006/01/30(月) 23:02:52

>>112になんだか納得してきた

**Name_Not_Found** · 2006/01/31(火) 00:19:19

つーかどの話題も本スレでも何度も既出の議論

**Name_Not_Found** · 2006/01/31(火) 00:56:05

つーかどって、何?

**Name_Not_Found** · 2006/01/31(火) 01:38:05

からとみ

**Name_Not_Found** · 2006/01/31(火) 01:38:47

つーかどの検索結果約 2,190 件中 1 - 10 件目 (0.81 秒)

**Name_Not_Found** · 2006/01/31(火) 23:15:54

つー角野？

**Name_Not_Found** · 2006/02/10(金) 11:11:19

前半はいい雰囲気だったので、ここでちょっとスレの方向性の提案。
webデザインは素人なんで、ズレた提案だったらスマソ
CSSでイケてるデザインサイト　はCSSでできていて、かつhtml構造も完璧に近いサイトを挙げているようだ。
ただ、自分としては完璧なサイトが見たいわけじゃなくて自分のサイトに真似できるいいところを探すために来ている。
真似できるところは１ヶ所あれば十分で、ナビの位置が参考となるページを見るときに、fontタグが使われていようと全く気にしない。

というわけで、ここでは１ヶ所でも参考になる所があるサイトを挙げていってはどうだろうか。
ナビの場所、色使い、訪問者が迷いにくい、～したくなるような雰囲気
などなど、とりあえず広い範囲でいいと思う。
テーブルレイアウトも、真似する時にCSSで表現できるようなものなら可ということで。
ナビの場所の参考サイトに対して、文法のダメ出しをするような揚げ足取りはなし。
管理が楽そうな割に見た目がイイ！！　ってのも自分としては歓迎

偉そうなこと言っておいて自分で挙げるサイトがないので、代わりにコメント
>>82
右側にクリック範囲の大きなメニューをおいて矢印のような画像を頭におくのは訪問者が迷わなくていいと思った。
一瞬で次どこをクリックしようか判断できるので、使いやすさはかなりいい。
自分のサイトを似たようなデザインで製作中だが、文字を大きくしても結構いけそうだ。

**Name_Not_Found** · 2006/02/10(金) 15:49:13

長くて読みにくいけど自分もそれには賛成
そうやってアタリを広くしておいて
その上でやはり日本語のサイトに絞って推薦したらどうかな？

英語のサイトは他のスレでもうだいぶ出てるし
日本語で書かれた美しいサイトが見てみたい
英語は意味が分からないからこそ美しく見えるという部分があるからなぁ

**Name_Not_Found** · 2006/02/10(金) 16:00:35

>>124
文字サイズを落としても視認性が損なわれないという
大きなアドバンテージがあるからな
フォントの自由度も高いし
表意文字には真似のできない芸当ではある

1 · 2006/02/10(金) 17:11:58

見た目が綺麗なサイト
http://pc8.2ch.net/test/read.cgi/hp/1136710930/

こっちに移りますかね？

**Name_Not_Found** · 2006/02/11(土) 22:46:25

見た目が綺麗なサイト
落ちてますね…
ここで良いのでは？

**Name_Not_Found** · 2006/02/12(日) 17:06:12

>>124
英語は意味が分からないのではなくて、やはりアルファベットそのものが綺麗だと思う。
ハングルとか意味が分からないけど綺麗とは思わないし。

**Name_Not_Found** · 2006/02/12(日) 17:25:22

人それぞれの好みの問題だと思うが。
海外では漢字がかっこいいと思う人もいるんだし。

**Name_Not_Found** · 2006/02/12(日) 17:34:39

日本人だが漢字や平仮名は美しいと思うよ。
ただ小さくしすぎて読む以前に見えないサイトも多いがナ。

**Name_Not_Found** · 2006/02/12(日) 17:52:22

>>128
アルファベットをある種の模様として認識してるのでは？

**128** · 2006/02/12(日) 19:10:38

>>129
そりゃ好みはあるだろうけど、日本人でもわざわざアルファベットを使って
メニューを作る人が多いって事は、殆どの人が見栄えが良いと思ってるんじゃないかな。
もちろん違う人はいて当然。

>>131
見た目の問題だからある意味模様と認識してます。
もちろん日本語も含めて。
その上でアルファベットの方が綺麗と言ってるんです（個人的にね）。

**Name_Not_Found** · 2006/02/12(日) 19:26:50

>>132
日本語はどうしても意味が分かってしまうから、英語（に限らず外国語）と違って純粋な模様と感じないのだろう。
>>132自身が日本語並みにぱっと見て英語の意味を解しない、という前提での話だが。

**128** · 2006/02/12(日) 19:37:09

>>133
まあそれは否定出来ないな。
でも、漢字と平仮名、片仮名が混じると全体の統一感が損なわれるってのはありそう。
それが見た目に与える影響がどの位なのかは分からんけど。

あと、海外のデザインの影響を受けているサイトに日本語が合わないってのもあると思う。
本来日本語は和風のデザインでこそ馴染むものだろうし。

**Name_Not_Found** · 2006/02/12(日) 19:40:17

>漢字と平仮名、片仮名が混じると全体の統一感が損なわれる
この辺はフォント次第って気もする。
漢字と平仮名、片仮名が混じるのなんて昨日今日からの話じゃないし、
漢字と平仮名、片仮名が混じった分なんて英語より見慣れてるわけだし。

**Name_Not_Found** · 2006/02/12(日) 20:04:16

メニューにあまり一般的でない英語を使われるのは好かんな

**Name_Not_Found** · 2006/02/12(日) 20:29:48

表意文字と表音文字の違いとかないかなぁ？＜英語と日本語
ぱっと文字列が視界に入ってきたとき、
アルファベット系は脳内で読むという行為をしないと意味が入ってこないが、
日本語は（中国語とかも）ダイレクトに意味が目に入ってきちゃう。
>>133ってことかもしれないけど。

あとアルファベットはもともと形が幾何的だからコンピュータで作ったグラフィックと合いやすいのかもしれない。
形もシンプルだし。
もちろん日本語の文字は綺麗だけどね。

**Name_Not_Found** · 2006/02/13(月) 00:00:04

>>132
> そりゃ好みはあるだろうけど、日本人でもわざわざアルファベットを使って
> メニューを作る人が多いって事は、殆どの人が見栄えが良いと思ってるんじゃないかな。
CSSによっちゃメニューに英語を採用しているが、
その理由は英語だとスペースを取らないで済む、というだけの話だ。
だからサイドバー仕様じゃないレイアウトには英語は使わない、
格好良いと思って使ってるばかりじゃないと思われ。

**Name_Not_Found** · 2006/02/13(月) 00:19:25

俺は差別化して見やすくするためだな。

見出しは英語、サブの見出しは日本語にして変化つけてる。
そうする事により見出しのインパクトが高くなり、
日本語の始まる部分が余計際立って見やすくなると思う。

勿論これを前提にデザインしてるせいもあるけどね。

**Name_Not_Found** · 2006/02/13(月) 00:24:24

ネットがアルファベット主体なんだからしかたねー

**Name_Not_Found** · 2006/02/13(月) 00:28:37

まあ内容によって使い分ければOKでしょ。
古風な旅館のサイトで英語使ってたら雰囲気崩れるし。

**Name_Not_Found** · 2006/02/13(月) 02:25:22

んなこたーないよ

**Name_Not_Found** · 2006/02/13(月) 02:30:33

古風な旅館のサイトの海外向け英語ページは、
それはそれでかっこよさそうだな。

**Name_Not_Found** · 2006/02/13(月) 11:19:55

同意、丁寧に作ってあれば十分カコイイと思う。
下手クソにつくるとそれこそ怪しさ抜群だけど…

**Name_Not_Found** · 2006/02/14(火) 18:41:53

http://www.jne.jp
たまたまみつけた
CSSがやたらすごいことになってる気がするのだがー？

**Name_Not_Found** · 2006/02/15(水) 01:12:24

>>145
おまじない吹いた

**Name_Not_Found** · 2006/02/16(木) 18:53:18

ttp://www.ohmitetudo.co.jp/railway/
あげ

**Name_Not_Found** · 2006/02/16(木) 20:37:13

色あせたカボチャって感じだなー
もうちょっと色合いがどうにかできたと思うんだが。

**Name_Not_Found** · 2006/02/17(金) 07:03:03

ぜんぜん美しくねーよ
古臭い感じすらする

**Name_Not_Found** · 2006/02/17(金) 18:39:50

サイト探しでもするかと下のワードでググって見たが、
株式会社 Valid Strict CSS の検索結果約 795 件
すくなっ。

**Name_Not_Found** · 2006/02/17(金) 22:35:35

http://side-b.sto.co.jp/weblog/

**Name_Not_Found** · 2006/02/17(金) 22:57:00

>>151
サイドバーが広告だらけで使いにくいけど結構良い。
ただカテゴリーメニューの装飾がstopdesignと同じなのが気になる。
http://www.stopdesign.com/
パクリなのかね？

**Name_Not_Found** · 2006/02/17(金) 23:06:01

>>151
字が小さい。ちょっとごちゃごちゃしすぎ。
とはいえ普通ぐらい？

**Name_Not_Found** · 2006/02/19(日) 00:10:06

http://www.jam-graffiti.com/

イラストは見なかったことに…

**Name_Not_Found** · 2006/02/19(日) 00:54:43

マルチ氏ね

**Name_Not_Found** · 2006/02/19(日) 08:37:10

>>155

**Name_Not_Found** · 2006/02/19(日) 11:44:36

てかこのスレ自体は重複スレだし

**Name_Not_Found** · 2006/02/19(日) 11:56:06

イラストキモイ

**Name_Not_Found** · 2006/02/19(日) 15:57:46

ほい、
http://www.wizcope.com/

**Name_Not_Found** · 2006/02/19(日) 17:13:34

実績みたけどひどいねぇ
これで雑誌載れちゃうんだ？ｗ

**Name_Not_Found** · 2006/02/19(日) 17:32:29

>>159
Operaの事忘れないであげてください。

**Name_Not_Found** · 2006/02/19(日) 17:45:22

>>159
こういうクソ会社があるから勘違いしたやつが
ウェブデザイナにならなれそうとか思うんだよな。
例えば俺とかだ。

**Name_Not_Found** · 2006/02/19(日) 18:07:44

完全手抜きだな

**Name_Not_Found** · 2006/02/19(日) 18:12:14

基本的に同意なんだが、普通にこういうデザインが求められる場合もあるんでは。
カッコイイとかより、企業イメージとかで要求される場合もあるし。

**Name_Not_Found** · 2006/02/19(日) 19:10:25

>>164
それはあるけど、そればかりというのも・・・

**Name_Not_Found** · 2006/02/19(日) 20:37:20

>>165
クライアントの職種が職種だから、無難なのを求められるのは当たり前な気もする。
まあ、それでもスカスカ感があるのは別の問題なので、その辺は不足分なんだろうけどね。

**Name_Not_Found** · 2006/02/19(日) 23:03:37

>>162
プロなんて所詮人脈がものをいう。
どっかの企業がコンペすると言っても、
参加できるのはそれなりに付き合いがあるとこだけ。
どんなに技術やセンスがあっても、
新人デザイナがいきなりでかい仕事を請けるのは無理。
プロになりたきゃ仕事選ばずに確実にチャンスをつかむんだな。

**Name_Not_Found** · 2006/02/20(月) 13:38:51

http://www.nttdocomo.co.jp/product/foma/902i/index.html
この右側のナビゲーションイイ。
メニューが重なって、感覚的に階層がわかる。
目からうろこが出た。

**Name_Not_Found** · 2006/02/20(月) 14:02:10

>>168
俺には何に感動してるのか良くわからん。
全体的に流行の路線を真似てみたけど、
まだ未消化ですって感じだし。

ドコモって、Webと展示会のブースイメージを
統一する方向で動いていると聞いていたけど
これがその路線なのかな？

**Name_Not_Found** · 2006/02/20(月) 16:46:25

え？未消化かね。
俺は結構いい感じに纏まってると思うんだが。
リンクによって▼とかをつけて判りやすくしてたり、小技がいたる所に効いてて参考になる。

**Name_Not_Found** · 2006/02/20(月) 17:06:53

リンクが文字上だけなのが嫌だ。

**Name_Not_Found** · 2006/02/20(月) 17:16:49

文字上だけhoverって
Macで作ってて、IEでチェックさぼるとなりがち＞俺 ('A`;)
aにwidth入れ忘れちゃう

**Name_Not_Found** · 2006/02/20(月) 18:22:16

>>170
そのくらい普通にやろうよ。

**Name_Not_Found** · 2006/02/20(月) 18:30:08

>>173
効果的にやってるとこって結構少ない気がする。
ただ画像を置くだけなら居るけどね。

俺も勿論そういうのも心がけてるが、効果的に出来てるかどうかは疑問。

**Name_Not_Found** · 2006/02/20(月) 20:08:10

感性に働きかけて、ぱっと見て状態がわかるのはすごいとおもう。
情報デザインの真髄だよ。

**Name_Not_Found** · 2006/02/20(月) 22:16:24

>>173
その"普通"が難しいんですよ.

**Name_Not_Found** · 2006/02/20(月) 22:25:22

俺は階層って感じしないんだよな。
階層が深くなるのに上に重なっていくのはなんかこう衝突感がある。

でもOSのGUIでプルアップメニューなんかは階層が深くなるにつれ
重なっていくから有りなんだろうな。

**Name_Not_Found** · 2006/02/20(月) 22:32:50

小技がどうとか言ってる人いるけどなってないよ。
テキストリンクのhoverでのアンダーラインの扱いが酷い、なぜ統一しないんだ？
同じテキストリンクなのに混乱するだけ。

**Name_Not_Found** · 2006/02/20(月) 22:39:01

>>178
まぁ、そんなレベルなんでしょ。

俺的には、全体的に空きの取り方が
素人臭いのが気になる。
もう少し神経使えば、締まると思うんだけどね。

**Name_Not_Found** · 2006/02/21(火) 17:05:24

美味そうです
ttp://www.iris.dti.ne.jp/~c-berry/

**Name_Not_Found** · 2006/02/21(火) 17:16:14

クラウドベリージャム復活してたのかぁ
(´Д`) ﾃﾗﾅﾂｶｼｽ

**Name_Not_Found** · 2006/02/21(火) 17:45:01

>>181
そうなんですよ。復活してたんですよ。
容姿の変化はちょっとショックだったけどｗ

しかし、validatorにかけたらエラーいっぱい出た。
まあいいや。

**Name_Not_Found** · 2006/02/21(火) 20:57:56

このサイトはCSSとは永遠、縁がないと思われ。
http://www.aiseikai.or.jp/

**Name_Not_Found** · 2006/02/22(水) 12:45:01

>>183
ブラウザがぶっ壊れ太

**Name_Not_Found** · 2006/02/22(水) 14:09:57

太陽にほえろが流れなくなったのは著作権の所為かな

**Name_Not_Found** · 2006/02/23(木) 00:15:29

自分よく判ってないかもしれないけど、>>159はどういうことなの？

**Name_Not_Found** · 2006/02/23(木) 00:23:29

>>186
前は普通に見れたよ
今はひどいことになってるな

**Name_Not_Found** · 2006/02/23(木) 00:47:58

http://www.csd-kk.co.jp/
http://www.fellow-inc.co.jp/
http://www.gij.com/
http://www.nextstage-inc.com/
http://www.webcolor.jp/
http://www.ecstyle.jp/
http://www.skyfish.co.jp/focustalk/
http://www.system-com.co.jp/system/
http://www.turph.net/
http://www.cosdac.co.jp/

**Name_Not_Found** · 2006/02/23(木) 10:52:47

オナニーサイトばっかだな

**Name_Not_Found** · 2006/02/23(木) 19:29:55

>>189さんが自己満足ではなく、客観的に見て優れているサイトをご紹介して頂けるようです

**Name_Not_Found** · 2006/02/23(木) 20:27:25

その流れはもういいよ

**Name_Not_Found** · 2006/02/23(木) 20:30:02

同意

**Name_Not_Found** · 2006/02/23(木) 22:15:48

>>189
ここは、ちょっと本スレと区別しないと駄目だよｗ

**Name_Not_Found** · 2006/02/24(金) 01:06:38

ここだけは荒らされないと思ってるバカがいるのか。

**Name_Not_Found** · 2006/02/24(金) 01:14:36

ちがうｗよｗｗｗただｗｗｗ本スレwと何かしら区別しよう
ってことじゃないｗｗｗか？
なぁお馬鹿さんｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗ

**Name_Not_Found** · 2006/02/24(金) 02:10:55

自分で荒らしと認めるわけね。

**Name_Not_Found** · 2006/02/24(金) 02:29:04

区別がｗｗｗｗｗｗｗがｗｗｗｗｗｗｗｗｗ
本当にアホだなｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗ
よし、倣ってやろうｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗ

**Name_Not_Found** · 2006/02/24(金) 22:20:36

>>189 に同意する訳じゃないが、>>188のはどうかと思うものばかりだ。

**Name_Not_Found** · 2006/02/24(金) 22:35:34

http://www.mitsue.co.jp/

**Name_Not_Found** · 2006/02/24(金) 23:27:23

>>199
オナニーサイトいらね