- ベストアンサー
HTMLをスタイルシートなどの手法で簡略化する方法
- HTMLをスタイルシートや他の手法を使用して簡略化する方法を教えてください。
- 指定のHTMLには非常に長いフレームが含まれており、ページの重さが問題です。
- 素人ですが、スタイルシートなどの方法でページを軽くする方法を知りたいです。
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
はじめまして。 HTMLを簡略化したいのですね。#02さんのおっしゃるように<table>を使わずに表組みのような見た目を表示することもできますが、まったく触ったことがないとむずかしいと思うので、現在のソースを軽くすることだけに徹底してみます。あくまで参考までです。ちなみに、どれだけシンプルにしたとしても、1000行のテーブルは表示が重いと思いますよ。いくつかに分割することをおすすめします。 ・<style>～</style>で、見た目の要素を定義しています。 ・大きなテーブルを「main」、４列目を「fourth」という名前にしました。 ・表の見出し（項目名）は、<td>ではなく<th>を使用しました。 <html> <head> <title>TEST</title> <style type="text/css"> <!-- *{ margin:0; padding:0; } body{ text-align:center; } table.main{ margin:auto; border:2px solid #CCC; border-collapse:collapse; font-weight:bold; } table.main th{ width:200px; background-color:#FFC; border:2px solid #CCC; padding:5px; } table.main th.fourth{ width:400px; } table.main td{ background-color:#FFF; border:2px solid #CCC; padding:5px; } --> </style> </head> <body> <table> ・ ・ ・ ・ </table> <table class="main"> <tr> <th>項目１</th> <th>項目２</th> <th>項目３</th> <th class="fourth">項目４</th> </tr> <tr> <td>１行目内容１</td> <td>１行目内容２</td> <td>１行目内容３</td> <td>１行目内容４</td> </tr> <tr> <td>２行目内容１</td> <td>２行目内容２</td> <td>２行目内容３</td> <td>２行目内容４</td> </tr> ・ ・ ・ ・ ・ <tr> <td>１０００行目内容１</td> <td>１０００行目内容２</td> <td>１０００行目内容３</td> <td>１０００行目内容４</td> </tr> </table> </body> </html>
その他の回答 (3)
- MAN_MA_RUI
- ベストアンサー率41% (426/1024)
まさかとは思いますが表データのマークアップをCSSで代用しようとは考えてませんよね？^^; 表として記述すべきものを軽量化だなんだといってCSSで代用するのは逆にユーザーの迷惑になることもあります。 もしアレならば表をカテゴリ分けや単純に半分にするなどして分割したりほうが良いかもしれません。
<table>は表示が遅いので、<span>か<div>で表示する。
- kaz-5919
- ベストアンサー率26% (45/170)
スタイルシートは名前の通り スタイル（デザイン）をまとめるのに使用するので テーブルの内容はどうにもなりませんが 上記の例だと trの属性align,bgcolorと tdの属性width,heightを まとめるくらいですかね。。 書き方などは↓自分が書くより見たほうがわかりやすいと思いますので。。 http://www.tohoho-web.com/css/basic.htm
