X

【bbs.cgi】index.html軽量化作戦スレ

■ このスレッドは過去ログ倉庫に格納されています
2005/06/03(金) 00:35:08ID:???0
bbs.cgiが生成するファイル（index.html subback.html等）の軽量化を目指す
スレッドです。


参考発言
680 名前： ◆BDFCNV1.to [sage] 投稿日：2005/06/02(木) 22:09:53
index.html 生成関連にもメスを入れたかったり、
つまり style とか .css とかですか? bbs.cgi が生成するバイト数を極力へらす方向で、
これは私にはちんぷんかんぷんでして、
52stream ◆ap/yuix/tw
垢版 |
NGNG
BBS_TITLE_PICTURE=http://img.2ch.net/img/operate_a.gif
BBS_TITLE_COLOR=#000000
BBS_TITLE_LINK=http://info.2ch.net/wiki/
BBS_BG_COLOR=#FFFFFF
BBS_BG_PICTURE=http://www2.2ch.net/ba.gif

BBS_MAKETHREAD_COLOR=#CCFFCC
BBS_MENU_COLOR=#CCFFCC
BBS_THREAD_COLOR=#EFEFEF
BBS_TEXT_COLOR=#000000
BBS_NAME_COLOR=green
BBS_LINK_COLOR=#0000FF
BBS_ALINK_COLOR=#FF0000
BBS_VLINK_COLOR=#660099

BBS_SUBJECT_COLOR=#FF0000

これらが、index.htmlにかかわってくるんだなあ。
…ということに、今気付いたorz
2005/06/03(金) 20:30:14ID:pK6XUAgi0
>>52 そういう部分は別ファイルじゃなくて index.html 内の
<style>〜</style> に記述すればいいかと......
2005/06/03(金) 20:44:20ID:TmlVOLYH0
BBS_CSS=http://www.ff.iij4u.or.jp/~ch2/2ch.css

にまとめちゃえー
NGNG
SETTING.TXTの更新をするとき、それに合わせて.cssに同じ内容をセットするとか。
NGNG
…まあいいや。
枠をつけているだけのTABLEをDIVに置き換えてみました。

http://blog8.fc2.com/c/certain47/file/news4vip-css-1.html

スタイルシートは<style>〜</style>で内蔵しています。
2005/06/03(金) 20:49:42ID:VwX1TcEv0
なんか立体に・・・
2005/06/03(金) 20:52:57ID:Z3JKUDRl0
>>50-51
「tableの枠はべつに無くてもいいです。。。」とか言ってくれると効果絶大の上話が早くて…
<TABLE border=1 cellspacing=7 cellpadding=3 width=95% bgcolor="#EFEFEF" align=center>
というのを非CSS環境にも配慮してCSSで再現するのはちょっと面倒。
今回はスタイルシートで表現すること自体が目的ではないので尚更。
凝れば完全再現もできるけど、そのせいでCSSが肥大して
「HTMLだけで直に書いてたほうが総合的には早かった」ということになってはちとアレだ。


「1つの文書で1回しか使われてない表現を<style>のCSSで書き直すのはサイズの無駄」
　HTMLファイルの背景。リンクの色指定。

「1つの文書で何回も使われている同一表現を<style>のCSSで書き直すのはサイズの節約」
　スレの<table>の表示設定。スレタイの赤文字。メール欄が空の時に名前を修飾する<font color=green>。

「たくさんの文書で同じ設定が使われているのを外部CSSで書くのは節約」
　>>52によるならindex.htmlには存在しない。
　名前欄の太字や着色、スレタイの赤字のCSSが板内のread.cgiでなら使い回せるかもしれないがスレ違いか。
NGNG
border-style属性では、いまの<TABLE border=1 cellspacing=7>を実現するのは不可能っぽいのでしかたなくこうなりました。
border-styleとborder-colorを変えれば違った風になります。
2005/06/03(金) 20:56:45ID:TmlVOLYH0
>>59
<div style="padding:**; border:**;"> <div style="border:**;"> 〜でしないとあのスタイル書けないよね

tableおそるべし
NGNG
>>58
>第一段落
同意。

>「1つの文書で1回しか使われてない表現を<style>のCSSで書き直すのはサイズの無駄」
>HTMLファイルの背景。リンクの色指定。
css+index.htmlではサイズはでかくなりますが、index.htmlは小さくなりますよ。


