テーブルベースのHTMLレイアウトをCSSにリファクタリングするためのツールですか？

https://stackoverflow.com/questions/151369

02-07-2019
|

質問

複雑なテーブルベースのレイアウトと複製された無駄な多くのタグを持つHTMLページを考えます。例：

td align="left" class="tableformat" width="65%" style="border-bottom:1px solid #ff9600; border-right:1px solid #ff9600; background-color:#FDD69E" nowrap etc.

ページをよりコンパクトな形式にリファクタリングするタスクを支援するツールはありますか？たとえば、CSSスタイルとセレクターを自動的に生成するツールですか？テーブルをdivレイアウトに変換しますか？

問題の順序を理解するために、私が見ているページは8000行以上のHTMLとJavaScriptであり、500 KBの画像はカウントされていません！

更新：再。「あきらめてゼロから始める」コメント。現実の世界では、それはどういう意味ですか？ページを印刷してスキャンし、Dreamweaverで背景画像として設定し、それから始めますか？マジ？それは本当にリファクタリングよりも効率的でしょうか？

更新：「ゼロからトレース」を中傷していないまた、Dreamweaverが私の選択のツールであることを意味するわけでもありません。私は、レイアウトのリファクタリングが手に負えない問題であると考えられていることに非常に驚いています。

解決

TimB に同意します自動化されたツールはこれを行うのに苦労します。特に、最も効率的な方法でCSSを組み合わせて抽象化するリレーショナルジャンプを作成します。

表形式のデータを提示している場合、インラインCSSを再利用可能なクラスにリファクタリングしようとするのは合理的です。

インラインスタイルの似たようなテーブルがたくさんある場合は、単純な検索と置換によってCSSを徐々にリファクタリングできます。これにより、類似したテーブルのサブセットに一致する多くのクラスと、やや類似したクラスが多数得られます。これをレイアウトとプレゼンテーションに分割することは良い出発点であり、それらを各テーマまたは意味的に関連するアイテムの特定のクラスでオーバーライドします。

ゼロから開始することをお勧めします。おそらくより速くなり、ページを表示するために必要なものだけを再作成でき、後日要素または要素のコレクションを再利用できます。

ページを再度変更する必要が生じた場合、費やした時間は大幅にも報います。

しかし、それはまったくないでしょうか？：D

他のヒント

特定のツールについては知りません。カフェインと Firebug の汎用ツールのみです。作業に注意する必要があります。

この問題は十分に困難であり、自動化されたツールは、優れた保守可能なマークアップとCSSの作成に苦労すると思います。

古いテーブルベースのレイアウトをCSS標準にリファクタリングする、より自動化された手段を探しているようです。ただし、「ゼロから始める」という他のコメントにも同意します。

これが意味することは、HTMLテーブルを使用して達成された外観を（CSSを使用して）再構築する必要があるということです。この概念があなたから逃れるなら、私はいくつかの初心者のCSSチュートリアルのためにグーグルを提案するでしょう。おそらくテーブル-＆gt; CSSレイアウトの概念を教えることに焦点を当てる人もいます。

考慮すべきもう1つのツール（さらに役立つ可能性がある）は、ある種のCSS「フレームワーク」です。 grid / table-likeの作成に役立つため、 Blueprint CSS をお勧めします最小限の労力でレイアウト。別の良いものは Yet-Another-Multicolumn-Layout で、これは本当にすてきな複数列レイアウトビルダー。

dreamweaverやその他のツールに投げ込んでスライスするだけではいけません。最初にHTMLを純粋にセマンティックスタイルで記述します。たとえば、非常に一般的なレイアウトは次のようになります。

<body>
  <div id="header">
    <img id="logo"/>
    <h1 id="title">
      My Site
    </h1>
    <div id="subtitle">Playing with css</div>
  </div>
  <div id="content">
    <h2>Page 1</h2>
    <p>Blah blah blah..</p>
  </div>
  <div id="menu">
    <ul>
      <li><a>Some link</a></li>
      ...
    </ul>
  </div>
</body>

コンテンツで意味のある方法でHTMLを実行します。 CSSがまったくない場合に使用できるはずです。その後、CSSを追加して、希望どおりの外観にします。ブラウザー/ CSSの状態では、HTMLにデコレーターを追加する必要があります。たとえば、コンテンツを希望どおりに取得できるようにするために、いくつかの要素を追加のdivにラップする必要があります。

ただし、完了したら、CSSを使用して簡単に変更できる非常に柔軟なレイアウトが用意され、障害者と検索エンジンの両方がアクセスできるページが作成されます。

コツをつかむにはかなりの学習が必要ですが、価値があります。あきらめてテーブルベースのレイアウトに戻る誘惑に抵抗し、そのまま作業を進めます。セマンティックHTMLとCSSを使用してすべてを実行できます。

質問でこのアプローチを軽nigしていますが、レンダリングが最適なブラウザでページのスクリーンショットを撮り、それを参照として宣言し、それを再作成しようとすることをお勧めします。思っているより簡単です。ぼんやりとした古いテーブルベースのレイアウトを取り、それらを最新の手法で作成されたCMSテンプレートに変換する必要がありましたが、それほど悪くはありません。

現時点では同様の問題に取り組んでいますが、これは見た目ほど厄介ではありませんが、本当に悪いasp.net Webフォーム、過度なビューステート、データベースからの検索結果をフォーマットする深くネストされたサーバーコントロールの製品。結果として、50 DB行に対して約300-400Kのマークアップが発生します-

リファクタリングの半分の合理的な仕事をする自動化ツールは見つかりませんでした。

コードを一貫した方法で再フォーマットするために使用できるVisual Studioなどのツールから開始すると役立ちます。次に、正規表現と長方形の選択の組み合わせを使用して、ジャンクを取り除き、冗長なマークアップを取り除き、重要なものとそうでないものを整理し、提示する効率的なパターンを手作業で定義し始めることができます情報。

トリックは、管理可能なチャンクに分割し、そこから構築することです。

実際の「表形式データ」がたくさんある場合フォーマットするために、一度だけです、私はエクセルをいくつかの機会に私の救世主であると見つけ、データをシートに貼り付け、連結と塗りつぶしの組み合わせを使用して表形式データのマークアップを生成しました。

ゼロから始めるということは、設計図面ボードに戻ることを意味します。そのような怪物をリファクタリングする必要がある場合、それを改善するために費やすすべての時間にわたって、完全な再設計を行った可能性があります。

重複した無駄なタグを避けたい場合は、Dreamewaverをエスケープする必要があります。優れたテキストエディタ（jedit、emacs、vim、eclipseなど）が本当に必要です。エディターを適切にカスタマイズすれば、Dreamweaverも見逃せません。（nXhtmlとyasnippetsを備えたEmacsが私のお気に入りです。）

ライセンス： CC-BY-SA と帰属

所属していません StackOverflow