css - 正しい方法で CSS を再学習する

Question

私は 2 年以上にわたって Web 開発を行っているプログラマーです。私は過去 2 年間フロントエンドエンジニアリングを行ってきましたが、正しい方法で行ったとは思いません
。

私はまだ、CSS だけでなく、表を使ってレイアウトを行っています。データを整列して表形式で正しく表示する方法をまだ見つけていません。
display: noneとの違いがわかりませんvisibility: hidden（まあ、今はわかりますが、パディング、マージン、オーバーフローなどの多くの場合があります）
私は CSS を書くために継承の方法をあまり踏襲していません。ほとんどすべてのスタイルは#、クラスではなくで始まります。
ページの読み込みが遅い場合は常に、html 要素が適切に配置されず、完全に読み込まれたときにのみ順序が崩れます。
Firebug のこの写真が何を伝えているのかわかりません (ちなみに、Firebug は私の救世主です。Firebug なしでは人生は不可能だったでしょう)。

代替テキスト

レイアウトが混乱するたびに、position:absolute を使用したくなります。必ず、より大きな混乱に陥ります。

私はここで多くのことを間違っていることを知っています（そしてそれを正しくする必要があります）が、私は物事を適切に配置し、どういうわけかそれを表示しますが、別のブラウザでめちゃくちゃになっているのを見るだけです.

CSS やダミーのための CSS の入門書を作成したくありません。私はそれ以上のことを知っています。CSSを正しく学びたい。上記の例のような問題に焦点を当て、それらを修正します。

リソースを参照したり、CSS 開発者が適切に使用する一般的な提案やヒントを追加したりできますか?

score 23 · Accepted Answer

23

ジェフリーゼルドマンによるWeb標準を使用した設計を確認してください。

于 2009-10-15T17:57:08.803 に答える

score 12 · Accepted Answer

従うべきいくつかの一般的なルールは次のとおりです。

テーブルは、表形式のデータに適しています。提示しているデータがテーブルに属している場合は、s からグリッドを作成しようとして邪魔にならないでください<div>。意味がありません。
レイアウトに関する限り、<div>タグを使用し、テーブルから離れてください。floatプロパティをよく理解してください。CSS3 では、表示プロパティの標準が新しくなり、改善されます。それらを学びます。
display: noneビューポートから要素を完全に削除します。逆にvisibility: hidden、要素が占めていたはずの空白を保持します。どちらの場合も、要素は DOM に残ります。
クラスと ID の一般規則。ページ要素と ID は、ページごとに 1 対 1 の関係を持つ必要があります。たとえば、#Column1、#Column2、#Footer、#Header などです。一方、ページ要素とクラスは、.container や .navLink のように多対 1 の関係である必要があります。特定の要素をかなり使用することがわかっている場合は、クラスを使用します。
効率の面で考えてください。スタイルルールが少ないほど、ページの読み込みが速くなり、スタイルの問題のデバッグが容易になります。

他にも言いたいことがたくさんありますが、それで始めてください。

score 10 · Accepted Answer

レイアウト駆動の CSS については、 CSS について知っているすべてが間違っているを確認してください。IE 7 ではサポートされていないため (残念ですが)、これは少し最先端ですdisplay: tableが、フローティングや絶対配置などの従来のレイアウト CSS 手法をカバーし、テーブルベースのレイアウトから CSS レイアウトへの適切な移行を提供します。強くお勧めします。

あなたが動的言語から構築しているのか、生のHTMLをコーディングしているだけなのかはわかりませんが、プロジェクトでSASSを使用することも検討する必要があります.継承にもっと注意を払うように強制するのに役立つと思います. . それ以外の場合は、より「初歩的な」チュートリアル (CSS for Dummies など) を確認すると、CSS の基本的な原則の多くが詳細に説明されているため、実際に役立つ場合があります。

