Webページ(html)で、タイトル等のヘッダ情報を記述している head タグについて、SITE PUBLIS が出力する基本的な内容を以下に記載します。
※ブロックやプラグイン等により出力されるものは除外しています。
<head>
1. | <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> |
2. | <meta http-equiv="Content-Style-Type" content="text/css" /> |
3. | <meta http-equiv="Content-Script-Type" content="text/javascript" /> |
4. | <meta http-equiv="X-UA-Compatible" content="IE=7,IE=9" /> |
5. | <link rel="stylesheet" type="text/css" href="/view_css.php?pageId=XXXX(エイリアス名.css)/> |
6. | <link rel="stylesheet" type="text/css" href="/publis.css" /> |
7. | <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, minimum-scale=1, maximum-scale=1" /> |
8. | <meta name="keywords" content="" /> |
9. | <meta name="description" content="" /> |
10. | <title>新規サイト</title> |
11. | <script type="text/javascript" src="/scripts/jquery-1.x.min.js"></script> |
<script type="text/javascript"> | |
<!-- | |
12. | var pbGlobalAliasBase = '/'; |
13. | window.addEventListener('load', function() { |
alert("Hello!"); | |
}); | |
//--> | |
</script> | |
14. | <script type="text/javascript" src="/public.js"></script> |
15. | <link rel="stylesheet" type="text/css" href="/library/stylemaster_extra.css" /> |
16. | <script type="text/javascript" src="/library/propety_script.js"></script> |
17. | <script type="text/javascript" src="/library/propety_script_external_file.js"></script> |
18. | <link rel="stylesheet" type="text/css" href="/library/init/css/publis4-default.css" /> |
19. | <link rel="stylesheet" type="text/css" href="/library/templates/XXXXXX/XXXXXX.css" /> |
</head>
1 | HTML の文字コード指定のため自動的に出力します。HTML5 の場合は <meta charset="UTF-8"> と出力します。 |
2 | 基準となるスタイルシートを指定するため自動的に出力します。HTML5 の場合は省略されます。 |
3 | 基準となるスクリプト言語を指定するため自動的に出力します。HTML5 の場合は省略されます。 |
4 |
Internet Explorer のドキュメントモードを設定します。HTML形式設定 で設定を行います。 |
5 |
SITE PUBLIS が基本として出力するスタイルと、ページで利用しているスタイルマスタの内容を出力します。 static ファイルの場合は、href のパスが「/css/エイリアス名.css」となります。 |
6 |
スタイルエディタの内容が全て出力されます。 |
7 |
デザイン設定のモバイル設定から viewport設定 を行うと出力されます。 |
8 |
ページ情報表示・設定の キーワード の内容が出力されます。 |
9 |
ページ情報表示・設定の ページの説明(description) の内容が出力されます。 |
10 |
ページのタイトルを出力します。 |
11 |
SITE PUBLIS が利用する jQuery を出力します。
※SITE PUBLIS 4.7.0 以降では出力されなくなります。詳しくは以下をご参照ください。 |
12 | エイリアスベースを宣言しています。 |
13 |
ページ情報表示・設定のスクリプト設定にある onloadイベントで使うスクリプト の内容が出力されます。 |
14 | ページ上の操作(新しいページで開く等)用のスクリプトを出力します。 |
15 | スタイルマスタ の エクストラ 外部ファイル に設定したファイルが出力されます。 |
16 |
ページ情報表示・設定のスクリプト設定にある スクリプト の内容が出力されます。 |
17 |
ページ情報表示・設定のスクリプト設定にある 外部ファイル の内容が出力されます。 |
18 |
<head>設定 の内容が出力されます。 |
19 |
デザインテンプレートで利用設定となっている内容が出力されます。 |
ページ上に読み込まれる順番
同じ id や class に対して複数の CSS ファイルで同じスタイル指定をした場合、最後に読み込まれた CSS ファイル、つまり html ファイルの中で、より下に記述されているものが反映されます。
例 class:text に対して文字色(color)を付ける場合
- <link rel="stylesheet" type="text/css" href="XXXX.css">
.text{ color: blue; }
- <link rel="stylesheet" type="text/css" href="yyyy.css">
.text{ color: green; }
- <link rel="stylesheet" type="text/css" href="zzzz.css">
.text{ color: red; }
上記のような順番で、3つの CSS ファイルが出力された場合、最後に読み込まれる zzzz.css の内容が xxxx.css や yyyy.css の内容を上書きするため、最終的には class:text には color:red; が反映されます。