>「1つの文書で何回も使われている同一表現を<style>のCSSで書き直すのはサイズの節約」
>スレの<table>の表示設定。スレタイの赤文字。メール欄が空の時に名前を修飾する<font color=green>。
最初<font color=green>を、<span class="NonMailName">にして、逆にサイズがでかくなったからやめた。
2005/06/03(金) 21:09:02ID:pK6XUAgi0
名前の <font color=green> の部分は

dt span { color: green; }

で

<span><b>名無しさん</b></span>

かな......
NGNG
>>62
なるほど。。。

言い忘れてた。
>>56でupしたのだと、クラスのBlock1からBlock4まで、中身がかぶりまくりなんですが、1つの要素に複数のクラスを指定するのはCSS2からみたいなので、やめときました。
2005/06/03(金) 22:16:51ID:Pb3vwg3N0
>>56のサイズ(DISK上のサイズ)：18578バイト
CSSを<link rel="stylesheet" href="default.css" type="text/css">
として外に出した後のサイズ：17680バイト
898バイトの軽量化

枠云々はおよその見た目が変わらなければさしたる問題ではないんでは無いかと思いましたー
違和感が有るといえば有りますが,使用に不都合が出るとは思えないですしー
なお,漏れはie6(DonutP)とFirefox1.04で確認してまぁーっす。
Operaとかはどうなのかしら…たしかhtml等の解釈が厳密だった気がするんだけど。
NGNG
枠線うんぬんよりも、背景画像の上に薄緑あるいは薄灰色のボックスがある感じで
ええんやないかと思います。
一旦思いっきりシンプルにしてみて、管理人に見てもらうとか。
2005/06/04(土) 01:17:51ID:sSRL+uRV0
あうあう。今気が付いた。
>>64 「DISK上のサイズ」は無しで。普通のサイズで
2005/06/04(土) 01:38:52ID:oIkgRn0h0
閉じてないpは削除してtableのマージンにしね？
Morzillaだとそこで托い解釈してるし。
2005/06/04(土) 03:00:55ID:c53ed4bc0
うあ、随分進んでる、気がする？
2005/06/04(土) 07:30:11ID:BHwKuyCF0
http://up.isp.2ch.net/up/2ac8bc1c90ef.zip
こんなんじゃだめか、、そうですね、失礼しました。
NGNG
えっと、正しくHTMLを描かないとCSSが機能しないと思うのですが。。。

ローカルルールと、名前欄の</b>
この２つをなんとかしなきゃだよもん。
NGNG
名前欄の<b>、どうするべ。トリップとかfusianasanとかで、datファイル側に記録されてるんだよね。
てかどうするというより、いまさらどうしようもない気がする。
2005/06/04(土) 13:03:28ID:MnRwKm/O0
>>70-71
すべてをCSSで表現しようとすればそうだろうな。
ただ、装飾をCSSで表現することが今回の目的ではないし
すべての装飾をCSSに任せようという話でもないので。

たとえば太字は<b></b>が使われてるけれど、
この7バイトはおそらくCSSにしても確実には縮まらない。
　<TABLE border=1 cellspacing=7 cellpadding=3 width=95% bgcolor="#EFEFEF" align=center>
のスレ表示テーブルをCSSだけで再現することはできないけれど、たとえば
　スレ表示部自体の開始時に<center>
　<TABLE border=1 cellspacing=7 cellpadding=3 width=95% bgcolor="#EFEFEF">
　スレ表示部自体の終了時に</center>
とすれば、表示はまったく変わらない上にスレを3つ以上表示する板に限り1スレにつき13バイトずつ縮む。

って13バイトかよインパクトねーな俺。
2005/06/04(土) 13:26:25ID:SmR9bRZZ0
<center> のような deprecated なタグを増やすのはどうも......

<table> をそのまま使うとしても，

　　　　border=1 cellspacing=7 cellpadding=3

を CSS に置き換えるのは難しいとしても

　　　　width=95% bgcolor="#EFEFEF" align=center

は CSS 化できるんでないかな？

