スタイルシート実践

新規作成日
H14.07.24

更　新　日
H14.11.20

表紙
１．真似々スタイルシート

1-1 バーの色を好きな色に

1-1-1 ネットで見つけた役立ちサイト

1-2 リンク文字列にマウスを乗せる→文字色が変化

1-3 行送りの調整

1-4 複数のスタイルを組み込む

追記
1-5　標準的<head>部の記述

1-6　HPビルダー所感とスタイルシートの効用例の章

1-7　多機能を盛り込んだ部の記述ー雛型

２．真似々Java Script

2-1 面白役立ちJS

2-2 ワンボタンで一連の画像を呼び出す。説明別枠。
（他人様の模倣なので解説は付けません。）

^～～～

◇１．ページの見映えを良くする。

◇ 1-1　背景色（画像）とバランスのとれたバーの色を設定する

私のページの「HP作成キットに挑戦」は３フレームのページになっていますが、ここから、リンクするページは全部バーの色が白色に統一させてあります。
HTML記述で<body style="
scrollbar-3dlight-color:#00f;
scrollbar-arrow-color:#fff;
scrollbar-base-color:#99f;
scrollbar-darkshadow-color:#006;
scrollbar-face-color:#fff;
scrollbar-highlight-color:#ccf;
scrollbar-shadow-color:#009;
">

また、「スタイルシートシリーズ」の各ページは画面に合わせてバーの色を設定してあります。その作り方は下記によります。

<head>内に「スタイルシートで記述」する方法：
「下記ライン内部分」をこの画面からコピーして、あなたのページの「HTMLソース」を開いて、 <head>～</head>間の適当な場所に（例えば</head>のすぐ上）に貼り付けて下さい。
但し下表は見た感じを良くするため体裁を整いてあります。（全部左寄せ、または、横一列棒状でも同じことになります。）
大事なことは　１．属性名の後にコロン「：」値の後にはセミコロン「；」を忘れないこと。また括弧「｛」や「：」「；」の後半角スペースで区切りをつけた方が良いようです。）
若し何等かのスタイルが既に記述してある場合は、それに続けて記述することになります。スタイル設定の最初が「 <STYLE type=text/css> </style>」　になっていれば良いです。

上はこのページの「スクロールバー」についてのスタイル設定で、「スタイルシートによる記述」です。
「HTML式記述」の <body style="">　のダブルコーテーション" "間に「スタイル方式の記述をくっつける方法：

今度は「HTML記述」による方法ですので<body>タグにくっつけて設定します。下の桃色文字がスクロールバーの設定部分です。

あとは、適当にカラー＃を替えてみてください。
注）「#00f」や「#fff」の３字の表現ですがHTML（スタイルシートも同様）では、色を構成する３つの値を使って数値で「色指定」するか、各色に割り振られた色名「カラーネーム（colorname）」によって色を指定します。（black＝#000）　(white=#fff) (blue=#00f)　 (aque=#0ff)　 (lime=#0f0)　 (magenta=#f0f)　 (yellow=#ff0)　 (red=#f00) ・・・など、セーフカラーでも２１６色有ります。（注、赤色の「#f00」は「#ff0000」と全く同じことです。詳しくは「スタイルシート入門のセーフカラー参照ください。」）

以上「スクロールバー」の勉強をしてきましたが、それはそれとして、「便利なツール」を探し出しましたので紹介いたします。

◇1-1-1 ネットで見つけた役立ちサイト

スクロールバー色 CSS設定ページ
同上の使用法です。

これを使わない手はありません。そうしてスクロールバーは卒業です。
スタイルシートではありませんが、ついでに、上の「要素<body>」タグの「オプション（＝属性）bgcolor」に続く「属性値」の用語説明です。

<body bgcolor="～"> その名のとおり画面の背景色です。
<body link="～">　リンク文字列をクリックしていない時のリンクの色を指定するタグ。
<body alink="～">　リンク文字列をクリックした時のリンクの色を指定するタグ。
<body vlink="～">　リンク文字列を既にクリックした後のリンクの色を指定するタグ。

「スタイルシート序章」がまだ終了していませんが、こちらと同時進行させていきます。

◇ 1-2　リンク設定の文字列に「オン・マウス」すると文字色が変化、背景色も選べる。

<head>～</head>間の任意の場所、例えば</head>の上に下記タグを1-1の要領で貼り付けてＯＫ。後は４項目のカラーナンバーｘｘｘｘｘｘとbackgroundカラーナンバーを適当に与えれば良い。
ー　ー以下は現在の設定です- - -＜head＞内に記述、ここから↓　－　－　ー　－　

－　－　ー　－　－　－　ー　－　－ここまで↑　ー　－　－

一段前の現在設定の用語説明です
A:link　　　　　　<A>タグで作られた「リンク文字列」で、未だ参照していないもの。（現在設定でバック黄色は作用せず）
A:visited　　　　<A>タグで作られた「リンク文字列」で、既に参照済のもの（現在設定ではバックは白色）
A:active　　　　マウスボタンが押されてとき（現在設定では赤色）
A:hover　　　　マウスカーソルがリンク文字列と重なったとき（現在設定では茶色）
background 　マウスカーソルが「リンク文字列」と重なったときの背景色で実際はこちらが作用（現在設定では黄色）

