これを手動で実行しようとしましたが、エラーが発生しやすくなります。自動的に変換する簡単な方法はありますか?
4 に答える
おそらく問題は、テーブルをCSSに「変換」するという考えにあります。HTMLレイアウトを下から上に考え直し、最初からコーディングします。
適切に記述された(X)HTMLは、意味的に適切である必要があります。つまり、使用するタグは、それらに含まれるコンテンツと一致する必要があります。
たとえば、要素の順序付きリストは、タグ内、タグ内<ol>
のテキストの段落<p>
、およびタグ内の見出しに含まれている必要があります<h#>
。
セマンティック(X)HTMLでのグループ化とレイアウトに使用されるタグは、<span>
and<div>
タグです。
使用するタグの区別は意味上の区別であるため、これを「自動化」する簡単な方法はありません。私の推奨事項は、セマンティック(X)HTMLに関する本(DanCederholmのBulletproofWeb Design-この分野では標準的です)を手に取って、コードをゼロから書き直すことです。
難しいことではありません。
これを自動化するのは確かに難しいと思います。どこかのツールがこれを実行しようとすることを想像できます。おそらく、コンテンツの各ハンクをdivタグでラップし、コンテンツが配置された場所と一致するようにそれぞれを完全に配置することになるでしょう。元のページ。こんなことしないで。
新たに始めましょう。コンテンツを意味的に意味のあるコンテナに分割します。次に、それらをできるだけ簡単に配置します。単純なグリッドベースのレイアウトは、多くの場合、「float:left」を使用してdivを並べて配置し、必要に応じて「clear」を使用するだけで実現できます。
ステップ 1. なぜこれを行う必要があるのか (およびその必要があるかどうか) についてよく考えてください。
ステップ 2. ゼロから開始して既存のものを再構築するか、実際に CSS スタイリングに適したデザインを使用します。
ステップ 3. さまざまなブラウザー定義で避けられないフローとレイアウトの問題が発生する場合は、ステップ 1 を参照してください。