WEBページ作成リファレンス
cman.jp cman.jp > WEBページ作成TOP > CSSリファレンス > CSSの定義箇所

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定義を直接指定
ページTOP

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>
ページTOP
広告
QrCode
このページのURL
スマートフォン・タブレット運営 : CMAN 株式会社シーマン