　　下段の　トップへ戻る　　　総目次へ戻る、にマウスを乗せてみてください。用語解説と合致していますか、どうか確認してみてください。

◇ 1-3　行送りの調整

（購入のスタイルシート辞典による）
辞典の解説どおり、<head></head>間に下記HTMLタグを記述しました。
　　　－　－　ー　－　－　－　ここから－　－　ー　－　－　－　ー　－　
<STYLE type=text/css>

</STYLE>
　　　－　－　ー　ここまでを</head>の上にペースト　　－　ー　－　
更に<body>以下を下記にし<DIV class="param1">に指定しました。
　　　－　－　ー　－　　－　ここから－　－　ー　－　－　ー　－　
<BODY alink="#cccc00" bgcolor="#fffcff">
<DIV class="param1"><FONT color="#000099" size="3" face="ＭＳ明朝"><BR>

追記
ちなみに、「町の昔話」全部について、この行送り調整を施しましたのでご参照ください。

「小町娘お雪哀話」では

<STYLE type=text/css>

</STYLE>
</HEAD>
<BODY bgcolor="#f6f6f6">
<DIV class="param1">

「明神の絵馬」

<STYLE type=text/css>

</STYLE>
</head>
<BODY>
<DIV class="param1">

注）１．ここで、{LINE-HEIGHT: 17pt;}の17ptは標準間隔です。
　　２．私は「param1 {LINE-HEIGHT:21pt;」を採用しました。
　　３．７５％とか、２とか（倍間隔の意味）も随意param2や３を「body」内で指定すれば実行されます。

ところで現在のこのページでは、HEAD部の記述で、スタイルを標準の改行巾に対し150％とし、僅かに「 p {line-height: 150%;} 」を加えただけで０Ｋなのです。覚えてしまうと非常に簡単な作業でありました。

◇1-4　複数のスタイルシートを組み込む

1-2　で実践スミのリンク文字列の色の変化に加えて、「見出し表示」の<Hn>に、スタイルシートで色を設定してみました。設定範囲が終了したら、必ず終了タグ</Hn>　をつけること。(nは１～6までの6段階)
折角のスタイルシート、その最大のメリット<head>部（または<body>の一部分もありますが）に数行記述するだけで、そのページ全体またはサイト全体に仕様を行使させることにあります。ここではこのページのみに作用するソースですす。
　　　ーーーー<head>部のソースは下記です。ーーーーー
<STYLE TYPE="text/css">

</style>
　　　　　ーーーーーーーここまでーーーーーーーーーー
何故か？未リンクの文字列の黄色表示が出なくなりましたが。
「真似々しているうちに何かが分かってくるのです。」
次回はまた<Hn>要素タグに「いろいろ文字装飾」を施したいと思います。

◇ 1-5　2002年現在の標準的な<head>部の記述

ホームページビルダーでページを作ると、大抵下記の形になります。
　　　　－－－－－－－HPビルダーより－－－－－－－－－
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD>
<META name="GENERATOR" content="IBM WebSphere Homepage Builder V6.0.1 for Windows">
<META http-equiv="Content-Type" content="text/html; charset=Shift_JIS">

<META http-equiv="Content-Style-Type" content="text/css">
<TITLE>タイトル名</TITLE>
</HEAD>
<BODY>
<P><BR>
「ホームページビルダーVr６」で新規のページを作ってみました。その時の<head>部の形です。</P>
</BODY>
</HTML>
　　　　　ーーーーーーーここまでーーーーーーーーー
最低でも「ピンク色の３項目」と、「タイトル名」が記述してあれば対応出来そうです。

Transitionalの場合ですが、もう少し武装すると下記になります。
　　　　ーーーーーーここからーーーーーーーーーー
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<HTML lang=ja>
<HEAD>
<TITLE>タイトル名</TITLE>
<META http-equiv=content-type content="text/html; charset=shift_jis">
<META http-equiv="content-style-type" content="text/css">
<META http-equiv="content-script-type" content="text/javascript">
<STYLE type=text/css></STYLE>
</HEAD>
<BODY>
</BODY>
</HTML>
　　　　　ーーーーーーーーここまでーーーーーーーーーー
Transitional仕様は
現在もっとも現実的な定義。HTML3.2までの全タグとHTML4.01のタグを使用する場合に宣言することになっており、どうやら現在は、安全を期するためにはTransitionalを使うようです。
また、要素と属性の関係などにあまり自信がない場合にも、Transitionalを使ったほうが安心のようです。

◇ 1-6　HPビルダー所感とスタイルシートの効用例の章

HPビルダー所感とスタイルシート使用の一例から。：私のページ作成は「メモ帖」一辺倒でなく「HPビルダー」主体で作っています。その際、大抵のページの下段にある「トップへ戻る」「目次へ戻る」はある決まったページからコピーしていました。結果どうなったかと言いますと、＜/font＞とか、＜font color="" size="" face="ＭＳ明朝"＞とかが１００個内外も重複して並んでしまったのです。これを削除したところ”15Kb”もフアイル容量が減りました。そもそも、ビルダーでフアイルを開く度に１個つづ増えると考えた方がよさそうです。

まだ、その先があります。上のように何時間もかけて折角削除整理したものが、再びビルダーで開くと「元の木阿弥」で削除以前と同様になってっしまったのです。これには参りました。やむなく今度はビルダーの「自動修正機能」をなくすようにしました。方法は「ヘルプで自動修正」を探すと「自動修正を off」にする方法がかいてありました。ツール→オプション→一般から「html構文エラーを自動修正する」のチェクボックスの「レ点」をoffにします。」

ここでまた、新たな発見をしました。「上の自動修正オフ」のお陰で、HPビルダーのhtml構文チェックが手動で行えることを今頃になって発見しました。（私はHPビルダーの仕様書をあまり読んでいなかったのです。しかし、スタイルシートで十分補えることもわかりました。）完全かどうかは？ですが結構役立ちます。このシリーズでインターネット上のhtml構文チェックを紹介させていただきましたが、その前段階に手軽にチェック出来る便利さがあります。

この「１－５章の所感」は全部メモ帖を使いhtml文章で作りました。「何故」かと言いますと、このページには殆ど、
＜font color="" size="" face="ＭＳ明朝"＞や＜/font＞
が有りません。スタイルシートで
＜head＞部に「Pタグ」「Hタグ(テーブル内の見出し文字に使用)」を指定して、その仕様を埋め込んで有りますので＜body＞部にはその必要はなく、「タグ名」だけの記述になります。
極端な話＜body＞の最初に＜p＞を入れ、最後に＜/ｐ＞でも作用しますが、何故か不完全だったので、テーブル終了＜/table＞の後に＜p＞を入れ、テーブル開始＜table＞の前で＜/p＞を入れ＜p＞を終了させました。と、いう訳で殆どタグ無しの文章なので、普通のワープロに過ぎなかったからです。
スタイルシートを使用することで、随分手間が省ける一例として掲載しました。(参照：ページのソース)

◇ 1-7　多機能を盛り込んだ<body>部の記述ー雛型（モデル）ー（もう少し増やします）　

◇2．真似々JavaScript

◇2-1　面白・役立ち　JavaScript

メルマガで紹介されていたので、覗きました。
そうして、素晴らしい表現力に感嘆しましたので、ここに紹介させていただきます。原著者のサイトは「こちら」をどうぞ。

若し私が何処かのページに使用した場合「このように」なります。（ただし、未だ完全に自分のものに出来ていませんが。）
他人様のものなので、これ以上の説明は出来ません。ソースからくみとってください。

◇2-2　ワンボタンで一連の画像を呼び出す。説明文別枠表示

７月２６日龍ヶ崎市八坂神社祭礼の「つく舞」（今年から各町内当番制から市主催に変更で話題に。）行って来ました。「つく舞」については、私のページのあちこちで書いておりまして、それらのまとめとして一連の写真が欲しかったのです。丁度カメラにISO800のフィルムが入っていたのが最大の動機になった訳ですが、これがまた、ズバリ威力を発揮することになりました。

会場に、午後５時到着ーまもなく子供太鼓ー牛久市竜神太鼓が披露され雰囲気も高潮してまいりました。しかしながら、その後パタッと鳴りを潜めてしまたのです。舞手さんが八坂神社で禊中とのことでした。待つこと４～５０分あんなに明るかったつく柱に夕日がささなくなってしまいました。

ISO４００フィルムでは難しい局面でした。６時２０分ころ氏子役員さんに伴われて舞手さんが到着、壇上のお払い儀式のあと、笛太鼓の奏でるなか舞手さんが柱を登り始めました。
さて、その「経過の発表をどのようにしたら良いか」を考えたのですが、只今掲載中のJavaScriptの一環とし掲載することにしました。　以下「こちら」でどうぞ。
つく舞については「つく舞幻想」と「小林一茶」に掲載してあります。

トップへ戻るスタイルシート目次へ戻る
 スタイルシート序章3へ戻る

◇１．ページの見映えを良くする。

◇ 1-1 背景色（画像）とバランスのとれたバーの色を設定する

◇1-1-1 ネットで見つけた役立ちサイト

◇ 1-2 リンク設定の文字列に「オン・マウス」すると文字色が変化、背景色も選べる。

◇ 1-3 行送りの調整

◇1-4 複数のスタイルシートを組み込む

◇ 1-5 2002年現在の標準的な<head>部の記述

◇ 1-6 HPビルダー所感とスタイルシートの効用例の章

◇ 1-7 多機能を盛り込んだ<body>部の記述ー雛型（モデル）ー（もう少し増やします）