小説サイト作成講座　･･･（２）スタイルシート記述例

□スタイルシート基礎知識

□スタイルシート記述例
　ページの上下左右の余白を無くす
　リンクの色を変える、変化させる
　文字や行間を調節する
　スクロールバーの色を変える

□外部スタイルシートについて
□上級・応用編（もっと使いこなすために）
□スタイルシートを使うときの注意点
□スタイルシート記述例

　ページの上下左右の余白を無くす
表を組んだり、水平線を端から端まで入れたり･･･としているときに、ページの上下左右の「余白」に悩まされます。せっかく端まで塗りつぶしたいのに！と思ったときはこの「margin」指定を使いましょう。

次のページを見比べてみてください。

>>「margin」指定の無いページ
>>「margin」指定の有るページ

実際の記述は、以下の通りです。

<STYLE type="text/css">
<!--
BODY { margin: 0px; }
-->
</STYLE>


△ＴＯＰへ戻る
　リンクの色を変える、変化させる
このページのリンクに触れると、色が変化したりしますよね。
これも全てスタイルシートによるものです。

A:link { 記述 } 通常リンク（未訪問）
A:visited { 記述 } 訪問済みリンク
A:active { 記述 } アクティブリンク（クリックした瞬間）
A:hover { 記述 } ポイント時のリンク（マウスポインタが上に来たとき）


例文集>>よく使われるリンクのスタイルシート
リンク色を変える A{color: 文字色;}
※文字色の部分に「red」や「#ff0000」などの色指定を記述。
リンクの下線を消す A{text-decoration:none;}
リンクをポイントすると下線が出る A{text-decoration: none;}
A:hover{text-decoration: underline;}
リンクをポイントすると背景に色がつく A:hover{background-color:背景色;}
※背景色の部分に「yerrow」や「#ffff33」などの色指定を記述。
リンクをポイントすると枠がつく A{text-decoration: none;}
A:hover{
text-decoration: none;
border-width: 1px;
border-style: solid;
border-color: 枠の色;
}
リンクをポイントするとへこむ A{text-decoration: none;}
A:hover{
text-decoration: none;
position : relative;
top: 1pt;
left: 1pt;
}
表のセルがリンクボタンのようになる
※表内部で使用		 A.cel{
display: block;
width: 100%;
height: 100%;
text-decoration: none;
}
A.cel:hover {
text-decoration: none;
background-color: 背景色;
}
※リンク部分に、<a class="cel" href="***.html">と指定するとそのリンクにだけ上記のスタイルが適応されます。


実際の記述例は以下の通りです。

<STYLE type="text/css">
<!--
A:link {
color: #881100;　　　　　　　　/* リンクの色 */
text-decoration:none;　　　　/* 下線を消す */
}
A:visited {
color: #787836;　　　　　　　　/* 訪問済みリンクの色 */
text-decoration:none;　　　　/* 下線を消す */
}
A:hover {
color: #cc0000;　　　　　　　　/* ポイントした時のリンクの色 */
background-color: #ffffcc;　　/* ポイントした時の背景の色 */
text-decoration:none;　　　　/* 下線を消す */
}
A:active {
color: #ff9900;　　　　　　　　　/* クリックした瞬間のリンクの色 */
text-decoration:underline;　　/* 下線を表示する */
}
-->
</STYLE>


△ＴＯＰへ戻る
　文字や行間を調節する
小説サイトで一番重要な部分、それは文字の読みやすさです。
せっかく書いた小説が、時が小さすぎて読めなかったりしたら悲しいですよね。
ここではCSSで「見やすい」ページをつくることを重視して、サンプルを紹介していきます。

font-size 文字のサイズを指定します。px、pt、%などが指定可能。
font-family 文字の種類を指定します。※1
line-height 行間（行の高さ）を指定します。

※1）font-familyについての注意
あまり特殊なフォントを指定すると、相手のPCにそのフォントが無い場合は指定通りに表示できません。
WindowsとMacでは標準のフォントが違いますので、指定の際には両方を配慮しましょう。
文例>>WindowsとMacを配慮したfont-family指定
<STYLE type="text/css">
<!--
BODY, TH, TD {font-family: ＭＳ ゴシック,Osaka;}
//ＭＳ ゴシックが無ければOsakaで表示するという指定。
-->
</STYLE>
※ＭＳ ゴシックとOsakaが一番、両者とも近いイメージで表示できます。

