ページのレイアウトやフォントの色指定などは、本来はHTMLのタグで行うべきではなく、スタイル・シートを用いて行うべきであるとされています。しかしスタイルシートというと <head>〜</head> にページのレイアウトを記述するのかな位は分かるのですが、本文中の指定も結構厄介で、私のこのページ程度の構成ですと「骨折り損のくたびれ儲け」になる可能性があります。
しかし <head>〜</head>内に、<style type="text/css">〜</style> で記述するばかりがスタイル・シートではないようです。アマチュアのページの場合最も有効と思われるのは、HTMLファイル中にスタイルを直接書き込む方法だと思います。しかしそれではスタイル・シートを使う意味がほとんどなくなるという訳で、意味のある例を一つだけ紹介しておく事にします。
それを実はこのページでもかつて使っていたのですが、
<style type="text/css">
p{text-indent:1em}
</style>
このように <head> 内に記述しておく事です。こうすれば前に紹介したように空白記号の連打を用いなくても、<p> に囲まれたパラグラフの冒頭は自動的にインデントされる（空白が入る）事になります。em とは、大文字１字分の単位で、他に小文字単位の ex を使っても良いでしょう。ですから基本的に文章は <p> 内に記述する事をお忘れなく。
ただしこれも万能ではなく、パラグラフ内の改行には当てはまりません。ですから、HTMLでは <br> による改行はなるべく用いず、小部分ごとに <p> で括ってやる習慣をつけるのが良いでしょう。<p> を使うと改行と共に一行空けも行われます。あくまでパラグラフのまとまりを示すものと考えましょう。
<style type="text/css">
|
こう宣言して始めます |
|---|---|
| <!-- | スタイルシートに対応していないブラウザーのために |
p{text-indent:1em;} |
インデントを指定した後で |
a:link{text-decoration:none;} |
リンク部の下線を「なし＝none」とし |
a:vlink{text-decoration:none;} |
vlink=開いた事のあるリンク先の下線をなしとし |
a:alink{text-decoration:none;} |
alink=開いているリンク先の下線をなしとし |
a:hover{text-decoration:none;color:green;} |
a：hover=リンク先の下線はなしだが、マウスが上に載ると、色が緑に変わると設定 |
a{text-decoration:none;} |
しかし、上記a:link,a:vlink,a:alinkの3行は一括してこのように書いておけば良い。 |
| --> | スタイルシートに対応していないブラウザーのために |
</style> |
これで絞めてオシマイ |
<!-- 〜 -->というのは、上記の通りスタイル・シートに対応していない古いブラウザーで表示させた場合に、記述記号がそのまま表示されてしまうのを防ぐ印です。JavaScriptを記述する場合には<!-- 〜 //-->とスクリプトの始めとお終いに書いておかないと、JavaScript 非対応のブラウザーではスクリプトがそのまま表示されてしまいます。
お気付きの方もあるかと思いますが、私のサイトでは改行幅を通常より広めに取ってあります。ベタ打ちは非常に見難いからです。最悪なのは背景色が黒で改行幅無しの長文です。この類を読ませられると眼が非常に疲れて、見終わると白い壁にピンク色をした文字の幻影が浮びます。これを改善するにはいろいろな方法がありますが、IEでもNCでも確実に改行幅を開けたい場合には、スタイルシートを使うのが確実でしょう (もっともスタイルシートに対応していないブラウザーではダメです。でもそりゃあずいぶん古いのではありませんか?)
書き方はこうです。上記、スタイル・シートの中に
p{text-indent:1em;line-height:180%;}
という一行を入れておけば良いでしょう。
但しこの場合、<p>〜</p>に囲まれていない部分は、通常の改行幅になりますから、文章は必ず<p>で囲む習慣をつけておけば大丈夫です。同時に、もうお分かりのように冒頭のインデントも指定してありますので「普通の」文章として表示されると思います。二つ以上の指定をする場合には、このように「；」で一旦指定を完結させてからツナゲテやればよいのです。数値はこのページで180％ですが、お好みに応じて変えてみれば良いでしょう。
このようにすれば自分のページは見易く出来ますが、スタイルシートで見易く設定されていない他人のページはどうしたらよいでしょうか？その解決法は下のTips IIIをご覧下さい。
何といっても、外部ファイルを読み込ませてこそのCSSです。<head>〜</head>に
<link rel="stylesheet" href="***.css">
と書きます。そして他のHTMLファイルと同じフォルダーに***.cssという名前のファイルを置きます。もちろん別の場所に置くならアドレスを指定する必要があります。
***.cssはテキスト・エディターで作成し、拡張子を.cssにして保存すればよいのです。例えばこのページで使用しているnissi.cssの内容は次の通りです。(日々変化していますので現状は異なるでしょう)
a:link,a:visited{color:#4169e1}
a:active{color:#006400}
a:hover{color:#ff0033;text-decoration:underline}
.top{font-family:serif}
.left{margin:25pt}
.topbig{font-family:serif;font-size:larger}
.topbb{font-family:serif;font-weight:bolder;font-size:medium}
.topbold{font-family:serif;font-weight:bolder;font-size:13pt}
.topss{font-family:serif;font-weight:bolder;font-size:small;
line-height:170%}
.c{text-align:center}
.ss{line-height:200%;font-weight:bold;font-family:serif}
.a{line-height:160%;color:navy}
.b{line-height:160%}
.c{line-height:160%;color:maroon}
.red{color:#ff0000}
.navy{color:#000080}
.maroon{color:#800000}
.green{color:#008000}
ここで上記<link rel="stylesheet" href="***.css">を他のページにも配置しておけば、同じ改行幅、色等の設定が適用されます。またcssファイルを変更すれば、一々のファイルを変えずとも一気にデザインを変える事が出来るのです。サイト全体の統一性を保ちたい場合には有効と思える方法です。
Inrternet Explorer4.0以降を使って見る人限定なのですが、ページが開く際に幕が上がるように表示されたり、中心から円形に表示されるページを見た方もあるでしょう。いくつかのパターンがあるようです。そこで調べて、既にお気付きのように使ってみました。
<meta http-equiv="Page-Enter" content="revealTrans(Duration=x,Transition=x)">
<meta http-equiv="Page-Exit" content="revealTrans(Duration=x,Transition=x)">
と<head>〜</head>間に書いてやれば良いのです。1行目はそのページが開く時の動作を決め、２行目で閉じる時の動作を決めます。
Durationにはその動作にかかる時間を秒数で書いてやります。あまり長すぎるとうっとおしいのですが、短すぎても読み込み時間との兼ね合いがあり上手く効果が出ません。4、5秒以上で試してみてください。ただしローカルで試して上手く行っても、web上では読み込みに多少時間がかかる事もあるので難しいものです。
Transitionには0から23までの数字を書きます。このページではそれぞれ4.0と6にしています。ここでは大サービスとして値として指定する0〜23の動作を紹介しておきましょう。
| Transitionの値 | 動作 |
|---|---|
| 0 | 大きな四角が縮小 |
| 1 | 小さな四角が拡大 |
| ２ | 大きな円が縮小 |
| ３ | 小さな円が拡大 |
| ４ | 下から上に面積拡大 |
| ５ | 上から下に面積拡大 |
| ６ | 左から右へ面積拡大 |
| ７ | 右から左へ面積拡大 |
| ８ | 縦の短冊が面積拡大 |
| ９ | 横の短冊が面積拡大 |
| １０ | 市松格子が右へ面積拡大 |
| １１ | 市松格子が下へ面積拡大 |
| １２ | 全面砂模様が次第に鮮明に |
| １３ | 左右の縦長が中央に向かって拡大 |
| １４ | 中央の縦長が左右に向かって拡大 |
| １５ | 上下の横長が中央に向かって拡大 |
| １６ | 中央の横長が上下に向かって拡大 |
| １７ | 右上角から左下へ向かって斜めに面積拡大 |
| １８ | 右下角から左上へ向かって斜めに面積拡大 |
| １９ | 左上角から右下へ向かって斜めに面積拡大 |
| ２０ | 左下角から右上へ向かって斜めに面積拡大 |
| ２１ | 横線が本数を増やしながら鮮明に |
| ２２ | 縦線が本数を増やしながら鮮明に |
| ２３ | 以上の内から毎回ランダムに変化 |
更に調べてみると、24番目の作法のあることが分かりました。以下の一行ですがTransitionの値はありません。Durationに例えば4.0といった希望の秒数を入れて下さい。「滑らかにページがフェードイン」します。
<meta http-equiv="Page-Enter" content="BlendTrans(Duration=x)">
自分で書いたタグに自信があっても、ミスはあるものです。書籍の出版前に校正が欠かせないのと同じで、何らかのチェックをしておく方が良いでしょう。オンラインでチェックしてくれるサイトがありますし、プログラムもあるようです。
Another HTML-lint-からGatewayに行き診断したいページのアドレスを入れます。もちろん他人のページでもOKですが、ぼろが出ますので私のページの診断はしないで下さい。ページによってはマイナス300点などという絶望的な点がついてきます。他にも様々な情報がありますので参考にはなります。採点基準の厳しさでは群を抜いています。
ちなみにこのページの点数を知りたいという、意地悪な向きには、悲しいかなこれが今の私の実力です。全ての減点にはそれぞれ理由があります。100点を取るにこしたことが無いのですが、そうするとチャンと表示出来なくなるブラウザーが多数世の中にはまだあるのです。また満点にも2種類あって、画面の右上に「たいへんよくできました」と表示される場合が本当の満点です。100点でも点数の引かれない減点（？）がある場合は「よくできました」と表示されます。
外国のサイトですがスペルチェックやリンク切れ診断までしてくれるのがDoctor HTMLです。ここでのアドヴァイスも参考になるかも知れません。また WDG HTML Validator ではサイト全体のチェックを一挙にやってくれます。
またHTML規格の総元締めであるW3Cでもミスのチェックをしてくれます。ミスがなければ、このページの右下にあるバナーを張る事が許可されます。またこのバナーからチェックのページへリンクが貼ってありますので訪ねてみてください。このバナーが貼ってあるという事は、W3C では No errors found! という事ですが、採点基準が甘いと見る向きもあります。ホントにエラーが無いか確かめたい疑り深い方はご覧下さい。
CSSとはCascading Style Sheetsの略です。スタイル・シートの意味はもうお分かりでしょう。HTMLで記述したテキストの見え具合（スタイル）を決めてあげる仕様書（シート）ですね。
ではカスケーディングとは何でしょうか。日光の竜頭の滝のように段々になっていて、継続的にモノゴトが行われる事をカスケーディング（カスケード＝Cascade）と言います（滝の場合は水が順順に流れ落ちてゆきます）。スタイル・シートでは見え具合を、決められている優先順に指定してゆくのでカスケードする（＝カスケーディング）と呼びます。
混同しやすい概念に継承があります。継承（Inheritance）とは上位のスタイル指定（宣言と言います）が下位の宣言に受け継がれてゆく事です。例えば <body> に指定したスタイルは、必ず <body> 内に位置する <p> に受け継がれてゆきますし、<h1> や <strong> にも受け継がれて適用されてゆきます。
一方、カスケーディングとはページの見え具合を決めるスタイル・シートが複数あった場合に、優先順位に従って指定を行う事です。CSSではページのスタイル・シート、使用者のスタイル・シート、ブラウザーのスタイル・シートの順になっています。
使用者のスタイル・シートというと「そんなもの指定していない」と思う人が多いと思います。特にネットスケープ使用者にはそういった人が多いでしょう。しかしネットスケープでも最新のVer.6 では指定可能になっていますし、インターネット・エクスプローラーでは、Ver.4.0 以降で指定可能です。ここが指定されていないと話は2段階になります。例えばこのページのように改行幅を通常の1.8倍に指定していると、これが優先します。改行幅についてページも使用者も指定していないと、ブラウザーの指定値、すなわち改行幅なしで表示されます。
最優先のページでの指定がなくても改行幅を広く取って表示させたければ、使用者のスタイル・シートで指定してやれば良いのです。
先ずマイドキュメント（どこでも良いのですが）で右クリックして新規作成で、テキスト文書を選びます。そこに次のように半角英字で書きます。
body{line-height:180%}
書き終えたらファイルから名前を付けて保存を選び、ファイル名の所に my.css （my でなくても名前は何でも結構です）と入れて保存します。元の新規テキスト文書.txtは削除してしまって構いません。
次にインターネット・エクスプローラーを開き（何らかのページを表示させ）、ツールからインターネットオプションを開きます。最初に開く全般からユーザー補助を選び、ユーザースタイルシートの中にある自分のスタイルシートでドキュメントの書式を設定するにチェックを入れます。参照をクリックして先ほど作ったマイドキュメントにあるmy.cssを指定してOK、OKで閉じます。
以上でページがスタイル・シートによって改行幅を指定していない場合に限って、あなたが指定した180%の改行幅が適用されるようになります。数字はもちろんお好みのものをお使い下さい。更にページのスタイル・シートがあってもそれを無視して常に自分のスタイル・シートを適用させたければ、先の数値の後に!importantと書き加えます。上記の例では改行幅だけですが、お好みに応じてフォントの大きさや形まで自分の決めたもので表示が可能です。
Internet Explorerでは、そのページに何らかのスタイルシートによる指定がない場合やユーザーによるスタイルシートによる指定がない場合には、Internet Explorer既定のスタイルシートが適用されて表示が行われます。
多くの方はInternet Explorerの既定値で表示をさせているのではないでしょうか。しかし自由度は確保されているのですから、使わない手はありません。気に入らなければ元に戻せば良いだけです。
ツールバーの「ツール」を開き「インターネットオプション」を選びます。「全般」から「色」を開きます。左側の「色」は「Windowsの色を使用する」が見やすいとは思いますが、そのチェックを外してやれば「文字列」と「背景」色を好みで選べます。そのページにスタイルシートによる指定がない場合には、ここで指定した背景色と文字色で表示が行われます。
右側の「リンク」ではリンクの「表示済み」と「未表示」の色をクリックすると、カラーパレットが表示され、お好みの色を指定できます。たとえば「表示済み」と「未表示」を同じ色にするというのを一時期私はやっていました。
「ポイント時に色を変更する」にチェックを入れて、「ポイント時の色」を決めてやれば、マウスなどで文字列上に触れるとリンクされている文字列の色が変わります。これら3色の組み合わせを変える位の事で、気分が良くなれば何よりです。
リンクされている文字列には、初期設定では下線が常に付きます。これも変えられます。「インターネットオプション」の「詳細設定」から「リンクの下線」を見て下さい。「ポイントしたときに表示する」あるいは「表示しない」にチェックを入れ直せば良いだけです。