マークアップ言語 - Web アプリケーション CSS スタイル

マークアップ言語 - Web アプリケーション CSS スタイル
123WORDPRESS.COM HTML チュートリアル セクションに戻るには、ここをクリックしてください。 CSS チュートリアルを表示するには、ここをクリックしてください。
上記:マークアップ言語 - 合理化されたタグ。第10章 CSSの適用
最初の部分では、主にマークアップ構文の例に焦点を当て、CSS をタグに適用してデザインし、スタイルの詳細を指定する方法についても説明します。第 2 章では、ドキュメント、Web サイト、または単一のタグに CSS を適用するいくつかの方法について説明します。さらに、以前のバージョンのブラウザーから CSS コンテンツを非表示にする方法についても説明します。これにより、すべてのブラウザーとデバイスで読み取ることができるマークアップ構造に影響を与えずに高度なテクニックを使用できるようになります。
章の最後にある「拡張スキル」ユニットでは、スクリプトを書かずにフォントや色を切り替えたり、複数のテーマを作成したり、スタイルシートを置き換えたりする方法について紹介します。ファイルに CSS を適用するにはどうすればよいでしょうか。
ここでは、ドキュメントに CSS を適用する 4 つの方法について説明します。各方法にはそれぞれ長所と短所があり、状況に応じて最適な選択が異なります。ここで説明する各方法では、合法的な XHTML 1.0 Transitional 構文、<html> タグ、および <head> 構成を使用します。
まずは方法Aから始めましょう。方法A: <style>タグ

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
「http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd」を参照してください。
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<ヘッド>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>CSS の適用</title>
<スタイル タイプ="text/css">
<![CDATA[
...CSS 宣言はここに記述します...
]]>
</スタイル>
</head>

