CSSを利用した２ちゃんねるのデザイン

転送量軽減のため、２ちゃんねるの現在のデザインをCSSを利用して作り上げるスレです。

今までに出てきた点に関しては以下をご覧下さい。
http://natto.2ch.net/test/read.cgi?bbs=hp&key=998774537

誰かなんか書けよ。 w

まず、どこまで変更可能なのか、
ということをはっきりさせないとプロは動かないと思います。

＞運営者へ
ユーザは壁紙とグリーンの文字を見に２ちゃんねるに来ているわけではない。

>>2
　スマソ。index2の中身を読んでた。
　で、テーブル削除の方針?　それとも外観変更せずテーブル有
りでいじるの?

　レス部分の名前の色は、とりあえず、<b class=n></b>で広告
とのぶつかりを回避しますか。

壁紙は要らないよね
投稿者名は他のテキストカラーと分けてくれた方が見やすい。
緑にはこだわんないけど

テーブルは排除したほーがソースもきれいだしダイエットにつながるかと

　壁紙表示/非表示でどれだけ情報量が変化するかだけど、余裕
が無ければ background ごと消して、余裕あればつけるってのは。
　printf一行で済むから、とりあえず消しておくという方針かな。

　色分けはむしろ<dt>に対して行ってはどうだろう。

>>7
壁紙を無くせばテーブルも無くせるという話です。

>>8
　CSSがOKだからdivにbgcolor指定すればよく。

ターゲットブラウザは？
既出だったらスマソ

ていうか、あの壁紙が嫌い、という話しだったかも（ｗ

この壁紙キライ（ﾜﾗ
ターゲットブラウザはIE4 ネスケ4.3以上くらい？
それ以上（IE5.5、ネスケ6）だとさすがにきついよね

　index2で、最新スレ10個は、数字がls=50、タイトルが#1のア
ンカーになってるけど、数字のほうのaタグ、消してよいと思う?

ネスケ4.3はキツイナー
あんまりｶｸｲｰデザインにしちゃうと煽りとかAAとかが映えなくなるよなあ･･･
このデザインだから2chは成り立っていることも考えねばね

あちこちで板停止・・・
ここはもう誰もいないのね・・・

いや、すごいですねー。

　タグいじりメンドー。
　っていうか、久々なんでCSS忘れてるヨ…鬱だ。

　とりあえず見た目こんな感じ。最適化してないし、まだ1/3しか
出来ていない…。
http://isweb3.infoseek.co.jp/play/teess/2ch-index2.html

>>17
お疲れさまです。

>>17
　スレッド一覧　i-mode　掲示板リスト　FAQ　リロード

重複してるところもあるしimodeも無視してOKと思われ

　よく考えたら名前の色

dt b {color:green;}