最後に、フードの下に意味的に正しい (x)html がある場合、CSS は最適に機能します。私の意見では、「優れた」CSS を見て学ぶのは、その下に優れた、意味的に正しい html がある場合に最も簡単です。どのタグをいつ使用するかについての概要は次のとおりです。一般的に、後でどのように見えるかはまったく考慮せずにコンテンツを作成し、後で CSS を使用してそれをゴージャスにするのが最善だと思います。

いつものように、 CSS Tricksでたくさんの素敵なヒントやコツを見つけることができます。これは、言語の正しい使用法についてもっと学ぶのに常に役立ちました (overflow: auto含まれている浮動要素について学んだときのように!天才!)。

それが役立つことを願っています!

score 9 · Accepted Answer

CSS Zen Gardenにアクセスして、CSS だけでできることを確認してください。
W3 スクールにアクセスして、チュートリアルに従ってください。あなたにとっては簡単に思えるかもしれませんが、基本的なことを学びます。
A list Apartなどのサイトにアクセスして、やり方を確認し、コツを学びましょう。
CSS フレームワークがニーズに合っているかどうかを確認してください ( 960 Gridなど)。

score 5 · Accepted Answer

Firebugをインストールしたと思いますか？

また、http://www.doctype.comは、より適切な結果を得る可能性があります。

score 3 · Accepted Answer

練習、練習、練習。あなたはあなたが知らないことを知っています、そしてそれは私の心の中で成功への鍵です。あなたが行うすべてのプロジェクトは、あなたのスキルを向上させようとします、そして最終的にそれを正しい方法で行うことは第二の性質になります。

EricMeyerのCascadingStyleSheets 2.0 Programmer's Referenceは、セレクターとルールがどのように機能するかを正確に理解するための優れたリソースであり、優れたリファレンスとしても役立ちます。

あなたが投稿したものについてのいくつかの考え。

マスターリセットスタイルシートは、ブラウザの違いに役立ちます。
また、表形式のデータはテーブルを使用する必要があります。
cssを優先してテーブルタグを回避する必要があるのはレイアウトです。

score 2 · Accepted Answer

ここには良いアドバイスをくれる人がたくさんいます。さらに2つ追加します。

まず、有効な (X)HTML を記述してみてください。W3C の HTML バリデーターを使用して、HTML コードを簡単にテストできます。スタイルではなく、主にコンテンツに焦点を当てます。
次に、できれば別の.cssファイルに有効な CSS を記述してみてください。style属性の使用は避けてください。(レドモンドの特定の古いブラウザーをサポートしたい場合、この部分は難しい場合があります)。W3C の CSS バリデーターを使用して CSS をテストできます。

score 1 · Accepted Answer

Firebugで実験する

ファイアバグのこの絵が何を伝えているのかわかりません

Firebug自体がそこであなたを助けることができます。これを行う：

テキストを含むdivを作成します。
CSSを使用してそれを与えるpadding: 5px; margin: 5px; border: 1px solid black;
あなたがあなたの質問で示すように、Firebugでそれを調べてください。
表示されているボックスモデル内のこれらの番号のいずれかをクリックし、上下の矢印を押し始めます（または別の番号を入力します）。
リアルタイムでどのように変化するか見てみましょう。これはFirebugの最も優れた点の1つです。リロードせずに微調整し、適切に見えるときにスタイルシートを変更できます。
パディング、マージン、および境界線がどのように機能するかを理解するまで、これを続けます。

score 1 · Accepted Answer

CSS: Eric Meyer によるThe Definitive Guideを読んでください。CSS が作成された理由、(標準に従って) どのように機能するかを説明し、細かい点を理解するための背景を提供します。こちらも参考になります。

score 1 · Accepted Answer

レイアウトのニーズに応じて、いわゆる「css フレームワーク」の 1 つ (たとえば960.gs ) を使用する必要があると思います。

