カスタム HTML スタイルの管理

HTML のカスタマイズについて

このサイトでは、画面表示に HTML コンテンツを追加するオプションが用意されています。 たとえば、ドメインのホームページ、プロジェクトのホームページ、マイ・スタートページなどがカスタム HTML コンテンツになります。

通常カスタム HTML は、ページの CSS(カスケード・スタイル・シート)からスタイルを受け継ぎます。 スタイル・シートで定義されているスタイルと書式はユーザが提供したコンテンツにも適用されます。コンテンツに含まれている書式はオーバーライドされます。 たとえば、スタイルシートでは表の見出し(th)コンテンツを左揃えに指定しているとします。 ユーザが提供した HTML の表見出しがカスタム HTML として含める前には中央揃えになっていたとしても、カスタム HTML として含めた時点で自動的に左揃えとなります。 同様に、フォントの種類や色も同じページに表示される HTML 書式に一致するように変更されます。

ほとんどの場合、これは HTML のオーサリングで統一性を維持し操作を簡単に保つのに役立ちますが、これを希望しない場合は、下記のヒントを使いスタイル上の違いを削除することができます。

希望どおりに CSS スタイルが適用されない場合...

ユーザが提供する HTML を SourceCast の書式に一致させるには、含める HTML から書式に関連するエレメントや属性を削除するようにしてください。 たとえば、フォント、スタイル、背景色、配列などの属性を設定するタグ(font、style、bgcolor、align)を削除します。また、改行(br)、テキストの画像、レイアウト用の表、画像の区切りなどを使用する代わりに、ヘッダー(h3など)、段落、リスト構造などの構造化 HTML エレメントを使用します。

SourceCast のスタイル適用が失敗する最大の原因として HTML において表示を記述するのではなく、文章の構造を明確にしていないことがあります。この問題を改善するには、次のように HTML を書き換えます。

<font size="4" face="Arial, Helvetica">
 <b>
  Welcome to project foo!
 </b>
<Br>
<img src="../images/spacer.gif" height="1" width="1" vspace="4" alt="">
 <font size="2">
  This is only a picture of a paragraph.
 </font>
</font>
<Br>
<Br>

変更は次のように行います。

<h3>
  Welcome to project foo!
</h3>
<p>
  This is a real paragraph.
</p>

CSS の適用に最適な HTML は、同時に手でテキストを追加したり編集するのに最も簡単な形式であり、サイズも小さく処理が高速になります。 さらに、WebTVや携帯型のブラウズ機器などデスクトップPC以外の機器を使用した場合でもアクセスが可能になる確率が高くなります。

HTML Tidyは、MS Office、FrontPage、Netscape 4.x Composerなどのソフトウェアで作成した HTML の自動クリーンアップ用の便利なツールです。 Tidy用の推奨構成ファイルは下のHTML Tidy の構成に掲載されています。

SourceCast が希望するカスタム・スタイルをオーバーライドしている場合...

ユーザが提供する HTML でカスタムのスタイルを維持したい場合は、HTML のstyle属性などのインライン CSS を使用し、1996 年に CSS が取って代ったFONTbgcoloralignvalignなどの多様なスタイルに関する属性やエレメントは使用しません。

たとえば、次の HTML は SourceCast 画面のコンテキストでは希望どおりのスタイルを使って表示されない可能性があります。

<h2 align="center">
 <font face="Times" color="#cc0000">
   Welcome to project foo!
 </font>
</h2>

このようなスタイルを維持するには、書式のプロパティを CSS を使って次のように表現します。

<h2 style="text-align:center; font-family:Times; color:#c00">
  Welcome to project foo!
</h2>

このインライン CSS により、SourceCast のスタイルシートによって提供されているスタイルとの競合がオーバーライドされます。 CSS の使用について詳しくは、次のソースをご利用ください。

より複雑または広範囲なスタイルのカスタマイズには、SourceCast のスタイルシート自体への追加が必要となる場合もあります。この場合は、ここで提供されている情報よりも詳しく SourceCast の CSS を理解する必要があります。 この問題についてのご提案などは、CollabNet までご連絡ください。

HTML Tidy の構成

次に、HTML Tidy用の推奨構成ファイルを示します。 このユーティリティは、多くのブラウザやプラットフォームにて SourceCast を利用する場合に発生する可能性のある多くの HTML 構文および使用方法の問題を解決するツールです。 SourceCast 画面に統合する予定の全 HTML で Tidy を使用してください。

tidy-mark: no
markup: yes
wrap: 0
wrap-attributes: no
wrap-script-literals: no
wrap-asp: yes
wrap-jste: yes
wrap-php: yes
literal-attributes: no
tab-size: 1
indent: auto
indent-spaces: 1
indent-attributes: no
hide-endtags: no
input-xml: no
output-xml: yes
add-xml-pi: no
add-xml-decl: no
output-xhtml: no
doctype: auto
char-encoding: ascii
numeric-entities: yes
quote-marks: no
quote-nbsp: yes
quote-ampersand: yes
assume-xml-procins: no
fix-backslash: yes
break-before-br: no
uppercase-tags: no
uppercase-attributes: no
word-2000: yes
clean: yes
logical-emphasis: no
drop-empty-paras: yes
drop-font-tags: yes
enclose-text: yes
enclose-block-text: no
fix-bad-comments: yes
add-xml-space: no
alt-text: ""
write-back: yes
keep-time: no
show-warnings: no
quiet: yes
gnu-emacs: yes
split: no