Ｐｏｉｎｔ！
文字は様々な飾りをつけることが可能で、フィルタを使うともっと綺麗に豪華にできます。
ですが、フィルタなどのCSSは表示に時間がかかったり、対応していないブラウザが多かったりで、デザインが崩れる要因にもなりやすいです。
小説は読みやすさが命ですから、過度な修飾はせず、普通の文庫本のような見やすい表示を追求していきましょう。そのためのお勧めCSSをご紹介します。

文例>>おすすめCSS（文字サイズを非固定）→プレビュー表示
<STYLE type="text/css">
<!--
BODY, TH, TD {
font-size : 80%;　　　　　　　　/* 文字のサイズを80%縮小 */
color: #4b1305;　　　　　　　　/* ページの文字色 */
line-height: 140%;　　　　　　/* 行間をあける */
}
-->
</STYLE>

文例>>おすすめCSS（文字サイズを固定）→プレビュー表示
<STYLE type="text/css">
<!--
BODY, TH, TD {
font-size : 13px;　　　　　　　　/* 文字のサイズを13pxに固定 */
color: #4b1305;　　　　　　　　/* ページの文字色 */
line-height: 140%;　　　　　　/* 行間をあける */
}
-->
</STYLE>

視力の弱い人が訪問する可能性を考えて、文字サイズの固定は出来るだけ避けておいた方が、便利で読みやすいページになります。
文字サイズを固定にする場合は、13pxより小さな文字は読みにくいので本文には使用しないようにしましょう。（飾りや著作表示など、目立たせたくなくて読まなくても良い部分は9pxくらいに指定しても良いと思います）

※追記ですが、ＭＳ ゴシック（Windows）よりもOsaka（Mac）の方が小さく表示されます。Windowsで小さく指定した文字はMacではより小さく表示されますので、気をつけましょう。


△ＴＯＰへ戻る
　スクロールバーの色を変える
スクロールバーの色を変化させるCSSです。
よく使っているのを目にしていると思います。（当サーチでも使っています）

Ｐｏｉｎｔ！
スクロールバーのCSSはＩＥ独自のものです。（ＩＥ5.5以降では表示可能ですが、その他のブラウザではサポートされていません）
ですから、この指定はあくまでも「ＩＥユーザーの方にだけ見えるおまけ」程度に考えておいて下さい。

文例>>スクロールバーの色をカスタマイズする
<STYLE type="text/css">
<!--
BODY{
scrollbar-face-color: #ccccff;　　　　　/* 表面の色 */
scrollbar-3dlight-color: #ff0000;　　　/* 左端と上端の色 */
scrollbar-darkshadow-color: #00ff33;　/* 右端と下端 */
scrollbar-highlight-color: #cccc00;　　　/* ハイライトの色 */
scrollbar-shadow-color: #ff00cc;　　/* 影の色 */
scrollbar-arrow-color: #000000;　　　　　/* 矢印の色 */
scrollbar-track-color: #ffffff;　　　　/* バーの背景の色 */
}
-->
</STYLE>
各部を派手な色に指定して置きましたので、一箇所ずつ色を変更して、好きな色に置き換えてください。

文例>>おすすめスクロールバー色
<STYLE type="text/css">
<!--
BODY{
scrollbar-face-color: #ffffff;　　　　　　/* ページの背景と同じ色 */
scrollbar-3dlight-color: #ffffff;　　　　　/* ページの背景と同じ色 */
scrollbar-darkshadow-color: #ffffff;　　/* ページの背景と同じ色 */
scrollbar-highlight-color: #000000;　　/* ページの文字と同じ色 */
scrollbar-shadow-color: #000000;　　/* ページの文字と同じ色 */
scrollbar-arrow-color: #000000;　　　/* ページの文字と同じ色 */
scrollbar-track-color: #ffffff;　　　　　/* ページの背景と同じ色 */
}
-->
</STYLE>

Ｐｏｉｎｔ！
スクロールバーを見えなくしたり、色を薄くするのはスクロールしにくい（つまり読みにくい）ページとなるので、お勧めできません。
どうしても演出のためにスクロールバーを非表示にしたいなどの場合を除いて、表示するようにしておきましょう。（目立つのが嫌だという場合は、色を薄くしたり上記の「おすすめ」CSSの使用をお勧めします)


△ＴＯＰへ戻る
ＮＥＸＴ>>外部スタイルシートについて
ＢＡＣＫ