CSSを正しい方法で再学習します

https://stackoverflow.com/questions/1574016

21-09-2019
|

質問

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

私はまだCSSだけではなく、テーブルでレイアウトをしています。私はまだ、データを正しく整列させ、表に正しく提示する方法を見つけていません。
の違いはわかりません display: none と visibility: hidden （まあ、私は今それを知っています。しかし、パディング、マージン、オーバーフローなどの多くのケースがあります）
私はCSSを書くための継承方法に実際に従っていません。ほぼすべてのスタイルはaで始まります # クラスではありません。
ページがゆっくりとロードされるたびに、HTML要素は完全にロードされている場合にのみ、HTML要素が場違いになり、順序付けられます。
Firebugのこの写真が何を伝えているのかわかりません（ちなみに、Firebugは私の救い主です。

alt text

レイアウトが混乱するときはいつでも、私は位置：絶対的な位置を使用するように誘惑されます。常に大きな混乱になります。

私はここで多くのことをしていることを知っています（そしてそれを正しくする必要があります）が、私は何とかして物事を手に入れてそれを見せて、別のブラウザで台無しにしているのを見るだけです。

私はダミーのためにCSSまたはCSSでプライマーをしたくありません。私はそれ以上のことを知っています。 CSSを正しい方法で学びたいです。上に示した例のような問題に焦点を当て、それらを修正します。

CSS開発者がそれを正しくするために使用する一般的な提案やヒントをリソースに向けたり、ヒントを追加したりできますか。

解決

チェックアウト Web標準での設計ジェフリー・ゼルドマン。

他のヒント

ここに住むべきいくつかの一般的なルールがあります：

表は表形式のデータに適しています。提示しているデータがテーブルに属している場合、グリッドを作成しようとして邪魔にならないでください <div>s。意味がありません。
レイアウトに関する限り、使用してください <div> タグ、テーブルから離れてください。を知る浮くプロパティがよく。 CSS3を使用すると、新しい標準を改善することができます画面財産。それらを学びます。
display: none ビューポートから要素を完全に削除します。逆に、 visibility: hidden それ以外の場合は、要素が取り上げていたホワイトスペースを保持します。どちらの場合も、要素 DOMに残っています。
クラスとIDの一般的なルール。ページ要素とIDには、ページごとに1対1の関係がある必要があります。たとえば、＃column1、＃column2、＃footer、#header。一方、ページ要素とクラスは、.containerや.navlinkのような、多くの関係である必要があります。特定の要素をかなり使用することがわかっている場合は、クラスを使用してください。
効率性の観点から考えてください。スタイルのルールが少ないほど、ページが速く読み込まれ、スタイルの問題が簡単になります。

私は他に約100万の言いたいことを持っていますが、それはあなたを始めるべきです。

レイアウト駆動型のCSSについては、必ずチェックアウトしてください CSSについて知っていることはすべて間違っています. 。 IE 7がサポートしていないので、少し最先端です display: table （同情、私は知っています）が、フローティングや絶対的なポジショニングなどの従来のレイアウトCSS技術をカバーしており、テーブルベースのレイアウトからCSSのレイアウトへの適切な移行を提供します。強くお勧めします。

動的な言語を構築しているのか、生のHTMLをコーディングしているのかはわかりませんが、使用する必要があります。サスあなたのプロジェクトでは、私はあなたが継承により多くの注意を払わせるのに役立つと思うからです。それ以外の場合は、より多くの「初歩的な」チュートリアル（ダミーのCSSなど）をレビューすることは、多くのCSSの基本原則を詳細に調べるため、実際に役立つ可能性があります。

最後に、CSSは、ボンネットの下に意味的に正しい（x）HTMLがある場合に最適に機能します。私の意見では、あなたが素晴らしい、意味的に正しいHTMLを持っているとき、「良い」CSSを見て学ぶのが最も簡単です。これがいつタグを使用するかの適切な概要です. 。一般的に、私は自分のコンテンツを書くのが最善だと思います これまでのことを考慮しません 後でそれがどのように見えるかについて、後でCSSを使用してゴージャスにします。

いつものように、あなたはたくさんのきちんとしたヒントやトリックを手に入れることができます CSSトリック, 、それはいつも私が言語の正しい使用についてもっと学ぶのに役立ちました（私が学んだときのように overflow: auto 含まれるフローティング要素の場合！天才！）。

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

訪問 CSS Zen Garden CSSでのみできることを確認します。
訪問 W3学校チュートリアルに従ってください。あなたにとっては簡単に思えるかもしれませんが、基本的なことを学ぶでしょう。
などの一部のサイトにアクセスしてくださいリストは離れています物事を行い、トリックを学ぶ方法を見るために。
CSSフレームワークがニーズに合っているかどうかを確認してください（ 960グリッド).

インストールしていると思います Firebug?

また、 http://www.doctype.com より関連性の高い結果が得られる可能性があります。

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

エリック・マイヤーカスケードスタイルシート2.0プログラマーのリファレンスセレクターとルールがどのように機能するかを正確に理解するための優れたリソースであり、優れた参照としても機能します。

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

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

ここの多くの人々が良いアドバイスをしています。さらに2つ追加します。

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

読んだ CSS：決定的なガイドエリック・マイヤーによって。彼は、CSSが作成された理由、それがどのように機能するか（基準に従って）説明し、より細かい点を理解するための背景を与えます。また、良い参照を作ります。

Firebugで実験します

Firebugのこの写真が何を伝えているのかわかりません

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

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

あなたのレイアウトのニーズには、いわゆるものの1つを使用する必要があると思います。CSSフレームワーク" (960.gs 例えば）。

クロスブラウザーレイアウトを構築するのに十分な高速で信頼性が高く、読みや理解も簡単であるため、コーディング中にすべての良いプラクティスを学ぶことができます。

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

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

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

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

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

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

CSSへの移行は時々難しいですが、それだけの価値があります。

基本は非常に簡単です。すでにCSSコーディングがない場合は、非常に簡単なものを手に入れる必要があります。

Best Practices、ブラウザの癖、ハック、およびクロスブロウザーレイアウトに関するその他の大ざっぱなものは別のものです。

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

私のため、プロCSSおよびHTML設計パターン Michael Bowersによってすべてが変更されました。これ以上無限の試行錯誤はありませんが、問題 - パターン - 解決策。不可欠。

ページがゆっくりとロードされるたびに、HTML要素は完全にロードされている場合にのみ、HTML要素が場違いになり、順序付けられます。

あなたはあなたのスタイルシートを上部に、 <head> セクション？
画像の明示的なサイズを宣言していますか、それともブラウザが推測する必要がありますか？その後、画像が表示されたときに物事を再配置する必要がありますか？

学習スタイルに応じて、ソース：CSSの定義に直接移動することをお勧めします。こちらからさまざまな仕様のそれぞれを見つけることができます。 http://www.w3.org/style/css/. 。仕様は特定のブラウザの癖を実際にはカバーしていませんが（もしそうなら、それらは癖ではありませんか？）、それは各作品がどのように機能するかを説明するという本当に良い仕事をします。

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

リストアップ

フロートトゥートリアル

そして、CSSについて知っておくべきことの80％を知るでしょう。

Web開発に参加している場合は、フォローする30のWebサイト

http://htmldog.com/ 私の意見では、フロントエンドのWeb開発を学習するための決定的なリソースの1つです。

ライセンス： CC-BY-SA と帰属

所属していません StackOverflow