HTML はプレゼンテーションからコンテンツへの移行を試みており、コンテンツの意味(HTML) とプレゼンテーション(CSS) を分離するという論理的根拠に至っています。これにより、プレゼンテーション命令のセット (外部 CSS ドキュメントの形式) を複数のページに適用できるため、Web ページのサイズが縮小されます。これにより、単一のファイルを変更するだけでグローバルな変更を行うことができるため、サイトの管理も容易になります。 不適切なタグの中には、本質的にはプレゼンテーション用のタグ ( small など) があり、より意味のある単純な CSS ルールに置き換えることができます。その他のタグは、プレゼンテーション用であるだけでなく、不必要に大きくなったり ( font タグなど)、ユーザビリティに悪影響を与えるほど目障りなもの ( blink など) もあります。 タグ 以下に、頻繁に遭遇する可能性のある、より優れたオプションを持つタグをいくつか示します。b b 使用すると、要素を太字にすることができます。代わりにstrong (強い強調を意味する) を使用するか、太字の要素を示すfont-weight: bold ルールを追加して CSS で同じ作業を行う方が理にかなっています。 i 要素を斜体にするのに使用できます。 em (強調) を使用すると、より意味がわかりやすくなります。または、CSS を使用して斜体にすることもできます。font font-style: italic big 使用すると、より大きなフォントが生成されます。代わりに見出し(テキストがすでに見出しになっている場合はh1 、 h2 など)を使用して意味を追加するか、CSS のfont-size プロパティを使用してより細かく制御します。 small 小さいフォントを生成します。ここでも、CSS ( font-size ) によってさらに細かい制御が可能になります。 hr 水平線を表示するために使用できます。 CSS デザインでhr を使用することはほとんどありません。CSS のborder-top 、 border-bottom プロパティ、または単純な画像の方が適しています。上記のタグは最新の HTML 標準と互換性がありますが、適切なタグとして期待されるようなコンテンツに対する意味はありません。これらはもっと役に立つかもしれませんが、特に有害というわけではなく、次のような汚いタグの隣に立つと、口の中で溶けないほどの純粋なおいしさの無邪気なバターの塊と簡単に間違われる可能性があります。要素に下線を引くことができ u 。下線付きのテキストには多くの関連性があることを思い出させます。このタグがずっと前に廃止されたのはそのためです。接続されていないテキストに下線を引く必要はありません。 center 要素内の要素を中央に配置するために使用できます。 CSS プロパティtext-align 、 center だけでなく、 left 、 right 、 justify も許可されます。 menu メニューリストを作成するために使用されます。 ul ほど完璧ではありません。順序なしリストの方が汎用性が高く、 ul menu よりも優れているからです。 layer 、CSS によって配置されるという点でdiv 要素に似ています。これは Netscape の古いバージョンでのみ機能するため、もはや役に立ちません。 blink またはmarquee 。大声でノーと言いましょう!当然のことながら、サポートは非常に限られており、非常にひどいジョークにしかなりません。要素のフォント名、サイズ、色を定義するために使用できるfont 、タグの世界ではタグの王という悪名高い称号を当然のように得ています。古いウェブサイト(そして新しいウェブサイトも)がアリの大群のようにページ中に散らばっています。 font タグの増加のほとんどは、 font タグを使用してすべての要素の色とサイズを指定する Web デザイン ソフトウェアによるものです。 font タグは繰り返し要素ごとに表示されるように悪用されます (たとえば、 p 要素を使用するたびに)。一方、CSS は繰り返し要素に適用することも、短いコードで Web サイト全体を制御することもできます。 CSS アプローチを使用すると、 font タグで乱雑になっているページよりもページがスリムになるだけでなく、 font タグを 1 つずつ変更するのではなく、CSS ファイル内の1 行を変更するだけで済むため、メンテナンスも簡単になります。これにより、長期にわたって一貫したデザイン スタイルで Web サイトを維持できる可能性も高まります。 font タグとテーブルの不適切な使用は、Web ページの不要な肥大化を引き起こす主な原因の 2 つです。 属性 適切なタグを使用していると思っていても、いつでも現れる可能性のある厄介な寄生属性が潜んでいます。 name 要素の名前を指定するために使用されます。 input などのフォーム要素では完全に受け入れられますが、他の場所ではname の役割はid 属性に置き換えられています。 text とbgcolor body 開始タグ内のページの基本的なテキスト色と背景色を定義するために使用できます。 CSS のcolor プロパティとbackground-color プロパティをbody セレクターに適用すると、同じことが実現できます。 background bodyタグ内に背景画像を指定できます。 CSS では、background-image などのプロパティを使用して背景画像をより適切に処理できます。 link 、 alink 、 vlink body タグ内でリンク (未訪問、アクティブ、訪問済み) を指定するために使用されます。 CSS の達人である:link 、 :active 、 :visited 役に立ちます。 align 要素のコンテンツを配置するために使用できます ( <div align="center">Stuff</div> など) が、 center タグと同様に、CSS のtext-align プロパティが新しい主役になります。 target さまざまな方法でリンクを開くことができますが、最も一般的な方法は新しいウィンドウを開くことです (例: <a href="wherever.html" target="_blank">Help me</a> )。見た目は良いですが、自分のサイトではこれを行いません。ユーザーは奇妙なもの(新しいウィンドウなど)が表示されることを期待しておらず、最もよく使用されるブラウジング ツールはブラウザーの戻るボタンですが、新しいウィンドウを開くとこのボタンは機能しません。違法であり使用できません。 これらの要素は異なる値を使用することが多いため、画像のwidth やheight 、表のcellpadding やcellspacing などのタグのプレゼンテーション属性は保持されることに注意してください。これは完璧な解決策ではありませんが、ページに画像や表が多数ある場合は、それらを使用する以外に賢明な選択肢はありません。最も混乱を招くプレゼンテーション属性は textarea タグです。このタグには、最新の HTML バージョンでも必須となっているcols とrows という 2 つの有効な属性しかありません。 ラベルは良いが、使い方は悪い 寝室に入るには、かがんで犬用の穴を通らなければなりませんが、待ってください、人間用の取っ手付きのドアもあります!わあ、見てよ、ちょうど一人入るくらいだよ。信じられないかもしれませんが、HTML タグ (良いタグ) を使用するのには、非常に良い理由があります (信じてください!)。使用する前提が良ければ良いほど、より良い結果が得られます。 ユーザーにとっては、HTML タグの構文やセマンティクスよりも Web ページ自体の方が使いやすいです。スクリーン リーダーは、 ul タグやh1 またはh2 の付いたタイトル タグを検出すると、それを強調表示することがよくあります。HTML の世界で最も乱用されるタグはテーブルです。テーブルはレイアウトによく使用されますが、テーブルは設計上、表形式のデータを表示する目的でのみ使用する必要があります。テーブルを使用しないレイアウト アプローチは、禅のような悟りの追求ではありません。Web ページのサイズを大幅に縮小できるだけでなく、メンテナンスや再設計も容易になります。 デザイナーは、ここで説明したタグや属性 (特にレイアウトにテーブルを使用する) を使用して、古いブラウザー (特に Netscape 4) と最新のブラウザーの両方で機能する移行デザインを作成する場合があることに注意してください。 CSS が不十分な Netscape 4 では、テーブルによってプレゼンテーションをより細かく制御できます。残念ながら、このようなユーザーはほとんどおらず、一方でモバイル デバイス ユーザーの数は増加しており、テーブル レイアウトの欠点がはっきりと現れています。上記のテーブルレス設計により、すべてのビューで完全な機能が維持されながら、少数のユーザーに対してわずかなパフォーマンスの変化が生じるだけで、これらの欠点が回避されます。 フレーム ゴルディロックスはシリアルを一杯食べるのがいい考えだと思ったが、突然3匹の大きな肉食哺乳類が現れ、彼女を窓から投げ出した。フレームはシリアルを入れるカップです。見た目は良いかもしれませんが、絶滅の危機に瀕しており、すぐに消えてしまいます。 ほとんどの Web サイトはフレームを使用しておらず、一般ユーザーもドキュメントをページとして扱います。 場合によっては、ユーザーが特定の Web ページをブックマークに追加できないようにしたい場合や、ユーザーに電子メールやインスタント メッセージング ソフトウェア経由で特定の Web ページを推奨させたい場合、Web サイト全体を非常に複雑にして、スクリーン リーダーを使用するユーザーがフレーム間を頻繁に操作しなければならないようにしたい場合、検索エンジンを混乱させたい場合など、フレームを使用すれば十分です。 つまり、フレームワークは複雑さを増し、使いやすさを失わせるだけです。 これらのルールに従う限り、将来間違いを犯すことはないことに注意してください。 1)タグや属性がパフォーマンスとわずかでも相関関係にある場合は、使用しないでください。それが CSS のものです。そして、CSS はそれをより良く実現します。 2)ラベルはその名前が示す目的に沿って使用します。テーブル タグは表形式のデータに使用されます。タイトルにはタイトルタグが使用されます。などなど。 3)特定のコンテンツに適切なタグを使用します。リストには list を使用し、見出しには hx (x = 1 - 7) などを使用します。さらに読む: HTML 上級ガイド: 悪い習慣を断ち切り、標準に移行する - XHTML の互換性 |
>>: lastInfdexOf 関数の MySQL 実装例
サービス.xml Server.xml 構成ファイルは、コンテナー全体を構成するために使用されます。...
Mysql5.7.19バージョンは今年リリースされた新しいバージョンです。最近のMySQLのバージ...
1. はじめにDocker には、タスクを構成する複数の Docker コンテナをオーケストレーショ...
目次TOKEN タイマーリフレッシュ2. access_tokenの内部設計2.1 access_t...
序文ご存知のとおり、Linux は ext4、ext3、ext2、sysfs、securityfs、...
1. 内部結合クエリの概要内部結合は、アプリケーションで非常に一般的な結合操作であり、通常はデフォ...
目次概要ファイル記述子同期、非同期、Promise同期書き込み非同期書き込み(推奨)約束の書き方...
Vue の紹介現在のビッグフロントエンドの時代は、混乱と衝突の時代です。世界は多くの派閥に分かれてお...
LinuxにGeoIPをインストールする yum で nginx-module-geoip をインス...
一般的に ELK スタックとして知られる Elastic スタックは、Elasticsearch、L...
ページを書いているときに、ページの内容が小さくてフッターがページの真ん中に留まってしまうといった状況...
この記事では、カスタムツリーコンポーネントを再帰的に実装するVueの具体的なコードを参考までに共有し...
この記事では、参考までに、計算機のWebバージョンを実装するためのJavaScriptの具体的なコー...
Django アプリケーションを構築して拡張していくと、必然的に特定のタスクをバックグラウンドで自動...
目次mysqldの起動方法方法 1: mysqld方法 2: mysqld_safe方法3: mys...