X

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

■ このスレッドは過去ログ倉庫に格納されています
0001Name_Not_Found
垢版 |
2006/01/06(金) 16:29:36ID:???
1.見た目が美しければ少々の文法違反は気にしない（指摘は可だが、論争に持ち込まない）。
　
2.海外サイトは紹介しない事。日本のみ。

3.strict房はお断り。
0069Name_Not_Found
垢版 |
2006/01/07(土) 20:14:45ID:???
>>68
そうかもね。
その頑張ってる一人が言うんだから間違いないｗ

まぁ、荒れないだけ良いわ。
0070Name_Not_Found
垢版 |
2006/01/07(土) 20:20:33ID:???
くそ、見た目はいけてたのにハイブリッドだったorz
0071Name_Not_Found
垢版 |
2006/01/07(土) 20:28:43ID:???
もうCSSの時代だろうと思っても企業は未だにテーブルだな。意外と探すの大変
0072Name_Not_Found
垢版 |
2006/01/07(土) 20:36:50ID:???
>>66
リキッドじゃなくてソリッドでも、そのデザインを良いと思ってるならアレだ・・
0073Name_Not_Found
垢版 |
2006/01/07(土) 20:44:56ID:???
アレって何だ？はっきり言ってくれ。
007573
垢版 |
2006/01/07(土) 20:50:57ID:???
まあいいや。
荒れそうだから回答はいらない。
0076Name_Not_Found
垢版 |
2006/01/07(土) 22:46:06ID:???
http://semkim.net/
下段のvalidのリンクをあえて少し隠しているところが新鮮。
コンテンツとしてはそれほど重要では無いリンクなので、遊び心で許せるレベル。
全体的に重いのは海外だからか？
0079Name_Not_Found
垢版 |
2006/01/07(土) 23:01:25ID:???
>>78
スレタイにちょっと間違いがあるだけなので気にしないように。
0082Name_Not_Found
垢版 |
2006/01/07(土) 23:25:50ID:???
http://mikepiontek.com/
グラフィック系だけど、アクセシビリティを良く考えている。
カッコいいし美しい。
文字サイズ変更機能がlargeでもやや小さいのが気になる。
xhtml1.1で作られていた。
0083Name_Not_Found
垢版 |
2006/01/07(土) 23:28:39ID:???
参考になるサイトがたくさんありますね
0084Name_Not_Found
垢版 |
2006/01/07(土) 23:31:47ID:???
>>82
カコイイのは認めるが、そこまで小さくてアクセシビリティは誉めすぎ
0085Name_Not_Found
垢版 |
2006/01/07(土) 23:38:54ID:???
>>84
やっぱそうだよね。
書いてからしまったと思ったorz
気になったらどんどん突っ込んでください。

http://digg.com/
準リキッドデザイン。
メニュー下の広告ウゼーとか、右側の緑色サイドバーの配色が気になるけど
ギリギリOKにしておく。
フォントサイズ切り替えボタンが一つなのに、二回押せば元に戻るのは初めて見た。
もうちょっと作りこめばいけそう。
0086Name_Not_Found
垢版 |
2006/01/07(土) 23:59:50ID:???
http://www.w3cn.org/index.html
漢字も悪くないかも。
画像のめり込みで少し変化をつけている。
div病なのと一部の背景はマイナス。
zeldmanの「Design with Web Standards｣の中国語版の表紙にﾜﾛﾀ
0087Name_Not_Found
垢版 |
2006/01/15(日) 22:17:22ID:???
ttp://revway.jp/

肝心のgalleryがJavascriptなんで、offにしている人
（俺とか）は観れないのがうざいかな
0088Name_Not_Found
垢版 |
2006/01/16(月) 19:10:41ID:Sqzdj7h/
ブラウザの設定によってはフォントサイズが小さすぎて
つぶれてなにも読めないのばっかり…

Mac IE で
フォントサイズ 12
解像度　96dpi