　　　　background-color: #EFEFEF; width: 95%;
　　　　margin-left: auto; margin-right: auto;
2005/06/04(土) 13:30:13ID:sSRL+uRV0
>>73
漏れもそっちのイメージだったりする
NGNG
>>72
cssにて
table#chapter1 {
margin: 0 auto;
padding: 0.3em;
border: #EEE inset 1px;
border-spacing: 0.5em;
border-collapse: separate;
width: 95%;
}
しておけば、、、
<table id="chapter1">
</table>
で、終わるかと。

ま、見たくれはUAで好きなようにすれば桶なんだから（元々そういう趣旨）
NGNG
　<TABLE border=1 cellspacing=7 cellpadding=3 width=95% bgcolor="#EFEFEF" align=center>

>>56では、
<div class="Block1">
で
.Block1{
background-color: #EFEFEF;
width: 95%;
margin-left: auto;
margin-right: auto;
padding:3px;
border-width:8px;
text-align:left;
}
body{
text-align:center;
}

IE対策で余計なtext-alignを付け足すハメになった件。
2005/06/04(土) 13:39:38ID:SmR9bRZZ0
IE だと margin: auto; が効かないのかな？ 2.5% とか数値で指定するとどうなんだろう......
2005/06/04(土) 13:40:48ID:0PeMdp9WO
13byte*10スレくらい*1000PV/sやったら
127KB/s程の削減？

インパクトは出てきただろうか。。
NGNG
>>77
auto効かないんですよ。で、bodyのtext-align:center;でセンタリングしてるんです。
text-alignはブロック要素は影響されないはずなんですが、IEではブロック要素もセンタリングされます。
2005/06/04(土) 13:43:44ID:0PeMdp9WO
IE6.0でmargin auto使ってますよ。
NGNG
でもって、飾りだけのtableも無くしちゃえばどんどんダイエット出来るんじゃないかな。
あと、▼みたいなナビゲーションも、人間相手だけの不要の長物だしだし。（パンくずリスト全廃派）

