cman.jp > WEBページ作成TOP > CSSリファレンス > CSSの定義箇所
WEBページ作成
広告
CSSの定義箇所
CSSのは「HTML内部の共通として定義」「特定タグにのみ定義」の他に「CSSを外部ファイルにて定義」することもできます。
CSSを外部ファイルにすることで、各ページでCSSの共有化が可能となり、サイトの統一性が向上します。
また、修正時も外部ファイルを修正することで、サイト全体の修正も可能となります。
広告
CSS(STYLE)の指定
| 外部ファイルとして定義 | |
|---|---|
| 相対パス指定 <link href="../css/sample.css" rel="stylesheet"> | 現在のパスから相対パスに外部CSSファイルを指定 |
| 絶対パス指定 <link href="/css/sample.css" rel="stylesheet"> | 現在のサーバ内の絶対パスに外部CSSファイルを指定 |
| URI(URL)指定 <link href="//web-designer.cman.jp/css/s1.css" rel="stylesheet"> | 外部URLの外部CSSファイルを指定 |
| HTML,CSS,JAVASCRIPTのパス指定 | |
| HTML内部に共通CSSとして定義 | |
| <head> ～ <style type="text/css"> CSS定義 </style> ～ </head> | <head>～</head>内にCSS定義を指定 |
| 特定タグにのみ定義 | |
| <a href="xxx" style="xxx:yyy"> | タグにCSS定義を直接指定 |
CSS(STYLE)の指定サンプル
以下のサンプルはすべて同じ意味(STYLE)を表しています。
1.CSSを相対パスの外部ファイルで指定
=== sample01.cssファイル ========
p {font-size: 20pt;}
#id01 {color: red;}
.class01 {color: blue;}
================================
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>外部CSSサンプル1</title>
<link href="../css/sample01.css" rel="stylesheet">
</head>
<body>
<p>あいうえお</p>
<p id="id01">かきくけこ</p>
<p class="class01">さしすせそ</p>
</body>
</html>
2.CSSを絶対パスの外部ファイルで指定
=== sample02.cssファイル ========
p {font-size: 20pt;}
#id02 {color: red;}
.class02 {color: blue;}
================================
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>外部CSSサンプル2</title>
<link href="/css_ref/css_base/css/sample02.css" rel="stylesheet">
</head>
<body>
<p>あいうえお</p>
<p id="id02">かきくけこ</p>
<p class="class02">さしすせそ</p>
</body>
</html>
3.CSSをURLパスの外部ファイルで指定
=== sample03.cssファイル ========
p {font-size: 20pt;}
#id03 {color: red;}
.class03 {color: blue;}
================================
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>外部CSSサンプル3</title>
<link href="//web-designer.cman.jp/css_ref/css_base/css/sample03.css" rel="stylesheet">
</head>
<body>
<p>あいうえお</p>
<p id="id03">かきくけこ</p>
<p class="class03">さしすせそ</p>
</body>
</html>4.CSSをHTML内部の共通STYLEで指定
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>HTML内部に共通CSSサンプル</title>
<style type="text/css">
p {font-size: 20pt;}
#id04 {color: red;}
.class04 {color: blue;}
</style>
</head>
<body>
<p>あいうえお</p>
<p id="id04">かきくけこ</p>
<p class="class04">さしすせそ</p>
</body>
</html>5.CSSをタグに直接指定
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>タグに直接CSS(STYLE)サンプル</title>
</head>
<body>
<p style="font-size: 20pt;">あいうえお</p>
<p style="font-size: 20pt;color: red;">かきくけこ</p>
<p style="font-size: 20pt;color: blue;">さしすせそ</p>
</body>
</html>広告