マークアップ言語 - 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 で虫眼鏡効果を実現するためのアイデアとコード

推薦する

初心者でもjsのtypeofとinstanceofの違いを理解できます

目次1. 型2. インスタンス3. 違い1. 型typeof 演算子は、評価されていないオペランドの...

Weibo の一括フォロー解除機能を実装する JavaScript コード

Weibo ユーザーのフォローを一括で解除するクールな JavaScript コードWeibo には...

nginx で仮想ホストを構成するための詳細な手順

仮想ホストは、インターネット上で実行されているサーバー ホストを複数の「仮想」ホストに分割する特殊な...

Vueは右上隅の時間表示のリアルタイム更新を実装します

この記事の例では、右上隅の時間表示のリアルタイム更新を実現するためのVueの具体的なコードを紹介しま...

ブラウザのスクロールバーのスタイルを変更するための純粋な CSS の例

CSSを使用してブラウザのスクロールバーのスタイルを変更する ::-webkit-スクロールバー{ ...

jsはポップアップウィンドウをクリックすることでポップアップログインボックスを実装します

この記事では、ポップアップウィンドウをクリックしたときにポップアップログインボックスを実現するための...

CSSアニメーションを使用して背景のシームレスな無限ループを実装する例

1. 需要絵が左から右へ無限ループで動く2. コードモバイルデバイスに適用されているため、rem 単...

MySQL ストレステストツール Mysqlslap の使用

1. MySQL独自のストレステストツールMysqlslap mysqlslap は、mysql に...

VueはPCで写真をアップロードする機能を実現

この記事の例では、PC上で写真アップロード機能を実現するためのVueの具体的なコードを参考までに共有...

MySQLテーブルの内容の変更を監視し、MySQL binlogを有効にする

序文binlog は、MySQL のすべての追加、削除、および変更ステートメントを記録するバイナリ ...

MySQLスケーラブル設計の基本原則

目次序文1. スケーラビリティとは何ですか?スケールアウトの利点:スケールアウトのデメリット:スケー...

Linux で iostat コマンドを使用するチュートリアル

序文運用・保守を行う人がスキルを持っていなければ、サーバーを操作するのに恥ずかしさを感じてしまうと言...

jQueryはアコーディオン効果を実装します

この記事では、アコーディオンを実装するためのjQueryの具体的なコードを参考までに紹介します。具体...

CentOS 7.0 (mysql-5.7.21) で複数の MySQL インスタンスを起動する方法

設定手順Linux システム: CentOS-7.0 MySQL バージョン: 5.7.21 Lin...

MySQLオンラインデッドロック分析練習

序文MySQL を学習する際に、MySQL のロック メカニズムについて簡単に理解したことがあると思...