それぐらいやってすっきりさせてみるのも２ちゃんねる的でいーんじゃないかなかな。
しつこいようだけれども既存のものに追従する意味なんて無いと思うしうし。
2005/06/04(土) 13:46:03ID:0PeMdp9WO
>>79
あれ？使えないですか。
NN対策で両方書いたんだっけ。
2005/06/04(土) 13:55:36ID:MnRwKm/O0
>>73
> <center> のような deprecated なタグを増やすのは
別に問題ないと考えます。
2chのHTMLはそういうものではないと思います。DOCTYPE宣言もないし(w

tableの背景色はCSSで書きたくありません。
CSS非対応ではレンガタイル等の2ch壁紙が透けて見えて読みにくいので。
tableの幅もCSSで書きたくありません。
CSS非対応ではスレごとにスレ表示幅が変わってしまってウザいので。
>>45みたいな感じ。

求められてるのは軽量化であって、見栄えを変えてしまうことではないということで。

まあ、最適解は「CSS非対応でも雰囲気はたいして変わらない程度のダイエット版」と
「CSS非対応ではベタテキストに見えるがCSSダイエットしまくり版」の
2種類の「完成品を」用意してひろゆこに選択迫ることかも。
2005/06/04(土) 14:00:43ID:MnRwKm/O0
実際問題として「CSS非対応Webブラウザ」では
「（パソコンの広いディスプレイ上の）IEで見ているようなレンダリング」は
されてないことがほとんどだと思うので
色や太字や大きめの文字や背景程度がバージョン間で共通なら
それ以外の「IEっぽい」装飾の再現性は切ってしまっても実害軽微のような気はします。
2005/06/04(土) 14:15:45ID:SmR9bRZZ0
>>83
>tableの背景色はCSSで書きたくありません。
>CSS非対応ではレンガタイル等の2ch壁紙が透けて見えて読みにくいので。

とすれば，background-image も CSS で対処するという選択肢も......
CSS 非対応ブラウザへの個人的な考えは >>51 ということで．

# 携帯ブラウザに関しては，携帯入り口から見てもらうのが原則なので
# PC 用ページでの表示が意図した通りにならないのは我慢して下さい，
# ということじゃダメなんでしょうか？

>まあ、最適解は「CSS非対応でも雰囲気はたいして変わらない程度のダイエット版」と
>「CSS非対応ではベタテキストに見えるがCSSダイエットしまくり版」の
>2種類の「完成品を」用意してひろゆこに選択迫ることかも。

この点は同意です．
86讃岐フォアンフォアン▲ ◆MylTDX..QI
垢版 |
NGNG
>>85
＞#携帯ブラウザ(ry


どういー
NGNG
忘れないうちに書いておこう

<META http-equiv="Content-Type" content="text/html; charset=x-sjis">
↓
<META http-equiv="Content-Type" content="text/html; charset=Shift_JIS">

3バイトほど増えてしまうが、このさい改めましょう。
NGNG
>>87
euc-jp ｷﾎﾞﾝﾇ♪＠Rock54対策
2005/06/04(土) 17:07:01ID:mQqKJtMP0
まずは小さなことからこつこつと
・リンク付き画像のborderをスタイルシートに置き換え
　a img { border-width: 0; }
2005/06/04(土) 17:16:38ID:tQlvNcmg0
>>79
標準モード
NGNG
あ、IE6は標準モード？と互換モードがあったんだっけ。
んで2chのindex.htmlの場合は、DOCTYPE宣言無しだから互換モードですっけ。
2005/06/04(土) 17:44:42ID:tQlvNcmg0
>>91
そうそう。
で、標準モードにするには、URLありのDOCTYPE宣言をしとけばおｋ。

CSS無効云々は、HTMLさえまともに書いてれば最低限の整形はされるから無問題かと。
2chの場合、見た目がどうあれ機能を提供できれば十分でしょ。
2005/06/04(土) 19:25:45ID:GXmFfVLo0
>>87
すべてのindex.htmlで3バイト増やしてでも享受すべき運営上のメリットを述べよ。

W3C原理主義者のようなものはこのスレには要らないのでそのへんよろしく。
NGNG
そこまでして容量を削るなら、削れるダブルコーテーションは全て削ろう。
2005/06/04(土) 20:06:31ID:4rFjzzuC0
そこまでして容量減らすんなら\n無くしたら？
2005/06/04(土) 20:41:45ID:SrVyolWY0
2chのHTMLは「正しく」ある必要性は全然無い。

リンクの色だってCSSで書く必要が無い。
なぜなら<BODY>に書いたときよりバイト数が増えてるから。

x-sjisをShift_JISに変える理由も無いはず。
x-sjisだと言われて「いわゆるShiftJISな文書」と解釈しないWebブラウザはまず無い。
2005/06/04(土) 20:43:49ID:SrVyolWY0
今回の目的はvalidに近いHTMLを吐くように改造することではないはず。
目的を見失わないようにしよう。
2005/06/04(土) 21:26:13ID:SmR9bRZZ0
>>96-97
まぁ「正しい」HTML にする上で現行 HTML コードよりも容量が増える部分もあるでしょうけど，
レガシブラウザを考えずドラスティックに HTML コードを再編すればかなり削れる部分は
あるでしょうから，差し引きで十分お釣りは来るだろうと思いますが．基本的に >>83 の

>まあ、最適解は「CSS非対応でも雰囲気はたいして変わらない程度のダイエット版」と
>「CSS非対応ではベタテキストに見えるがCSSダイエットしまくり版」の
>2種類の「完成品を」用意してひろゆこに選択迫ることかも。

に同意でして，それぞれのバージョンを支持する人がそれぞれのバージョンを作る方向で
作業すればいいのではないかと．両者がここで足の引っ張り合いをするのも
あまり生産的ではないと思うので，とにかく両者ともそれぞれ「モノ」を作りましょう，と．
2005/06/04(土) 21:30:08ID:SrVyolWY0
この板のindex.htmlを改造することにしよう。
スレ上位表示が40スレでスレ内容表示が10スレだから結構一般的。
2005/06/04(土) 21:38:47ID:Ec7w22Eu0
>>87
どうせ鯖全体でShift_JISばっかりなんだろうし(未検証)、
ボディじゃなくてヘッダでコード指定しちゃえば？
今はかなり鯖の設定弄れるんでしょ？
NGNG
無駄で不要なタグが削れるから圧倒的に容量は減ると思うけれどなぁ。。。＠Valid化
2005/06/04(土) 22:10:32ID:oewniHwY0
sageの時は<a href="mailto:sage "></a>を入れないっていうのはどう？
それか<font color=blue></font>にするか。どうせリンクは意味ないし。
圧縮ありだと実効はあまりなさそうだけど。
2005/06/04(土) 22:10:47ID:SrVyolWY0
>>100
それ考えたけど、bbs.cgiでどのようにデータ吐いてるのかよくわかんないなと思った。
単純にSTDOUTに順に吐いてるだけなら<html>の前にヘッダ指定できそう。
何かCGI用のモジュールか何かを通して吐いてる場合は、
ヘッダ表示用のコードを追加すると鯖内でのモジュールの追加処理が増えてしまうかもしれない、とか。

>>101
1回しか書かれない<BODY>の背景やリンク色とかは
CSSにしないほうが文字数が少なくて済むので総バイト数は単純に小さくなる。
HTML4.01＋CSS上ではどんなに気持ち悪い表記の組み合わせであっても、総サイズ数は絶対に小さい。

まあそんだけの話。
でも「多少無駄があっても最終的に以前よりぐっと減ってるしOKですー」とか言われたりしそうな気はする。
立場ないにゃ。

板ごとの外部スタイルシートもOKな案（CSSのファイルアクセス負荷増加を許してもらえる場合）だと、
何度も同じ板のindex.htmlを読み込む場合は全回数の容量合計は減ると思う。
2005/06/04(土) 22:33:18ID:SmR9bRZZ0
httpd.conf か .htaccess で
　　　　AddDefaultCharset Shift_JIS
ですね，やるとすれば．＜ヘッダで指定
2005/06/04(土) 22:51:08ID:8a0Vy1q+0
<!-- 美乳 --> きぼんぬｗ
2005/06/04(土) 22:52:33ID:8a0Vy1q+0
しまったEUC-JPの場合だったｗ
2005/06/04(土) 23:10:32ID:gNaPLbTW0
個人的な考えだけど、
無理にエレガントな(正しい)HTMLにすることより
メジャーなブラウザ(IE5以降、Mozilla、Opera位)でちゃんと見えれば良い、
という程度の作りにして構わないと思う。

そして、非対応のブラウザからのリクエストは、
内部的に別URL(例えば/test/convertindex.cgi?bbs=operateのような形)にして
そのCGI(orモジュール)がSSIを処理する感覚で正しい(一般的な)HTMLに直して返す、
この程度でも充分かと。
2005/06/04(土) 23:38:54ID:gvW9tiAF0
そもそもなぜCSS非対応のブラウザを使い続けるのか、なぜ自らCSSを切るのか、
やむを得ず非対応のブラウザを使ってる人はどれほどいるのか。
他のサイトを見る時もベタテキストになっていることもあるだろうし、
ベタテキストでも構わないからCSSを切っていたりするんじゃなかろうか。
2005/06/04(土) 23:48:00ID:UxbZcBI80
CSS完全非対応な場合は割と簡単。
positionさえ使わなければ混乱も起こらないし。
特定の機能に中途半端に実装差がある場合が厄介。
JScriptでバージョン分けとかやり始めるとドツボ。

まあ実際の案次第なんだけどね。
110FOX ★
垢版 |
2005/06/04(土) 23:53:09ID:???0
わたしゃまったく解からないのですが

そもそもの発端は、可変な部分と固定名部分を分けて
提供すると可変部は毎回読むけど固定部はクライアントで
キャッシュしてくれて転送量、製造コストともにお得になるのでは?
なんです。

それが style だったり .css だったりするのかな?
と思っただけなんで、、、
2005/06/05(日) 00:09:36ID:VDikHqT00
>>105-106
Shift_JIS の場合は <!-- あ --> だな。
2005/06/05(日) 00:16:56ID:Ucs8iRxZ0
運営側は古めのブラウザも意識したいという感じなんすか？
NGNG
>可変な部分と固定名部分を分けて

ふむ。広告とかローカルルールのところとか看板とか書き込みフォームとかをIFRAMEでやってしまうのもありかなとか思った

2005/06/05(日) 01:14:30ID:7dNIYOmL0
IFRAMEなんて死んでしまえ
2005/06/05(日) 01:46:22ID:10zmJNsO0
>>105
>>111
ちゃんと>>104で文字コード指定してればそんな小細工いりません
<!-- あ -->
; charset=Shift_JIS
でもバイト数はそっちのほうが少なくなるか
2005/06/05(日) 01:54:35ID:h+T5T/RK0
結局*.CSSで外に出してもIEのCtrl+F5で再取得しに来ちゃうから
CSSの取得時に有効期限付きクッキーを撒いてそれ持って再取得に来たら
強制的に304返すような新機能を付けないと何の削減にもならんような。
ああ、新機能はだめでしたねｗ
NGNG
bbs.cgi→HDD→ユーザー
と考える。
可変な部分と固定な部分を分けることにより、

1.bbs.cgiとHDD間の処理サイズが減る。
2.HDDからユーザーへの転送サイズが減る

ctrl+F5でも、1.は確実に減るわけですし。



NGNG
ついでに言うと、cssファイルのうち、全板共通のをIIJに置けば…
おじさんが損する？ｗ

http://qb5.2ch.net/test/read.cgi/operate/1116229949/51
51 ひろゆき＠どうやら管理人 ★ [] 2005/05/27(金) 00:18:46 ID:???0 ?###
menu.2chに変えてカウントするという目的で動かすのであればいいんですが、
コストパフォーマンスでいうと、静的htmlはIIJのほうがいいと思ってたりします。
119FOX ★
垢版 |
2005/06/05(日) 02:20:56ID:???0
わしゃ　損もとくもしない
2005/06/05(日) 02:22:33ID:VDikHqT00
SETTING.TXT の色関係のを外部に閉じ込めたお（　＾ω＾）
ttp://www2.aqweb.net/tset/source/up0017.xxx
2005/06/05(日) 08:58:39ID:HLmEcHY00
>>120
おおー綺麗だねえ。なまじ枠線は普通っぽい方が違和感が無いや。
2005/06/05(日) 09:18:18ID:7xEib2gP0
だから見栄えを変えるなと小一時間
2005/06/05(日) 10:28:16ID:KtOny1+w0
・ CSS非対応でも雰囲気はたいして変わらない程度のダイエット版
・ CSS非対応ではベタテキストに見えるがCSSダイエットしまくり版

後者でレイアウトのための <table> を廃止した場合，いずれにせよ
枠線を完全には同一にできないので......これはいくつかのパターンの
見本を用意した上でひ(ry氏に裁定を仰ぐのがいいのかな，と．
例えば >>120 ので

div.menu, div.makethread, div.thread {
    border: ridge 4px;
}

div.menu { /* BBS_MENU_COLOR */
    background-color: #CCFFCC;
    border-color: #CCFFCC;
}
div.makethread { /* BBS_MAKETHREAD_COLOR */
    background-color: #CCFFCC;
    border-color: #CCFFCC;
}
div.thread { /* BBS_THREAD_COLOR */
    background-color: #EFEFEF;
    border-color: #EFEFEF;
}

とか．あと，板名は <h1>，スレタイは <h2> がいいんでしょうかね．
2005/06/05(日) 10:39:49ID:7xEib2gP0
>>123
> 枠線を完全には同一にできない
Eｘａｃｔｌｙ（そのとおりでござ略

テーブル枠保持版は作らないと駄目だと思う。

<h*>はHTML上はそうだしバイト数上も有利だけど
【1:467】の部分とread.cgiでの表示との違いがネックかもしれない。
2005/06/05(日) 14:13:04ID:QGivkZtL0
>>120をNetscape4.78で見るとこんな感じになっちゃった。
ttp://pl.eek.jp/up/gazou_uploader/src/up0019.png
2005/06/05(日) 17:41:41ID:oa9E2nwG0
>>120をSafariで
ttp://www.imgup.org/file/iup36957.jpg

色が白黒だけど元から？
2005/06/05(日) 18:03:15ID:HLmEcHY00
んじゃFirefoxでー>>120
ttp://pl.eek.jp/up/gazou_uploader/src/up0022.jpg

こんなにちがうのね…
2005/06/05(日) 19:00:47ID:Ucs8iRxZ0
んちゃ！Opera7.5出>>120
ttp://www.imgup.org/file/iup36976.png

NN4は仕方ないよね
NGNG
IE 5.2 for Mac
ttp://www.imgup.org/file/iup36978.jpg


ただし表示する前に固まりかける（IEの仕様…かな？
NGNG
FireFox 1.0 @mac
ttp://www.imgup.org/file/iup36981.jpg


.xxxはソースそのまま表示だったので保存してローカルで開きますた
2005/06/05(日) 19:31:02ID:HLmEcHY00
>>129
外部リンクを読みに行ってるからかなあ？
2005/06/05(日) 20:51:25ID:oa9E2nwG0
>>131
いや、"IE自体の仕様"かと
本当に使い物にならないので

もう更新ないし
133動け動けウゴウゴ２ちゃんねる
垢版 |
2005/06/05(日) 23:34:00ID:jTZ2+tPK0
HTML的な正しさをある程度保ちながら、なるべく簡潔になるようにがんばってみました。
自分なりのアイデアや指針をコメントに書いておきました。

http://turibori.net/up/stored/up1334.html

改行とタブは私自身が見やすいように入れているだけです。
2005/06/06(月) 00:36:07ID:p0gTpfMx0
>>133
激しく乙。

firefox/win
ttp://www.imgup.org/file/iup37228.jpg

opera7.5/win
ttp://www.imgup.org/file/iup37229.jpg

枠は一重の方がいいかもね。
2005/06/06(月) 00:41:00ID:p0gTpfMx0
もしくは、線を細くして色を薄めにすれば、現行に近い感じにはなるかもしれない。
2005/06/06(月) 23:01:37ID:lCpUMZgO0
>>133 乙です．

133 のをベースに若干の手直しをしてみたもの: http://turibori.net/up/stored/qb5samp.html

で，「CSS非対応でも雰囲気はたいして変わらない程度のダイエット版」誰か作りませんか？
ひ(ry氏の裁定には必要だと思いますんで......といっても，作る前に
「CSS非対応ではベタテキストに見えるがCSSダイエットしまくり版」の方で
Ok が出れば不要なのかも知れませんが．
2005/06/07(火) 02:27:18ID:cJ3W52Qg0
>>136
＞「CSS非対応でも雰囲気はたいして変わらない程度のダイエット版」
NN4とかSafariにも「それなりに」対応してるってこと？
2005/06/07(火) 03:16:55ID:py8p8hiN0
Safariってそんなにクセ多いの? 標準準拠謳ってるけど
2005/06/07(火) 13:45:43ID:ngQHmQiZ0
おつですー＞ALL

>>136 おかりしますー
元のサイズ　　　　　　　　　　　　　　　　　　　　　　　　　　　 ：15123バイト
コメントを省いてスタイルシートを外部に追いやってみたサイズ：11528バイト
約3割の減　ですが,
以前の>>64でのサイズが18kB,今現在まるっと取り出したindex.htmlが60kB。

まるっと適用させた時にどれ位減るか ですねえ。


おまけ。CSSを無理やり無効化させたときのss
ttp://www.imgup.org/file/iup37922.jpg
140▲ ◆cZfSunOs.U
垢版 |
2005/06/07(火) 20:06:57ID:zFobzyoJ0
今ひ(ry氏がいるようなので age てみます．

【やろうとしていること】
bbs.cgi が吐き出す index.html を，CSS を使用するなどしてスリム化したい．

【ひ(ry氏に判断してほしい点】
そうした CSS 化を大胆に進めた場合，CSS 対応が不十分な旧式ブラウザなどでは
CSS によるデザインが反映されず，味気ない表示となってしまいます．
また，<table> タグによる枠線を CSS の border 指定に置き換えた場合，
完全に同一の枠線にはできないので，その部分の見た目が変わってしまいます．

・ CSS 対応が不十分な旧式ブラウザでの表示が味気なくなってもいいか，
　 それとも旧式ブラウザでの表示をできるだけ現行のものと同様にした方がいいか．

・ 枠線が <table> の場合と異なってもいいか，それとも <table> の枠線を保持した方がいいか．

といった点をひ(ry氏に判断して頂きたいので，よろしくお願いします．
2005/06/07(火) 22:06:26ID:YKdC/VOv0
borderに関して。

内側の線にborderstyle:inset
外側の線にborderstyle:outset

を適用させると言うことでよいのでは。
この場合、div要素を入れ子にするのがよいでしょう。
classの指定は複数できるという点も考慮していただければと。
ブラウザで対応しているかは知りませんが。。。。。
2005/06/08(水) 01:59:45ID:jJw94LGo0
で、ピ氏はどうですか？
2005/06/08(水) 12:12:27ID:Ahh+jhS7O
↓ここで今まで出てきたサンプルのまとめ
144動け動けウゴウゴ２ちゃんねる
垢版 |
2005/06/08(水) 20:39:29ID:3rQvm5Bi0
>>140
ブラウザ依存の技術は使わない
2005/06/08(水) 21:20:50ID:EajjhWbE0
>>143
>>32 http://blog8.fc2.com/c/certain47/file/news4vip-improved.txt (改良版ではなく現行ソースをインデントして見やすくしたもの)
>>43 http://nullpo.2log.net/home/junkies/public/2ch.txt (CSSのみ)
>>56 http://blog8.fc2.com/c/certain47/file/news4vip-css-1.html
>>69 http://up.isp.2ch.net/up/2ac8bc1c90ef.zip (2ch ISP でないと Forbidden)
>>120 ttp://www2.aqweb.net/tset/source/up0017.xxx
>>133 http://turibori.net/up/stored/up1334.html
>>136 http://turibori.net/up/stored/qb5samp.html


>>144 「ブラウザ依存の技術」とは？

1. 最近のメジャーなブラウザではサポートされているが旧式ブラウザなどではサポートされていないもの
2. 特定のブラウザのみで独自実装されているもの
3. 標準に準拠しているが最近のメジャーなブラウザの中でも未実装なブラウザがあるもの
4. 標準に準拠しているし最近のメジャーなブラウザではサポートされているがブラウザ間で挙動の相違があるもの
5. その他

1. だとすれば CSS 化できる部分はかなり限定されるのですが，
その点はまさに >>140 でひ(ry氏に問うている点なので......
2.〜4. は確かに注意すべき点ですね．5. であれば具体的に教えて下さい．
2005/06/08(水) 22:03:23ID:EEqnB9K80
このままひ(ryにシカトされてdat落ちに100万ページビュー
147動け動けウゴウゴ２ちゃんねる
垢版 |
2005/06/12(日) 02:24:41ID:FiBUWaQV0
どうなってんお？
148動け動けウゴウゴ２ちゃんねる
垢版 |
2005/06/12(日) 02:33:01ID:QKyXWVgy0
まろゆきまち
2005/06/12(日) 02:49:56ID:YQV4VBCQ0
おののこまち
2005/06/12(日) 22:25:06ID:gdy/iCp70
すすめかたの段階の提案

１、(HTMLのみ) 単に見た目を変えずにHTMLのまま軽量化する。
たいていのブラウザで表示されるようにする。
まずTABLEで表示する。DIVにはしない。

２、(CSS付加) style部分を別ファイルにできる。>>25のように、
　　CSSなしでも表示できるようにしておいて、
　　CSSサポートだとより見やすくなるという辺りが無難だろう。
TABLEで表示する。
DIVだと未対応ブラウザではモノクロでボーダーなしかもしれない(>>44)。

３、(CSS縛り)極論でいくと>>16のように見れないマシンは死ねってことになる。
　　>>25のようにCSSを表示できないブラウザというのも阻害される。
DIVで表示する。
2005/06/12(日) 22:25:35ID:gdy/iCp70
具体的なレス
>>28 >>33 >>36
>>37 ＞テーブルは、構造的にはテーブルでなくてよい。1重だし。
>>72 ＞13バイトずつ縮む。
>>81 ＞飾りだけのtableも無くしちゃえばどんどん
>>94 ＞そこまでして容量を削るなら、削れるダブルコーテーションは全て削ろう。
>>96 ＞x-sjisだと言われて「いわゆるShiftJISな文書」と解釈しないWebブラウザはまず無い。
>>101 ＞無駄で不要なタグが削れるから圧倒的に容量は減ると思うけれどなぁ。。。＠Valid化
>>104 ＞AddDefaultCharset Shift_JIS ですね，やるとすれば．＜ヘッダで指定
　　　ヘッダにすると、ローカルに保存すると、文字化けするものが出るかも。

他には、
改行をなくせば380バイトぐらい減らせる。
厳密にHTML4.01 strictとか目指さなくても、ある程度Validなら、ブラウザの互換性が保たれると思う。
■ このスレッドは過去ログ倉庫に格納されています
5ちゃんねるの広告が気に入らない場合は、こちらをクリックしてください。