CSS(Cascading Style Sheet)とは
HTML/CSS基礎 第13回ではCSSの概要について解説していきます。
CSSとは、HTMLで作成したWebサイトのデザインの部分を担う言語のことを言います。作成したHTMLにCSSを適用させるには、以下の3つの方法があります。
①作成したCSSファイルを読み込む
②HTMLファイルの<head>タグ内に設定する
③HTMLファイルの各タグに直接書き込む
今回はこの3つの方法について説明させていただきます。
①作成したCSSファイルを読み込む
CSSファイルを作成し、HTMLファイルでそれを読み込む方法で、最も一般的な方法となります。HTMLファイルの各タグに対して同一の装飾を施すことができるため、一括して管理することができ、また、サイト全体の統一感も演出することができます。CSSファイルの拡張子は「.css」とします。
適用方法
HTMLファイルの<head>タグ内に<link>タグを使用してCSSファイルを指定します。「rel属性」には「stylesheet」を指定し、「href属性」にはHTMLファイルからのみたcssファイルのパスを指定します。
<head>
<meta charset="UTF-8">
<title>猫の実態</title>
<meta name="description" content="猫の日常を紹介">
<link rel="stylesheet" href="css/style.css">
</head>3つの方法の中で最も一般的ですが、CSSの効果の優先順位が最も低い方法となります。
②HTMLファイルの<head>タグ内に設定する
HTMLファイルの<head>タグ内にCSSを書き込みます。この方法は書き込んだHTMLファイルにのみ適用することができるため、特定のページのみデザインを変更したい場合に使用します。
適用方法
<style>タグを使用して、必要なCSSを書き込みます。
<head>
<meta charset="UTF-8">
<title>猫の実態</title>
<meta name="description" content="猫の日常を紹介">
<style>
h1{color:red;}
p{font-size: 10px;}
</style>
</head>今回のサンプルの場合、「<h1>タグで囲まれた部分については赤い文字で表示する。」「<p>タグで囲まれた範囲はフォントのサイズを10pxにする。」というCSSを適用させています。
この方法は①の方法よりもCSSの効果の優先順位が高くなります。（適用させたCSSファイルがあり、同じタグに対して相反する指示があった場合、今回の方法のほうが優先されます。）
③HTMLファイルの各タグに直接書き込む
最後に紹介するのは、HTMLの各タグに直接CSSを書き込む方法です。この方法を採用した場合、CSSの効果は直接CSSを書いたタグにのみ適用されます。一部のデザインにのみ違うデザインを施したい場合に使用します。
適用方法
「style属性」を使用して適用させます。
<head>
<meta charset="UTF-8">
<title>猫の実態</title>
<meta name="description" content="猫の日常を紹介">
</head>
<body>
<h1 style="color:red;">猫の一日</h1>
<p style="font-size:10px">ひたすら寝ています。</p>
</body><head>タグ内に記載する方法とでは書き方に違いがあることが確認できるかと思います。この方法は3つの方法の中で最もCSSの効果の優先順位が高くなります。
まとめ
いかがでしたでしょうか？少しCSSについてご理解いただけたことと思います。次回からは①のCSSファイルを作成する方法をメインに、CSSの書き方について解説させていただきいます。
コメント