なんだけどね。
Macromedia のサイトもコンテンツによっては
なにが書いてあるのかさっぱりわからんです。
0089Name_Not_Found
垢版 |
2006/01/16(月) 19:13:21ID:aPcIFQxB
Mac IE の設定を 72dpi すりゃぁいいジャマイカ
0090Name_Not_Found
垢版 |
2006/01/16(月) 20:17:37ID:???
Macは基準にできないよ。
多い方に、Macが合わせてくれ。
0091Name_Not_Found
垢版 |
2006/01/16(月) 20:35:35ID:aPcIFQxB
んまぁあれだ
Mac使いがIEを使うなよとｗ
0092Name_Not_Found
垢版 |
2006/01/16(月) 20:38:55ID:???
つらい世の中ですね…

なんか思いっきり<FONT size=2>とか
<TABLE>で思いっきりレイアウトとか…

もうダメなんですね…　w
0093Name_Not_Found
垢版 |
2006/01/16(月) 20:44:26ID:???
要素名が大文字
値をダブルクォーテーションで囲ってない

もうダメもクソも初めっからダメだろカスｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗ
0094Name_Not_Found
垢版 |
2006/01/16(月) 22:21:51ID:???
HTMLの構造は多少難ありだが
色遣いとかも綺麗でいいと思いました

ttp://www.twilightning.jp/
0095Name_Not_Found
垢版 |
2006/01/27(金) 21:31:18ID:MR9dY94e
ttp://www.teichiku.co.jp/artist/nakanomori/
0096Name_Not_Found
垢版 |
2006/01/27(金) 21:44:12ID:???
>>95
ほほぅ、POPで良いね。
Lintだと一部点引かれてるけどまぁ許容範囲（W3C ValitatorだとValidだし）。
0097Name_Not_Found
垢版 |
2006/01/29(日) 02:18:56ID:d69v/Er3
>>95
cssがすごく長い。IE5.x for Macとかまでサポートしてくれてるのがありがたいね。
0098Name_Not_Found
垢版 |
2006/01/30(月) 09:26:26ID:OW05PPdY
初歩的なことを聞いてすんません
>>95のサイトのcssで、

h1 {
position: absolute;
top: -9000px;
left: -9000px;
text-indent: -9000px;
}

としてるのは、特に問題なし？
だったら、漏れも真似しようかと...
0099Name_Not_Found
垢版 |
2006/01/30(月) 09:55:53ID:???
それってh1を表示させたくないだけ？
だったらdisplay: none;の方がいい
0100Name_Not_Found
垢版 |
2006/01/30(月) 10:06:54ID:???
>>98>>99
display: none;だとSEOスパムと判断されるとか
音声ブラウザで読んでくれないとかの問題があった気がする。
text-indentででかい数字入れて表示させない方法は最近の流行り？よく見かける。
0101Name_Not_Found
垢版 |
2006/01/30(月) 12:06:50ID:???
display:noneとtext-indent:-9000pxは全く動作が違うんだが・・・
noneは「ボックスを生成しない」んだぞ？
0102Name_Not_Found
垢版 |
2006/01/30(月) 12:26:05ID:???
text-indentででかい数字入れて表示させない方法は、
結構前からある手法っじゃないか？
0103Name_Not_Found
垢版 |
2006/01/30(月) 12:55:20ID:???
>>101
position: absoluteしてるから画面外においやったらBOXなくなるのと同じレイアウトになるじゃん

音声ブラウザで読み上げられないのは、そもそも表示したくないものなんだから読み上げられない方が希望の挙動なんでは？
0104Name_Not_Found
垢版 |
2006/01/30(月) 13:04:19ID:???
>>103
display:none;とspeak:none;の違いを学んでこい。
display:none;で読み上げられないことを希望するのは単に無知。
0105Name_Not_Found
垢版 |
2006/01/30(月) 13:30:30ID:???
だったらなおさら「display:noneだと音声ブラウザで読んでくれない」って指摘が的外れなんじゃないの？
そんなの単に特定のブラウザのバグってだけじゃないか
0106Name_Not_Found
垢版 |
2006/01/30(月) 13:48:16ID:???
現実の問題としてあるんだから
仕方が無いじゃないか。
ムキになるなよ。
0107Name_Not_Found
垢版 |
2006/01/30(月) 14:01:06ID:???
つまり>98の方法を使うのは表示したくないけど読んで欲しい場合
ということでいいの？
普通に存在しないことにしたい場合はdisplay:noneでいいんだろ
0108Name_Not_Found
垢版 |
2006/01/30(月) 14:27:39ID:???
>>105
仕様としてはdisplay:none;は読み上げられるべき。
だから「読み上げられないことを期待して」display:none;を選択するのは間違い。
ところが実装の問題として読み上げられない場合がある。
だから妥協として現実問題display:none;を「読み上げたいられたいから使わない」という選択肢はあり得る。
0109Name_Not_Found
垢版 |
2006/01/30(月) 17:29:15ID:???
>音声ブラウザで読み上げられないのは、そもそも表示したくないものなんだから読み上げられない方が希望の挙動なんでは？
そもそも>>98のやり方は「テキストを表示したくないけど読み上げられたいから」の処理。
imgでalt属性を付ければ画像でも読み上げられるが
backgroundで画像を表示させている場合は内容物が読み上げられない。
だから>>98のようにテキストの表示は画面外へおいやってるわけ。

