CSSスタイルシートを効率的に使用するためのヒント: スタイルシートの力を最大限に活用する

インターネット経済の継続的な発展に伴い、インターネット上の専門ウェブサイト、公共サービスウェブサイト、企業ポータルの数は急速に増加しており、各ウェブサイトの情報量も爆発的な成長傾向を示しています。膨大な量の情報がある場合、Web ページ上の各列を追加または削除するのは非常に複雑なプロセスになります。 Web ページの保守と更新の効率を向上させるために、スタイルシートを使用すると、パーソナライズされたパフォーマンスを損なうことなく、1 つのファイルを変更するだけで、数百の Web ページの外観を同時に変更できます。スタイルシートのパワーと柔軟性を最大限に活用するために、著者はスタイルシートを効果的に使用する方法について自身の経験をいくつか共有したいと思います。

1. 1つのWebページにCSSをインポートする複数の方法

HTML に CSS を導入する方法は多数あります。直接挿入する方法、外部スタイルシートへのリンクを使用する方法、CSS の「@import」を使用してスタイルシートをインポートする方法、内部要素の「STYLE」タグを使用してスタイルシートを定義する方法などがあります。一部のネットユーザーからは、これらの紹介方法を同じウェブページで同時に呼び出すことは可能か、混乱が生じるのではないかという質問が寄せられました。実は、それほど心配する必要はありません。これが「カスケーディングスタイルシート」と呼ばれる理由です。ブラウザは、Web ページ内のスタイルシートを一定の順序で処理します。まず、ページ内に直接挿入された CSS があるかどうかを確認します。ある場合は、最初にそれを実行し、この文内の他の CSS は無視します。次に、Web ページのソースコード内の「STYLE」タグを確認し、見つかった場合はそれを実行します。次に、「@import」によってインポートされた内部スタイルシートと、リンクされた外部スタイルシートを順番に確認します。したがって、1 つの Web ページで複数の CSS インポートメソッドを同時に呼び出すことができます。

2. CSS外部ファイルを素早く作成する

CSS を初めて学ぶ Web デザイナーにとって、WordPad などのエディターを使用して CSS 外部ファイルを作成するのは非常に困難です。 Dreamweaver は CSS を非常によくサポートしているので、これを使用すると非常に簡単になります。具体的には、まずウェブサイトのウェブページで使われる可能性のあるフォーマットの名前を紙に書き出し、Dreamweaver の編集ウィンドウで CSS パネルを呼び出して、一つずつ定義し、空白のページに関連コンテンツを書きながら定義と試行をします。結果に満足できない場合は、すぐに修正します。すべて定義したら、メモ帳を使用して空の CSS 外部ファイルを作成し、定義した CSS を〈head〉と〈/head〉の間にコピーすれば完了です。

3. 背景のパターンを静止させる

ウェブページを 1 つの画面に完全に表示できない場合、画面外のコンテンツを閲覧するために水平スクロールバーと垂直スクロールバーを使用することがよくあります。スクロールバーを動かすと、画像とテキストは通常一緒に移動します。では、背景画像がテキストと一緒に「スクロール」するのを防ぐ方法はあるのでしょうか。この目的を達成するには、CSS を使用できます。次のソースコードを Web ページのタグとタグの間に直接挿入するだけです。bg.jpg は Web ページの背景画像です。これを必要な背景画像に置き換えることができます。

コードをコピー

コードは次のとおりです。

〈スタイルタイプ = "text/css"〉
〈!--
BODY { 背景: 紫 url(bg.jpg);
背景繰り返し:繰り返しy;
背景添付:固定
}
--〉
</スタイル>

4. ウェブページの最初の行を自動的にインデントする

DreamWeaver を使用して Web ページを設計するユーザーは、DreamWeaver でスペースを入力するのがあまり便利ではないことを知っています。この欠点を補うために、CSS を使用して「最初の行のインデント」機能を設計できます。 DreamWeaver のデザインインターフェイスを開き、インターフェイスで CSS プロパティ定義ダイアログボックス (.style1 のスタイル定義) を見つけ、ダイアログボックスの [ブロック] タブの下にある [text-indent] プロパティ定義設定項目で [最初の行のインデント] 機能を設定します。ここで注意すべき点は、いわゆる「最初の行」とは、コンテンツの各段落の最初の行を指します。つまり、Enter キーを直接押すと、新しい段落が形成されるということです。インデントの単位としては、「em」（文字）を使用するのが最適です。たとえば、中国語の組版では、各段落の先頭を中国語 2 文字分インデントする必要があります。CSS の設定は次のとおりです。

コードをコピー

コードは次のとおりです。

〈スタイルタイプ = "text/css"〉
〈!--
.style1 { テキストインデント: 2em}
--〉
</スタイル>

