ホームページ ウェブフロントエンド CSSチュートリアル 初心者のための Web 標準に関するいくつかの誤解_CSS/HTML

初心者のための Web 標準に関するいくつかの誤解_CSS/HTML

May 16, 2016 pm 12:11 PM

多くのデザイナーが Web ページの作成に Web 標準に注目し、それを使用しようとしているのを見て、とても嬉しく思います。しかし、ネチズンの質問や制作過程からいくつかの問題点が見つかりましたので、ここでお知らせしたいと思います:

1. 標準化は検証に合格するためだけに行われるわけではありません。
Web 標準の本来の目的は、コンテンツ (構造) とプレゼンテーションを分離することであり、スタイルを分離して別々の CSS ファイルに入れることです。この利点は、コンテンツとパフォーマンスを個別に処理できることと、検索とコンテンツの再利用も容易になることです。

W3C 検証は、XHTML コードの記述が標準化されているかどうか、および CSS 属性が CCS2 仕様の範囲内にあるかどうかを確認するのにのみ役立ちます。コードの標準化は最初のステップにすぎません。検証に合格したからといって、Web ページが標準化されるわけではありません。私たちは、名声を得るために標準化したり、「ほら、私のページは検証に合格しました」と標準化しているわけではありません。私たちの目的は、Web デザインの作業をより効率化し、Web ページのサイズを削減し、どのブラウザでも使用でき、ネットワーク デバイスでも正常に閲覧できます。

落ち着いて、Web 標準の意味を注意深く調べて理解してください。インターネットはすでに衝動性と虚栄心に満ちていますが、この傾向を Web 標準の適用に持ち込むことは、Web 標準の推進に影響を与え、損害を与えるだけです。

2. div をネストするために従来のテーブル思考を使用しないでください。
「CSS レイアウトは、元のテーブルを div に置き換えることです。以前はテーブルのネストでしたが、現在は DIV のネストです。」 !

元のテーブルレイアウトの制約を打破し、画像やコンテンツを TD ごとに配置する考え方を放棄してください。 Web 標準の目的はコンテンツとパフォーマンスを分離することであると上で述べました。このように考えることができます。変更を加えなければ、このページはテキストと画像が含まれた白いページのように見えます。コンテンツ内の画像(実際の意味を持つ画像)。これらのテキスト画像は順番にリストされているだけで、構造のみがあり、スタイルはありません。次に、パフォーマンスを追加し、変更したすべての画像を背景として使用し、CSS を使用して各コンテンツの位置、フォント、色などを定義します。

この方法で作成されたページは、コンテンツとパフォーマンスが分離されています。つまり、CSS ファイルを削除すると、きれいなコンテンツが残ります。このようにして、テキスト ブラウザで読んだり、携帯電話や PDA で読んだり、いつでも CSS を変更して改訂することができます。

3. コンテンツごとに ID を作成する必要はありません
一部のネチズンは、CSS ファイルが大きすぎて複雑であると不満を述べていました。コードを注意深く見てみると、その理由は、div を定義し、コンテンツごと、さらには文ごとに ID を作成しているためであることがわかりました。これは、スタイル シート アプリケーションに不慣れなことが原因である一方で、Web 標準に対する十分な理解が不足していることも示しています。

