レイアウトを描画してCSSに直接レンダリングできるツールはありますか？

Question

以前は、テーブルを使ってウェブサイトのレイアウトを作成することは、直感的かつ迅速でした。レイアウトを「叩く」のが簡単で、その後Photoshopのスライスされたイメージを投げ込み、次にそのコンテンツとWebサイトがアップしました。少なくとも、Dreamweaverでは、テーブルレイアウトを作成するための非常に視覚的な方法がありました。しかし、この方法は最終的に時代遅れになる。

CSSボックスモデルの使用がますます普及して以来、CSSを使用して自分のウェブサイトのレイアウトを作成し始めました。しかし、私はいつもCSSを使ってレイアウトを作成するのがずっと遅いことを知っています。プロセスは非常にテキストで、レイアウトは論理プログラミングではないと私は思ったが、それは難しいと思う。 DreamweaverにCSSスタイルを入力するときに、CSSビジュアルを即座にレンダリングできる機能があるかもしれませんが、レイアウトを作成するプロセスは、CSSで入力しなければならないテキスト、ピクセルサイズ番号の試行錯誤、このプロセスは非常に遅いです。

私はCSSで大丈夫ですし、CSSで多くのウェブサイトを作成しましたが、面倒で時間がかかることがわかりました。私がPhotoshopでレイアウトしたことは、ちょっと参考になったような気がします。そのあと、Photoshopで作成したレイアウトを模倣するために、CSS全体のレイアウトを再度書き直さなければならないからです。

私は正常に行くのですか？デザインコンセプトをCSSレイアウトに入れて、常にゼロからCSSを書く必要がない、より高速で効率的な方法がありますか？私が始めたすべてのウェブサイトでこれをやろうとすると、時間がかかりすぎて効果がありません。

Answer 1

Photoshopドキュメントを標準準拠サイトに変換するのに役立つ、プロジェクトごとに使用できる特定のパターンとツールがあります。

最高のアドバイスは、あなたの手の後ろのようにCSSを学ぶことです。これにより、psdファイルを正しくスライスすることができます。必要なイメージだけを使用します。また、Photoshopやその他のイメージツールでWebサイトを作成するために必要な範囲を理解するのにも役立ちます。

• CSSグリッドシステム
  • http://960.gs/
  • http://www.1kbgrid.com/
  • http://www.blueprintcss.org/
• ：強いあなたのCSSの知識が限界...

  参考パターン/ツール高くなりますCSSリセットの定義

  • http://meyerweb.com/eric/tools/css/reset/

あなたがあなたの効率を高めるためにそれらを再使用することができ、特定のツール・セットやパターンで成功を収めていたら...

Answer 2

私はいくつかの提案があります：

あなたの質問にもっと直接答えてください：CSSフレームワークを調べましたか？ Grid960システムのようなものは、あなたのサイトに素早く構造を提供するために長い道を行くことができます。あらかじめ作成されたレイアウトファイルを使用して、どれほど迅速に妥当なものを手に入れることができるかは、驚くでしょう。あなたは他の誰かを使う必要はありません。あなたは一度あなた自身を作って、必要に応じて再利用し、適応させることができます。

第2に、頭の中のデザインからCSSを使い始めるのはなぜですか？あなたがスタイリングにまっすぐ進むと、冗長性はかなり減ります。提案1を組み込むと、これはさらに簡単になります。 Photoshopを同時に使用することはできませんが、CSSを使用してサイトを拡張すると、そのサイトを使用するのがより自然になります。

第3に、PSD2HTMLのような特定のツール（それは私にとってはあまりにも疑わしい）があります。

Answer 3

私は正常に進んでいますか？

はい。

常にゼロから CSSを記述するCSSに レイアウトをデザインコンセプトを取得していないために、より速く、より効率的な 方法はありますか？

もっと速い方法がありますが、効率的とは言いません。物事は本当にすぐに制御不能になり始め、コードは多くの恐ろしい不必要なビットで醜い。遅かれ早かれあなたのレイアウトはおそらく破損するでしょう。私は 私は上の開始すべてのウェブサイトのためにこれを行うにしている場合

それはあまりにも時間がかかり、 無効です。

あなたができることは、HTMLとCSSを最善の方法で使用して、できるだけ明確かつ明確にコードを作成することです。 また、コードの一部（スニペット）を作成して安全な場所に保管して、すべてのサイトの基本的なレイアウト構造として使用する準備ができている必要があります。

ほとんどの場合、ほとんどの調整でレイアウトを調整する必要があることがわかります。

Answer 4

ボックスモデルとIEの非互換性について心配しているUI開発者として、「レイアウトを自動生成できるものは何ですか？」という質問に常に答えるつもりです。 1つの簡単な答え：何もありません。優れたUI開発者、特にマイクロソフト社のゲーム開発者を代えているわけではありません.... IEは、私のような人々が有益に雇用を維持できる理由です。

私が考えることのできる自動設計ツールに最も近いのは、グリッドジェネレータです。これは私の選択の武器です：http://www.gridsystemgenerator.com/

かなり受け入れられるコードを生成するツールがあります。アップルのWebデザインツールが気に入っています。しかし、Appleの設計ソフトウェア、Adobeの新しいWeb Catalyst、Dreamweaver（とにかくプロプライエタリなコーディングツール）などのツールで行われている私のオフィスで終わるすべての主要プロジェクトは、やり直しに終わる。どうして？なぜなら、ボックスモデルの問題をサポートしていて、完全にw3準拠のHTMLを生成している単一のものを見つけられなかったからです。結局のところ、私たちすべてがここに住んでいる標準です。