ホームページの見栄えをよくしよう

最終更新日 2024年10月31日

「スタイルシート」とは、ホームページをデザインする仕組みのことで、「CSS」とはその記述の1つです。
「CSS」とは、「Cascading Style Sheets(カスケーディング・スタイルシート)」の略です。

「HTML」タグだけでは実現が難しいデザインのコントールが可能で、制作する上で非常に重要な仕組みになります。
スタイルシートを使用するには、HTMLファイルにおいて、次の宣言が必要になります。

<META http-equiv=”Content-Style-Type” content=”text/css”>。
これで「このHTMLファイルはCSSスタイルシートを使います」という宣言ができたことになります。
1つの決まりですので、必ず記述しましょう。

例えば、文字の色を青にしたい、というような場合は、「color: blue」となり、これをより具体的に記述するとp { color: blue }のようになります。
これは<p>で囲った段落の中の文字を青色に指定する、という命令です。
ちなみに<p>の部分を「セレクタ」、「color」の部分を命令文で「プロパティ」、「blue」の部分を「値」といい、「値」はHTMLの記述で「属性値」に該当します。

「セレクタ」でどの要素にCSSを適用させるかを指定し、 {~} の中にプロパティと記述します。
プロパティや値を複数指定する場合には、 ; (セミコロン)で区切りを入れます。
次にどう「CSS」を指定するか?ということですが、「head」タグで「CSS」を宣言する方法があります。

「style」タグを使用し、「type」属性の値を「text/css」と指定します。
ただ、この場合には、HTMLファイルの中の<body>タグで囲まれた部分は、全て青文字になってしまうため、<p style=”color: blue”>***</p>とすることで、<p>で囲まれた部分の文字だけが青くなり、他の文字色は変えないようにできます。

温泉旅館・ホテル向け個人面談セミナー│ハンズバリュー公式HP