それらは、クロスブラウザーレイアウトを構築するのに十分な速度と信頼性を備えているだけでなく、読みやすく理解しやすいため、コーディング中にすべての優れたプラクティスを学ぶことができます。

CSS は簡単で、実際のプログラミング言語ではありません。「フレームワーク」という言葉を恐れないでください ;)

score 0 · Accepted Answer

http://htmldog.com/は、私の意見では、フロントエンドWeb開発を適切な方法で学習するための最も信頼のおけるリソースの1つです。

score 0 · Accepted Answer

あなたはその問題に関するいくつかの良い本を読むことから始めることができます。エリックマイヤーのものは実践的で非常に高品質です。私がよく学んだもう一つの本は、CSSデザインブックのZenでした。

そして残りは努力と実践です。何かがそのように機能する理由を理解していることを確認してください。「試行錯誤」のcss開発に満足しないでください。

score 0 · Accepted Answer

さて、私はこれらの問題のいくつかにできる限り対処します。

display:noneとの違いvisibility:hiddenは、ディスプレイが設定されている場合、そのアイテムのスペースは予約されていないことです。したがって、ディスプレイが設定されたときにアイテムがページから「消えた」ように想像してみてください。一方、可視性オプションを使用している場合、要素はページ上にあり、代わりに非表示になります。私はそれを明確に説明しましたか？うまくいけば、それはあなたにとって理にかなっています。

パディング、ボーダー、マージンに関しては、これはすべてCSSボックスモデルと呼ばれます。情報は、要素、そのパディング、境界線、そしてそのマージンとして含まれています。したがって、パディングは要素のコンテンツとその境界線の間の距離であり、マージンは境界線と隣接する要素の間の距離です。繰り返しになりますが、これがあなたのためにこれを少しクリアするのに役立つことを願っています。

CSSへの移行は難しい場合もありますが、それだけの価値はあります。

score 0 · Accepted Answer

基本は非常に単純です。CSSコーディングをまだ行っていない場合は、非常に簡単にコツをつかむ必要があります。

クロスブラウザのレイアウトに関するベストプラクティス、ブラウザの癖、ハック、その他の大ざっぱなものは別のものです。

これが私のおすすめの読書リストです。それらはすべて私の本棚にあり、確かに読む価値があります。あなたが私に尋ねるなら、私はあなたがウェブデザイナーであるならばあなたが読むべきであった本であると言うでしょう。

score 0 · Accepted Answer

私にとっては、MichaelBowersによるProCSSとHTMLDesignPatternsがすべてを変えました。終わりのない試行錯誤ではなく、問題-パターン-解決策です。欠かせない。

score 0 · Accepted Answer

ページの読み込みが遅い場合は常に、html 要素が適切に配置されず、完全に読み込まれたときにのみ順序が崩れます。

スタイルシートをセクションの一番上に置いています<head>か?
画像の明示的なサイズを宣言していますか、それともブラウザが推測して、画像が表示されたときに並べ替える必要がありますか?

score 0 · Accepted Answer

私はあなたに私の秘密を教えます：この2つの古典的なチュートリアルに従ってください

リストトリアル

フロートチュートリアル

CSS について知っておくべきことの 80% を理解できます。

score 0 · Accepted Answer

0

Web 開発に興味がある場合にフォローすべき 30 の Web サイト

于 2009-11-11T11:16:04.410 に答える

score 0 · Accepted Answer

あなたの学習スタイルによっては、ソースである CSS の定義に直行することをお勧めします。ここでさまざまな仕様をそれぞれ見つけることができます。http://www.w3.org/Style/CSS/ . 仕様は特定のブラウザーの癖を実際にはカバーしていませんが (もしそうなら、それらは癖ではないでしょう?)、各部分がどのように機能するかを説明するのに (私にとっては) 本当に良い仕事をしています.

css - 正しい方法で CSS を再学習する

19 に答える 19

Firebugで実験する

Related

Reference