CSS とは何でしょうか? Web ページのテーマスタイルを設定するにはどうすればよいでしょうか?

カスケードスタイルシート (CSS) は、電子文書のデザインを決定するために使用できるプログラミング言語です。簡単な手順（明確なソースコードで提示）の助けを借りて、レイアウト、色、書体などの Web サイト要素を必要に応じて調整できます。カスケードスタイルシートのおかげで、ドキュメントの意味構造とコンテンツは影響を受けません。 CSS は 1990 年代半ばに登場し、現在では World Wide Web の標準スタイルシート言語と見なされています。

CSS とは何ですか?

CSS は HTML と同様に、World Wide Web のコア言語の 1 つです。 HTML を使用して Web サイトにテキストを追加し、意味的に構造化する一方で、CSS を使用してコンテンツのデザインを定義できます。 HTML と CSS は一緒に使用されますが、CSS のデザインディレクティブと HTML 要素は別々に存在します。つまり、CSS がなくても機械は電子文書を読み取ることができます。 CSS を使用すると、ブラウザコンテンツを視覚的に準備し、魅力的な方法で表示できます。

CSS は、World Wide Web Consortium によって開発が続けられている「生きた標準」です。したがって、常に新しい機能と実用的なアプリケーションが発見されることになります。広く使用されるスタイルシート言語は 1990 年代に登場しました。スタイルシートを使用して Web コンテンツを表示するという考え方は、当時はまったく新しいものではありませんでした。しかし、CSS は、HTML にすでに存在する他の表示指向の要素とは 1 つの重要な点で異なります。つまり、ユーザーは、複数のドキュメントと単一のスタイルシートにまたがる要素のグループのデザインルールを定義できるようになりました。

定義: CSS (カスケーディングスタイルシート)
ウェブサイトのビジュアルデザインに使用されるプログラミング言語。たとえば、カスケーディングスタイルシートを使用すると、表示される HTML 要素のフォント、サイズ、または色を決定できます。

CSSの利点と応用分野

成功するウェブサイトは、コンテンツだけでなく、優れたデザインにも左右されます。ユーザーフレンドリーでなかったり、構造が適切でなかったりするウェブサイトでは、ユーザーはすぐに興味を失ってしまいます。ここで、CSS は純粋な HTML では利用できないさまざまなデザインオプションを提供します。

たとえば、CSS を使用すると、特定の仕様を集中的に制御できます。つまり、単一のドキュメント内の類似の要素 (すべてのハイパーリンクや画像など) を 1 つのコマンドで識別し、書式設定できます。デザインの指示は、HTML ドキュメント自体の中でスタイルシートの形式を取る必要はありません。 CSS 指示を外部スタイルシート (つまり別のファイル) に保存すると、他のドキュメントでも使用できるようになります。

HTML 要素の色、形状、書体に関する基本的な表示指示に加えて、CSS にはより複雑なモジュールが追加されました。これらを使用すると、たとえば、出力媒体に応じてアニメーションやさまざまな表現を定義できます。この方法では、すべての可能なメディアに対して同じ HTML ドキュメントを同じ方法で準備できます。このドキュメントではコンテンツとデザインが分離されているため、Web サイトのコードがよりクリーンになります。関連するスタイル言語 SASS はより多くの可能性を提供しますが、CSS を完全に置き換えるものではありません。

CSSステートメントの構造

CSS ステートメントは、電子文書内の要素が持つべき値またはプロパティを決定します。ディレクティブの基本構造は、セレクターと中括弧で構成されます。宣言は括弧内にリストされ、セミコロンで区切られます。各宣言は、名前、コロン、および特定の値で構成されます。最後の文の後、閉じ括弧の前に別のセミコロンを追加することもできますが、必須ではありません。たとえば、次の例の CSS 指示では、見出し h1 をフォントサイズ 12 で青色で表示する必要があります。

 h1 {色:青; フォントサイズ:12px}

CSS を Web サイトに統合するにはどうすればよいでしょうか?

内部スタイルシートと外部スタイルシートの両方を使用して、CSS を電子ドキュメントに組み込むことができます。さらに、インラインスタイルを使用して、要素の HTML ソースコードに属性を直接配置することもできます。以下では、CSS を HTML に統合する 3 つの方法について説明します。

外部スタイルシート

外部スタイルシートでは、CSS 命令は「.css」で終わる外部ファイルで定義され、「link」タグを使用して HTML ファイルに統合されます。コンテンツとデザインは完全に分離されており、簡単に変更できるため、これが最も一般的なアプローチです。リンクは、HTML ドキュメントの「head」領域に次のように作成されます。

 <!DOCTYPE html>
<html>
<ヘッド>
<link rel="スタイルシート" href="スタイルシート.css">
</head>
<本文>
<h1>これは見出しです</h1>
<p>これは段落です</p>
</本文>
</html>

内部スタイルシート

ここで、すべての CSS ディレクティブを HTML ファイルに追加します。これらは関連ファイルにのみ適用されることに注意してください。内部スタイルシートの場合は、次のように HTML ドキュメントの「head」領域に「style」要素を挿入します。

 <!DOCTYPE html>
<html>
<ヘッド>
<スタイル>
h1 {色:青; フォントサイズ:12px;}
</スタイル>
</head>
<本文>
<h1>これは見出しです</h1>
<p>これは段落です</p>
</本文>
</html>

インラインスタイル

内部スタイルシートと同様に、CSS 命令は HTML ファイル内に含まれています。ただし、重要な違いが 1 つあります。対応する属性は要素の開始タグに直接配置され、他の要素には適用されません。この方法は、一般的な設計指示に入りたくない場合に特に便利です。

 <!DOCTYPE html>
<html>
<本文>
<h1 style="color:blue; font-size:12px;">これはタイトルです</h1>
<p>これは段落です</p>
</本文>
</html>

CSSとHTMLの相互作用

上記の例は、CSS は従来の HTML 構造と組み合わせてのみ使用できることを示しています。 HTML は段落、リスト、表を通じてコンテンツを構造化し、CSS は視覚的なデザインを担当するため、これら 2 つの Web 言語は互いに補完し合い、このように密接に関連しています。カスケードスタイルシートの作成は、通常、「ボックス」の設計を中心に行われます。 HTML ドキュメントの構造は、要素がボックスのように互いに積み重ねられる入れ子の原則に基づいています。サイト上のスペースを占める各「ボックス」には、次のプロパティがあります。

パディング: 要素のコンテンツの周囲のスペース
border: パディングの外側の線
余白: 境界線の外側のスペース

これらの「ボックス」は、サイズ、形状、色を指定してフォーマットされます。これらの単純なプロパティに加えて、テキストに影を挿入したり、画像フィルタリング機能を追加したり、フォームやその他の要素を強調表示したりするための、より複雑な CSS ディレクティブもあります。

スタイルシート言語の基本原理を理解すれば、その適用は非常に簡単です。ウェブサイトをよりプロフェッショナルに見せるための CSS のヒントについて詳しく学びましょう。

<<: ウェブサイト開発者が知っておくべきいくつかの基本的なSEOの考慮事項

>>: HTTP 500 内部サーバーエラーとはどういう意味ですか?どのように解決すればよいでしょうか?