<head>以前は下記のようにXHTMLを宣言しています。
<?xml version="1.0" encoding="Shift_JIS"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja"
lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<title></title>
</head>
<body>
</body>
>/html>
XHTMLに関しての詳しい説明はここでは行いません。技術的内容は本サイトでは対象外です。
CSSに関してはレイアウト表示以外は採用しています。
スタイルシートは下記の設定により外部ファイルを読込。
<link href="./inc_css/module.css" rel="stylesheet" type="text/css">
ページ全体のレイアウトに関しては通常のテーブルを利用しています。
全ページ共通設定
<body>要素はスタイルシートで定義
通常フォント
FONT-SIZE: 12px; COLOR: #666666; LINE-HEIGHT: 18px; FONT-FAMILY: "ＭＳ Ｐゴシック",
Osaka,Arial, Helvetica, sans-serif
赤文字フォント
FONT-SIZE: 12px; COLOR: red; LINE-HEIGHT: 18px; FONT-FAMILY: "ＭＳ Ｐゴシック",
Osaka,Arial, Helvetica, sans-serif
青色フォント
FONT-SIZE: 12px; COLOR: #0080C0; LINE-HEIGHT: 18px; FONT-FAMILY: "ＭＳ Ｐゴシック",
Osaka,Arial, Helvetica, sans-serif
H1ヘッダには下記を定義
text-align: center; font-size: 14px; font-weight: normal; color: blue;
「特定商取引に関する法律に基づく表示」のボタン・リンクはスタイルシートにより製作、これにより他のリンクとの相違を強調。
デザインを平面化してスッキリさせているため入力フォームも平面化、入力支援としてカーソルを置いた時に半角英数字記号、全角を自動変換。
テーブルで表を組んでいる場合はやや立体的に処理。デザインを前のものと変えています。青の太枠を重さを排除しました。
使用した スタイル・シート
です。
|