あとはアクシビリティやCSSのスレでやってくれ。
0110Name_Not_Found
垢版 |
2006/01/30(月) 17:38:39ID:???
読み上げて欲しいような意味のある画像をbackground-imageで張り込むのがそもそも間違いなのでは
画像自体に意味があるならimgで入れて読み上げて欲しい文章をaltで指定すべき
0111Name_Not_Found
垢版 |
2006/01/30(月) 17:50:30ID:???
>>110
根本的に勘違いしてるだろ。
「読み上げられたい」のは背景画像じゃなくて、内容物（テキスト）。
0112Name_Not_Found
垢版 |
2006/01/30(月) 18:15:21ID:???
>>111
いやそうじゃなくて、話の元になってる95を見ると、背景画像に「中ノ森BAND」って文字列が画像として書いてあるわけ
んでh1の内容も「中ノ森BAND」で、画像が表示出来る環境ではh1を見せなくしてるんだけど
画像自体に「中ノ森BAND」って意味内容がちゃんとあるわけで、ただの装飾でしかないbackgroundで表示させるべきではないでしょ
その画像はまさしく見出しそのものなんだからh1の中にimgで入れて、音声ブラウザなどの画像を表示出来ない環境向けに代替テキストを指定するのがスジ
0113Name_Not_Found
垢版 |
2006/01/30(月) 18:22:29ID:???
知ってるのか知ってないのか分からんが
・画面表示を読み上げる
・HTMLを解析して読み上げる
この２つは違う。
01141
垢版 |
2006/01/30(月) 19:02:15ID:???
久しぶりに来たら荒れてるな。
文法その他の論争はしないルールのはずだぞ。
0115Name_Not_Found
垢版 |
2006/01/30(月) 19:38:58ID:???
ホームページ・リーダ3.02からは display:none も
読み上げますよ、と。
0118Name_Not_Found
垢版 |
2006/01/31(火) 00:19:19ID:???
つーかどの話題も本スレでも何度も既出の議論
0121Name_Not_Found
垢版 |
2006/01/31(火) 01:38:47ID:???
つーかど の検索結果 約 2,190 件中 1 - 10 件目 (0.81 秒)
0123Name_Not_Found
垢版 |
2006/02/10(金) 11:11:19ID:N/jU6+kX
前半はいい雰囲気だったので、ここでちょっとスレの方向性の提案。
webデザインは素人なんで、ズレた提案だったらスマソ
CSSでイケてるデザインサイト　はCSSでできていて、かつhtml構造も完璧に近いサイトを挙げているようだ。
ただ、自分としては完璧なサイトが見たいわけじゃなくて自分のサイトに真似できるいいところを探すために来ている。
真似できるところは１ヶ所あれば十分で、ナビの位置が参考となるページを見るときに、fontタグが使われていようと全く気にしない。

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

偉そうなこと言っておいて自分で挙げるサイトがないので、代わりにコメント
>>82
右側にクリック範囲の大きなメニューをおいて矢印のような画像を頭におくのは訪問者が迷わなくていいと思った。
一瞬で次どこをクリックしようか判断できるので、使いやすさはかなりいい。
自分のサイトを似たようなデザインで製作中だが、文字を大きくしても結構いけそうだ。
0124Name_Not_Found
垢版 |
2006/02/10(金) 15:49:13ID:???
長くて読みにくいけど自分もそれには賛成
そうやってアタリを広くしておいて
その上でやはり日本語のサイトに絞って推薦したらどうかな？

