SofGate |
利用するタグだけ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}
見出し(Hタグ)に関しては、サイトの統一感に関係するため使い方を決めて設定しています。
通常の文書の場合は、このような表現だとすると・・・
Bタグは、太字との意味であるため、STRONGタグよりは弱めの強調表現とし、
STRONGタグは、強調との意味であるため、赤字で太字にしています。
Uタグは特に利用しないため、設定しておりません。(H2タグの章見出し表現でアンダーバーを使っているため、文章では使わないようにしています)
標準設定で十分と思うためstyle定義では特に設定していません。(箇条書きが続くページに限っては例外的にLIタグの行間を調整しています)
list
aaaa
整形済みテキスト(PREタグ)を使うと このように スペースや改行がそのまま表示されます。 また、等幅フォントになるためソースコード記載などに利用しています。 list ← 特にこの幅を上例と比較ください aaaa
項目名「th」 | データ内容「td」 | tableタグを配置目的に利用する事を考慮して、 「th」は上下左右の中央寄せ(背景色も設定)で、 「td」は上寄せ左寄せにしています。 |
---|
団体名 | ソフゲート |
---|---|
所在都道府県 | 埼玉県 |
住所 | 埼玉県越谷市〇〇〇〇〇 |
トップページの目次(各ページのリンク)は背景色つきのDIVタグと白背景のPタグを組み合わせて表現しています。
ここにリンクを並べます
ここにリンクを並べます
ここにリンクを並べます
ここにリンクを並べます
ここにリンクを並べます
色分けされた表のために設定していたのですが、ブラウザによって枠線の立体表現が異なるため黒系統の枠線色以外は綺麗に見えず、あまり使っていません。
- | - | - | - | - |
- | - | - | - | - |
- | - | - | - | - |
- | - | - | - | - |
上記の「その他2」がブラウザによって奇麗に見えないと解り試した結果です。どのブラウザでも想定通りの表現になるのですが、表としては見難いのが残念です。
- | - | - | - | - |
- | - | - | - | - |
- | - | - | - | - |
- | - | - | - | - |
|
|
● HOME | ▲ PAGE TOP |