SofGate

本サイトのデザイン定義

利用するタグだけSTYLE定義で設定しています

本サイトのデザイン(STYLE定義)について説明させて頂きます。参考にしていただければ幸いです。

STYLE定義

HTMLのタグの中でも使う物と使わない物があるため、利用するタグだけ設定しています。
個人的には各種ブラウザの標準設定に準拠できるページを作るべきと思うのですが、リンク設定(Aタグ)に関しては背景色によって見えなくなる場合があるため、他の設定(STYLEのCLASS)とのバランスを見て調整しています。 

BODY      {font-size:14px;color:#000000;margin:0;padding:0;background:#EEEEEE url(【画像はBase64変換を使ってHTML内に埋込みしています】)}
A:link    {font-weight:900;text-decoration:none;color:#333399}
A:visited {font-weight:900;text-decoration:none;color:#006600}
A:active  {font-weight:900;text-decoration:none;color:#006600}
A:hover   {font-weight:900;text-decoration:underline;color:#EE8833}
DIV,PRE   {margin:8px 1% 0 1%;padding:0.3em 1% 0.3em 1%;border:solid;border-width:2px}
P         {line-height:1.8em;margin:0.6em 0 0 0;padding:0}
H1        {font-size:24px;font-weight:900}
H2        {font-size:18px;font-weight:900;text-decoration:underline;margin:0;padding:0}
H3        {font-size:14px;font-weight:900;margin:0;padding:0}
B         {font-weight:900;color:#660000}
STRONG    {font-weight:900;color:#FF0000}
TABLE     {font-size:14px;margin-top:0.6em;padding:0;width:98%}
TH        {text-align:center;background-color:#DDDDDD}
TD        {vertical-align:top}
HR        {color:#AA7777;border:solid;border-width:1px}
.def      {background-color:#FFFFFF;border-color:#777777}
.bkc      {background-color:#F8F8F8;border-color:#AA7777}
.c0       {background-color:#EEEEEE;border-color:#777777}
.c1       {background-color:#CCDDFF;border-color:#3377BB}
.c2       {background-color:#EEFFDD;border-color:#448833}
.c3       {background-color:#FFF6CC;border-color:#BB8800}
.c4       {background-color:#FFEEEE;border-color:#CC6611}

ページの上部

以前はページ上部に画像を使っていたのですが、シンプルな表現に変更しました。

SofGate

ちなみに以前のページ上部の画像は以下となります。











見出しの例(H1〜H3までを設定)

見出し(Hタグ)に関しては、サイトの統一感に関係するため使い方を決めて設定しています。

H1タグは、ページのタイトルとして利用(DIVタグとの併用が前提)

H2タグは、実質的な章見出しとしてDIVタグと合わせて利用(アンダーバーも設定)

H3タグは、章の中の補足説明や追記事項の見出しとして利用

フォント強調の例

通常の文書の場合は、このような表現だとすると・・・
Bタグは、太字との意味であるため、STRONGタグよりは弱めの強調表現とし、
STRONGタグは、強調との意味であるため、赤字で太字にしています。
Uタグは特に利用しないため、設定しておりません。(H2タグの章見出し表現でアンダーバーを使っているため、文章では使わないようにしています)

リスト表現の例

標準設定で十分と思うためstyle定義では特に設定していません。(箇条書きが続くページに限っては例外的にLIタグの行間を調整しています)

  1. ねずみ
  2. うし
  3. とら

文書表現の設定例

DIVタグでの表示例

list
aaaa

DIVタグ内にPタグを使った表示例(文書として読みやすいように行間を空けています)

list
aaaa

PREタグでの表示例

整形済みテキスト(PREタグ)を使うと
    このように
        スペースや改行がそのまま表示されます。
また、等幅フォントになるためソースコード記載などに利用しています。
list ← 特にこの幅を上例と比較ください
aaaa

表の例

項目名「th」データ内容「td」tableタグを配置目的に利用する事を考慮して、
「th」は上下左右の中央寄せ(背景色も設定)で、
「td」は上寄せ左寄せにしています。

配色のclass設定を使った例

団体名ソフゲート
所在都道府県埼玉県
住所埼玉県越谷市〇〇〇〇〇

ページ下の例

● HOME ▲ PAGE TOP

ちなみに以前はページ遷移のリンクにしていましたが更新のたびに前後ページの修正が必要なため廃止しました。

前のページ前へ 次へ次のページ

その他１：トップページの表現例

トップページの目次(各ページのリンク)は背景色つきのDIVタグと白背景のPタグを組み合わせて表現しています。

サブタイトル

ここにリンクを並べます

サブタイトル

ここにリンクを並べます

サブタイトル

ここにリンクを並べます

サブタイトル

ここにリンクを並べます

サブタイトル

ここにリンクを並べます

その他２：表の例(複数列パターン)

色分けされた表のために設定していたのですが、ブラウザによって枠線の立体表現が異なるため黒系統の枠線色以外は綺麗に見えず、あまり使っていません。

-----
-----
-----
-----

その他３：表の例(tableタグを配置用に利用して実際はdivタグで設定している例)

上記の「その他２」がブラウザによって奇麗に見えないと解り試した結果です。どのブラウザでも想定通りの表現になるのですが、表としては見難いのが残念です。

-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-

その他４：ページのワンポイントとして利用している画像


● HOME ▲ PAGE TOP