CSS
とは(2/2)
l CSS
とはパワーポイントのスライドマスター-
全てのページに会社のロゴや、コピーライトを⼊入れるのは⾯面倒くさい。。。
-
１箇所修正したら全部修正しないと⾏行行けない。。。CSS
の書き⽅方(1/3)
l CSS
の基本書式(1)
- CSS
はHTML
ヘッダ中で指定を⾏行行います。-
または、CSS
ファイルを別途作成し、HTML
ヘッダ内で読 み込ませることで、複数のページで共通のCSS
ファイルを 利利⽤用することができます。
<link rel="stylesheet" href="style.css">
CSS/Sample1
<style type="text/css">
p {
color: red;
}
</style>
これはpタグを⾚赤⾊色に変えるCSSの記述 です。
CSS
の書き⽅方(2/3)
l CSS
の基本書式(2)
- CSS
でスタイルを指定するには、どの部分に対して ･･･ セレクタ どのスタイルを ･･･ プロパティ どのように ･･･ 値
適⽤用するかを指定します。
-
以下の使⽤用例例では、p
要素の⾊色を⻘青くし、フォントサイズ を30px
に変更更するスタイルを指定しています。
p {
color: blue;
font-size: 30px;
}
CSS/Sample２
こんなCSSを使わなくても、<h1>を使うと、⽂文字は⼤大きく表⽰示されるよ
そんな疑問もごもっとも。実はブラウザがデフォルトのスタイルというを持ってい て、CSSが適⽤用されていないときには、⾃自動的にそのデフォルトスタイルが適⽤用さ
セレクタHTML⽂文中の特定の要素を選択する ために使⽤用します。
たとえば、要素の種類で選択するタ イプセレクタでは、pやh2といった タグの種類で、CSSの適⽤用範囲を決 めることができます。
このほかに、各要素に属性として与 えられたidやclassもセレクタとして 利利⽤用できます。
CSS
の書き⽅方(3/3)
l CSS
の基本書式(3)
- p
などの要素によらず、要素の属性として指定されたid
やclass
で、スタイルを指定することもできます。-
たとえば、次のようなHTML
があったとしましょう。-
このHTML
にあるクラス「blue_text
」に、⼀一律律⾊色を⻘青くし、フォントサイズを
30px
に変更更するCSS
を定義してみま しょう。<h2 class=”blue_text” id=”blue_title”>
見出しだよ</h2>
<p class=”blue_text”>
段落だよ</p>
.blue_text { color: blue;
font-size: 30px;
}
CSS/Sample3
HTML
の書き⽅方l
別のファイルを指定するHTML
は他ファイルとの関連付けを⾏行行えることが特徴です。他ファイルの位置を⽰示す⽂文字列列をパス（
Path
）といいます。-
絶対パスどこから⾒見見ても変わることのない位置な場所です。
ü URL
で指定するhttp://
からはじまるURL
でファイルを指定します。-
相対パス⾃自分のファイルパスからの相対的な位置で指定します。
他のサーバにある ファイルへのリン クに使⽤用。
同じサーバ内での リンクに便便利利。
ドメインが変わっ ても⼤大丈夫。
<a href=”http://google.com/”>
文字</a>
<a href=”temrs.html”>
文字</a> <a href=”../temrs.html”>
文字</a>
同じディレクトリのファイル ひとつ上の階層のディレクトリのファイル
ほかにも、あらかじめ決められた、基準となるディレクトリから⾒見見た、
ファイルの位置を絶対的に記述する⽅方法もあります。
例例
) /dir1/dir2/page1.html
補⾜足