HTML+CSSプロジェクト開発経験概要（推奨）

ここ数日ブログを更新していませんでした。簡単な HTML+CSS プロジェクトを終えたところです。数日間の調査の後、私はそれが非常に有益であることがわかりました。以前は、デモを書いたり、ナレッジポイントを読んだりしていましたが、実際に自分でプロジェクトを行ったことはありませんでした。しかし、実際に戦闘を経験して初めて、自分のスキルをより向上させる方法がわかるようになります。このプロジェクト開発では、次の点をまとめました。

1. 技術概要

1. 公開スタイルの設定

プロジェクトを開始する前に、まず、フォント スタイル、段落構造、テキスト サイズなど、プロジェクト内の各ページのコンテンツの概要を把握する必要があります。これらのコンテンツには固定スタイル ファイルを設定できます。開発中は、CSS コードを繰り返し入力することなく、このファイルを直接インポートできます。

使用する必要がある場合は、クラス名の後に使用したいクラス名を追加するだけです。

2. 全体レイアウト

プロジェクトの開発プロセスにおいて、各ページのフレームワークを事前に構築しておけば、後から具体的なコンテンツを入力するだけで済みます。そして、私はページ全体のレイアウトを実現するために、次のフレームワークを使用することに慣れています。

一般的に言えば、ページの全体的な枠組みを設定した後、残りの部分を少しずつ埋めていく方が、開発のアイデアがより明確になるため便利です。もちろん、対応する CSS スタイルを設定する必要がありますが、これはプロジェクトの特定の要件によって異なります。

3. 切断要素

大体のレイアウトができたら、次は写真の切り取り作業です。技術的な作業はそれほど多くありませんが、注意すべき点がいくつかあります。たとえば、写真を切り取るときは、サイズに特に注意する必要があります。比較的扱いにくい部分もありますが、扱いには忍耐が必要です。細部によって結果が異なる場合が多いためです。実際、ほぼ完成だと思わないでください。時には、少しだけ悪くなることもあります。効果が満足のいくものでない場合は、最終的に修正するために時間を費やす必要があります。さらに、切り取った画像を保存すると、画像ファイルが自動的に生成されるため、新しいディレクトリを作成したり、ディレクトリを入力したりする必要はありません。そうしないと、対応する場所に画像フォルダが表示されます。

4. 命名とコード記述の標準

標準化された命名はコードの読みやすさの向上に役立ちます。インターネット上にも関連する仕様が多数あります。ここではいくつかのポイントを簡単に挙げます。

（１）直感的な命名

Web ページを設計し、div を識別する必要がある場合、最も自然なアイデアは、ページ上の要素のどこにあるかを説明する単語を使用して名前を付けることです。

例: トップパネル

水平ナビゲーション

左側

（２）構造化された命名

例: メインナビ

サブナビ

（３）メンバーベースの命名規則

メンバーベースの命名規則とは、ファイルとフォルダーを従属関係に従って分類して命名することであり、これによりファイルの配置をより論理的にすることができます。

例えば、マウスをクリックする前の画像ファイルは「file_on」という名前が付けられ、マウスをクリックした後は「file_off」という名前が付けられます。このようにカテゴリに従って名前が付けられます。より明確になります。

5. 「スプライトピクチャー」の作り方を学ぶ

プロジェクト開発では、小さなアイコンや小さな画像を多数追加することは避けられません。写真を1枚ずつ切り取って保存すると、使いにくくなるだけでなく、メモリも大量に消費するため、ページの読み込み速度がかなり遅くなってしまいます。これは良いことではなく、ユーザーエクスペリエンスが大幅に低下します。そのため、事前に小さな画像を切り取って同じページに配置することができます。開発時には、この画像をインポートするだけで済みます。次に、状況に応じて背景画像の位置を調整します。設定にはbackground-positionプロパティを使用します。

6. 知識ポイントの明確化

プロジェクトに取り組んでいるとき、特定の知識ポイントを十分に理解しておらず、それをうまく適用することができなかったため、開発速度が遅くなりました。知識ポイントを習得すると、対応する効果を実現するためのコードをすぐに記述できるようになります。このプロジェクトの開発中、私は以下の知識点に精通していませんでした。

（１）関係セレクタの使用

（２）擬似クラスセレクタの使用

特に、E:first-of-type と E:first-child です。実際、この 2 つの最大の違いは、前者は親要素の下の最初の構造タグであるのに対し、後者は必ずしも最初の構造タグである必要はないという点です。次の例:

a:first-child は .test 下の最初の構造タグであり、a タグです。そうでない場合は効果がありません。

a:first-of-type は最初の子要素である必要はなく、.test の下の最初の a タグである必要があります。

（3）CSSプロパティ：不透明度、z-index、表示

