Supplement
Supplement
当サイトの能書き
サイトの言語・仕様
HTMLのDTDやCSSVersionと表示確認状況について。- 制作趣意・目標管理人が目指したものと実態。
- 表示変更制作者のスタイルシートを無効にする、他。
- UserStyleSheets一歩進んでユーザースタイルシート。
- CSSの切り替えサイト制作者の方へ。
サイトの言語・仕様
当サイトの文書型定義(Document Type Definition) XHTML 1.1 lang=ja (Shift_Jis)- 但し[掲示板]とDDS(Diary of Dark side)[暗黒日記]のみXHTML 1.1 lang=ja (EUC-JP)
- 当サイトでは現在Accesskey・Tabindexは設定しておりません、CSS3ではキーボードコントロールに関するプロパティが検討されています。将来Accesskey・Tabindexに変わる機能が各Browserに実装された段階で対応を考慮しようと考えています。
- 当サイトのCGIは[掲示板]・[DDS]・[Mail Form]の三つで、いずれのCGIもPerlで作成したものです、内[Mail Form]はPerl Script Laboratory配布のFreeCGI(FORM MAILER v0.58)、[掲示板]・[DDS]は管理人が作成したものです、管理人に起因するContents・CGIScriptに対し著作権を主張しませんのでScriptを希望される方はMailでお知らせ下さい、管理人もPerlに関しては初心者ですが気が向けばScriptの改造をお手伝いするかも知れません。
- 当サイトのスタイルシート Cascading Style Sheets 1.0 & 2.0 & 3.0 (Shift_Jis)
- 当サイトのCSSは「Internet Explorer」および「Netscape」の独自拡張CSSを含んでいます。
- ◆サイト内共通CSSのURI
- ◆Pageまたはfolder毎のCSSのURI
- なお上記のCSSは管理人が保守及び変更を容易にする為スタイルの継承等その他について殆んど考慮せず記述しており、かつCSSの理解度も不充分なので参考にされ不具合が生じても責任は負いかねます。(スタイルの継承はプロパティ毎に定められています、詳しくは信頼できる書籍か当サイトリンク集内の[Helpful Site]でご確認下さい)
- 当サイトの表示確認環境 (Platform[OS]はWindowsME,2000)
- Internet Explorer 6.0
- Sleipnir 1.66
- Netscape 7.1
- Mozilla Firefox 1.0
- Opera 7.54
- PC視覚系Browserの古いVersionでご覧になられる場合、スタイルシートを正しく理解し忠実に再現しないBrowserがあります、幣サイトの表示が見苦しいと感じられたらスタイルシートをOFFにしてご覧下さい。
- 上記Browserの中ではCSSのRendering等を含め総合的に一番優れているBrowserは「Opera」だと私は考えています、なので私は常用Browserとしております。
上記以外のPlatform[OS]で閲覧され表示の不具合等を発見された方はメールまたは掲示板でお知らせ下されば幸いです。- その他
- JavaScript:最終更新日表示・メールアドレス表示
- JavaApplet:None、DHTML:None、MIDI:None、Flash:None
SpaceHistory 2004. 1.20 Refre
![◇Supplement[PageTop]](../material/icon/arrow_t.gif){kind=icon}
![◇Supplement[PageBottom]](../material/icon/arrow_b.gif){kind=icon}
サイトの言語・仕様- 制作趣意・目標
- 表示変更
- UserStyleSheets
- CSSの切り替え
制作趣意・目標
当サイトのコンセプト。
１.サイトを作った目的：自己満足。
２.サイトが「成功した」と評価する目安：ありません。
３.サイトに来てほしかったターゲット：ありません。
４.コンテンツとサイトの構造：サイトマップをご覧下さい。
５.デザインコンセプト。
操作性が良い事。
サイト内のどの場所からでも概ね２クリック以内で目的のページやコンテンツに移動出来る事とし、またマウス移動幅は最小限に抑える事。
これはくどいほどナビゲーションを配置することで或る程度実現出来ましたが、それと引き換えに機能美が犠牲になりました、また製作者のスタイルシートを無効にするとナビゲーションのくどさがより顕著に現われます。
・[Archive]の閲覧において２クリック以内が実現出来なかった(-10Point)
・ナビゲーションがくどい(-5Point)
・自己満足度 85Point
軽いこと。
概ね各ページの容量が50KB以下になるようにしています。
・内容の無さを補う為Image等を多用し誤魔化すという手法を臆面も無く採用している(-20Point)
・自己満足度 80Point
サイトが見易い事。
表示領域を絞りコンテンツやナビゲーションをコンパクトに配置しサイト全体に統一感を持たせる、またカラートーンを極力統一し長時間閲覧した場合や閲覧環境の明暗による疲労を軽減する。
・自己満足度 90Point サイトの見易さは個人の好みですが…
ClientPCの負荷を最小限に。
GifAnimation、JavaScript、JavaApplet、DHTML、MIDI、Flashその他ClientPCのSpecificationによって動作が左右されるものは、他に選択肢が無い場合を除きこれらを配置・記述しない事。
・各ページの上部に現在位置を示すTEXTの先頭にGifAnimationを使用している(-5Point)
・各ページの上部の最終更新日の表示にJavaScriptを使用している(-5Point)
・各ページのメールアドレス表示にJavaScriptを使用している(-5Point)
[SSI](Server Side Include)で最終更新日のHTMLを付加出力するによりJavaScriptを使用せずに済む事は理解していますが…これだけの為に面倒臭いというのが本音です。
・自己満足度 85Point
StrictでValidなHTML・CSSを吐出する。
XHTML 1.1でMarkupする事によりある程度のStrictを実現できAnother HTML-lint gateway助けを借りてValidは不完全ながら実現出来たものの、当サイトのHTMLやCSSがW3C(World Wide Web Consortium)の勧告及び仕様に準拠した記述が出来ているかとなると、私にはそれを判断するだけの知識も経験もありません。
但し、文書構造と表示整形を完全に分離した事により、制作する立場としては表示装飾の変更が容易になり、閲覧する立場からすれば閲覧者の選択肢を少々増やす事が出来たのではないかと思っております。
・自己満足度 ??Point
以上ご覧になってお判りのように、サイトの命ともいうべき肝心要の各コンテンツの目標や訪問者のターゲットすら定めておらず、サイト全体の構成が整合性のとれたものになっておりません。
開き直りととられると本意ではありませんが、私はサイト及びコンテンツを様々な意味で充実させるにはある種の才能が不可欠だと思っており、また私は、そのある種の才能に乏しいと自覚しています。
長年の経験と勘により無いものねだりが良い結果を生むことは稀であるとの認識もあり、唯一デザインコンセプトについて技術的な側面から若干の努力を致しましたが、それとて他の考慮すべき幾つかの事柄について知識不足を主な要因として実現するに至っておりません、継続的な努力によりそれらがいつか解決出来るようにしたいと漫然とは考えておりますが…。
SpaceHistory 2004. 1.20 Refre
- サイトの言語・仕様
- 制作趣意・目標
- 表示変更
- UserStyleSheets
- CSSの切り替え
表示変更
当サイトは開設当時スタイルシートを幾つかご用意して閲覧者にスタイル選択をして頂くことを目論んでおりましたが、如何に選択肢があろうとも所詮制作者のスタイルで閲覧する事を強要することになります。
更に万人受けするスタイルなどあろうはずも無く、代替スタイルを作ることが面倒になったので、ここでは当初の趣旨を変更して制作者の提供スタイルを無効にしブラウザのデフォルトスタイルで閲覧する方法についてご説明します。
偉そうに説明しますとは言ってみたものの、私のPC環境で確認できるもの以外は他のサイトを参照して頂くこととします。
Windows × Internet Explorer 6.0 並びに Sleipnir 1.42 の場合
製作者スタイルのうち色（文字や背景など「色」についてすべて、および背景画像）とフォントスタイル、フォントサイズのみ以下の手順で無効にすることが出来ます。
- [ツール]メニューから[インターネットオプション]を選択する。
- [ユーザー補助]を選択する。
- [Webページで指定された色を使用しない]，[Webページで指定されたフォントスタイルを使用しない]，[Webページで指定されたフォントサイズを使用しない] にそれぞれチェックを入れる。
Windows × Netscape 7.1 の場合
[表示]メニューの[スタイルを使用]から[基本ページスタイル]を選ぶと、スタイルシートが無効になります。
この状態でブラウザのデフォルトスタイルで表示されます。 さらにフォントと配色並びに背景について指定したい時は
- [編集]メニューから[設定]を選択する。
- カテゴリ→[表示]から[フォント]を選択し文字色とフォントスタイルおよびサイズを指定する。
- カテゴリ→[表示]から[配色]を選択しリンクの色と下線の有無を指定する。 −Webページが独自の配色と背景が指定されている場合−という項目の中の[自分が選択した色を使用し、指定されている色と背景画像は無視する]にチェックする。
Windows × Mozilla 1.4.1 の場合
[View]メニューの[Use Style]から[Basic Page Style]を選ぶと、スタイルシートが無効になります。
この状態でブラウザのデフォルトスタイルで表示されます。 さらにフォントと配色並びに背景について指定したい時は
- [Edit]メニューから[Preferences]を選択する。
- Category→[Appearance]から[Fonts]を選択し文字色とフォントスタイルおよびサイズを指定する。
- Category→[Appearance]から[Colors]を選択しリンクの色と下線の有無を指定する。 −When a web page provides its qwn coloes and background−という項目の中の[Use my chosen colors,ignoring the colors and background image specified]にチェックする。
Windows × Opera 7.2 の場合
Operaの場合はデフォルトで12種類のUserStyleが入っているので作成者モードからユーザーモードに切り替えるだけです。
- [表示]メニューの[スタイル]から[ユーザーモード]を選ぶと、製作者のスタイルシートが無効になり選択されたユーザースタイル(無選択状態でUse default forms designを適用)で表示されます。
その他のPlatform(OS)の場合
管理人の閲覧スタイル(Appendix)
以上いろいろと御託を並べておりますが、私自身はサイトの見栄え(スタイル)も発信者の意図した情報の一部と思っているので制作者のスタイルシートを無効にしたり、ユーザースタイルシートで閲覧することはありません。
文字の色や大きさ、配色など私が見づらいと思えば、そのコンテンツもしくはサイトを見ないだけです、例えどんな有益な情報がそこにあろうとも気にかけることもありません、まさに多数派に属する閲覧スタイルです。
但しセキュリティに関することは別で、かなり高レベルな設定をしております、おかげで馴れないサイトを訪問するとダイアログ頻発で面倒な思いをしておりますが。
SpaceHistory 2004. 1.20 Refre
UserStyleSheets
スタイルシートってよく解らんけど取り敢えず１つ作ってみようって方は、スタイルシート作成CGIのあるサイトへ閲覧者SSの思うこと・簡単ユーザースタイルシート作成で作ってみたスタイルシート(CSS)を以下に
@charset "Shift_JIS";
*{line-height:150% !important; → 行間隔
font-size:100% !important; → 文字サイズ
color:#000 !important; → 文字色
background:#fff !important; → 背景
margin:2% !important; → マージン(上下左右)
padding:0% !important;} → パディング(上下左右)
a:link{color:#008 !important; text-decoration:underline !important;} → リンク
a:visited{color:#800 !important; text-decoration:underline !important;} → 訪問済リンク
作成したスタイルシートの適用
もう少しスタイルシートについて詳しく知りたい方は以下のサイトへ
SpaceHistory 2004. 1.20 Refre
CSSの切り替え
スタイルシート[CSS]の切り替えは大別するとサーバー側で[CGI]で行うものと、HTMLに[JavaScript]を埋め込んで(または外部ファイル参照)クライアント側で切り替え処理を行うものがあります。
サーバー側で切り替え処理
CGIを起動しスタイルの選択と選択された情報を[Cookie]に書き込む。(CGIで使用する言語は[Perl]が一般的ですが標準入出力をサポートしている言語でかつ、サーバーが該当言語をサポートしていれば[Perl]でなくてもかまいません)
クライアント側にページを出力する際、[SSI](Server Side Include)で[Cookie]の情報を読み取り選択されたスタイルを読み込むlink要素を出力します。 情報が読み込めない（そもそも存在しない）場合はデフォルトのスタイルを適用します。
CGIによるスタイルシート選択スクリプトは以下のサイトからダウンロードできます。
（´д｀;） - うへぇ -- Download URI スタイルシート選択スクリプト Ver 2.0 By カヅサツ
クライアント側での切り替え処理
上記と同様のことをクライアント側の[JavaScript]が行うだけですが、UserAgent(pc視覚系Browser)によっては[JavaScript]のバージョンの違いや[DOM]の実装状態によって思ったような動作をしない場合があります。
JavaScriptによるスタイルシート切り替えスクリプトは以下のサイトからダウンロードできます。
- いちゆうポータル
- Download URI スタイルシート切り替えスクリプト By いちゆう
いずれの場合もクライアント側がCSSに対応していないとスタイルは変わりません。 また[Cookie]も利用可能になっていないと、デフォルトのスタイル以外選択できません。
「ス切りボ」について
「ス切りボ」とはWindows版IE用の「スタイルシート切り替えボタン」&「リンクボタン」です。以下のサイトからダウンロードできます。
- 極H&A的技術研究所
- Download URI CSS:「ス切リボ」
SpaceHistory 2003.9.4 Refre
- サイトの言語・仕様
- 制作趣意・目標
- 表示変更
- UserStyleSheets
- CSSの切り替え
Since 2003.9.1
銀河徘徊記Supplement
©2003-2007 [銀河徘徊記] All Rights Reserved.