コンテンツには構造があることを私たちは知っています (理解できない場合は、[url=http://www.w3cn.org/article/tips/2004/43.html]パフォーマンスとコンテンツの分離を理解してください)構造[/ url])、同じスタイルを使用して、同じレベルのタイトル、テキスト、画像など、同じ構造のコンテンツを定義できます。複数回参照されるスタイルの場合は、クラスを使用して定義できます。また、それぞれに ID を使用する必要はありません。また、

を使用する必要があるというわけではありません。

は、
に完全に置き換えることができます。これもブロックレベルの要素であり、ボックス モデル

と同じ 7 つのパラメーターを持ちます。

浮くのにちょうど便利です。

行の高さ、間隔、画像の変更のためだけに余分な div を追加することについては、CSS の応用と理解があればすぐに省略できると思います。テーブルのネストを置き換えるために DIV ネストを使用することには反対です。これには意味がなく、コンテンツの構造を反映できません。皆さんももっとCSSを勉強して、最も簡潔で効果的なスタイルシートを書いてほしいと思います。

4. ちょっとした挫折だからといって、簡単に諦めないでください
これは、Web 標準の学習に限らず、姿勢とアプローチの問題だと思います。新しい知識を学び、新しい概念を受け入れることは、特に既存の習慣や考え方を変える必要がある場合には困難です。唯一の質問は、Web 標準を学ぶ価値があると思いますか?ということです。 Web 標準によってもたらされる利点 (コードの簡素化、開発の高速化、ファイル サイズの圧縮、ダウンロード速度の向上、使いやすさの向上、ユーザーの増加、メンテナンスの容易さ、マルチプラットフォームの互換性) を認識していますか? と自問してみてください。世界的な XML はまだ遠いと感じていますか?現在の HTML の知識は十分だと思いますか?

1999 年以来、中国では Web ページ制作技術はあまり進歩も変化もありませんでしたが (Flash の台頭を除いて)、海外の進歩のペースは決して止まらず、xhtml1.0、xhtml1.1、xml、xsl .. 、W3C および主要なソフトウェア会社は、Web テクノロジーをより便利で、より効果的で、より強力なものにするために、常に Web テクノロジーを研究および進歩させています。 Web 標準の適用と推進は 8 年以上にわたって海外で行われています (Zeldman の Web 標準化団体 Web サイトから) 多くの困難はありますが、徐々に人々に受け入れられ、認識されてきています。なぜ私たちはウェブサイトの表面にある「繁栄」に酔いしれ、ページの裏側にある本質を考えないのでしょうか。

中国が今後も遅れをとり続けることを望みますか?このまま遅れをとり続けるつもりですか?すべての決定はあなた次第です。

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

GraphQLキャッシングの使用 GraphQLキャッシングの使用 Mar 19, 2025 am 09:36 AM

最近GraphQLの作業を開始した場合、またはその長所と短所をレビューした場合、「GraphQLがキャッシュをサポートしていない」または

最初のカスタムSvelteトランジションを作成します 最初のカスタムSvelteトランジションを作成します Mar 15, 2025 am 11:08 AM

Svelte Transition APIは、コンポーネントがカスタムSVELTE遷移を含むドキュメントを入力または離れるときにアニメーション化する方法を提供します。

Redwood.jsと動物相を使用してイーサリアムアプリを構築します Redwood.jsと動物相を使用してイーサリアムアプリを構築します Mar 28, 2025 am 09:18 AM

最近のビットコインの価格が20k $ $ USDを超えており、最近30Kを破ったので、イーサリアムを作成するために深く掘り下げる価値があると思いました

ショー、Don' t Tell ショー、Don' t Tell Mar 16, 2025 am 11:49 AM

あなたのウェブサイトのコンテンツプレゼンテーションの設計にどれくらいの時間に費やしますか?新しいブログ投稿を書いたり、新しいページを作成したりするとき、あなたは考えていますか

CSSを使用して、テキストシャドウやグラデーションなどのテキスト効果を作成しますか? CSSを使用して、テキストシャドウやグラデーションなどのテキスト効果を作成しますか? Mar 14, 2025 am 11:10 AM

この記事では、影やグラデーションなどのテキスト効果にCSSを使用し、パフォーマンスのために最適化し、ユーザーエクスペリエンスの向上について説明します。また、初心者向けのリソースもリストしています。(159文字)

Eleventyで独自のBragdocを作成します Eleventyで独自のBragdocを作成します Mar 18, 2025 am 11:23 AM

開発者としての段階に関係なく、私たちが完了したタスクは、大小を問わず、個人的および専門的な成長に大きな影響を与えます。

NPMコマンドは何ですか? NPMコマンドは何ですか? Mar 15, 2025 am 11:36 AM

NPMコマンドは、サーバーの開始やコンパイルコードなどの1回限りのプロセスまたは継続的に実行されるプロセスとして、さまざまなタスクを実行します。

CI/CDで少し CI/CDで少し Apr 02, 2025 pm 06:21 PM

「ウェブサイト」は「モバイルアプリ」よりも適していると言いますが、Max Lynchからのこのフレーミングが好きです。

See all articles