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

推薦する

LAMP ソースコードを使用したエンタープライズレベルのインストールチュートリアル

目次LAMPアーキテクチャ1.ランプの紹介2. WebサービスワークフローWebサーバーのリソースは...

W3C が推奨するモバイル Web マークアップ言語 XHTML Basic 1.1

W3C は最近、「 XHTML Basic1.1 」と「 Mobile Web Best Prac...

MySQLでヘッダー付きのCSVファイルをエクスポートする方法

公式ドキュメント http://dev.mysql.com/doc/refman/5.7/en/se...

Centos7.3は起動時に自動的に起動または指定されたコマンドを実行します

Centos7では、/etc/rc.d/rc.localファイルの権限が削減されており、実行権限があ...

MySQL でストアド プロシージャを作成し、データ テーブルに新しいフィールドを追加する方法の分析

この記事では、例を使用して、MySQL でストアド プロシージャを作成し、データ テーブルに新しいフ...

JSベースの手持ち連射機能＋テキスト揺れ特殊効果コードの簡単実装

少し前にTikTokで揺れる連打が流行っていたので真似してみることにしました。さっそく効果をみてみま...

React Hooksコンポーネント間で値を渡す方法の詳細な説明（tsを使用）

目次父から息子へ息子から父へクロスレベルコンポーネント（親から子孫）父から息子へpropsを通じて値...

CSS でベジェ曲線の実装を反転する方法

まずは、以前書いた CSS カルーセルアニメーション効果を見てみましょう。アニメーションの遷移をスム...

Vue フロントエンドで PDF を生成してダウンロードする方法

目次1. インストールと導入2. PDFファイルをパッケージ化してエクスポートする方法構成の詳細PD...

同じレベルの要素で Position:fixed と margin-top を一緒に使用する場合の CSS の問題

問題の説明CSS を使用して上部の固定効果を実現したいと思います。 margin-top と pos...

MySQL ユーザー権限管理の実装

1. MySQL の権限の概要MySQL には、権限を制御する 4 つのテーブルがあります。user...

Javascriptはセキュリティ検証に整合性属性を使用します

目次1. スクリプトタグを使用してファイルをインポートする1. ローカルファイルをインポートする2....

Docker 上で Redis クラスターを構築する

目次1. イメージをプルする2. Redisコンテナを作成する3. コンテナを起動するためにクラスタ...

MySQL 8.0.15 winx64 圧縮パッケージのインストールと設定方法のグラフィックチュートリアル

この記事では、MySQL 8.0.15 winx64 圧縮パッケージのインストールと設定方法を参考ま...

ウェブ計算機を実装するためのjs

HTML、CSS、JS を使用してシンプルな Web 計算機を作成する方法は?コンピュータには次の...