a. 不透明度

このプロジェクト開発では、マスキング レイヤーの使用が必要なエフェクトがあります。下記の通りです。最初に 2 つの div を記述し、2 番目の div を透明に設定しました。次に、マウスをホバーした後、透明度を不透明に戻します。 同時に、2 番目の div も最初の div と重なるように配置されます。しかし、このようなコードを書くのはあまりにも面倒で面倒だとわかりました。他の人のコードを参考にしたところ、z-indexを柔軟に使用することで同様の効果が得られることがわかりました。具体的な実装は以下のとおりです

CSSコード:

HTMLコード:

b. Zインデックス

オブジェクトの積み重ね順序を取得または設定します。

並列レベルのオブジェクトの場合、このプロパティ パラメータの値が大きいほど、オブジェクトは上に積み重ねられます。

2 つのオブジェクトがこのプロパティに対して同じ値を持つ場合、HTML ドキュメント内での順序に従って積み重ねられ、後で書き込まれたオブジェクトが前に書き込まれたオブジェクトを覆います。

この値を有効にするには、位置属性値が絶対、相対、または固定である必要があります。

c. 表示

none: オブジェクトを非表示にします。 visibility プロパティの hidden 値とは異なり、非表示のオブジェクト用の物理的なスペースは予約されません。

inline: オブジェクトがインライン要素であることを指定します。 block: オブジェクトがブロック要素であることを指定します。

list-item: オブジェクトをリスト項目として指定します。

inline-block: オブジェクトがインライン ブロック要素であることを指定します。 （CSS2）

2. メンタリティのまとめ

このプロジェクトの実践を経て、多くの場合、それは直接的な能力の問題ではなく、態度の問題であることがわかりました。最初は、数日間で十数ページを仕上げなければならず、最終的な結果については懐疑的でした。しかし、将来働くとなると、必然的に「プレッシャーのかかる」仕事に就くことになるだろうとも思いました。つまり、短時間で作業を完了することが可能となります。プロセスは常に困難ですが、多くの場合、他の人は結果だけを気にします。結果が出ていないということは、仕事がうまくできていないということ。残酷に聞こえるかもしれませんが、それが事実です。このプロジェクトの完了率は約90％ですが、まだ一部の効果は得られていません。しかし、後になってブラウザの互換性も実現する必要があることがわかり、これは本当に頭痛の種でした。面倒ではありますが、欠かせない部分でもあります。このプロジェクトの実践では、改善できると思われる以下の点をまとめました。

1. 各 HTML タグと CSS 属性に精通し、その使用に習熟している。開発スピードが遅い理由の一つは、知識が足りないことだと思います。たとえば、特定の効果を実現したいのに、どの属性を使用すればよいか思い出せなかったり、属性名を忘れてしまったりすると、情報を探すのに時間を費やすことになります。目に見えないところで時間が無駄になっている。

2. 冗長性を減らし、コードを最適化します。コードが増えるとメモリを消費し、ページの読み込み速度が遅くなるため、省略できるものは省略したほうがよいでしょう。コードを書くときは、よりシンプルな書き方を考えることで、コードを書く速度を上げることもできます。もちろん、これも少しずつ積み重ねていくものです。練習を重ねていくと、コードを書くスピードを上げたり、冗長性を減らしたりする方法などが自然にわかってきます。

3. 切断速度。おそらく、デザインツールをあまり使用せず、ソフトウェアインターフェースの操作にあまり慣れていないからでしょう。しかし、写真を切り抜くのに実はそれほど高度な技術は必要ないのですが、注意しなければならないのは正確さです。集中力も向上します。

4. もっと考え、もっと練習し、質問することを恥ずかしがらないでください。技術的な問題に遭遇したとき、私が通常行うことは、まず自分で考えることです。本当にわからない場合は、Baiduで検索し、インターネットを参照して、自分で実装することができます。インターネット上の情報が明確でなかったり、理解しにくい場合。クラスメートや先生に聞くのが良いと思います。相互コミュニケーションと学習を通じて、実際に知識のポイントをより早く理解し、自分の欠点を発見することができます。同時に、他の人が行った良いことからも学びましょう。

5. 厳格な態度を養う

細部の問題は多くの人が見落としがちなものです。私自身は、厳格な人間だとは思いません。時には、自分の不注意が原因で悪い結果が出ることもあります。だから、これに気づいてからは、常に自分自身に思い出させるようにしています。スピードを追求する中で、一見重要ではないと思われるものを無視することはできません。

上記のHTML+CSSプロジェクト開発体験サマリー（推奨）は、編集者が皆さんと共有するすべての内容です。参考になれば幸いです。また、123WORDPRESS.COMを応援していただければ幸いです。