　で解決するやん(w

　とりあえず直したヨ。

広告のテーブルデザインは手を加える訳にはいかないかぁ。。

プロ技板が動くか分からないが、
ここでまとまった事は、こまめにあっちへ報告した方が良いかと。

http://www.gedoh.org/aki/2ch/wiki/yukiwiki.cgi
に書いていくのも可やね

２ちゃんねるの新規デザイン スレ
http://natto.2ch.net/test/read.cgi?bbs=hp&key=998859829&ls=50

立てたんでこっちにもレスお願いします

　あ、divじゃなくてp使うってな提案あったね。
　しかしぃ、単なるブロックとしてpを使うのは〜了承(何

　なぜかpだと中身の本文が外に飛び出してしまい…。

>>17
フォントサイズ小にしてると、スレ一覧が細かすぎて見にくい

>>17
ﾀﾞｻｲ

>>17
60%は小さ過ぎ。
font-size:smallは駄目なの？

>>17
これと変らないと思うがなぜまた作りなおす？
http://isweb31.infoseek.co.jp/photo/photo_d/test.html

>29　（>>nnもそろそろやめない？）
同意。上がテンプレート用で
http://isweb31.infoseek.co.jp/photo/photo_d/index3.html
が批判要望板を適用させたやつ。

しまった。↑は>30

レス1-100っていらないかも。

ダサイ壁が無くなると２ｃｈっぽくないよ！！

>>34
かちゅ〜しゃ使ってるとほとんど見ることも無いんだけどね。

>27
>29
　60%は適当でした。80%もしくは70%かも。
　「font-size:small」は2バイト増えるので採用しなかったの。
　っていうか、小さくする必要性があるんだろうか。

>30
　そっちは意図的に見てない。無意識に同じコード書くかもしれ
ないからね。最終的に突き合わせて、ココの記述でブラウザ依存
が少なく、バイトが少ないほうを採用と考えて書き起こした。

　ベースurlを変更すればさらに減らせるんだけど、cgiの変更を
求める記述は現状は却下?

　あと、スレ作成はスレ一覧のsubback.htmlで生成したほうが、
重複スレも防げてよいのではないかと。
　圧倒的にROMが多い現状を考えると、レス書きこみもindex2側
は全廃してread.cgi側のみで対応するほうがよいと思われ。
　仕様変更になるから保留案ということを前提で一考頼んます。

>17のやつＮＮ４．７５で見たんだけど、ＣＳＳ全部効いてない…
colorすら効いてないのはなんでだ？
ＮＮはＵＮＩＸ板の人も使ってると思うから気にした方がいいかも

2ch程度のレイアウトならNN4のCSS解釈だけで十分だと思うけど。
特にread.cgi

>>37
最近のWebデザイナはIEでしか動作確認してないんだろうね。

UNIX板の方たちはブラウザ何使ってるんだろ
既出？

>37
color が効いてないのは head を hrad と書いている typo のせい（ローカルで確認）
border 系が一切効いてないのは NN4 のバグ．一括指定すればある程度効くはず

>17
つーことで修正よろしく

無限ちゃんねるへようこそ
http://pesuo.hypermart.net/kkk/index2.html

>17
レスとレスの間は1行程度空けた方がいいんじゃない？
どうも窮屈な感じがして…

>>36
各々が1から作りなおして無限ループ？
なんとも非効率的な…

>17
よく考えたら NN4 は複数クラス指定に対応してなかった

あーあ、とうとうCSS派だけ分裂したのか……

転送量最優先なのだったら、CSSよかXML/XSLで分離じゃないか？

>>47
同意。でもネスケで見れたっけ？

>>48
NNは6.0からヽ(´ー｀)ノ useragentで判定するしかない。
シェアで見たらIE5〜だけでも十分減らせると思うがな。

>>17
お疲れさま。
最小限に絞ったって感じで、今まで出てきた中では一番いいね。ただ、運営は現在のデザインに固執してる保守派だから無理くさいけど、、、

「全レス取得」→「全レス」
「最新レス50」→「最新50」にして、
本文欄のスペースを現行の５行から４行にして欲しいです。

あと、トップの注意書きは余りにも長すぎるから、クリックさせて別に飛んでもらう方式（新規スレッド作成のように）にしたら？赤字とかの目立つクリックバーだったらいいと思われ。

保守派というか、デザイン変更にＯＫだせる人がでてきてないんだと思います。
以前、夜勤さんがread.cgiの吐くhtmlのダイエットしたときも
外見の変わらない変更しかやらなかったし・・・
なので、まだどうなるかはわからないと思うのです。

>>51
２ちゃんねるのデザイン変更にOK出せる人は唯一、ひろゆきだけでしょう・・・

現在のデザインを維持した上での削減作業は労力の無駄

満員電車を緩和するために乗客全員の足を片方切れと言っているようなもの

なんか一晩目を離したらスレが３つに分裂してるし・・・
俺的にはCSSはダイエットの為にも必要になるとは思うんだけど。

>>54
禿道

>>55
？意味わからん。

>>56
訳：はげしくどうい
おまえ２ｃｈつかっているんだろうな？

今の2chのフレームの意味ってあるの？

>>58
ほとんど「ナイ」が、はずしたくはないらしい（ｗ

現在のデザインを維持したものを作ってから他開発スレの動向を見ていじればいい。
大きな仕様まで決めようとすると混乱する。ただでさえCSSなどやろうとしてるのに。
index2.html
read.cgi出力ファイル
--通常版
--1000超えましたバージョン
--PROXY規制してますバージョン

他は？

dtってタグあったけ？

cookieの処理はCGIでやる方向に行ってるみたいなので、
いよいよ持ってXHTML、使えるんだが。

＞＞57
あ、そうなのか。
板ごとに良く使われる用語って結構偏りあるからな。
俺、この板常駐じゃないんで。スマソ。

XHTMLのDOCTYPEやXML名前空間識別子って結構長いからなぁ。
emやstrongじゃなくってb使っている現状では苦しくないか？

んじゃHTML4.01 Transitionalのシステム識別子なしでもいいから、DOCTYPEは
つけようや。Web制作板として、あまりに切ない…。

>>64
もともとXHTMLってのはXML+XSLの処理結果としての産物。シェイプアップ目的でXHTML使うことに何の意味もない。
XSLテンプレ使うと劇的に転送量が減るYO!
IE5・NN6でXML利用、その他のブラウザでは従来のHTML出力。どう？

HTML4なら、HTMLとHEADとBODYタグが削れるな。
……いや、<html lang="ja">は必要か？

いっそのことIEを排除するソースを書けば転送量90%減らせる

ブラウザ出れば別にいらんのじゃないの？

思うに、IDに関わるスレ（IDテストとか）が各板で乱立しているから、
そっちを規制する方が負担は減ると思う。
板違いかも知れん。スマソ。

>>70
IPを出してしまえばいいんだよ。

>>71
それやったら終了だよ。

>>67
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<title>Web制作板</title>
<body>
どうせ日本人しか見てないんだし。

>37
　スマソ、41の指摘のとおり、headをhradと書いてしまたtypoの
せい。ゆえに、ネスケはhead外の不正なJavaScript(CSS)とみな
して実行しなかった。

>43
　dt {margin-top:1em}で対応したよ

>44
　無限ループではなく、各々の優秀な部品を採択して結合。
　1つのソースを突っつきまわすほうが紆余曲折で時間がかかると
判断。というか経験則。

>45
　まじすか。まあ、色違いだからスカケード処理で対応します。

>50
　トップの注意書きは各板の製作者が苦慮してほしい。少なくと
も現状では、スレ立てる人への注意と、レス書く人の注意とが混
在して、そもそもROMには関係無い情報になってる。これはindex2
に投稿フォームや新スレボタンがあるため。投稿とスレ立ては
別ページにしたほうがいいと思われ。

>61
dl dt dd　の辞書的表記用タグ(とおいらは認識)

>74
　なんだヨ　スカケードって。
　面倒だから個別に書いた。

　他にdiv使ってないから、divのスタイルとして枠、クラスが色
にしたほうがスマートだな。

　で、個別にしたindex2。ネスケユーザー、ちゃんと見れる?

>>17
出てきた案を取り入れつつ更新して下さいましたね。
お疲れ様です。

「■掲示板一覧■」と「スレッド一覧」を緑色にするか、
「スレッド作成」のボタンみたいにするとメリハリあるかも。ちょっと贅沢すぎるかとも反省しつつ・・・

「スレッド作成」を「新規作成」等に変えたらFAQまで一行に納まるのでは？ブラウザによって表示幅違うのかな？


これ以上ソースを切り詰めて行くと、他のスレでも意見がでてた「iモード２ちゃん」をindex2.html替りに使う、という案に到達するかも・・・。
潰れるくらいなら、最悪それになってもいいと思うが。

　url書き忘れた…鬱だ。
http://isweb3.infoseek.co.jp/play/teess/2ch-index2.html

>73
<body>も開始終了共に省略可ﾀﾞﾈ
Authors must specify the style sheet language of style information associated
with an HTML document.
なのでできればHTTP headerでContent-Style-Type: text/css　を出してもらって
(無理なら<META http-equiv="Content-Style-Type" content="
text/css">が要るが）

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<style type="text/css" media="all">
body{background-image:url(../ba.gif);}
</style>
<title>Web制作板</title>
どうせ日本人しか見てないんだし。

>75
http://isweb3.infoseek.co.jp/play/teess/2ch-index2.html
このページのことだったら、見れませんよ。

>>78
CSSを使うなら、bodyはあったほうがいいんじゃないかと思って。
NN4はタグを省略すると要素の存在自体認識しないから、body {...}が使えなくなる……

　うーと、こんなふうになってくれてるとよいのだが。
http://isweb3.infoseek.co.jp/play/teess/2ch-index2.gif


>76
　使っているブラウザは何で、状態になる?
　直リン禁止でクリックでは見れない状況になってるかも。url
をコピーして、手動でブラウザに張りつけてくれたまい。

>>81
右下のほうにAquaなモノが…。
見つめてしまいました（笑

>80
そうなのか。そういうの疎いから知らなかった。

>81
　どんな状態になる?　…でした。

　んでさ、31日までに削減結果を出さないといけなくて、実装と
かテストとかで、正味今日中にフォーマット完成させなきゃとい
う危機感ある?
　目標のうち60%前後はgzip(UNIX板)が達成したけど、残りの
40%以上はタグ変更と仕様変更(プログラム板)にかかってるんだよ。

　煽りたくないが、実際、>30と>31の人しか実行してないじゃん。
他の常連はどうしたのよ。

#もち個別に提案してくれた人に感謝。

>>75
NN4.75
タイトルと名前に色が無いけど見えます。
divには色あります。
昨日は白地に黒文字だけだった……。

>78
　それは仕様書上での事だから、実装を考えると
east.portland.ne.jp/~sigekazu/css/css.htm

とかを参照するがよろし。

ここ人口激減したなー。
プロ技板のこっちのスレにも書きこもう！

http://piza2.2ch.net/test/read.cgi?bbs=tech&key=998921988&ls=20

>>84
プログラミングみたいな背後の処理と違い、こっちは直接見えるもんだから、
どこまでいじったらいいかわからなくてこうなってるんだと思うが。どっから
も指針とか出ないし。名前：や投稿日：の文字列の話だって、あちこちから
どう扱えばいいんだといううめきに近い声が上がっても結局どうしていいか
不明だし。

>>81
ネスケで見れない件、自分で見てみればいいのに。

>85
スレのタイトルは<h3>に
h3 {color:red;font:700 150%}

をかましてます。
　つうことは、fontの指定がエラーで全指定飛んでるわけか。

h3 {color:red; font-size:150%; font-weight:700;}

　…、いや、150%ならボールドしなくていいかも。

　これで、スレタイトルは赤になるはずだか。

81>84
都合により、今日はドリキャス使ってテレビ画面で見てます・・・鬱すぎだ。
ちなみにブラウザの設定次第ですが表示の一行が短く、背景は灰色になりました。緑色の部分がセパレートされてなく、一つでつながって表示されました。

リンク先の画像のを見ました。前言撤回しときます。忘れて下さい。
最高ですね。見やすくて無駄が無い。使い勝手もかなりよさそうですね。

どんな環境のWebデザイナやねん！

>90
>これで、スレタイトルは赤になるはずだか。
なりました。

76>81だった。逝って参ります。

>88
ていいうか、「今のデザインが２ちゃんねるに必要」とは思えないデザイナは
その意図に同意できないから参加しないだけ。
デザイン変えずにタグのダイエットだけなら数時間もかからずでできることでしょー

>89
　すまんが、ブラウザを立ち上げ、かちゅ〜しゃを立ち上げ、
ftp立ち上げつつエディタ開いて、少ないメモリで悲鳴をあげて
るんだ。だから、メモリ開放のソフト(Aquaみたいなのがそれ)を
利用してなんとかしのいでいる状態。
　しかも今からネスケ取得してたら間に合わない。それに単に
ネスケといってもバージョン毎に不具合が違う。IEだってバー
ジョン毎にCSSの不具合がある。

　今日、メモリ買いに行く予定なんだがな。間に合わんわな(萎

>>96
てゆーか、プロならそのくらいの環境は揃えておくべき。
PC貧乏なやつは仕事もできんぞ。

って、さすがに私も最近はバージョン1〜2はインストールしてないが…

>91
　ドリキャスって何行表示なの?　たしか、ある程度はCSS(CSS1レ
ベルだったか)に対応していたと記憶。
　で、背景の灰色は正常。無指定だから背景は各ブラウザが設定
している色になるはず。白に設定していたから気がつかなかった。
　bodyにcolor:#fff;指定したほうがよいかな。

　あと、緑が一つで繋がっているというのが分からない。単純な
線になっているということかな。

　それから、現状の2chのindex2とどこが異なっているか教えて
もらえるとうれしく。


>93
　あとは名前の緑か…。bタグがねぇ…「2chは、ここのサーバを
使ってるです。。。 」の広告に使われてるのよ。しかもタグの
塊なのよ。コレ、画像にならないかなぁ。
　自鯖の宣伝がトラフィック増やしてどうするのヨ。

>>97
>97
　漏れはこの板の住民ではなく。webもレンタルスペースにサイト
作って更新も滞っている素人だ。タグも全部フリーエディタで直
打ち。

　…いかん書いてて鬱が入ってきた。
　まあ、プロなら無償で作品はつくらんか。

真っ黒なんですけど、どうしたらいいですか？

>96
とりあえずNN4.75とIE5で気付いた点です。
(HTML、CSS詳しくない、この板の常連でもないです）

本文の下に一行空きが無い
名前に色が無い
div間のスペースが3倍程ある
くらいでしょうか（素人目には）

どうやったら替えれるの？背景色。

585 名前：デフォルトの名無しさん 投稿日：01/08/28 03:13 ID:DJ9Ovvc2
誰? BODY BGCOLOR=#eee にしろなんて書いたWeb製作板の
ドキュソは。3桁指定ができるのはcssの場合だけだよ。
BGCOLOR=#efefef に直してください。

----
ということです。。

背景がまっくらだー面白い！！

他の板も真っ黒になるのがあった。

>102
IEならユーザー補助で背景色などを切れば良いです。

＞103　akiさんは女性すっか？

いま、read.cgi の変更を行っていて、
natto サーバにテスト導入したようなんですが、
背景色のバグがあって黒くなっちゃってます。

もうちょっと待てば直るようです。

＞107　了解です

しかし、natto サーバにテスト導入と言うのは嫌味だなぁ〜

バグや自業自得が一番最初に体験できるということで（ｗ

もどったね（ｗ

612 名前：デフォルトの名無しさん ：01/08/28 03:28 ID:HEWceQCw
背景戻りました↓
<body TEXT=black BGCOLOR=#eeeeee link=blue alink=red vlink=#660099>


613 名前：デフォルトの名無しさん ：01/08/28 03:29 ID:gcrx4Fj2
あれ？、直ったけど、#eeeeeeになっている。


614 名前：- ：01/08/28 03:29 ID:W9iyzXDo
gzip,Last-Modified 正常に動作してるようです。


615 名前：デフォルトの名無しさん ：01/08/28 03:29 ID:YMgWxGD6
とりあえず、たいして変わらないし良いんじゃないですか？

直った
　　　　　　　　　　　　　　∧ 　　　　　　　　　　 ∧
　　　　　　　　　　　　 　/　・　　　　　　　　　　 /　';,
　　　　　　　　　　　　 /　　';　　　　　　　　　　/　　';
　　　　　　 　　　　　 /　　　；＿＿＿＿＿＿/　　　；
　　　　　　　　　　／　　　　　　　　　　　　　　　　　　＼
　　　　　　　　 ／　　　 ／　　　　　　　　　　＼　　　　　＼
　　　　　　　 /´　　　(　　)　|＿＿＿＿|　　(　　)　　　　　　|
　　　　　　　| 　///// 　(　 |　　　　　:| 　　 )　　/////　 　 |
　　　　　　　|　　　　(　　　) :| 　　　　 |　　(　　 (　　　　　　　|
　　　　　　　 |　　　　)　　(　 |　　　　 |　　 )　　　)　　　　　　|
　　　　　　　　|　　　(　　　)　'; 　　　/　　 (　　　(　　　　　／
　　　　　　　　 ＼　　)　　(　　 ＼／　　　　)　　　)　　..／
　　　　　　　 　　　ヽ　　　　　　　　　　　　　　........:::::::＜

というか、タグが大文字と小文字で混ざってんのはどうにかならないの？

　bodyにbgcolor=whiteを追記。+14バイト。
　ちなみにimg {border-width:0}で各imgからはborder=0をすでに
削って有ります。
　リンクされた画像に枠があったらCSS効いてませんです。

　widthとheight属性は削除しました。やばいですか。

>101
　うわ、margin-topはN6以外全部三角だよ…。
　margin: 1em 0 0 0;
じゃないとダメなのね。

　名前の色は…dt削除(かんしゃく

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<style type="text/css" media="all">
body{background-image:url(../ba.gif);}
div{text-align:center;}
img{border:none;}
</style>
<title>web制作管理＠2ch掲示板</title>
<body>
<div>
<a href="http://www.2ch.net/info.html"><img src="http://www.geocities.co.jp/SiliconValley-Cupertino/5657/img20010514210907.gif"></a>
</div>
<!-- <META http-equiv="Content-Style-Type" content="text/css">は書かなくて済むようCGIで対応して欲しいね。あとjavascriptはもういらないんだよね -->


ここまで。おやすみ。

＞113　よかったね！

でも、web制作管理＠2ch掲示板の住民なら、これくらいで驚いちゃダメだよね（ｗ

>101
　間隔は…左右の空白幅は普通?
bodyからmargin:2%で幅とってるの。たとかネスケだと親のwidth
からの%計算がヘンっていうのがあったようななかったような。

　フォント幅 *emの指定に変えたら直るかな。
　横幅だけ教えて。ホンモノと同じにしてあるつもりだから。

>>113
鯖に負担をかけていないだろうか（藁

新しくなってる（ｗ
read.cgi ver5.02 (2001/8/26) →　read.cgi ver5.1 (01/8/28)

>118
>間隔は…左右の空白幅は普通?
margin:2%は効いています。
ただ、広告テーブルが左端に張り付いてます。
（右マージン4%なカンジで）

read.cgi ver5.1 (01/8/28)
大文字ですね。
BODY TEXT=black BGCOLOR=#eeeeee

>121
　広告divはクラス名変更するの忘れてたです。直しました。
　その下の鯖広告は画像化希望と言うことで、手をつけていま
せん。っていうか、今一番太ってる部分だ。

　3行分の空白は…縦の全長から長さ割り出してますか。とりあ
えず 1em 2%の(上下)(左右)指定にしました。all 1emでいいよう
な気もしないでもなく。

　以後の削減要望。

base herfの指定で、
../test/read.cgi?bbs=…
を
read.cgi?bbs=…
　@8で200バイト近く削減可能。

　現在keyの数値を52進数に変換する案が採用されつつ。たぶん
半角9文字から3〜4文字程度になると思われ。ついでにls無指定
だとcgi指定のレス数になるとさらによさげ。@6バイトの削減。

　鯖広告画像化。1840バイトっす。リク300でも1500お釣りクルヨ。

　あとはindex2から投稿フォーム追い出し。@395×10バイト削減。


　すでにタグレベルの話じゃないから丸投げ。

>122
色とマージンが無くなりました。
（ディスクキャッシュは消去して再読み込み）
私（ヨソ者）が見ても上手く説明出来てないと思いますが…。

>>124
　報告ありがとです。

div {margin:2%;…}　を
div {margin:1em 2%;…}　に変更したら、IE5.5以外(?)では、解
読不可となって、margin指定が削除された模様。ちなみにネスケ
では1つの要素でも不正があると、他の要素の指定も全部消えます。

　てなわけで、

div {margin:1em;…}

にしました。

>125
復活しないようです。
白地に黒文字、リンク色のみで左寄せ。
このNN4.75、CSSの一括指定でよくコケます…。

いっそNN4にはCSSを読み込ませない方針で逝ったらどうか

>126
　寝てしまった…。
　margin:2%;　→　margin:1em 2%;　→　margin:1em;

　の、どの時点で消えてしまったのだろう。

　他に>116をみて
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
と
<style type="text/css">　に　media="all"

を追記したのも関係有るのか。とりあえず消してみる。

それから、元スレでうざいと言っているやつ。ほんきでうざいな
ら、漏れはあっさり消えるが。

ともかく、NN、IEでの動作確認をしてから書きこむように＞素人さん

ほんきでうざい

┐(´ー｀)┌

　じゃ、消えるわ。
　あとはよろしく。

今気がついたよこのスレ。

とりあえず現状把握してないので「頑張れ」と言っておく。

>77 のhttp://isweb3.infoseek.co.jp/play/teess/2ch-index2.html について
CSS を書き直し Win の IE55，Moz092，NN478 で大体同じ感じになるようにしてみた
とはいえ，僕は 77 ではないので実際に反映させられない（ローカルで確認）
body{margin: 2%;}
h3{color:red;font-size:150%}
img{border:solid 0}
div{border:.5em ridge;margin:1em;padding:1em}
.m{border-color:#cfc;background:#cfc}
.r{border-color:#eee;background:#eee}
dt{margin:1em 0 0}
b{color:#080}
h1, .c{text-align:center}
・body に margin 指定で仮想中央寄せ
・img の border はこうしないと NN4 でひどい目をみる
・div 関係スッキリ
・その他削った，あと，h1 に直指定で h1 class=c を短くした

とりあえずこんなもので．77 さんまだ見てくれてる？
あと，Mac の方と Unix の方も表示確認していただければ（ローカルで）

つーか，このスレッド動いてんの？

>133
　反映。
ttp://isweb3.infoseek.co.jp/play/teess/2ch-index2-133.html

　鯖がUAに対応したCSSを吐くという手もアリ。というかIE3のbody
バグはそうするしか。
　内部型CSSの大きさとしては限界かと。これ以上追記するなら
外部CSSにするようが転送量押さえられるでそ。

dt{margin:1em 0 0}
は
dt{margin:1em 0}

でもよくない?


｜つーか，このスレッド動いてんの？
　テレホ時間に期待。が、時間的にギリかと。オレは30日からは
専用ブラウザでのROMを推奨する方向で動く。
　現状65Mbpsらしく。タグ減量と専用ブラで50切れるか微妙。65
がROM控えの結果も含んでいるとなると、「>>」とかの自動リン
クを削除すると、かなり効くんだがなぁ。

>134
おつかれ。
>dt{margin:1em 0}
これだと
dt{margin:1em 0 1em 0}
って意味になる。

>>134
スレッドメニューをクリックしてもスレッドに飛ばないんだけど・・・

>>136 とりあえずhtmlがわからない人は書き込み自粛して欲しい。
動作確認お願い　とか書いてある場合以外は・・・

>>137
いや、分かるよ、悪いけど(w
スレメニューがあるって事は<a name=1>とか入れないといけないんでしょ？
どこに入れるの？
<h3><a name=1>title</a></h3>
とか？

>134
作業ありがとう．
dt は >135 の言ってるとおり．ただ，現状だと NN4 で発言ごとの縦スペースが小さいから
案外 {margin:1em 0} でもいいかとも思う．もっとも，副作用で IE や Moz で余分に空く．
>136 は単なる書き忘れだから足すとして…（場所は >137 でも div の直後でも）
あと，h1 の class を外して，b の class=n は age/sage 用だっけ？

「>>」を削るだけでかなり減るよね…同意

追加。
掲示板一覧とかもしっかりリンクされてるんだし、やるならきっちりやって欲しい。

上の、
<a name="1" class="title">スレタイトル</a>
じゃ長いしね。

>133
>134をMacIE5とNN4.7、N6.1で確認。OK。

>140
class をつける必要なし，現状のように div 直後に <a name=1></a> で問題ない

ttp://www.reimy.com/bbs/index.php

同urlで反映。

>135
　なる。下と右をマージンね。
　副作用でfreewebの広告にも枠がついてるってのは内緒だ。
　バナーをいじるなの規約な反してそうだがしらん。

>140
　悪い。すっかり忘れてた。
　スレを囲む<div>かタイトルの<h3>にid=をつけるか、<a name>
(HTML4非推称)を使うかになるけど、古いブラ互換のため<a>にし
ますか。
　見た目ではタイトルより枠に飛ぶほうが奇麗かも。
　しかし、idにしろnameにしろ数字から始まる指定(name=1)って
仕様的にダメじゃなかったっけ…。IEやNN以外で誤動作するブラ
ありそうな。

　元スレのほうで、広告を最適化したのが書きこまれたので、完
成を期待して待つ。

>144
数字スタート，id は不可，name は可
で，現状は div の直前に <a name>（142 でウソ書いた），これなら枠の直前に行かない？

>145
　nameは可なのか。もうずいぶんとhtml4.01の仕様書読んでないよ…。じゃ、胃が痛いけど（自分のページならid使う）nameということで。
　位置だけど、最初は漏れもdivの外に書いてた。でもインラインが宙ぶらりんという
のは…うぐぅ。IE5.5だとdivの内側でもなぜか枠ジャストで表示される。

　ちと本文入れてそれっぽくしてみた。

初心者のCSS講座開催ちう

>>128
その追記はNCよけ。

って、DOCTYPE消しさんかあんた。切ない。

サヨナラW3C（藁

意見交換のための age

結局ここは UNIX 板か Prog 板の人に見てもらえてるんだろうか…
気にしつつ寝る

DOCTYPEつけてあがきながら、今日は中断。
↓今のところこんな感じ
http://www.geocities.co.jp/SiliconValley-Sunnyvale/1581/in1.htm

そういえば、CGIでcookie使用はまた無しの方向に行ったみたいだ。

■各種総合スレ■ のリンクは要らん....と思う

>138
その質問でhtmlを知らないってことばれてるし 藁
初心者オンパレード 藁

初心者を笑うのは常に初心者。この板でも同じか…。

>>156
あーハイハイそうですね。
所詮1年や2年しかやってないし、自サイトにはフレーム使ってるような初心者ですよ。
あんたしつこいよ。

>155
そこはローカルルールだからなぁ。
ローカルルール廃止、とは言わずとも大幅な縮小は必須だろう。
自治スレもローカルルールスレも今見当たらんが。

タグ辞典でもわかりそうなことを何度もここで質問する初心者の方がしつこいと思うが。

ここはCSS信者用の隔離スレだもんな・・・

CSS信者は、必要なところだけCSSで、とは思わないのかな。

>>162
アンチCSSは効率が必要なとこでも無駄にタグで済まそうとするけどな。

>162
CSSの役割は装飾です。

がんばれー。見てるぞー

　プ板の作業が思っていたより難航してるナ…。やっぱり根本
(bbs.cgi)に手が付けられないのが大きな足かせらしく。
　でも頑張ってくれい。

>160
　この土壇場で初心者であることを指摘して何の意味があるのか。
　なにもしない上級者より、つたなくても手助けしてくれる初心
者のほうが助かる。

>162
　必要かつ大切なのはコンテンツと意味付けのための論理タグさ。
CSSは見栄えの為の道具でしかない。
　とか言いつつ、スレ30の所でsmall使っている時点で説得力0なんだが。

　ともかく、CSSオフの場合どうなるかのhtml。
ttp://isweb3.infoseek.co.jp/play/teess/2ch-index2-133noncss.html

見栄えを変えていいのかどうかわからない→table 残る→減らない
うーん…
div class の方が圧倒的に小さくてすむのになあ

table残すと軽くはならないでしょう。
divつかう方向でいいんじゃないでしょうか。

これ良い感じですね。IE5(moon)とNN4.75で見た目殆ど同じだし。
http://isweb3.infoseek.co.jp/play/teess/2ch-index2-133.html

>>169
すごくいいっすね。
ただ、赤色使って目立つから、スレタイトルのフォントは大きくしなくていいのでは？

とりあえず，見てくれてるかどうかわかんないけど書いておこう

>170
確かに．デフォルトの h3 に任せるというのもありだと思う
ただ，これによって削られるのは ;font-size:150% の部分だけ
ま，1byte でも少ない方がいいか

で index のほうは table を使わないなら >169 のような感じでいいと思う
（細かく言えばもう少し削れるが）

read.cgi のほうも仕様が今のまま（5.10）だとすると
b{color:#080}
b a{color:##f}
とすれば font いらなくなるはずだが…見てくれないかなあ

追記
read.cgi
外部リンクの target="_blank" の "" はなくてもよい
ほんの小さなことだが圧縮非対応ブラウザや何回も読まれることを考えれば

何度もすまない
>171
##f -> #00f ね，何を書いているんだ…

ついでにめちゃ細かいが >169 （index2.htm 代替）も
たかだか数十 byte でも「圧縮非対応ブラウザや何回も読まれることを考えれば」
1 Content-type 前後の "" 不要
1 x-sjis -> shift_jis （read.cgi でもそうなってるし）
30 h1 の class 不要
32 "" 不要（以下 "" とだけあったら不要の意味）
64-83 body 前後 ""
84 ""
101-120 _target 前後と Arial 前後の ""
127 以降の class=n は 広告 table 内の b が解決しないといけないのか…
218 submit 前後
こんなものか．現状の index2 にも適用できるはずだから prog 板の方が反映させてくれると嬉しいのだが…

>1 を思い出そうよ

今日は>169書いた人、居ないんですかね。
>>173
>prog 板の方が反映させてくれると嬉しいのだが…
向こうの要望も見てください。>>123

みなさんがんばってください、としか言えない自分・・・
これはＵＮＩＸ板のみたく、実際使われたりするやつですか？

>175
使われると決まっている訳じゃ無いみたいです。だからこそ応援したいかも。
プログラム技術だって「使われると決まっている」からやってる訳じゃないでしょう。
非公開のbbs.cgiにも手を付けているようですし。
「自分達に出来る事」をやっているんだと思いますよ。

気になって寝るに寝られない
>174
見てきました．これは，こういう修正もプログラム側で入れることができるよ，ということですよね
それに追加して，ここでのことも汲んでいただけたらな，と
read.cgi に関しては >171 一番下と >172 をやっていただければ font color=green が全部消せます
（ただし b のあとに a を入れるようにしてもらわないとダメ，もしくは b a{} でなく a b{} で宣言）

>173 の 127 class=n 問題は，単に
dt b{color:#080}
dt b a{color:#00f}
とすればいいだけの問題であった

font を消してどのくらい減るかというと（age発言数）x25 -（CSS 宣言部）byte

　テレホPM11〜AM2避けてた。

>173
　反映

　行番号はfreewebの広告分多くなってるね。
　鯖の広告は画像リンクを要望してます。また、元スレのほうで
最適化してるんで、完成したら変更します。

>>169 の成果をちょっと反映してみた。
すごくうさんくさいし、ちょっとバグってるけど、
いい感じ。以下がサンプル。
http://www.psychedance.com/test/read.cgi/tech/

スレッドの区切りに<hr>入れてもらえると、cssがOFFの時うれしいんですが。

<form method=POST action="../test/bbs.cgi">
が離れてる必要ってあるんでしょか。

>179
お疲れ様です
・form がなぜか 2 つある
・font color=green はいらない（b タグにスタイル指定しているので）
という 2 点，お願いします

>>182
今のところ、ダイジェストの中身だけ
>>169 案を採り入れていない(っていうか
無理矢理呼び出してる)ので、
もうしばしお待ちを。
今からごりごりやるです。

>179
　お疲れです。なんとか文字の置き換えで頑張ってください。
　imgはCSSのほうで枠線無しにしてあります。CSS無効だと線が
出てしまいますが、文字数を減らすことを優先ということでこう
してます。
　あと、スレのリンクが
<a href="998997848/?ls=50">
となっていますが、<base href="">が抜けているみたく。
　read.cgiの仕様が変更になったのかな?

>180
　反映
ttp://isweb3.infoseek.co.jp/play/teess/2ch-index2-133.html
ttp://isweb3.infoseek.co.jp/play/teess/2ch-index2-133noncss.html

hr{display:none}

　で、CSSが有効だと非表示となり、無効だと水平線が現れます。

すげえ！ここでもカッコイイことしてますね。
やっぱ、クロスブラウザになるわけですよね。
ＮＮ４でも見れるようになりますか。

>179
ぼろぼろだね

>>184 スレのリンクは新仕様。

で、HTML中に出てくる % の文字が
消え失せていたのに対処したら、
少しはよくなった、とおもう。

まだ最新のものには追従してないす。
こちら>>179

<h2>プログラム技術＠2ch掲示板</h2>
<h3>■PROXY規制中■</h3>

プロキシ規制中はこんな感じになるんでしょうか？
あと、ほんと個人的な感想ですが
div{border:.1em ridge; margin:0; padding:1em}
が現行のnn4での見え方に近いような気がするです。

head タグは無くても良いのでは。

<ul>
<textarea rows=5 cols=60 wrap=OFF name=MESSAGE></textarea>
</ul>

この<ul>はいらないかと。
read.cgiのほうではやってないし。

ふふ、このスレでもか。そろそろ放置プレイに目覚めそうだな。
そうなる前に、作業やめて逝く。さらば

>153
んじゃレスを・・・
<form method=post action="../test/bbs.cgi">
<input type=submit value="新規スレッド作成画面へ" name=submit>
<input type=hidden name=bbs value=hp>
<input type=hidden name=time value=998919917>
<br><b><a href=http://www.2ch.net/before.html>書き込む前に読んでね</a> ｜ <a href=http://www.2ch.net/guide/>２ちゃんねるガイド</a></b>
</form>
こうしたほうがいいかもしれない。
</form>の下が一行開くのをつかったデザインだから・・・

　反映。

＞188
　串規制もそんな感じ。あれも赤色だったでせう。たしか。
　枠の形状はじつは適当です。ridgeである必要性はありません。

　というか、CSSなので、ユーザーサイドで好きに変えれるし。
　そんなわけでclass名はもう少し意味がある名前にしてはどう
かと思わなくはないんですが、わざわざ !important する奇特な
人はオレぐらいしかいないかということで放置。
　枠変えてみました。変わってますか。

＞189
　NN、NCでhead外にある＜style type="text/css"＞〜＜/style＞
をきちんと反映してくれるならOK。そのあたり実験してみてくだ
さい。

＞190
　んむ。削除。

＞191
　むしろNC、IEがDOCTYPE宣言を放置プレイ。IE6では反映されま
すか。

　漏れも宣言してないの胃が痛い。でも文字数多すぎ。この際プ
ライドよりも、同じ転送帯で1つでも多くのレスが送れるように
したいヨ。
　…ダメ?

　あと、密かに参考にしてたりする。

>>179
「名前：」「投稿日：」消してください

ためしに、sageの見てくれを変えてあります。
少しだけ意見求む。
なお、相変わらず板ダイジェストページの見てくれは
完全じゃありませぬ、ｽﾏﾇ

http://www.psychedance.com/test/read.cgi/tech/998997848/?ls=50

sageがリンクされないのはありがたい。
Lynxとかつかってるときに、邪魔なんですよね・・・あれ。

＞196
　誤爆でなければCSS化のテンプレにします。
　age/sageは、まあ、見なれるまでの問題ですね。

　ただ、個人的には過去ログ出しの意味合いが強いread.cgiで、
age/sage情報は本当に必要なのか疑問だったり。これがあるがゆ
えに「ageるな/sageるな」という無駄レスが発生しているのでは…。

　スレ作成者がage/sage進行を操作できるといいんですけどね。

　…っていうか、そろそろindex2のh化を始めたほうがよいような。
cですよね。なんかちらっとperlでなんとかって読んだ気も。

　情報。

「転送量（料）の増加で２ちゃんねる閉鎖の危機(13)」
ttp://teri.2ch.net/test/read.cgi?bbs=accuse&key=999197286
｜511 名前：マァヴ ★ 投稿日：01/08/31 06:11 ID:???
｜あ、思い出した(^_^;)
｜今のindex.htmlは廃止される予定です。
｜左のフレームにあるbbsmenuも廃止されます。
｜今後は使いにくいけどカテゴリ別のbbstableになる予定です。

>196
お疲れ様です
見栄えに関しては Win IE55, NN478, Moz092 で問題ありませんでした
タグのダイエットや CSS は >198 さんがテンプレートを作って下さった後に

一つ気になったこと
>196 の中には名前のメール欄があるもの（<a href=mailto:...>）が一つも
ないのだけど，それはなくすの？本当にメールアドレスを入れたい人は
本文中に書いてもらうとか？
あ…サンプルにした元ソースになかっただけか？

名前のところの色のパターンはいくつあるのか？という質問と同じことだけど

＞200
　共通CSSは133さんに感謝。記念してCSSサンプルのfile名には
133の文字をw
　テンプレを作るのではなくて、既存または改良のhtmlをCSS化。
問題無ければc言語の.h化という作業になります。

　転送量削減のため、デザインや2chの構成を大幅に変える可能
性も出てきました。というわけで、既存の改良をとっとと済ませ
て、氏にスレになりつつある「●２ちゃんねるの新規デザイン●」
に活動を移したいと。


　メールアドレスは残すほうに一票。ゲー板とかだと、ネタバレ
にからむ質問の回答はメールアドレスに書いたりするからー。
　名前の多色化は意味無しとみた。非CSS環境も考慮しないとい
けないし。それよかキャップについてはbタグの代わりにiタグを
吐くようにbbs.cgiを変更するほうがよいかと。

>>201 いまのところ、sageのアンカーを落とすか
どうかは流動的ですし、
mailtoがそれ以外(ageとかネタバレとか)だったら
そのまま入れる、というのが流れっぽい。

　web制作管理＠2ch掲示板のindex2を丸ごとCSS化してみました。
ttp://isweb3.infoseek.co.jp/play/teess/2ch-index2-133.html
CSSオフの場合
ttp://isweb3.infoseek.co.jp/play/teess/2ch-index2-133noncss.html
　65549 → 55047バイト


　「read_cgi改良スレッド.htm」を丸ごとCSS化。ちと酔った。

ttp://isweb3.infoseek.co.jp/play/teess/read_cgi改良スレッドcss.htm
　18891 → 16602バイト

　訂正

ttp://isweb3.infoseek.co.jp/play/teess/read_cgicss.htm
　18891 → 16602バイト

何か光栄なことになっているようですが，んなことはおいといて

>203
お疲れ様です
どっちもこれだけ減らせると結構いい感じですね

index2 のほう，枠が細くなってるけど，これは好みの問題だな

read のほう，NN478 で見ると margin バグのせいで詰まって見えます
ので，各発言最後に一つだけ <br> を入れるといい感じかも（現状 2 つだよね）
バグはバグなんだが，さすがに NN4 使いの人が許してくれなさそうな見栄え…
class=s はメール周りの仕様が決まってからでしょうね

ひとつだけ注文ですが、
板ダイジェストと
カキコ表示の
発言表示用HTMLは、なるべく同じものに
なるようにしてくだちい。

<form style="text-align:center" method=POST action="../test/bbs.cgi">
<input type=submit value="スレッド作成" name=submit>
<input type=hidden name=bbs value=hp>
<input type=hidden name=time value=999240458>
<br>
<span style="font-weight:700;font-size:110%">
<a href=http://www.2ch.net/guide/>>2chガイド</a>
<a href=http://www.2ch.net/before.html>書き込む前に読んでね</a>
<a href="http://www.2ch.net/guide/faq.html">FAQ</a>
</span>
</form>
<p style="text-align:center"><a href=http://210.150.210.150/sage/bbstable.html>■掲示板一覧■</a></p>

目的には添わないと思いますが、
少しだけ見た目に凝ってみたり。

>207
同じ見え方でもっと短くした版 (-54byte)

<center>
<form method=POST action="../test/bbs.cgi">
<input type=submit value="スレッド作成" name=submit>
<input type=hidden name=bbs value=hp>
<input type=hidden name=time value=999240458>
<br>
<b style="font-size:110%">
<a href="http://www.2ch.net/guide/2ch/" target=_blank>2chガイド</a>
<a href="http://www.2ch.net/before.html">書き込む前に読んでね</a>
<a href="http://www.2ch.net/guide/faq.html">FAQ</a>
</b>
</form>
<a href="http://210.150.210.150/sage/bbstable.html">■掲示板一覧■</a>
</center>
必要な " は足して必要ない " は消しました

＞205
　CSSの醍醐味は、ユーザー側で!importantを利用することにより
好みの装飾に変更できるという点ですから、どの枠の形を採用す
るかという命題には意味が無かったり。
　ただ、クラス名はユニークにする必要があります。現在は減量
の為にrとかmとか無茶なクラス名を割り当ててますが、最終的に
は2ch-res、2ch-menuとかになるんじゃないかと。

　dtへのmarginバグは、ddに対する下marginに変更するとどうな
るんでそ。


＞206
　あー、index2のCSS化した後に、「あ、そうそう、新仕様のが
あったっけ」と取りかかったんで、統一がありません(w
　index2のレス部分を新仕様に統一すればよいのでせうか。

　あと、最新仕様はどこを追っかければよいのかー。
「read.cgi改良スレッド」
ttp://piza2.2ch.net/test/read.cgi?bbs=tech&key=998997848
　ココ?

　ともかく反映。
ttp://isweb3.infoseek.co.jp/play/teess/2ch-index2-133.html
ttp://isweb3.infoseek.co.jp/play/teess/read_cgicss-133.html

＞207
　うと、どのhtmlの変更でそ。133のならヘッダの部分で
h1, .c{text-align:center}
があるんで、class=cだけでセンタリングされますです。

＞208
<b style="font-size:110%">
は
<big>にするとか(ぉ

>207
>208
はスレッド作成フォームとその下のfaq関係のセンタリングですな。

nn4はdt.ddへのマージン指定ほとんど駄目っす。

>209

CSS の醍醐味はそりゃそうなんだが，今の目的は「CSS 使ってできるだけ軽く，
しかも前と同じように見えるようにする」だと思うのだが．
important なんて知らない人が多そうだし．
同様の理由でクラス名に意味のある名前をつけても仕方ないんじゃない？
（今回の場合，減量するという目的がないのだったらそもそも CSS を使う意味がない）

dd の margin はいろいろやったがバグがどう働くかわからんかった．
で，単純な回避策として dt{margin:1em 0} とすれば NN4 で本文の下に 1 行空く．
副作用で（前も書いたが） IE55 や Moz では 名前の下も 1 行空く．
「できるだけ短く，できるだけ同じように」だと，このあたりで妥協するしかない．

<big> のほうが短くていいね，というか 10% の差の区別は僕にはわからなかった

>>209
＞CSSの醍醐味は、ユーザー側で!importantを利用することにより
＞好みの装飾に変更できるという点ですから、どの枠の形を採用す
＞るかという命題には意味が無かったり。

アホ発見。

＞210,211
　マージンだめですか。もう、NN4ﾏﾝｾｰとしかいいようがなく。
　その頑固さに乾杯。

　<br>で妥協という線が濃厚ですな。


＞211
　ああ、9月いっぱいは大丈夫そうという安心感から、本来の目
的を忘れてたよ…。っていうか、10月からの次世代携帯電話の半
定額制度でトラフィック増の予感でげんなり。

　月額8000円で1パケット0.03円。12万円分まで定額だってさー。
　単純計算いままで月1万払ってた人(データ量2MB)が、次世代定
額で10万円分使用したとすると203MB…100倍っていうかなんてい
うか。
　次世代携帯の普及次第だが、2002年はコミュニティサイト受難
の年になりそうですな。

#ｽﾚﾁｶﾞｲ　ｽﾐﾔｶﾆi-mode対策ｽﾚ ﾀﾃﾙﾍﾞｼ?


＞212
　ｱﾘｶﾞﾄ

最近タグを覚えてHPを作成した俺には
ここは高等技術を見れるみたいで非常に勉強になる
まだ全然読んでないけど自分のHPにもここの技術を使わせてもらうよ

知識、技術がある方がんばって下さい
未来の2ちゃんねるのデザインが変わるかもしれないので期待してます

>214
参考にしても幸せにはなれないと思うよ

＞214
　「転送量削減の為」という目的がそもそもCSSの意義と異なって
るからねー。参考にはあまりしないほうがよいかと。
　ただ、テーブルレイアウトやFONTの排除は、基本的な流れとし
て使えるかも。でもFONTの置き換えが既存のBタグを流用と言う
のは…。

　2chに採用されるかは別として、1つのhtmlをみんなでいじると
いう経験は滅多にないので、面白かったし参考になったっす。
　2ch型(あめぞう型)掲示板にも応用できるしね。

　あ、そうそう、「構造はタグで、装飾はCSSで」。これ押さえ
ておけばXTMLも大丈夫。

ttp://www.reimy.com/bbs/bbs.php

こういう風に全部CSSでまとめちゃうとｶｺｲｲ
お姉さんもキレイヽ(´ー｀)ノ