XHTML+CSSのWeb制作における美しいスタイルシート
2022-02-05 03:57:17
これはずいぶん前の記事ですが、今となってはその中の考え方は学ぶ価値があると思われます。jb51.netで事例を学びながら、何か理論的な知識を学ぶ真似ではなく、知識のブレークスルーにとても役立つはずです。を学ぶことができます。
Zeldman氏の代表作である「Designing with Web Standards」(中国語では「网站復歸」(第2版))を読んで以来、多くのことを感じ、Web標準の考え方をプロジェクトの開発・実践に活かしています。しかし、Web標準とは何か、どのように実際のプロジェクトに適用するのか、ある程度知っているだけで、十分とは言えません。Web標準の各要素は、その本質を発見するために、一つ一つを壊すために、適用して学ばなければなりません 私のようなWeb開発者やデザイナーのために、この真実、ターゲットを絞った学習と実践を知って、私は我々は間違いなく多くを得るだけでなく、中国のWeb標準のアプリケーションに少し貢献を行うために考慮されると信じています (ああ、これはいくつかの自慢かもしれないが、それは確かに私たちソフトウェアの実務家のほとんどの理想である)。
Web2.0、さらには3.0の時代、XHTML、XML、CSS、ECMAScript、DOMの時代と言われています。これらは究極の技術ではありませんが、組み合わせることでソリューションになります。私たちが後方互換性のあるウェブサイトを計画するための基盤であり、ウェブ標準に準拠したウェブサイトを行うために必要な技術的基盤なのです。より多くのユーザーの支持やアクセスを得るためだけでなく、長く愛される美しいウェブサイトを構築するためにも必要なことなのです。CSSを学んでWebサイトを改善することは、彼らの注目を集める良い方法であり、Web2.0時代のトレンド的な展開であると思います。今回は、私がCSSの技術から学んだことをお話しします。
CSSのエキスパートになるには、CSSセレクタを使いこなすだけでは十分ではありません。CSSのエキスパートとなるためには、CSSセレクタに精通するだけでなく、作業全般の計画、ワークフローの習得、スタイルシートの保守性と効率性の向上が必要です。CSSを使えば、私たちが望むような素敵なWebサイトを作ることができますし、CSSを書くこと自体が楽しくもあります。では、どうすればより魅力的なスタイルシートが作れるのでしょうか。スタイルシートにはどんな機能があった方がいいのでしょうか?私自身の仕事の経験を学び、組み合わせて、美しいスタイルシートを作成するための素晴らしい方法を考えてみました。
I. CSSにマークアップを詰め込みすぎない
スタイルシートのリンクやインポートは、無知な人のための練習のようだ。私は、きちんと整理されたcssドキュメントで開発された多くのサイトを見てきましたが、徐々に、短期間で迅速な更新を実現できないかもしれない、あるいはもう管理するのが面倒くさいという理由で、これによって、以前作成した精巧なスタイルシートがゴミになってしまうのです。何百ものコンテンツを公開する必要がある巨大なWebサイトの上で作業する場合。時間が限られているため、cssを入れ子にしたり並べたりして素早く変更・更新する必要がある。時間が経つにつれ、この習慣は、ある日突然、サイトを完全に覆して再設計しなければならない(ただしコンテンツはそのまま)、作成期間は1週間しかない(テストを含む)と告げられるまで維持される。一般的に、スタイルシートの更新は、長い間サイトの散在する部分に変更を加えていて、サイトのスタイルシートの構造を全体的に把握していない場合を除き、ある意味とても簡単な方法なのです。
スタイルシートのリンクやインポートは無造作に行うものではありません。きれいに整頓されたスタイルシートを作成し、それを維持することで、より幸せに仕事をすることができます。注:更新や新しいコンテンツを追加するたびに新しいスタイルシートを作ろうとすると、間違いなくトラブルを招きます。スタイルシートのリンクやインポートが多すぎると、バグを排除するのが信じられないほど難しくなり、スタイルシートのメンテナンスが困難になります。大規模なサイトでは、セクションごとにスタイルシートを分けているのは理解できます。ただ、極端にならないように注意してください。スタイルシートをたくさん追加すると、httpリクエストが増えるし、後の作業に支障をきたす可能性もある。
第二に、意味的な定義が明確でわかりやすいこと
表現するために最も適切で意味のある要素を選ぶことに加え、classとidの属性値も必ず選択すること。明確な定義があればメンテナンスが容易になり、グループのメンバーにも読んでもらえます。この定義を見てください。
.l10k { color: #369; } , .left-blue { color: #369; } 私はやればわかるかもしれませんが、人に伝わるとは限りません。今日、意味がわかったとしても、何年後にも意味がわかると保証できるでしょうか。classプロパティの中に色や縦横の寸法を追加しない方が良い。より適切な命名規則としては、.work-description { color: #369; }
III. 条件付きコメントをつけるタイミングを知り、テクニックを応用する
問題解決のテクニックとして多くの記事が書かれていますが、IEのパブリッシングを制御する方法として条件付きコメントがあります。条件付きコメントは、css文書に走り書きするよりもずっと良いということには同意しますが、最近、これが最善の解決策ではない証拠がたくさんあることに少しずつ気づき始めました。その中で要素の最小の高さを設定しようとするが、IE6ブラウザはそれを強制しないので、使えるとわかっている高さは同じように扱われる。スタイルシートを再構築し、ロゴに条件付きコメントを追加する、必要なのはこのルールに従うことだけ?最小高さと高さのルールを一緒にして、同じcssドキュメントでヒントを選んだ方が良いのでしょうか?この場合、この方法だと作業が大変だと思うのですが。
IV. CSSをできるだけ外部スタイルシートでウェブページに適用する。
メリットは?私たちは皆よく知っていますが、ひとつだけ否定できないことがあります。それは、コードの再利用を最大化し、サイトファイルの構成を最適化することができることです。
<スパン
Zeldman氏の代表作である「Designing with Web Standards」(中国語では「网站復歸」(第2版))を読んで以来、多くのことを感じ、Web標準の考え方をプロジェクトの開発・実践に活かしています。しかし、Web標準とは何か、どのように実際のプロジェクトに適用するのか、ある程度知っているだけで、十分とは言えません。Web標準の各要素は、その本質を発見するために、一つ一つを壊すために、適用して学ばなければなりません 私のようなWeb開発者やデザイナーのために、この真実、ターゲットを絞った学習と実践を知って、私は我々は間違いなく多くを得るだけでなく、中国のWeb標準のアプリケーションに少し貢献を行うために考慮されると信じています (ああ、これはいくつかの自慢かもしれないが、それは確かに私たちソフトウェアの実務家のほとんどの理想である)。
Web2.0、さらには3.0の時代、XHTML、XML、CSS、ECMAScript、DOMの時代と言われています。これらは究極の技術ではありませんが、組み合わせることでソリューションになります。私たちが後方互換性のあるウェブサイトを計画するための基盤であり、ウェブ標準に準拠したウェブサイトを行うために必要な技術的基盤なのです。より多くのユーザーの支持やアクセスを得るためだけでなく、長く愛される美しいウェブサイトを構築するためにも必要なことなのです。CSSを学んでWebサイトを改善することは、彼らの注目を集める良い方法であり、Web2.0時代のトレンド的な展開であると思います。今回は、私がCSSの技術から学んだことをお話しします。
CSSのエキスパートになるには、CSSセレクタを使いこなすだけでは十分ではありません。CSSのエキスパートとなるためには、CSSセレクタに精通するだけでなく、作業全般の計画、ワークフローの習得、スタイルシートの保守性と効率性の向上が必要です。CSSを使えば、私たちが望むような素敵なWebサイトを作ることができますし、CSSを書くこと自体が楽しくもあります。では、どうすればより魅力的なスタイルシートが作れるのでしょうか。スタイルシートにはどんな機能があった方がいいのでしょうか?私自身の仕事の経験を学び、組み合わせて、美しいスタイルシートを作成するための素晴らしい方法を考えてみました。
I. CSSにマークアップを詰め込みすぎない
スタイルシートのリンクやインポートは、無知な人のための練習のようだ。私は、きちんと整理されたcssドキュメントで開発された多くのサイトを見てきましたが、徐々に、短期間で迅速な更新を実現できないかもしれない、あるいはもう管理するのが面倒くさいという理由で、これによって、以前作成した精巧なスタイルシートがゴミになってしまうのです。何百ものコンテンツを公開する必要がある巨大なWebサイトの上で作業する場合。時間が限られているため、cssを入れ子にしたり並べたりして素早く変更・更新する必要がある。時間が経つにつれ、この習慣は、ある日突然、サイトを完全に覆して再設計しなければならない(ただしコンテンツはそのまま)、作成期間は1週間しかない(テストを含む)と告げられるまで維持される。一般的に、スタイルシートの更新は、長い間サイトの散在する部分に変更を加えていて、サイトのスタイルシートの構造を全体的に把握していない場合を除き、ある意味とても簡単な方法なのです。
スタイルシートのリンクやインポートは無造作に行うものではありません。きれいに整頓されたスタイルシートを作成し、それを維持することで、より幸せに仕事をすることができます。注:更新や新しいコンテンツを追加するたびに新しいスタイルシートを作ろうとすると、間違いなくトラブルを招きます。スタイルシートのリンクやインポートが多すぎると、バグを排除するのが信じられないほど難しくなり、スタイルシートのメンテナンスが困難になります。大規模なサイトでは、セクションごとにスタイルシートを分けているのは理解できます。ただ、極端にならないように注意してください。スタイルシートをたくさん追加すると、httpリクエストが増えるし、後の作業に支障をきたす可能性もある。
第二に、意味的な定義が明確でわかりやすいこと
表現するために最も適切で意味のある要素を選ぶことに加え、classとidの属性値も必ず選択すること。明確な定義があればメンテナンスが容易になり、グループのメンバーにも読んでもらえます。この定義を見てください。
.l10k { color: #369; } , .left-blue { color: #369; } 私はやればわかるかもしれませんが、人に伝わるとは限りません。今日、意味がわかったとしても、何年後にも意味がわかると保証できるでしょうか。classプロパティの中に色や縦横の寸法を追加しない方が良い。より適切な命名規則としては、.work-description { color: #369; }
III. 条件付きコメントをつけるタイミングを知り、テクニックを応用する
問題解決のテクニックとして多くの記事が書かれていますが、IEのパブリッシングを制御する方法として条件付きコメントがあります。条件付きコメントは、css文書に走り書きするよりもずっと良いということには同意しますが、最近、これが最善の解決策ではない証拠がたくさんあることに少しずつ気づき始めました。その中で要素の最小の高さを設定しようとするが、IE6ブラウザはそれを強制しないので、使えるとわかっている高さは同じように扱われる。スタイルシートを再構築し、ロゴに条件付きコメントを追加する、必要なのはこのルールに従うことだけ?最小高さと高さのルールを一緒にして、同じcssドキュメントでヒントを選んだ方が良いのでしょうか?この場合、この方法だと作業が大変だと思うのですが。
IV. CSSをできるだけ外部スタイルシートでウェブページに適用する。
メリットは?私たちは皆よく知っていますが、ひとつだけ否定できないことがあります。それは、コードの再利用を最大化し、サイトファイルの構成を最適化することができることです。
<スパン
関連
-
HTMLのテーブルを説明する
-
html+css implement picture upper right corner with delete fork, picture delete button.
-
htmlのheaderタグの使い方を説明する
-
HTMLにおける<meta>タグの使用方法について説明します。
-
選択/フォーカスされたときにすべてのオプションを表示させる良い方法は、現在
-
HTMLのFormのmethod属性の使い方を紹介します。
-
htmlのテキスト回り込みの例(html mixed text)
-
知っておきたいHTML最適化のコツ
-
HTMLページ埋め込み動画、JSコントロールスイッチ動画例詳細
-
TinyEditorは、シンプルで使いやすいhtml WYSIWYGエディタです。
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン