人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

ホームページが重たくて困っています。

CSSでテーブルを表示する順番を決めればなんとかなりそうなのですが、CSSの仕組みが全く理解できてないので代わりにhtmlを書いてもらえないでしょうか?

現在のHP、http://m-ta.net/magic.html を http://www.m-ta.net/tablejunban.JPG ???の順番で表示されるように書いてください。とにかく動画がメインのページなのでとりあえず動画を表示しているテーブルを最優先で表示できるようにしてください。

●質問者: lamie
●カテゴリ:コンピュータ
✍キーワード:CSS Hp HTML ホームページ メイン
○ 状態 :終了
└ 回答数 : 3/3件

▽最新の回答へ

1 ● Pos
●10ポイント

http://www.kanzaki.com/docs/html/htminfo16.html

?e?[?u?? -- ??????P??HTML?????

urlはテーブルタグの簡単な説明です。

読んで損はないと思います。


お悩みの点(表示する順番)は、私の理解が正しければtdタグの並びを変えることで解決できると思います。

urlの例でいうと、「りんご」と「甘酸っぱい」を入れ替えるということです。


強引ながら、元のhtmlファイルを弄って並び変えたものを下に張っておきますので、参考まで。

私は打込み派なので全部直すには時間がかかり過ぎます。ご容赦を。

もしこのまま使う場合、<br />タグは置換処理で<BR>に戻して下さい。


また、ご希望のように並んでいないなら、この回答は見当違いとなりますので無視してくださって結構です。


あと、ホームページが重たいのは動画をいきなり表示しているためではないでしょうか。

動画用の専用ページを設けるか、DLするような形にされると表示は軽くなると思います。

http://hp.vector.co.jp/authors/VA013937/cssref/index.html

CSS???t?@?????X

こちらのurlはCSSの基本的な使い方の解説です。


下のhtmlタグの中で<○ STYLE=”○:○;”>となっているものはすべてCSSです。

ヘッダにも一部書いてありますが、htmlを見やすくするには全部ヘッダに記述するか、CSSファイルに分けてしまうと良いと思います。


余談ですが、CSSならfloatプロパティを使うことでテーブルタグのようなデザインができます。

しかしバグもあって厄介ですし、CSSを知らないままだと後の管理が大変です。

紹介にとどめておきますので、興味がおありなら検索してみてください。

http://openlab.ring.gr.jp/k16/htmllint/htmllint.html

Another HTML-lint gateway

<!DOCTYPE html PUBLIC ”-//W3C//DTD HTML 4.01 Transitional//EN”>

<html>

<head>

<meta http-equiv=”content-type” content=”text/html; charset=Shift_JIS”>

<title>ニート(俺)でも出来るマジック</title>

<style type=”text/css”>

<!--

BODY {

background:url(tairu03_04.gif) #ffffcc fixed;

color: rgb(0, 0, 0);

background-color:rgb(255, 255, 255);

background-image: url(tairu03_04.gif);

margin:0;

}


A:link{text-decoration:none;color:#999999;}

A:visited{text-decoration:none;color:#999999;}

A:hover{text-decoration:underline;color:#d0dcee;}

-->

</style>

<meta name=”description” content=”学校や職場、合コンなどどこでもできるマジック【500円玉の消失再現】【10円の瞬間移動】【ペンの消失再現】etc..の種明かしをします。”>

</head>


<body link=”#999999” vlink=”#999999” alink=”#c0c0c0”>


<div style=”text-align: center;”>

<span style=”color: rgb(204, 204, 255);”>

<a href=”http://www.m-ta.net/” target=”_blank” style=”color: rgb(204, 204, 255);”>マジック大全集 種明かしサイト</a> ?

</span>

<small style=”color: rgb(204, 204, 255);”>

学校・職場・飲み会・デート・合コン、ちょっとした待ち時間にできる簡単で手軽なマジックの種明かしサイト トリック大公開

</small>

<br />

</div>


<div style=”text-align: center;”>

<table style=”text-align: left; margin-left: auto; margin-right: auto; width: 85%; height: 600px;” border=”0” cellspacing=”0” cellpadding=”0”>

<tbody>

<tr>

<td style=”vertical-align: top;” rowspan=”1” colspan=”1”>

<div style=”text-align: center;”>

<table style=”text-align: left; margin-left: auto; margin-right: auto; background-color: rgb(255, 255, 255); width: 400px; height: 20px;”

border=”0” cellpadding=”0” cellspacing=”0” class=”hpb-colm2”>

<tbody>

<tr style=”color: rgb(102, 102, 204);”>

<td colspan=”1” rowspan=”1”

style=”text-align: center; background-color: rgb(0, 0, 0); vertical-align: top;”

class=”hpb-colm2-cell1”>

<img

src=”title.GIF” title=”” alt=”” style=”width: 349px; height: 35px;”>

</td>

</tr>

<tr>

<td class=”hpb-colm2-cell2”

style=”text-align: center; background-color: rgb(0, 0, 0);” rowspan=”1”

colspan=”1”>

<table border=”0”

style=”text-align: left; margin-left: auto; margin-right: auto; height: 100px;”

cellpadding=”0” cellspacing=”0” class=”TableBorderAll”>

<tbody>

<tr>

<td style=”text-align: center;”> <object width=”336”

height=”286” classid=”CLSID:22d6f312-b0f6-11d0-94ab-0080c74c7e95”

id=”mediaplayer1”> <param name=”Filename” value=”magic.wmv”> <param

name=”AutoStart” value=”True”> <param name=”ShowControls” value=”True”>

<param name=”ShowStatusBar” value=”True”> <param

name=”ShowDisplay” value=”False”> <param name=”AutoRewind”

value=”True”>

<embed type=”application/x-mplayer2”

pluginspage=”http://www.microsoft.com/Windows/Downloads/Contents/MediaPlayer/

width=”336” height=”286” src=”http://m-ta.net/magic.wmv

filename=”magic.wmv” autostart=”True” showcontrols=”True”

showstatusbar=”True” showdisplay=”False” autorewind=”True”> </object>

<br />

</td>

</tr>

</tbody>

</table>

<small style=”color: rgb(153, 153, 153);”><small>しばらくすると始まりま

す</small></small>

<table

style=”text-align: left; width: 468px; height: 123px;” border=”0”

cellspacing=”0” cellpadding=”0”>

<tbody>

<tr>

<td

style=”vertical-align: top; background-color: rgb(51, 51, 51);”>

<div style=”text-align: center;”><span

style=”font-weight: bold; color: rgb(255, 255, 255);”><span

style=”color: rgb(255, 153, 0);”> </span></span><small

style=”color: rgb(255, 255, 255);”>?

850円で救える命?</small><span

style=”font-weight: bold; color: rgb(255, 255, 255);”><span

style=”color: rgb(255, 153, 0);”> </span></span></div>

</td>

</tr>

<tr>

<td

style=”vertical-align: top; background-color: rgb(51, 51, 51);”><small

style=”color: rgb(102, 102, 204);”><span

style=”color: rgb(192, 192, 192);”>・合コン、飲み会、学校、職

場、どこでも出来ます。</span><br style=”color: rgb(192, 192, 192);”>

<br style=”color: rgb(192, 192, 192);”>

<span style=”color: rgb(192, 192, 192);”>・タネ8個で850円1個当たり約106円。</span><br />

<span style=”color: rgb(255, 102, 102);”>・初回限定でおまけのマジックのタネもあわせて850円。*普段は1000円です</span><br />

</small>

<div style=”text-align: right;”><a

href=”http://www.m-ta.net/magic2.wmv

style=”color: rgb(192, 192, 192);”><small>(<span

style=”text-decoration: underline;”>おまけマジックの動画</span>)</small></a><br

style=”color: rgb(0, 0, 0);”>

</div>

<small style=”color: rgb(102, 102, 204);”> </small> <small

style=”color: rgb(192, 192, 192);”>・種はヤフオクにて¥850で販売中 【即決、後払い、無送料】</small>

<div style=”text-align: right;”><small

style=”color: rgb(102, 102, 204);”><span

style=”color: rgb(255, 0, 0); font-weight: bold;”><span

style=”color: rgb(192, 192, 192);”><img src=”icon231.gif” title=””

alt=”” style=”width: 17px; height: 9px;”><span

style=”text-decoration: underline; color: rgb(255, 0, 0);”><a

href=”http://page13.auctions.yahoo.co.jp/jp/auction/r16160821” target=”_blank”><span style=”color: rgb(255, 0, 0);”>マジックの種明かし</span></a></span></span></span></small><br />

<small style=”color: rgb(102, 102, 204);”> </small></div>

<small style=”color: rgb(102, 102, 204);”><a

href=”mailto:%83%81%81%5B%83%8B%83A%83h%83%8C%83X?subject%8C%8F%96%BC&body=%96%7B%95%B6”>

</a></small> <small

style=”color: rgb(102, 102, 204);”> <a

href=”mailto:%83%81%81%5B%83%8B%83A%83h%83%8C%83X?subject%8C%8F%96%BC&body=%96%7B%95%B6”>

</a></small></td>

</tr>

</tbody>

</table>

</td>

</tr>

</tbody>

</table>


<br /><script type=”text/javascript”><!--

google_ad_client = ”pub-2178624426103035”;

google_ad_width = 468;

google_ad_height = 60;

google_ad_format = ”468x60_as”;

google_ad_type = ”text_image”;

google_ad_channel =””;

google_color_border = ”333333”;

google_color_bg = ”000000”;

google_color_link = ”666666”;

google_color_url = ”999999”;

google_color_text = ”666666”;

//--></script>

<script type=”text/javascript”

src=”http://pagead2.googlesyndication.com/pagead/show_ads.js”>

</script>

<small><small><small> </small></small></small><br />

</div>

</td>


<td style=”vertical-align: top; text-align: left;” rowspan=”1” colspan=”1”>

<div style=”text-align: center;”>


<table cellpadding=”0” cellspacing=”0” border=”1” style=”text-align: left; width: 153px; margin-left: auto; margin-right: 0px; height: 550px;filter:alpha(opacity=70);”>

<tbody>

<tr>

<td style=”vertical-align: top; background-color: rgb(51, 51, 51);”>


<div style=”text-align: center;”>

<span style=”color: rgb(153, 153, 153);”>-Rinks-</span><br />

</div>


<small>

<br />

・ <a href=”http://blog.livedoor.jp/kotaro269/” target=”_blank”>小太郎ぶろぐ</a>

<br />

<br />

・ <a href=”http://www.ne.jp/asahi/asame/shinbun/” target=”_blank”>朝目新聞</a>

<br />

<br />

・ <a href=”http://www.happy-page.jp/” target=”_blank”>Happy Page</a>

<br />

<br />

・ <a href=”http://kamibakusho.com/” target=”_blank”>神爆笑.com</a>

<br />

<br />

・ <a href=”http://yuumeigentei.ameblo.jp/” target=”_blank”>面白ゲーム・動画blog</a>

<br />

<br />

・ <a href=”http://alink.uic.to/user/nishino.html” target=”_blank”>おもしろフ

ラッシュ倉庫</a>

<br />

<br />

・ <a href=”http://chibicon.net/” target=”_blank”>無料ゲーム・フリーゲーム総合</a>

<br />

<br />

・ <a href=”http://gamelife.dieu.jp/” target=”_blank”>おもしろゲームリンク集</a><br />

<br />

・ <a href=”http://29g.net/” target=”_blank”>おもしろフラッ

シュ総合サイト</a>

<br />

<br />

・ <a href=”http://flashboy.jp/” target=”_blank”>爆笑!おもしろフラッシュ倉庫</a>

<br />

<br />

・ <a href=”http://blog.livedoor.jp/dbmanian/” target=”_blank”>裏ドラゴンボールマニア</a>

<br />

<br />

<center>相互リンク募集中</center>

</small>

<br />

<br />

<br />

<br />

</td>

</tr>

</tbody>

</table>

</div>


<td style=”vertical-align: top;” rowspan=”1” colspan=”1”>

<div style=”text-align: center;”>

<script type=”text/javascript”

src=”http://rranking3.ziyu.net/js/ca54.js”></script>

<script type=”text/javascript”

src=”http://js1.ziyu.net/rranking3.php?ca54”></script><a

href=”http://www.ziyu.net/” target=”_blank”><img

src=”http://file.ziyu.net/rranking.gif” alt=”アクセス解析” border=”0”

width=”35” height=”11”></a>

<SCRIPT TYPE=”text/javascript” SRC=”http://js1.ziyu.net/rranking2.php?syadan”></SCRIPT><A href=”http://www.ziyu.net/” target=”_blank”><IMG SRC=”http://file.ziyu.net/rranking.gif” alt=”アクセス解析” border=0 width=35 height=11></A>

</div>

<br />

</td>

</tr>

<tr>

<td style=”vertical-align: top;” rowspan=”1” colspan=”3”>

</td>

</tr>

</tbody>

</table>


</div>

<SCRIPT LANGUAGE=”JAVASCRIPT”><!--

var ID=”100462413”;

var AD=1;

var FRAME=0;

// --></SCRIPT>

<SCRIPT LANGUAGE=”JAVASCRIPT” SRC=”http://j1.ax.xrea.com/l.j?id=100462413”></SCRIPT>

<NOSCRIPT><A HREF=”http://w1.ax.xrea.com/c.f?id=100462413” TARGET=”_blank”><IMG SRC=”http://w1.ax.xrea.com/l.f?id=100462413&url=X” BORDER=”0”></A></NOSCRIPT>


</body>

</html>

◎質問者からの返答

知識不足でよくわかりませんでした。

後で紹介のサイト見てみます。


2 ● izayoimizuki
●25ポイント

http://izayoi.nm.land.to/hatena_1127906643/magic.html

これでいかがでしょうか?

テーブルを全てはずす事ができました。

デザインを完全に保持する事はできませんでしたが

その代わりブラウザウィンドウの幅の変更に柔軟に対応できるようになっています。


ファイルサイズは10.1 KB→5.81 KBです。

◎質問者からの返答

すごい軽くなってて驚きました!

Rinksの枠があって、動画のテーブル全画面でも同じサイズだったら最高でした。


3 ● izayoimizuki
●25ポイント

http://izayoi.nm.land.to/hatena_1127906643_2/magic.html

ご要望の幅の固定とボーダーの追加をしてみました。


*注意*

環境によっては予期せぬ表示になる事がありえます。

http://izayoi.nm.land.to/hatena_1127906643_3/magic.html

部分的にTableを復活させた案。

上よりも表示の安定性は高いです。

しかし上よりもやや表示に時間がかかります。

◎質問者からの返答

だいぶ軽くなりました。ありがとうございました。

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