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

一般的には、ページの大枠を決めたら、あとは一個一個直接埋めていく方が、展開がわかりやすいと言われています。もちろん、CSSのスタイルも設定しなければなりませんが、これはプロジェクトの具体的な要件に依存します。

3. 切り抜き要素

大まかなレイアウトが決まったら、次は切り出しに入るはずです。あまり専門的なことではありませんが、注意すべき点があります。例えば、切り抜きで特に注意していただきたいのは、サイズです。微妙な部分もありますが、我慢が必要です。細かい問題で、結果が違ってくることが多いからです。実際には、それがほとんど十分であることを考えないで、時には少しは、結果が満足のいくものではない場合、最終的には、あなたはまだ修正するために時間を費やす必要があります。さらに、切り取りを保存するときは、自動的に画像ファイルを生成するので、我々は独自の新しいディレクトリを作成したり、1つに行く必要はありません、またはそれはまだ画像フォルダの対応する場所に表示されます。

4. 命名規則とコード記述規則

命名規則はコードの可読性を向上させるのに役立ちます。ウェブ上にはかなりの数の仕様があるので、ここではそのいくつかを簡単にリストアップしておきます。　　　

(1) 直感的なネーミング

Web ページをデザインするときに div を識別する必要がある場合、最も自然なアイデアは、ページ上の要素の位置を表す単語を使用して名前を付けることです。

例：トップパネル

        水平ナビ

        左サイド

(2)、構造化ネーミング

例：メインナビ

　      サブナビゲーション

(3)、メンバーベースの命名規則

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

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

5、スプライトチャートの作り方を学ぶ。

プロジェクトの開発では、どうしても小さなアイコン、小さな絵がたくさん出てきます。それらをひとつひとつ切り取って保存していると、使うのが面倒になるし、メモリを大量に消費するので、ページの読み込みがかなり遅くなります。これは決して良いことではなく、ユーザーエクスペリエンスを大きく低下させます。そこで、小さな画像は切り捨てて同じページに配置し、開発時にはその画像だけを導入すればいいのです。あとは、background-positionプロパティで設定できる背景画像の位置を調整することで、フォローすることができます。

6. 知識の明確化

プロジェクトを進めていく中で、ある知識ポイントに習熟しきれていなかったため、開発の遅れにつながってしまいました。ある知識ポイントに習熟すると、対応する効果を得るためのコードを素早く書くことができるようになります。今回の開発では、主に以下のような知識について不慣れな点がありました。

(1) リレーショナルセレクタの使用について

(2)、擬似クラスセレクタの使用

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

a:first-childは.test以下の最初の構造タグで、effectではなく、aタグです。

a:first-of-typeは最初の子要素である必要はなく、.test以下のaタグのうちの最初の子要素であればよいのです。

(3), 不透明度、z-index、displayのCSSプロパティ

a. 不透明度 

今回のプロジェクト展開では、マスキングレイヤーを使用する必要がある効果があります。これを以下に示します。最初にやったことは、divを2つ書いて、2つ目のdivを透明に設定することです。そして、hoverを使った後、その透明を不透明に戻す。そして、2つ目のdivが1つ目のdivと重なるように配置する。しかし、これはコードが多く、混乱しやすいことがわかりました。しかし、私は、これは多くのコードと台無しにするのは簡単であることを発見した。他の人のコードを参考にした結果、z-indexを柔軟に使うことでこの効果を得られることがわかりました。具体的な実装は以下の通りです。   

CSSのコードです。

HTMLコードです。

b, z-index

オブジェクトのカスケード順序を取得または設定する。

この属性パラメータの値が大きいほど、より多くのオブジェクトが互いにカスケード接続される。

この属性に同じ値を持つ2つのオブジェクトは、HTML文書内で流れる順序に従ってカスケード表示され、後に書かれたものが前に書かれたものを上書きします。

この値を有効にするには、position 属性を absolute、relative、fixed のいずれかにする必要があります。

c. 表示

none：オブジェクトを非表示にします。visibility属性のhidden値とは異なり、隠されたオブジェクトのためにその物理的な空間を確保することはありません。

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

list-item: オブジェクトをリストアイテムとして指定します。

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

II. マインドセットの概要

今回のプロジェクト演習を終えて、本当は直接的な能力の問題ではなく、姿勢の問題である場合が多いことに気づきました。最初は、数日で十数ページを駆け足で仕上げるということで、最終的にどのような結果が出るか半信半疑でした。しかし、私はまた、将来の仕事は、避けることができない場合は、＆quot;高圧＆quot;宿題になりますと思った。それは、短期間で所定の位置に仕事を取得することが可能になります。プロセスは常にハードですが、多くの場合、他の人は結果だけを見てください。結果は出ていない、つまり、かなり残酷なことを言うけれども、仕事は所定の位置にない、しかし、事実は事実である。今回も90％くらいは完成しているが、まだ効果が出ていないところがある。しかし、その後、まだブラウザの互換性をやらなければならないことがわかり、本当に頭が痛いです。面倒ですが、必要不可欠な部分です。今回のプロジェクト演習では、改善できそうな点を以下のようにまとめました。

1. あらゆるHTMLの付箋やCSSのプロパティに慣れ、使いこなすこと。開発が遅い原因のひとつは、ポイントの知識が足りないからだと思います。例えば、ある効果を出したいと思っても、どのプロパティを使うのか思い出せなかったり、プロパティ名を忘れてしまったりすると、また時間をかけて調べ直さなければなりません。必ず、時間が消費されるのです。

2. 冗長性を減らし、コードを最適化する。コードが多いとメモリを消費し、ページの読み込みが遅くなるため、省略できるものは省略した方がよい。コードを書く過程で、より簡潔な書き方は何かと考えることから始めて、コードを書く速度を向上させることもできます。もちろん、これも少しずつ積み重ねていくことで、より自然にコードの書き方を改善し、冗長性を減らす方法が理解できるようになります。

3. スピードを削る。デザインツールをあまり使わないからか、ソフトのインターフェースの仕組みに疎い。しかし、写真をカットするのにそれほどスキルは必要ありませんが、注意しなければならないのは正確さです。また、ピントも良くなります。

4. もっと考え、もっと練習し、恥ずかしがらずに質問する。技術的な問題に遭遇したとき、まず自分で考え、思いつかなければBaiduで調べ、インターネットを参照し、自分で実装するのがいつものやり方です。ネットの情報があまり明確でない場合や、よく理解できない場合。クラスメートや先生に聞くのがいいと思います。相互の学習交流を通じて、実際、より早く知識を理解し、自分の欠点を見つけることができます。また、他の人が行ったことの良い面からも学ぶことができます。

5. 厳しさを身につける

細部の問題は、多くの人が見落としがちなことです。そして、私自身の意見としては、自分は厳格な人間ではないと感じています。自分の油断が悪い結果につながることもままある。だから、このことを認識した上で、一瞬一瞬、自分に言い聞かせることにしています。速さを追求するあまり、一見些細なことでも無視してはいけないのです。

このHTML+CSSプロジェクト開発経験まとめ（おすすめ）は、上記でお伝えしたものが全てです。