Visualforceページは基本HTMLと同じ考え方で開発できますが、apexタグという独自タグが用意されているのでコピペだけで簡単に移行するということはできません。
基本的にはapexタグは自動でHTMLタグに変換してくれるので、『input type="text"』なら『apex:inputText』、『form』なら『apex:form』、『select』なら『apex:selectList』という感じで書き換えて上げればだいたいうまくいきます。
ですが、このとき問題になるのがCSSの指定方法です。
例えば『#web-page form#helloForm』というような指定方法をしたとします。
特定のIDを指定されたformタグに対して適用されるCSSです。
Visualforceだと次のようになります。
パッと見は問題ありませんが、apex:inputTextやapex:commandButtonなどのapexタグを利用する場合、formタグではなくapex:formタグを使用しなくてはならないというルールがあります。
formタグをapex:formタグに変更することでエラー事態は解決できますが、先程のCSSは適用されなくなってしまいます。
理由はapexタグのidの割り当て方です。apexタグは上位のapexタグのIDが追加されるルールになっています。
この問題を回避するためには、CSSを用意する際にID指定を避けるのがベストです。特にformタグはほとんどの場合でapex:formに変換する必要がでてくると思います。
どうしてもID指定が必要な場合は、divタグやspanタグを利用する方法が考えられます。これらのタグはapexタグに変換することもないので上記問題の影響を受けることはありません。
HTMLのコードを元にVisualforceページを開発する際はこのような問題について意識しておくといいと思います。
HTMLコードを元にVisualforceを開発するということはあまり無いと思いますが、例えばForce.comサイト開発を行う場合なんかだと企業のWebサイトのコードを元にVisualforceページを開発するということが必要になると思います。
できる限り元のコードに手を加えずに作業するにはCSSのID指定には注意が必要だと思います。
