最初にHTMLまたはCSSを記述すべきですか？
HTML/CSS開発には多くの類似点があります。初心者には少し混乱するかもしれません。
- HTML =基礎/家
- CSS = walls/blueprint/wallpaper
ここにベストプラクティスはありますか？どちらを先に書けばよいですか？
最初に家を建て、次にそれをペイントする必要があります。
HTMLドキュメントは、見栄えが悪くても、それ自体で独立できます。 CSSスタイルシートはできません。表示できるものは何もありませんが（コードを除く）、表示の指示です。
塗装中に家に変更を加えたい場合があるのは、別の問題です。通常は現実的ではない実際の住宅では、HTML + CSS開発では、スタイル設定を容易にするためにHTMLドキュメントに追加のマークアップが必要であることに気付くのが一般的です。 （強力なCSS3セレクターのおかげで、以前ほど一般的ではありません。）
私は常にペンと紙を最初に使用し、フルサイズの紙を使用して、縮尺どおりの図面を作成します。
それはあなたのデザインが解決されていない場合です。デザインに自信があれば、私はバランスの取れたアプローチをとります。 htmlは構造、cssは接着剤です。 （HTML、CSS）コンセプトの「タプル」を構築していきます。
(HTML,CSS) + (HTML,CSS) -> (bigHTML,bigCSS)
(bigHTML,bigHTML) + (bigHTML,bigCSS) -> (biggerHTML, biggerCSS)
等々。
とにかく、それが私のやり方です。
多くは、作成するWebサイト/ Webアプリケーションのタイプ、およびそれが使用されるコンテキストの種類によって異なります。
ほとんどの場合、最善の方法は、意味的に健全なHTMLを作成し、標準に準拠したブラウザ用のCSSを追加してから、非侵入型のハックとルールを適用することです（例：IEの条件付きコメント、-vendor-something CSSルール、JavaScriptコンプライアンスレイヤーなど）。非標準のブラウザをサポートし、ベンダー固有の機能を有効にします。
ただし、スタイルシートを共有する独立したWebアプリケーションがたくさんある場合（たとえば、家のスタイルの一部として）、それぞれのHTML出力を制御するという贅沢な立場にいる場合さえあります。その場合は、CSSを最初に記述し、次にHTMLを調整してそれを処理するのが、より良い方法です。これを行う場合、最初に必要なページ要素の種類を分析し、これらのクラスを定義してから、それらを使用するいくつかの静的テストドキュメントを記述し、スタイルシートを記述して、次にそれらを使用するアプリケーションの作成を開始します。
しかし、正直なところ、そのような贅沢な立場は非常にまれであり、CSSレベルで統一されたハウススタイルの価値を実際に認識している企業はほとんどありません。多くの場合、実用性は、デザイナーが家のスタイルを作成することを指示し、スタイルシートの独立したセットが、それに従う必要のあるアプリケーションごとに作成されます。この理由は、主に、ほとんどの企業が既製のソフトウェアを使用していて、スタックの少なくとも一部に対して変更の可能性が制限されており、多くの場合、特定のスタイルシートに合わせてHTML出力を変更するのが非常に難しい（またはいくつかのプロプライエタリなパッケージ）をCSSを書き換えるよりも。さらに、多くのスタイルシートのセットを維持するための労力はしばしば過小評価されており、いくつかの小さな違いや癖は許容できると見なされます。
これはvery古いQ＆Aですが、コメントする必要性と責任を感じています。
はい、HTMLはCSSの前に記述する必要がありますただし...
あなたはページ上のすべてのHTMLを記述しないでくださいで、CSSの記述に戻ります。これにより、適切な間隔とコメントがあっても、セクションを作成するときにセクションを明確に覚えることが非常に困難になります。
まるで多層のケーキを作っているかのように、レイヤーでウェブサイトを構築します。
1番目のレイヤー-最初にベースであるコンテナーdivを構築します。コンテナーのdivの高さと幅はCSSです。
2番目のレイヤー-次に、次のレイヤー、つまり行や列のように見えるセクションなど、ページの大きなセクション（divと構造のスタイル）を構築します。
3番目のレイヤー以降-次に、セクションの2番目のレイヤー内に追加を続けます。
このようにして、HTMLを記述し、それをCSSで追加してスタイルを設定し、リンスして繰り返します。私の経験では、これはWebページを構築するより効果的な方法であり、私の意見では、最初にすべてのHTMLを使用する方法よりもはるかに高速です。
最後に、「* {outline：1px dotred red} "を使用してすべての要素のアウトラインを取得してみてください。スタイリングを使用してページに追加すると、それらのアウトラインを表示でき、心配する必要はありません。背景色を追加するまでは、どのように見えるかを推測してください。ボーダーは要素にピクセルを追加するため、この特定の使用例ではボーダーを避けています。アウトラインはオーバーレイです。
ぜひお試しください。
まず、Webサイトの構造（HTML）を使用する方が、Webサイトのスタイルとフォーマットに関する要素とそこにある名前について理解できるので、より意味があると思います。
Webページを家と比較すると、次のようになります。
HTML =基礎/家CSS =壁/青写真/壁紙
土台を築くまで、壁を空中に浮かせますか？スタイルを適用するHTMLタグが記述されるまで、CSSを記述してページのスタイルを設定する方法を教えてください。
CSSの各部分は、特定のHTMLタグのスタイルを設定しています。これらのタグは、スタイルを設定するために存在する必要があります。スタイルを設定するHTMLがない場合は、CSSファイルを空にする必要があります。CSSファイルのスタイルは、実際には何もスタイルを設定しないため冗長です。
これは、実際の役割と開発の主な目的によって異なります。 Webページで何をどのように表示するかを決定することが目的である場合、HTMLから始める必要があります。目的が快適で均一なデザインを作成することである場合、CSSから始めることができます。どちらの場合も、最初に紙と鉛筆で始めるのがよいでしょう。現在の目標がWebアプリケーションの開発である場合は、HTMLまたはCSSで始めることはできません。ベストプラクティスは、まず何を開発するかを考え、次にタスクをすべてハッキングするのではなく、目標とサブ目標に分割することです。
家のデザイン（グリッドレイアウト）と、それがどのように装飾されるかについてのアイデアを添えてください。グリッドで家（HTML）を作成します。次にそれを装飾します（CSSスタイルシート）。
最初の家（HTMLページ）を作成した後は、同じ装飾（CSSスタイルシート）を適用するだけです。途中で装飾を微調整できます。
最終的には、デコレーション（CSSスタイルシートのやり直し）が必要になる場合があります。
あなたは学習と構築のために本当に貧弱なフレーミングを選びました。
ここには、2つの直交する問題があります。
- 自分のニーズを満たすサイトを構築するにはどうすればよいですか？
- Webサイトの構築方法を学ぶにはどうすればよいですか？
これらは2つの非常に異なるタスクであり、競合する可能性のある異なるアプローチが必要になる場合があります（多くの場合、必要になります）。
プロジェクトのスキル、テクノロジー、要件に精通している場合は、まずサイトのニーズについてのディスカッションから始め、実装する必要があるものを決定するために設計演習を行います。これはマークアップやデザインのことを意味することが多く、HTMLやCSSとは何の関係もありません（HTMLとCSSでモックアップを行う人もいますが）。
サイトの構築方法を学びながらサイトを構築しようとしている場合、何を構築できるかを知る前に、調査と学習のプロセスを実行する必要があります。
これは、モジュール式で反復的な設計および構築戦略が普及した場所です。最終製品の目的がわからない場合（何が可能かわからないため）、機能の小さなチャンクを構築し、それが要件を満たしているかどうかを実験してから、その小さな実験をより大きな全体。
では、具体的にはどういう意味でしょうか。サイトの構築は、家を建てるようなものです。建築計画（デザインのモックアップ）を作成し、エンジニアリングを開始して、家が立ち上がって美的ニーズを満たすかどうかを計算します。しかし、サイトを構築することは、一連の小さな実験を構築し、元のコンセプトを満たす製品に到達するための段階的なアプローチをとることに似ています（多くの場合、そうする必要があります）。
非常に実用的な問題として、ほとんどすべての人がHTMLとCSSの両方を同時に混乱させます。
これは、ソフトウェア開発プロジェクトimhoの一般的な問題であり、そのため、ラピッドプロトタイピング、DSDMなどの概念を使用することでメリットが得られます。任意のスタイルと組み合わせることができます。アジャイル（極端なプログラミングまたは機能駆動設計（私のお気に入り））。最初に決めた共通の原則に立ち向かい、それに固執する（KISS、YAGNI）。
つまり、私にとっては：-基本的な機能的な「プロトタイプ」を最初に構築し、要求の1つの機能ブロックをカバーします。「これはいいかもしれません」/「後で再利用する必要があるかもしれない」ものに飛び込むのを制限します。教えてください、あなたはそれを必要としないでしょう！ （ヤグニ）。 -「コーディング規約」として行った決定を書き留め、それらに固執します。 phpタグ：私のシナリオでは引数..は適用され、...は適用されないため、短いタグを使用します。 -基本的なスタイリングを追加しますが、再度制限します。
次に、より多くの機能ブロックをカバーする上位レベルのプロトタイプに到達するまで、コードを拡張します。これに合わせて、CSSモデルを拡張します。すでに行ったすべてに影響する決定に直面したらすぐに（それを読みます）、それを読み、決定を下し、左または右に行った理由をコーディング規則に書き留めます。
より円熟した最終製品に向けて「円を描く」。
あなたが直面しているかもしれない大きな決断を恐れないでください。それらについて心配することは、それを修正するよりも多くの時間を費やすことになるからです。また、インターネットコミュニティが眉をひそめて肩越しに見ているのを心配する必要はありません。最終的には、機能する製品があり、多くのことを学び、悪いソースコードの想像力に富んだ裁判官は、次に構築するもの（ここでの反復に注意してください）。
ちょうど私の50cts