英語のサイトは他のスレでもうだいぶ出てるし
日本語で書かれた美しいサイトが見てみたい
英語は意味が分からないからこそ美しく見えるという部分があるからなぁ
0125Name_Not_Found
垢版 |
2006/02/10(金) 16:00:35ID:???
>>124
文字サイズを落としても視認性が損なわれないという
大きなアドバンテージがあるからな
フォントの自由度も高いし
表意文字には真似のできない芸当ではある
0127Name_Not_Found
垢版 |
2006/02/11(土) 22:46:25ID:???
見た目が綺麗なサイト
落ちてますね…
ここで良いのでは？
0128Name_Not_Found
垢版 |
2006/02/12(日) 17:06:12ID:???
>>124
英語は意味が分からないのではなくて、やはりアルファベットそのものが綺麗だと思う。
ハングルとか意味が分からないけど綺麗とは思わないし。
0129Name_Not_Found
垢版 |
2006/02/12(日) 17:25:22ID:???
人それぞれの好みの問題だと思うが。
海外では漢字がかっこいいと思う人もいるんだし。
0130Name_Not_Found
垢版 |
2006/02/12(日) 17:34:39ID:???
日本人だが漢字や平仮名は美しいと思うよ。
ただ小さくしすぎて読む以前に見えないサイトも多いがナ。
0131Name_Not_Found
垢版 |
2006/02/12(日) 17:52:22ID:???
>>128
アルファベットをある種の模様として認識してるのでは？
0132128
垢版 |
2006/02/12(日) 19:10:38ID:???
>>129
そりゃ好みはあるだろうけど、日本人でもわざわざアルファベットを使って
メニューを作る人が多いって事は、殆どの人が見栄えが良いと思ってるんじゃないかな。
もちろん違う人はいて当然。

>>131
見た目の問題だからある意味模様と認識してます。
もちろん日本語も含めて。
その上でアルファベットの方が綺麗と言ってるんです（個人的にね）。
0133Name_Not_Found
垢版 |
2006/02/12(日) 19:26:50ID:???
>>132
日本語はどうしても意味が分かってしまうから、英語（に限らず外国語）と違って純粋な模様と感じないのだろう。
>>132自身が日本語並みにぱっと見て英語の意味を解しない、という前提での話だが。
0134128
垢版 |
2006/02/12(日) 19:37:09ID:???
>>133
まあそれは否定出来ないな。
でも、漢字と平仮名、片仮名が混じると全体の統一感が損なわれるってのはありそう。
それが見た目に与える影響がどの位なのかは分からんけど。

あと、海外のデザインの影響を受けているサイトに日本語が合わないってのもあると思う。
本来日本語は和風のデザインでこそ馴染むものだろうし。
0135Name_Not_Found
垢版 |
2006/02/12(日) 19:40:17ID:???
>漢字と平仮名、片仮名が混じると全体の統一感が損なわれる
この辺はフォント次第って気もする。
漢字と平仮名、片仮名が混じるのなんて昨日今日からの話じゃないし、
漢字と平仮名、片仮名が混じった分なんて英語より見慣れてるわけだし。
0136Name_Not_Found
垢版 |
2006/02/12(日) 20:04:16ID:???
メニューにあまり一般的でない英語を使われるのは好かんな
0137Name_Not_Found
垢版 |
2006/02/12(日) 20:29:48ID:???
表意文字と表音文字の違いとかないかなぁ？＜英語と日本語
ぱっと文字列が視界に入ってきたとき、
アルファベット系は脳内で読むという行為をしないと意味が入ってこないが、
日本語は（中国語とかも）ダイレクトに意味が目に入ってきちゃう。
>>133ってことかもしれないけど。

あとアルファベットはもともと形が幾何的だからコンピュータで作ったグラフィックと合いやすいのかもしれない。
形もシンプルだし。
もちろん日本語の文字は綺麗だけどね。
0138Name_Not_Found
垢版 |
2006/02/13(月) 00:00:04ID:???
>>132
> そりゃ好みはあるだろうけど、日本人でもわざわざアルファベットを使って
> メニューを作る人が多いって事は、殆どの人が見栄えが良いと思ってるんじゃないかな。
CSSによっちゃメニューに英語を採用しているが、
その理由は英語だとスペースを取らないで済む、というだけの話だ。
だからサイドバー仕様じゃないレイアウトには英語は使わない、
格好良いと思って使ってるばかりじゃないと思われ。
0139Name_Not_Found
垢版 |
2006/02/13(月) 00:19:25ID:???
俺は差別化して見やすくするためだな。

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

