5ちゃんねる ★スマホ版★ ■掲示板に戻る■ 全部 1- 最新50  

■ このスレッドは過去ログ倉庫に格納されています

/* CSSでイケてるデザインサイト { number: 3; } */

1 :Name_Not_Found:02/01/12 10:56 ID:jrvkx/0j

スタイルシートを使ってて(必須)、
レイアウト目的のTABLEを使ってなくて、
それでいてイケてるデザインのサイトを探すスレ。

【初代スレ】
http://natto.2ch.net/hp/kako/985/985978270.html

【2代目スレ】
http://pc.2ch.net/test/read.cgi/hp/998894057/

【関連】カスイケリンク集
http://members.tripod.co.jp/monar01/

関連スレ、参考スレは>>2-5以下を参照

198 :Name_Not_Found:02/02/05 22:20 ID:W252wWLO
>>197
感覚ずれているのかもしれませんね。
すみません。

199 :188:02/02/06 16:05 ID:bCZAu0yU
懲りずにまた見つけてきました。
今度はどうでしょうか(^^;

http://sorasox.kiy.jp/

200 :Name_Not_Found:02/02/06 19:07 ID:AbP2ur0Q
>199
コンテンツのリストの使い方が気に入らん。
<li class="in">や<class="out">じゃいかんのか?

201 :Name_Not_Found:02/02/06 19:08 ID:AbP2ur0Q
<li class="out">の間違いです。

202 :Name_Not_Found:02/02/06 23:57 ID:esPfVTGa
ていうかliをネストするべきだと思う

203 :Name_Not_Found:02/02/07 00:00 ID:nMXoAnIA
>199

<span class="navi">home</span>│<a href="books/index.html" class="navi">books</a>│…

ってのがダメ。区切りの│は見た目のデザインだよな?

こういうのはリスト要素で書くのがスジ。

204 :Name_Not_Found:02/02/07 00:05 ID:pbrneY00
>>203
Strictスレッドぢゃあるまいに……。それ位、ええやんか。

205 :Name_Not_Found:02/02/07 00:15 ID:MbjGyAJO
>>204
li
{
 display: inline;
 border-right: thin solid [color];
 margin-right: 0.5em;
 padding-right: 0.5em;
}

とかすれば、CSSでデザイン出来るのでは?

206 :Name_Not_Found:02/02/07 00:24 ID:GpJQ8Ljh
>>205
いや、>>204が言いたいのは「ここはCSSのスレだ」ってことだろ
HTMLのきれいさ、正しさを問うのはスレ違いなんだよ

207 :Name_Not_Found:02/02/07 01:45 ID:NtqV7gjy
>>206
禿同!

208 :205:02/02/07 03:37 ID:MbjGyAJO
>>205,206
委細承知

209 :205:02/02/07 03:39 ID:MbjGyAJO
さらにアホだわ
逝ってきます

210 :Name_Not_Found:02/02/07 11:37 ID:gyVhbUpe
HTMLとCSS切り離して考えていいってことじゃないでしょう。

211 :Name_Not_Found:02/02/07 12:02 ID:wVrHYtPt
100%Strictなソース以外はデザインの評価対象では無い?
この辺は個々人で感覚違うんで、なるべくデザインの話で。
HTMLの話も別にしても構わないけど、聞き流せばってことで良いのでは。
で無いと、いつまでもデザインの話が出来ないYo!

212 : ◆HTML/.Kg :02/02/07 12:22 ID:VOXTlvKe
しかし、デザイン面でHTMLに頼ってしまうと、
CSS的にイケてるかどうかにも関わってくるかと。
デザインに関係ない部分ならスレ的にはOKだと思います。

213 :まとめたぞ ◆/Re6aTC. :02/02/07 14:29 ID:5FIOIRnl
CSS リンク集なんですが、仕事やプライベートでちょっとバタバタしていますので、
もう少し更新をお待ちください。楽しみにしてる方、ごめんなさい。

<!-- 切り替えを使ってシートを選択できるようにするのも検討中 -->

214 :Name_Not_Found:02/02/07 15:31 ID:xn+Jem52
>>213
まとめたぞ氏、お疲れ様です。

> <!-- 切り替えを使ってシートを選択できるようにするのも検討中 -->
シートは発表所のを使うんですか?
それとも新しく作るんですか?

215 :Name_Not_Found:02/02/07 20:25 ID:TspPOCpD
>206

でもさ、HTMLでテーブルレイアウトしこたまやって、
最後にアンカー周りだけCSSでデザインしたら、
CSSでイケてるデザインサイトなの?

>>203の例ってそういうのと大同小異だと思うけど。

216 :Name_Not_Found:02/02/07 21:00 ID:m9Lt2BiC
>>215
似た様な議論があって、
それがどこにあったか思い出せないんだけど、
例えば"|"で区切って列挙するって言うのは、
別にWebサイトに始まった事じゃないよね。
";"で区切ったり"/"で区切ったり、バリエーションは色々だけど。
他にも鍵括弧やダブルダッシュとか、
句読点にしたってプレーンテキストでの
文書構造を表すマークアップの一種と言えるでしょ?
何でもかんでも鍵括弧やダブルダッシュまでも
qにしろとか言い出したら、コメントを意味する括弧だって
q.commentでやれって話になりかねない。
下手したら句読点も言語毎にspan.sentenceでやれってね。

プレーンテキストでのマークアップをどこまでやって
HTMLのマークアップをどこまでやるのかってのは
ブラウザの対応状況も絡めて慎重に考えるべきだと思う。
ナビゲーションにulを使ったりすると
CSS未対応/テキストブラウザでは数行分の画面が
無駄になる訳だし。
何でWCAGがToCにolじゃなくてulを使っていたり
ナビゲーションをリストで記述しないのか、って事も
考えてみる余地はあると思うよ。

217 :Name_Not_Found:02/02/07 21:31 ID:4WTPG1CM
> 例えば"|"で区切って列挙するって言うのは、
> 別にWebサイトに始まった事じゃないよね。

> 何でもかんでも鍵括弧やダブルダッシュまでも
> qにしろとか言い出したら、コメントを意味する括弧だって
> q.commentでやれって話になりかねない。

うーん、それを言い出したら、番号付きリストだって
olとか使わずに、p内に

1. 大林雅美
2. 尾上縫
3. 林真須美

とか書いても良いってことになっちゃう。

で、どこからどこまで平のテキストで、どこからマークアップする
かを考えると、「要素があるものについては、その要素でマークアップ
する」のが基本じゃないかな。
見出し用の要素があるから、見出しはそれでマークアップする。
リスト用の要素があるなら、リストはそれでマークアップする。

218 :Name_Not_Found:02/02/07 22:42 ID:cfXaMZ/v
まぁ"|"を区切りに使っても別にいいんじゃない?
致命的なミスじゃなければOK、あまり細かいことは気にしない。

要はテーブルレイアウト使ってなくてCSSでイケてたらいいんだし。

219 :Name_Not_Found:02/02/08 08:05 ID:e70Dcrbr
つーか、まともに動かない CSS に頭悩ませて
デザインの可能性捨てるようなことはしないでほしいと思うが。
件のデザインを CSS でやるとしたら before と after 擬似要素がちゃんと動かないと
難しいわけだし。

べつに一度書いたらそれっきりってわけじゃないんだから
それぐらいいいだろってかんじ。


220 :Name_Not_Found:02/02/08 08:32 ID:zxwx8/wQ
>>219
>件のデザインを CSS でやるとしたら before と after 擬似要素がちゃんと動かないと
難しいわけだし。

そんなこたぁない。borderでダイジョブ。

221 :まとめたぞ ◆/Re6aTC. :02/02/08 15:58 ID:kyc89WdT
>>214

どもです。シート選択は、発表所のもいいかも知れないですね。
あと、イケてるとこのを許可もらう前提で使わせてもらうのもありかなと。

/* と考えるとイケてるのも勿論だけどある程度正しいhtmlが記述されていれば、
流用できるというのも、「いいシート」と言えるかも知れませんね。*/

222 :Name_Not_Found:02/02/08 16:09 ID:yT7NGYbs
そう考えると難しいなぁ。IEだけに特化するならa:hoverのロールオーバーが面白いから、
切り替えスクリプトで色々いじっちゃおうと思ってるんだけど。

223 :Name_Not_Found:02/02/08 18:11 ID:b5rv4ICj
http://www.netgen.co.jp/ でやってるレンタル掲示板、自分でスタイルシートを編集できるみたいなんだけど、
誰かお試し使って、使い勝手報告してくれない。


224 :Name_Not_Found:02/02/08 18:34 ID:yT7NGYbs
>>223
これ有料だよ?同じ有料なら猿板でよいんでないの?
でもこれ、このレベルでホームページ作成代行とか。何かね。何か・・・。

225 :Name_Not_Found:02/02/08 18:50 ID:e70Dcrbr
>>224
正直、ホームページ代行業者見てると
俺だってまだまだいけてるじゃんって思えてきてうれしい。
あんなんで金とれるんだもんなぁ。

226 :Name_Not_Found:02/02/08 23:13 ID:jz7DMwX9
223の掲示板cgiが吐き出すhtmlは、そうひどくない。
ていうか他の掲示板、tableタグが入れ子になってたりするの多すぎ。


227 :Name_Not_Found:02/02/09 00:13 ID:e4A0Ibq6
2apesとかのスキン作ってるやつらも、
テーブルレイアウト多すぎ!

<TABLE align="center">〜

こればっかなんだもんなぁ。

228 :Name_Not_Found:02/02/09 00:30 ID:x5wp97Vk
そろそろ掲示板やらのWEBプログラムもCSSに詳しいHTMLコーダーが関与しないと作れなくなるかもね。

229 :Name_Not_Found:02/02/09 00:30 ID:D5Jy71nC
上げてる人が>>223の宣伝な気がしてならないよ。
223の、意味不明な/divがあるんですけど。文字固定されてるし。

これに金かけるんなら激安サーバーでも借りてcgi動かすよ( ´ー`)

230 :Name_Not_Found:02/02/09 00:36 ID:qWV/4/Qc
過去にCSSデザインのapeskin作ったけど
勉強中だったんでIEでしか見れないだよね・・・。
また作ってみるかな。

231 :Name_Not_Found:02/02/09 01:13 ID:vTVItjIV
>>229
つーことは >>226 も同じだろうね。(w


232 :Name_Not_Found:02/02/09 02:17 ID:5Xi2/mpV
>>226 掲示板にtableタグの入れ子はつきものですが、何か?
>>231 今ねすけで見てきたけど、まあ出来るだけ対応させてるようです。


233 :Name_Not_Found:02/02/09 13:47 ID:v9xwqDNY
>掲示板にtableタグの入れ子はつきものですが

本気で言ってるのなら、スレ間違ってるような気がする。

234 :Name_Not_Found:02/02/09 14:45 ID:NwYMwoYa
↓イケてるって程ではないんだけど、なんか気に入った。
http://www.studyinghttp.net/
特に #main dt a のスタイルが。

235 :Name_Not_Found:02/02/09 23:28 ID:Cc6pN1Gx
>>233

というかそれは一般のサイトのことを皮肉ってるのでは

236 :Name_Not_Found:02/02/10 14:43 ID:eYXtyLKx
自称プロの224は顧客から掲示板を頼まれた場合に備えて日夜猿skinの研究に励んでいることが判明しました。(w

237 :Name_Not_Found:02/02/10 18:29 ID:My3EPxx5
つまらない煽りはやめないか。

238 :Name_Not_Found:02/02/11 13:26 ID:+QbO3m5C
http://cgi2.html.ne.jp/~dirty-jack/
シンプルな感じのテキストサイト。
どうかな?

239 :Name_Not_Found:02/02/11 16:57 ID:k3XqdR6W
・色的に目がちょい痛い
・ol使おうよ
・class="font-w", class="white"ですか…
・宇多田ヒカルと誕生日が同じだ

そんな感じ。
CSS的観点から言って、悪いとこは無いがよいところもない。
っていうか、CSS指定の量が少ないから何ともかんとも・・・

240 :Name_Not_Found:02/02/11 16:58 ID:ac9xqC+i
>>238
自薦、かな。

マークアップ的に突っ込みたい部分は多々あるけど、それはスレ違いなんで
デザイン面に関して。

右ブロックの背景トーンを今の半分にすればまだよくなるんじゃねーかなって。

特に『コレ』といった部分が見当たらないというのが率直な感想。
オレンジ背景にスミ文字ってのも、長時間読ませるにはちと辛い。
濃度の高い暖色背景は、酷い場合だと目眩をおこしかねんので、
色をもう少し考えてくれるとよさげ。

241 :Name_Not_Found:02/02/11 23:16 ID:CGcq1zgB
>>238
目が痛いです……


242 :Name_Not_Found:02/02/11 23:18 ID:0DNn+dxU
テキストサイト謳ってるならアレじゃイカンと思う。
読む気がしない。

243 :Name_Not_Found:02/02/11 23:46 ID:0AEcojPt
テキスト部分だけでも白か、薄いオレンジとかにしておくれと。
あと、マークアップの話になっちゃうというかなんというか、
最後の</p>の位置が変な気がする。いいのか?

244 :Name_Not_Found:02/02/12 21:45 ID:zhWcgAJr
「荒らされ覚悟で・・・」スレで見つけた
http://error.vis.ne.jp/404/

245 :Name_Not_Found:02/02/12 23:42 ID:UmOtyDo4
例の海外のリンク集より。
http://www.malevole.com/
agenda経由で知る。

IE独自の斜め書き使用。
しかし使いどころが難しそう。

でもこういうのに限って流行るんだよな。
カーソルいじり、スクロールバーいじりのごとく。

246 :Name_Not_Found:02/02/13 06:00 ID:+bcM4+T9
>244
そこ、404ページがないよ。
サイトメイニ キタイシテ サガシタノニ ・・・ ・・・

247 :Name_Not_Found:02/02/13 19:17 ID:VreFyvaK
>246
もうちょい待って(スマソ

248 :yuu ◆xo3ilszg :02/02/13 19:34 ID:S6J53Xmi
>>245
良いね、Netscape4で見てもクールっぽさがあって。

249 :Name_Not_Found:02/02/13 21:35 ID:El5uQGRR
>>246
404探求者ハケーン!(・∀・)
オレなんて404スレだと勘違いして「それはサイト名だぞゴルァ!」と書きこみそうになった。

250 :Name_Not_Found:02/02/18 00:23 ID:cfQhow9u
>>245
斜ってどうやるのかな

251 :Name_Not_Found:02/02/18 10:06 ID:4XRI3Leo
フィルタで行列変換。

252 :Name_Not_Found:02/02/20 01:37 ID:wPOfVwAc
うごきないね。

253 :ちょこら ◆DmcC0DXc :02/02/20 16:24 ID:2VGw/SrD
某ラウンジ【謎】で張られていたんだけど
そこに張った本人がこっちに張らないようなので僕が張ります。

http://www.zype.co.nz/

xhtmlで書かれてますがちょっと謎DIVと謎SPANが多いかな。
本文に当たる部分は妥当なマークアップで、ナビゲーションとかに
DIV,SPANが多い。

個人的にはhtmlそのものがナビゲーションとかそういう
本文以外の情報を記述するためには出来てないので、
その辺のマークアップはこだわりすぎてもしょうがないかなと思っている。
なのでこのマークアップもまあいいかな、という感じ。

あ、デザイン的にはビビッドでカッコいい感じ。

254 :Name_Not_Found:02/02/20 23:10 ID:ElKRMOYJ
未だに>>245の斜め書きに謎が解けない。
SVGじゃないよね、あれ・・・

255 :Name_Not_Found:02/02/21 00:01 ID:SyelAA3s
これかな。

.paper7 {filter:progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand',M11=0.9816271662712097,M12=-0.1908089965581894,M21=0.1908089965581894,M22=0.9816271662712097)

256 :Name_Not_Found:02/02/21 00:43 ID:eqlPGJaH
意味無いけど・・・
ttp://www.fuck.org/

257 :Name_Not_Found:02/02/21 00:49 ID:eqlPGJaH
ずっと>>245の斜め書きってどこの事かと悩んでた。
JSを切ってたら普通に段組だったから
JSで制御してるんだね。

だから>>255のは違うかも知れない。

258 :Name_Not_Found:02/02/21 00:52 ID:WfQVjGIE
http://ob.aitai.ne.jp/~kazoo/scripts/55filter/matrix.htm
こんなん出ました。
>>255のはこれだよね?

259 :Name_Not_Found:02/02/21 04:51 ID:dQiNW+Lt
http://www.cafedessin.jp/
http://0084radio.fw.cx/

久しぶりにリンク回ってたらリニュしてた。
てか他にもあるんだろうけど元々あまり回ってなかったので記憶に無いしあまりわからん。

260 :ちょこら ◆DmcC0DXc :02/02/21 05:24 ID:4jgweLLH
>>259
うーん。カフェデッサン(・∀・)イイ!!
なんかきもちいいなー。

261 :まとめたぞ ◆/Re6aTC. :02/02/21 13:17 ID:P7tvourK
>>260

激同。こういうすっきりしたの大好きです。

262 :Name_Not_Found:02/02/21 15:28 ID:KPymcORv
0084radioの方が好き

263 :Name_Not_Found:02/02/21 17:26 ID:CP0m4qfM
0084Radioはフォントサイズ固定がイケてない。

264 :Name_Not_Found:02/02/21 18:12 ID:x0Tj0Hcz
0084radioの NavigaterってNavigatorのtypo?


265 :Name_Not_Found:02/02/21 19:27 ID:7a2oqy+y
>263
フォントサイズ固定は、固定してれば固定がウザイと言えるし、固定していなければIEとネスケで文字サイズが変わっちゃうからダメと言えるので結局どっちにしといても気に入らない人には叩きどころっていう部分がある。
ブラウザの機能で回避できるし、いちいち取り上げる問題じゃない気がするけど。


266 :Name_Not_Found:02/02/21 20:05 ID:AxRJWxNK
>>263
そりゃ、フォントサイズ固定せずにイケてるデザインに
できるんならそれにこしたことはないけど。
ここって、まずはイケてるかどうかなので、
ダメってことはないんじゃないの?
とか書いてからよくみたら、

固定*だから*ダメ

とは書いてないなー。

固定*なところは*ダメ

とも読める。
要するに、俺はこのスレに限ってフォントサイズ固定容認派。

267 :Name_Not_Found:02/02/21 21:10 ID:yYop6C/w
そうだね。
フォントサイズを固定してるのも
管理者からしたらデザインの1部なのかも知れないし。

268 :Name_Not_Found:02/02/21 23:29 ID:PdS2ggZt
ただ、font-size: 8pt;なんて極小にしてるのは、
イケてるとして俺は認められない。

269 :Name_Not_Found:02/02/22 00:02 ID:dh3TBiY2
10px の字って読めないんだけどな。

270 :Name_Not_Found:02/02/22 00:31 ID:dkzSEwG+
漏れは、フォントサイズ固定否定派だな。このスレでも。
固定を容認していくらイケテテも、一体なんの意味があるの?
最終的には、cssのすごさを世間に見せつけてやるのが、このスレの目的でしょ。
ユーザビィティにもすぐれていて、かつデザインもいいというのが、cssでイケてるということなんじゃない?


271 :まとめたぞ:02/02/22 00:32 ID:bGF4hQ9V
う〜ん。好みが分かれるところなんだね〜。
たまに液晶のディスプレイで見る小さいフォントは極悪だったりしますです。

272 :Name_Not_Found :02/02/22 00:46 ID:dh3TBiY2
解像度も Windowsの96dpi、120dpi とmacの72dpiで違うしな。
macの12px(=12pt)はwinじゃ9pt〜7.2pt?

273 :Name_Not_Found:02/02/22 00:46 ID:SXhqiiy0
最低でも10ptは( ゚д゚)ホスィ…

オイラは>>270の最後の1行に同位。

274 : :02/02/22 01:26 ID:a0RCc2jT
超近視な人でも問題なく読めるサイズなら、
フォントサイズ固定も容認。

275 :yuu ◆xo3ilszg :02/02/22 02:57 ID:p1wW0BLJ
だったら12pt(win)ならいいのか? とか。
ちっこい画面のPC/端末で見てると今度はでかくてムカついたりするYO

276 :K:02/02/22 04:57 ID:/5mjK5/A
知らんがな

277 :Name_Not_Found:02/02/22 07:40 ID:eEbGmLGJ
文字サイズスレじゃないですよ、みなさん。

278 :ちょこら ◆DmcC0DXc :02/02/22 09:09 ID:0BL4ivmx
>>275
そうそう。僕それたまにあります。

>>276
そんなこと言わずに

>>277
まあまあ。 css での*デザイン*について語るときにでかい問題だと思うから
ちょっとくらいはいいでしょう。

279 :Name_Not_Found:02/02/22 10:45 ID:3jRU9RHr
「見る字」は固定でもいいけど(画像とのバランスとかあるだろうし)
「読む字」は固定して欲しくない。

そのへんを見極めるのもその人のセンスだと思う。


280 :263:02/02/22 10:57 ID:OHq7y7ga
ナニ気に大反響(ワラ

>>266
「固定*なところは*ダメ」のつもりで書いた。
当然フォントサイズ固定否定派。

>>275
そう、そこなんだよ。

>>277
ごめんNE!

>>279
なるほど。デザインのための文字と、テキストとしての文字の分離かあ。
参考になります。


281 :Name_Not_Found:02/02/22 14:20 ID:3jRU9RHr
WebPowerとかいう雑誌にこのスレにageてもらえるようなサイトの作り方が出てた。
なかなか手堅くまとまった記事でした。

これ。
http://www.ascii.co.jp/books/detail/4-7561/4-7561-4025-4.html

282 :Name_Not_Found:02/02/24 18:45 ID:/xHgEwr2
「CSSでイケてるデザイン」じゃなくて
「CSS+Stricthtmlで侍魂風」をこのスレの住人が作ったらしい。
http://wangando.com/text/iso-ijiri.html

283 :Name_Not_Found:02/02/25 13:57 ID:8bnAjOto
そろそろ新しいとこキボンヌ

284 :Name_Not_Found:02/02/25 14:10 ID:t2xvBup4
>>283
自推でいいか?

285 : :02/02/25 14:12 ID:mIe5lTq5
>>284
283じゃないが自推でいいよ

286 :Name_Not_Found:02/02/25 14:18 ID:Wvh+w8tG
>>282
strongとemの意味が分かってねえんじゃネーノ

287 :283:02/02/25 14:44 ID:8bnAjOto
>>284
自薦じゃない方が良いのは言うまでもないけど、
何もでてこないよりはマシですな。

288 :Name_Not_Found:02/02/25 14:53 ID:7JEJxaal
自薦なら自薦と言ってくれれば全然OKかと。

289 :Name_Not_Found:02/02/26 16:16 ID:htj75s6W
自薦で無いです。

290 :Name_Not_Found:02/02/26 16:19 ID:htj75s6W
>>286
ああでもしないと、再現が無理だっただけです。
ISOでやるぞっていう事と、クラスには頼らないことだけは
念頭に置いてたんで。

291 :Name_Not_Found:02/02/27 22:27 ID:kcrDNcoq
新ネタきぼーんage

292 :Name_Not_Found:02/02/27 22:57 ID:MC0rEbdU
これまでの「イケてる」方向性とは全くことなる
方向性ってのは無いもんかな。


なんか、イケてるといわれるデザインがどれも
似たか寄ったかで食傷気味…。

293 :Name_Not_Found:02/02/27 23:17 ID:ytvS7dQF
とりあえずIE&NSにCSS2の実装を急がせないとダメだ
話にならん

294 :Name_Not_Found:02/02/27 23:44 ID:GI/AalkF
もうこのスレも終わりね...

295 :Name_Not_Found:02/02/27 23:56 ID:c+adf5St
>>293
OperaもMozillaもまだまだ‥

296 :Name_Not_Found:02/02/28 15:24 ID:y8gCWhBN
263=280=ヴァカ丸出し

297 :Name_Not_Found:02/02/28 22:43 ID:5H/+ATBa
>>295
モジラはIEよりCSSの実装は良いと思うけどな。
ていうか終わってるんだったね、このスレ。
結局サイトの良さって、デザインより中身の問題だよ。
イケてるって、正直、死語になってないか?

217 KB
■ このスレッドは過去ログ倉庫に格納されています

★スマホ版★ 掲示板に戻る 全部 前100 次100 最新50

read.cgi ver 05.04.02 2018/11/22 Walang Kapalit ★
FOX ★ DSO(Dynamic Shared Object)