5. CSSを使用してテキストの背景を設定する

DreamWeaver では、テキストに異なる背景色を追加する必要がある場合、操作は非常に簡単です。プロパティパネルのテキスト色ボタンをマウスでクリックし、ポップアップカラー設定バーから必要な色を選択するだけです。しかし、テキストに異なる背景色を追加したい場合はどうすればよいでしょうか? DreamWeaver3 にはこの機能がないため、CSS を巧みに使用してこの目的を達成できます。具体的な操作手順は、まず背景色を定義する CSS を作成します。たとえば、この CSS に bjstyle という名前を付け、次に Web ページで色を設定する必要があるテキストを選択して、ツールバーの「bjstyle」をクリックします。以下は背景色を定義する CSS ソースコードです。

コードをコピー

コードは次のとおりです。

〈スタイルタイプ = "text/css"〉
〈!--
.bjstyle { 背景: #cc00bb}
--〉
</スタイル>

6. 指定したコンテンツに境界線を追加する

DreamWeaver では、CSS の強力な定義機能を使用して、特定のコンテンツに境界線を追加できます。定義するときは、まず DreamWeaver のデザインインターフェイスを開き、このインターフェイスで CSS プロパティ定義ダイアログボックス (.style1 のスタイル定義) を見つけます。このダイアログボックスの [境界線] 設定項目は、指定されたコンテンツの境界線を定義するために使用されます。そのうち、[上]、[下]、[左]、[右] の設定列は、指定されたコンテンツの周囲の境界線の太さと色をそれぞれ定義するために使用されます。これらの設定を行った後、下の [スタイル] で線の種類も定義する必要があります。そうしないと、CSS のデフォルトの線の種類は [なし] であるため、定義された境界線が表示されません。以下は、上の境界線を細い青い線、左の境界線を中くらいの太さの緑の線として定義する CSS ソースコードです。

コードをコピー

コードは次のとおりです。

〈スタイルタイプ = "text/css"〉
〈!--
.style1 { border: solid; border-width: thin 0px 0px medium; border-color: #0000FF black black #00FF00}
--〉
</スタイル>

7. スタイルシートを使用してハイパーリンクの色を制御する

ハイパーリンクを注意深く調べると、ブラウザがハイパーリンクを処理するデフォルトの方法は、まだアクセスされていないハイパーリンクを下線付きの青いテキストで表示し、アクセスされたハイパーリンクを濃い紫色の下線付きの濃い紫色のテキストで表示することであることがわかります。これらのデフォルトの色は、しばらくすると飽きてしまい、Web ページの背景色と一致しなくなる可能性があります。したがって、ハイパーリンクの表示色を自分の視覚的な要件に応じて自由に変更し、自分のスタイルをよりよく反映することができます。次に、ハイパーリンクの表示色を変更するためのソースコードを紹介します。コードは次のとおりです。

このソースコードを HTML ファイルの ... 間に追加すると、この Web ページ上の任意のハイパーリンクで機能します。このセクションのコードは次のとおりです。

A:link {text-decoration: none; color:blue} は、ハイパーリンクがまだアクセスされていないこと、下線がなく色が青であることを意味します。

A:visited { color:red; text－decoration:line－through } は、ハイパーリンクを訪問すると、その色が赤に変わり、取り消し線が引かれることを示します。

A:active { color:white; text-decoration:underline } は、ハイパーリンクがアクティブなときに、その色が白に変わり、下線が付くことを意味します。

A:hover {text-decoration:none;color:＃FF0000;background-color:black} は、マウスがハイパーリンクに移動すると下線が付かず、テキストの色が黄色に変わり、背景色が黒になることを意味します。

上記の説明によれば、さまざまな状態のハイパーリンクの表示色を好みの色に変更して、自分の個性をよりよく表現することができます。

8. 選択したテキストに背景画像を追加する

DreamWeaver では、指定したテキストに背景画像を追加することもできます。操作プロセスは、指定したテキストに背景色を追加する場合と似ていますが、選択した背景色が、選択した読み込まれた背景画像に置き換えられる点が異なります。具体的な操作手順は、まず背景色を定義する CSS を作成します。たとえば、この CSS に txstyle という名前を付け、次に Web ページで色を設定する必要があるテキストを選択して、ツールバーの「txstyle」をクリックします。以下は背景画像を定義する CSS ソースコードです (test.gif は読み込まれた背景画像です)。

コードをコピー

コードは次のとおりです。

〈スタイルタイプ = "text/css"〉
〈!--
.txbgstyle { 背景画像: url(test.gif)}
--〉
</スタイル>

<<: テーブルの最大幅と最小幅を設定する際の互換性の問題と解決策の詳細な説明

>>: webpack イメージを base64 に変換する例