このアプローチはインライン スタイル シートとも呼ばれ、すべての CSS 宣言を (X)HTML ファイルに直接記述できます。<style> タグはページの <head> にあり、必要なスタイルを含めることができます。
type 属性に text/css を指定すると、使用しているスタイル言語をブラウザが理解できるようになり、省略できなくなります。また、スタイル ルールを処理できないブラウザからこのコンテンツを非表示にするために、W3C が推奨する CDATA コメント構文も使用します (http://www.w3.org/TR/xhtml1/#h-4.8)。
: : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
「http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-transitional.dtd」
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<ヘッド>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>CSS の適用</title>
<link rel="スタイルシート" type="text/css" href="styles.css" _fcksavedurl=""styles.css"" />
</head>

方法 B は、外部スタイルシートにリンクする方法を示しています。すべての CSS 宣言を別のドキュメントに配置し、(X)HTML <head> の <link> タグを使用してそのコンテンツを参照します。
ドキュメントの場所は href 属性で指定します。これは相対パス (上記の例のように) または絶対パス (スタイル シートの完全な "http://" の場所を記入) にすることができます。また、<link> は単一のタグまたは空のタグであり、末尾に / を付けて閉じる必要があることに注意してください。ドキュメントを分ける = メンテナンスが簡単 すべての CSS ルールをマークアップ コンテンツとは別のファイルに入れることには明らかな利点があります。Web サイト全体のスタイル変更は、このファイルに対して行うことができ、方法 A のように各ページの CSS 宣言を繰り返す必要はありません。
もちろん、これは、数百、数千のページが単一のドキュメント内で同じスタイルを共有する大規模な Web サイトでは重要です。リンクされた外部スタイルシートをダウンロードするもう 1 つの利点は、ドキュメントは通常 1 回だけダウンロードされ、その後はブラウザーがキャッシュを使用するため、同じページや同じスタイルシートを参照する他のページを繰り返し表示するときに必要なダウンロード時間が節約されることです。まだ完全に隠されていません方法 A と同様に、方法 B も部分的な CSS 機能しかサポートしていない古いブラウザーによって解釈される可能性が高く、最新のブラウザー用に設計されたスタイルは、それをサポートしていないブラウザーで混乱を引き起こす可能性があります。
うーん...この問題について言及するのはこれで2回目ですが、次の方法で解決するはずですよね? メソッド C: @import

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
「http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-transitional.dtd」
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<ヘッド>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>CSS の適用</title>
<スタイル タイプ="text/css">
<![CDATA[
@import "styles.css";
]]>
</スタイル>
</head>

方法 B と同様に、@import を使用すると、相対パス (上記の例のように) または絶対パスを使用して外部ファイルから CSS 定義をインポートできます。
方法 C には、<link> タグを使用する場合と同じ利点があります。スタイル シートは外部ドキュメントに配置されるため、1 つのドキュメントを変更および更新するだけで Web サイト全体を変更でき、簡単かつ迅速に実行できます。外部スタイル シートはブラウザーによってキャッシュされるため、同じスタイル シートをインポートするすべてのページのダウンロード時間が節約されます。 かくれんぼ 方法 C を使用する主な利点は、Netscape のバージョン 4.X 未満では @import 構文がサポートされていないため、参照される CSS コンテンツが「非表示」になることです。これは間違いなく便利な手法です。レイアウトなどのデザインの詳細を処理する高度な CSS 構文を記述できるため、これを処理できる最新のブラウザーではそれらを表示でき、古いブラウザーではこれらの構文を無視できます。
Netscape 4.x の問題は、CSS サポートが実際にサポートしているブラウザと同等であると考えていることです。そのため、Netscape 4.x を除いて、正しい効果を表示するかどうかをブラウザ自身が判断できるようにしています。
これは、標準に従って Web サイトを設計する際の重要なポイントです。構造マークアップ コードと表示モードを分離し、サポートされているブラウザーにレイアウトの詳細やその他のスタイルを提供するようにしてください。古いブラウザーは構造コンテンツを簡単に読み取って表示できますが、それらのために隠された高度な CSS ルールを処理できません。スタイルをオンにして、スタイルをオフにします。図 10-1 と 10-2 を見て、比較してください。これは、完全な CSS を使用した個人の Web サイトです。次に、CSS の表示効果をオフにします (古いブラウザーの表示効果に非常に近いはずです)。CSS のない構造は依然として非常に明白で、誰にとっても読みやすく使いやすいです。レイアウトを表示するために必要な CSS を隠さないと、古いバージョンのブラウザーのユーザーは、読みにくいコンテンツが乱雑に表示される可能性があります。

図10-1 CSSを使用した私の個人ウェブサイト

図 10-2 CSS を使用しない同じページは、古いブラウザーではこのように表示されることがあります。 方法 B と方法 C を組み合わせて複数のスタイルシートを適用する 1 つのドキュメントに多数のサブスタイルシートを含めると便利な場合があります。たとえば、すべてのレイアウト ルールを 1 つのドキュメントに含め、フォント設定を別のドキュメントに含めることができます。大規模で複雑なデザインの場合、こうすることで多数のルールを管理しやすくなります。 カメレオン効果 Fast Company マガジンの Web サイトで作業していたとき、毎月 Web サイトの色を変更して、最新号のマガジンの表紙イメージに合わせたいと考えました。定期的な変更を簡素化するために、色に関連するすべての CSS ルールを 1 つのドキュメントに含め、毎月は変更しないその他のルールを別のドキュメントに入れました。
デザインを構成する何百もの他のルールの中で変更が必要なコンテンツをゆっくりと探す必要がなく、毎月すべての色をカバーする方がはるかに簡単で迅速です。このドキュメントを変更するだけで、Web サイト全体の色がすぐに変わります。 やり方は？方法 B と方法 C を組み合わせて、複数のスタイルシートを導入します。この方法は、方法 B のデモと同様に、ページの <head> にある <link> タグを使用して CSS メイン ドキュメントを参照し、styles.css にリンクします。
style.css の内容には、必要に応じて他の CSS ファイルをインポートするための @import ルールがいくつか含まれているだけです。
たとえば、レイアウト用、フォント用、色用の 3 つのスタイルシートをインポートする場合、styles.css の内容は次のようになります。

/*古いブラウザはこれらのインポートルールを理解しません*/
@import url("layout.css");
@import url("fonts.css");
@import url("colors.css");

この方法では、サイト全体で同じ <link> タグを使用して、styles.css ファイルのみを参照できます。このドキュメントは、@import ルールを使用して他のスタイルシートをインポートし続けることができます。新しいスタイルシートをこのドキュメントに追加して、サイト全体で機能させることができます。
これにより、CSS の更新と置き換えが非常に簡単になります。たとえば、将来的に CSS を突然 4 つのファイルに分割する必要が生じた場合、すべての XHTML マークアップ ソース コードを変更することなく、このドキュメントの @import ルールを変更するだけで済みます。メソッド C の @import ルールを使用して古いブラウザーから CSS を隠す場合、使用できる別のトリックがあります。それは、CSS カスケード効果を使用し、メソッド A またはメソッド B を使用して、古いブラウザーと新しいブラウザーの両方でサポートされているローファイ効果を提供し、次に @import を使用して、サポートされている他のブラウザーに高度な効果を提供することです。
古いブラウザではサポートされているコンテンツのみが取得されますが、新しいブラウザでは必要なすべてのスタイルが取得されます。
次に、このテクニックのコードがどのようになっているかを見てみましょう。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
「http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-transitional.dtd」
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<ヘッド>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>CSS の適用</title>
<link rel="スタイルシート" type="text/css" href="lofi.css" _fcksavedurl=""lofi.css"" />
<スタイル タイプ="text/css">
@import "hifi.css";
</スタイル>
</head>

ここで、lofi.css にはリンクの色やフォント サイズなどの基本的な CSS ルールが含まれ、hifi.css にはレイアウト、配置、背景画像などの高度なルールが含まれます。
スクリプトを記述したり、サーバー側でブラウザのバージョンを識別する他の方法を必要とせずに、Lo-Fi バージョンと Hi-Fi バージョンの両方のスタイルを提供できます。順序は重要です。マークアップ ソース コードで <link> タグと <style> タグが指定される順序は重要です。CSS カスケードはルールの優先順位を参照し、ルールが表示される順序によって決まります。
たとえば、最近のブラウザのほとんどは両方のアプローチをサポートしているため、すべてのスタイルシートをダウンロードし、その中のすべてのスタイルを適用します。このとき、hifi.css のスタイル ルールは、同じタグに対して lofi.css で指定されたスタイルを上書きします。なぜでしょうか? hifi.css はマークアップ ソース内で lofi.css の後に表示されるためです。
古いブラウザは @import ルールをサポートしていないため hifi.css を無視し、lofi.css で定義されたスタイルのみを使用します。 カスケード機能を活用する CSS カスケード機能をさまざまな方法で活用します。 たとえば、Web サイト全体でレイアウト、配置、フォント、色などに外部 CSS を使用している場合は、各ページでこのスタイルシートを @import して、これらのルールが古いブラウザから見えないようにする必要があります。
ウェブサイトにレイアウトと配置設定を共有したいが、フォントや色を調整する必要があるページがある場合、このページ (ウェブサイトの他のページとは異なります) では、CSS メイン ドキュメントをインポートできます。インポートが完了すると、このページの特別なスタイルを定義する 2 番目の CSS ドキュメントがすぐにインポートされます。2 番目の CSS ファイル内のルールは優先され、同じタグの最初の CSS ファイルで指定されたスタイル ルールを上書きします。
例を見てみましょう。master.css ファイルには、Web サイト全体の構造、フォント、その他の CSS ルールが含まれていますが、custom.css ファイルは特定のページでのみ参照され、いくつかの特別なタグのスタイル設定を上書きします。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
「http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-transitional.dtd」
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<ヘッド>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>CSS の適用</title>
<スタイル タイプ="text/css">
@import "master.css";
@import "custom.css";
</スタイル>
</head>

custom.css はマークアップ ソース コードの 2 番目に表示されるため、同じタグに指定するスタイルは master.css で指定されたスタイルよりも優先されます。
たとえば、main.css で <h1> タグに赤いセリフ フォントを使用し、<h2> タグに青いセリフ フォントを使用する必要があるとします。

h1 {
フォントファミリー: Georgia、セリフ;
色: 赤;
}
h2 {
フォントファミリー: Georgia、セリフ;
色: 青;
}

特定のページで、<h1> タグのスタイル設定のみを変更し、<h2> のスタイルを使用します。その場合、custom.css で、<h1> の新しいスタイルを宣言するだけで済みます。

h1 {
フォントファミリー: Verdana、サンセリフ;
色: オレンジ;
}

この宣言は、master.css の宣言を上書きします (custom.css がその後にインポートされるため)。ページで最初に master.css をインポートし、次に custom.css をインポートすると、<h1> タグはオレンジ色の Verdana フォントを使用し、<h2> タグは青色の serif フォントを引き続き使用します。これは、master.css の後者の宣言が custom.css によって上書きされないためです。
CSS カスケードは、共通のスタイルを共有するための優れたツールであり、変更が必要なルールのみをオーバーライドできます。
方法D: インラインスタイル

<h1 style="font-family: Georgia, serif; color: orange;">これはタイトルです</h1>

これは、私たちが遭遇した 4 番目の CSS 適用方法であるインライン スタイルです。ほぼすべてのタグにスタイル属性を追加できるため、上記の例のように、CSS スタイル ルールをタグに直接適用できます。
インライン スタイルはカスケードの一番下にあるため、すべての外部スタイル宣言と、<head> の <style> タグで宣言されたルールをオーバーライドします。
これは、ページ上のあらゆる場所にスタイルを追加する簡単な方法ですが、代償が伴います。スタイルはタグに結び付けられています。ページのスタイル設定時に方法 D に頼りすぎると、コンテンツとプレゼンテーションを分離できなくなります。戻って変更する場合、マークアップ ソース コードを調べる必要があります。CSS を別のファイルに入れると、メンテナンスがはるかに簡単になります。
メソッド D を乱用することは、<font> などの表示タグでマークアップ ソース コードを汚すことと変わりません。これらのデザインの詳細は、常に他の場所に配置する必要があります。実際の状況では注意して使用してください。もちろん、インライン スタイルを使用する機会もあります。ページにスタイルを追加する必要があるが、外部ファイルにアクセスしたり、<head> を変更したりできない場合は、インライン スタイルが役立ちます。また、他のタグと共有する予定がない場合に一時的にスタイルを適用することもできます。
たとえば、サイトにチャリティーセールを告知するページがあり、後で削除する予定で、そのページに独自のスタイルを設定したい場合は、それらのスタイルルールを永続的なスタイルシートに追加するのではなく、マークアップにインライン化することをお勧めします。
やってみましょう。ただし、これらのスタイルは簡単に変更したり、ページ全体やサイト全体に適用したりすることはできないことに注意してください。
前のページ1 2 3 次のページ 続きを読む

<<:  MySQL MHA のセットアップと切り替えに関するいくつかのエラー ログの概要

>>:  js で虫眼鏡効果を実現するためのアイデアとコード

推薦する

dockerでマウントされたディレクトリが読み書きできない問題を解決する

次のコマンドを使用してコンテナを作成し、ローカルの /home/dock/Downloads ディレ...

CSS3のwebkit-box-reflectを巧みに使用して、さまざまな動的効果を実現します。

かなり前の記事で、 -webkit-box-reflectプロパティについて説明しました。リフレクシ...

MySQL 5.7.19 Winx64 ZIP アーカイブのインストールと使用に関する問題の概要

今日はMySQLのインストール方法を学びましたが、その過程でいくつか問題が発生しました。関連記事をい...

DockerはホストのMysql操作に接続します

今日、会社のプロジェクトでは docker を設定する必要があります。Windows に正常にインス...

Vue echarts は棒グラフの動的な表示を実現します

この記事では、棒グラフの動的な表示を実現するためのvue echartsの具体的なコードを参考までに...

JavaScript デザインパターン プロキシパターンの学習

目次概要実装保護エージェント仮想エージェント画像の遅延読み込みを実現する仮想プロキシ概要プロキシ パ...

1 つの記事で Nginx ロケーション マッチングの実装を理解する

チームはフロントエンドとバックエンドを分離しているため、フロントエンドが Nginx とノード層を引...

Docker用国産イメージウェアハウスの使い方

1. 問題の説明何らかの理由により、中国でのDockerイメージのダウンロード速度は特に遅くなります...

MySQL 8.0 オンライン DDL クイック列追加の概要

目次問題の説明MySQLオンラインDDLで列を追加する従来の方法01 コピー方法02 インプレースメ...

Nginx 設定ファイルの詳細な説明と最適化の提案ガイド

目次1. 概要2. nginx.conf 1) 設定ファイルの場所2) ワーカープロセス3) イベン...

スライド効果を実現するためのネイティブJavaScript

ページ、特にホームページを作成するときは、通常、Web サイト全体の他のメイン ページにリンクできる...

React でのポータルとエラー境界処理の実装

目次ポータルエラー境界処理エラー境界を使用しない場合はどうなりますか?注記ポータルスロットとも言えま...

MySQLキーワードDistinctの詳細な紹介

MySQLキーワードDistinctの使い方の紹介DDL SQLを準備します: テーブルテストを作成...

MySQL データベースの基本的な SQL ステートメントの概要

この記事では、例を使用して、Mysql データベースの基本的な SQL ステートメントについて説明し...

html mailto（メール）の実用化について

ご存知のとおり、mailto は Web デザインと制作において非常に実用的な HTML タグです。...