勿論これを前提にデザインしてるせいもあるけどね。
0140Name_Not_Found
垢版 |
2006/02/13(月) 00:24:24ID:???
ネットがアルファベット主体なんだからしかたねー
0141Name_Not_Found
垢版 |
2006/02/13(月) 00:28:37ID:???
まあ内容によって使い分ければOKでしょ。
古風な旅館のサイトで英語使ってたら雰囲気崩れるし。
0143Name_Not_Found
垢版 |
2006/02/13(月) 02:30:33ID:???
古風な旅館のサイトの海外向け英語ページは、
それはそれでかっこよさそうだな。
0144Name_Not_Found
垢版 |
2006/02/13(月) 11:19:55ID:???
同意、丁寧に作ってあれば十分カコイイと思う。
下手クソにつくるとそれこそ怪しさ抜群だけど…
0147Name_Not_Found
垢版 |
2006/02/16(木) 18:53:18ID:33yhi7TR
ttp://www.ohmitetudo.co.jp/railway/
あげ
0148Name_Not_Found
垢版 |
2006/02/16(木) 20:37:13ID:???
色あせたカボチャって感じだなー
もうちょっと色合いがどうにかできたと思うんだが。
0149Name_Not_Found
垢版 |
2006/02/17(金) 07:03:03ID:???
ぜんぜん美しくねーよ
古臭い感じすらする
0150Name_Not_Found
垢版 |
2006/02/17(金) 18:39:50ID:???
サイト探しでもするかと下のワードでググって見たが、
株式会社 Valid Strict CSS の検索結果 約 795 件
すくなっ。
0152Name_Not_Found
垢版 |
2006/02/17(金) 22:57:00ID:???
>>151
サイドバーが広告だらけで使いにくいけど結構良い。
ただカテゴリーメニューの装飾がstopdesignと同じなのが気になる。
http://www.stopdesign.com/
パクリなのかね？
0153Name_Not_Found
垢版 |
2006/02/17(金) 23:06:01ID:???
>>151
字が小さい。ちょっとごちゃごちゃしすぎ。
とはいえ普通ぐらい？
0157Name_Not_Found
垢版 |
2006/02/19(日) 11:44:36ID:???
てかこのスレ自体は重複スレだし
0160Name_Not_Found
垢版 |
2006/02/19(日) 17:13:34ID:???
実績みたけどひどいねぇ
これで雑誌載れちゃうんだ？ｗ
0162Name_Not_Found
垢版 |
2006/02/19(日) 17:45:22ID:???
>>159
こういうクソ会社があるから勘違いしたやつが
ウェブデザイナにならなれそうとか思うんだよな。
例えば俺とかだ。
0164Name_Not_Found
垢版 |
2006/02/19(日) 18:12:14ID:???
基本的に同意なんだが、普通にこういうデザインが求められる場合もあるんでは。
カッコイイとかより、企業イメージとかで要求される場合もあるし。
0165Name_Not_Found
垢版 |
2006/02/19(日) 19:10:25ID:???
>>164
それはあるけど、そればかりというのも・・・
0166Name_Not_Found
垢版 |
2006/02/19(日) 20:37:20ID:???
>>165
クライアントの職種が職種だから、無難なのを求められるのは当たり前な気もする。
まあ、それでもスカスカ感があるのは別の問題なので、その辺は不足分なんだろうけどね。
0167Name_Not_Found
垢版 |
2006/02/19(日) 23:03:37ID:???
>>162
プロなんて所詮人脈がものをいう。
どっかの企業がコンペすると言っても、
参加できるのはそれなりに付き合いがあるとこだけ。
どんなに技術やセンスがあっても、
新人デザイナがいきなりでかい仕事を請けるのは無理。
プロになりたきゃ仕事選ばずに確実にチャンスをつかむんだな。
■ このスレッドは過去ログ倉庫に格納されています
ニューススポーツなんでも実況