開発者が Web デザインを学ぶ最速の方法
https://stackoverflow.com/questions/1959839
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian質問
私は Web 開発者ですが、自分のプロジェクトの中で、私の最大の弱点はフロントエンドのデザインが得意ではないことに気づきました。他のデザイナーに頼ると、私が望むように早く制作できない場合に迷惑になることがあります。
HTML/CSS についての私の見解は、基本的には驚くほどうまく機能する大きなハックであるということです。CSS やブラウザ固有のバグや癖が多すぎて、すべてを解き明かすのに膨大な時間を費やさずにすべてを学習して覚えておくことはできません。CSS を脳に浸透させるための近道はありますか?CSS の本を何冊か読んだことがありますが、私にとっては、IE6 で正しくレンダリングする方法や角を丸くする方法についての長いリストのように見えました。（真面目な話、なぜ鋭いコーナーラウンドを作るのにこれほど多くのトリックが必要なのでしょうか？Web 以外のプラットフォームでは、これは重大な見落としと呼ばれるでしょう。)
jQuery が JavaScript に対して行うのと同じように、CSS に類似したことを行うものは存在しますか?jQuery を使用すると、機能させるために JavaScript についてよく理解する必要はありません。
IE6 のサポートにはまったく興味がないので、IE6 がなぜ奇妙な動作をするのかを知ることに興味はありません。私は、何時間もかけて無名なブログを読むことなく、やりたいことを実現するために CSS を使用する方法を学ぶ方法に興味があります。
解決
はい、「CSS の jQuery」である CSS フレームワークがあります。より人気のあるものとしては、次のようなものがあります。 960 そして 青写真. 。私は個人的に 960 を使用していますが、レイアウトに多くの推測が必要であることがわかりました。
他の人も言っているように、CSS を読んで学ぶのは難しいです。それは最終的には、多くの経験 (通常、多くの試行錯誤、挫折を意味します) を通じて直感を養う必要があるものの 1 つです。あなたが強調したように、それは理想的な状況ではありませんが、それが現実です。
もう 1 つの問題は、使用される方法論やワークフローが個人によって実際に異なる可能性があることです。最初に Photoshop でモックアップを作成し、次に HTML/CSS を使用してピクセルごとに正確な「レンダリング」を作成する人もいます。また、Photoshop、Illustrator、またはその他のツールを使用して、単にスケッチとアイデアを作成し、それを HTML/CSS で最初から再作成する人もいます。さらに、HTML/CSS といくつかのサムネイル スケッチから直接始めることを好む人もいます。これらの方法のどれが自分に最も適しているかを判断することは、パズルのもう 1 つの重要なピースです。
他のヒント
の例を見つけて、それから学ぶ-で少なくとも私は習い始め方法ですもの。使用されているスタイルを研究し、彼らと一緒に遊んで。あなたが好きなものを、モックアップを作成し、それで遊んでない何かを見つけた場合。そして、クロスブラウザの互換性のためにそれをテストします。
何かがIEにFirefoxとChromeで動作しますが、ではないので、あなたが（これはたくさん起こります）イライラした場合は、は、あきらめないでください。私はビル・ゲイツの名前をのろい、彼の略全てが大きなストレスリリーフです見つけます。 ： - ）
は、使用するような偉大なツール私は Firebugのに、非常に多くのの中で、あなたがすることを可能にするFirefox用プラグインです。他のものは、編集CSSルールブラウザで、すぐにあなたがそれを行うような結果を見ます。
私は、CSSはWebデザインの世界で付け足しのようなものだった同意するが、それは本発明の一つの地獄だと開発に物事そんなに簡単かつ迅速になります。
かなり時間と練習が必要です。ただし、HTML をクリーンでわかりやすくしておけば、多くの手間を省くことができます。私が思いついたいくつかのルールが役に立ちました。
- HTML ページで DOCTYPE を使用し、ルールが最も緩いトランジショナルから始めて、HTML を検証します。ページを quirks モードではなく標準モードにしておくと、全体的に問題が大幅に少なくなります。
- サポートするブラウザを早い段階で選択し、論理的な順序でサポートします。私の場合、Firefox で開発し、Chrome / Safari で動作が安定していることを確認します。IE では、IE にのみ表示される HTML を挿入できる特別な種類のコメントを使用できます。これを使用して IE7 のスタイルシートを追加し、次に IE6 でスタイルをオーバーライドし、これらのブラウザーでの表示の問題を修正します。通常は、最初に最適なブラウザから始めて、後から順に進めていく必要があります。
- パディングには注意してください。それは私が扱ってきた中で最も問題のある特性の 1 つです。可能であれば、パディングの代わりにマージンのある小さなサブコンテナ要素を使用することを選択します。マークアップが多くなりますが、マージンはすべてのブラウザーではるかに適切に処理されます。
- 相対位置の要素内の絶対位置の要素。これで多くのことが解決されます。要素を相対的に配置すると、要素は通常のフローのままになります。相対的な親の内部に要素を絶対配置すると、絶対項目は親の位置を参照して機能します。
すべての私は、あなたが行くようになり、学ぶ提案することができます..あなたは多くの経験を必要とする！
それとも、あなたはIE7とIE6、特にためのサポートをドロップすることができます。あなたは非常に非常に少なく、非常に非常にまれな癖を見つけることを行う場合：）
グラフィックデザインにいくつかのクラスを取ります。いかなるプログラミング言語を使っアーティスト作るんだろう、と芸術性が優れたユーザー・インターフェースの設計に必要とされます。
[またはあなたが仕事に、より良いグラフィックデザイナーを見つけることができる]。
