☆HTMLで作ろう！☆
〜SS作家のための簡単HTML〜
■スタイルシートとは何か■
まずは、スタイルシートとは何か……ということから始めましょう。
今まで使ってきた方法では、<body>タグに基本となるフォント、フォントサイズ、マージン等を設定してきました。
そして、それは、１ファイルごとに設定しなければならなかったものです。
それが、スタイルシートを使用することによって、適用させる基本となるスタイルを書いたファイルを一つ用意するだけで、
後は、各ファイルごとに、一行追加するだけで、そのスタイルを適用することができるようになります。
メリットとしては、
同じスタイルを簡単にすべてのファイルに適用できる。
容量の削減になる。
タグではできなかった便利なスタイル適用もできる。
こんなところでしょうか。
さて、それでは、スタイルシートを扱ってみましょう。
body { line-height: 200%; font-family: "ＭＳ Ｐ明朝", "細明朝体"; font-size: 90%; margin-right: 10px; margin-left: 30px }
はい、これが例になります。
この例は、舞のSSに使われているスタイル設定です。
では、いきなりポイント。
外部スタイルシートは、拡張子をCSSにする。
スタイルシートは、セミコロンで区切って指定する。
書式は、適用させたい場所{ 適用させるスタイル: 値; }
とりあえず、この三つ。
では、次。
どこにどのように書けばいいのか。
ポイント。
スタイルシートは、外部ファイルにテキストエディタで記述する。
別に、HTMLの中に、直接記述してもいいのですが、
それだと、今回舞のあげているメリットが全く使えません。
一つのスタイルシートのファイルで、すべてのHTMLに同じスタイルを適用する……という場合、
外部スタイルシートで記述することが必須となります。
で、作り方ですが、普通にテキストファイルを作るように、テキストエディタで書きます。
そして、保存する際に、???.cssという拡張子で保存すればOKです。
もちろん、???のところは、自分で決めて下さいねｗ
では、どうやって他のファイルで書いたスタイルシートをHTMLファイルに適用するのか。
ポイント。
<head></head>間に、<link rel="stylesheet" href="??????" type="text/css">を記述する。
href="??????"の??????は、スタイルシートの場所とファイル名を相対パスで指定します。
例えば、index.htmlというファイルに適用させたい場合で、
スタイルシートのファイル名は、index.css。
そして、index.cssのあるフォルダは、 index.htmlから見れば、一つ前のフォルダにある……という場合なら、
<link rel="stylesheet" href="../index.css" type="text/css">
このように書きます。
相対パスの書き方は、./がindex.htmlのあるフォルダ。
../が一つ前のフォルダ。
../../が二つ前のフォルダ……というように、いくらでもさかのぼれます。
と、いきなりですが、またポイント。
外部スタイルシートは、二つの外部ファイルを同時に適用することもできる。
これは、次の、■適用できるスタイル■の例を見てもらえればわかりますが、
Arcadiaでは、二つのスタイルシートを使っています。
そして、普通のページは、index.cssのみですが、SSに関しては、index.cssとnovels.cssの二つを同時に適用させています。
この方法としては、二行にわたって、
<link rel="stylesheet" href="./index.css" type="text/css">
<link rel="stylesheet" href="./novels.css" type="text/css">
のように、書くだけです。
このように、舞自身は試したことがありませんが、外部スタイルシートを、３つ同時４つ同時に適用することもできると思います。
どうも、回が進むごとに、簡単になっているような気もしますが……
基本はこれにて終了。
■適用できるスタイル■
今度は、スタイルシートで使えるスタイルです。
とはいえ、すべて解説すると、本ができてしまいますので（笑）、
今回は、Arcadiaで使用しているスタイルだけを解説します。
では、まずは例。
index.css←ファイル名です。 a:active { text-decoration: none; color: #6495ed} a:hover { text-decoration: underline; color: #6495ed} a:link { text-decoration: none; color: #6495ed} a:visited { text-decoration: none; color: #6495ed} body { background-image: url(./wall_w2.gif); }
Novels.css←ファイル名です。 body { line-height: 200%; font-family: "ＭＳ Ｐ明朝", "細明朝体"; font-size: 90%; margin-right: 10px; margin-left: 30px }
はい、この二つのファイルです。
では、一つずつ、見ていきましょう。
a:active――クリックしたときのリンク
a:hover――カーソールが上に乗ったときのリンク
a:link――普通のリンク
a:visited――すでに見たリンク
これを踏まえて。
text-decoration: noneテキストの装飾を無くします。
アンダーライン等も無くなります。text-decoration: underline
テキストの装飾として、アンダーラインをつけます。
例の場合は、普段は装飾を無くしている状態で、
マウスカーソールが上に乗ったときだけアンダーラインを出す。
という、スタイルの指定です。color: #??????
これは、見ての通り、色を指定しています。
普通のリンクの色を、赤にしておいて、
カーソールが上に乗ったときだけ、青にする……などもできます。
body { }
<body>タグに、スタイルを適用するときに、このように使います。
｛と｝の間に、適用するスタイルを書きます。では、index.cssとnovels.cssを含めて、body{ }の中身を見ていきます。
background-image: url(./wall_w2.gif);これは、背景の指定です。
背景として、wall_w2.gifというファイルを指定しています。
みなさまが使うときに書き換えるのは、ファイル名だけです。
ちなみに、背景画像は、スタイルシートのファイルと同じディレクトリ（フォルダ）に置きましょう。line-height: 200%;
これは、一行の高さを指定しています。
標準の高さから見て、200%の高さに指定しています。
要は、標準より二倍の高さになっているわけです。
これによって、行間が詰まって見辛い……ということはないはず。font-family: "ＭＳ Ｐ明朝", "細明朝体";
これは、標準となるフォントを指定しています。
このスタイルが適用されているHTMLファイルでは、
無指定の場合、フォントが、プロポーショナルの明朝体になります。
もちろん、ほかのフォントを指定することもできます。font-size: 90%;
見ての通り、フォントサイズを指定しています。
これは、基本的なフォントサイズを指定していて、
標準のフォントサイズの90%のフォントサイズにしています。
無指定の場合、このフォントサイズで表示されることになります。
もちろん、このサイズをほかの値にすることもできます。margin-right: 10px;
右側のマージンを設定しています。
この設定では、右側が、10ピクセル狭くなります。margin-left: 30px
これは、左側のマージンです。
この設定では、左側が、30ピクセル狭くなります。
要は、文字を書き始めるときに、普通よりも、30ピクセル右から書き始めることになります。
はい、一応、Arcadiaで使われているスタイルの解説は終わり。
■とりあえず、終了■
随分と簡単ですが、これにてスタイルシートの解説は終了。
便利だのなんだのと、いろいろ言っていた割には適当だなぁ……と思われるかもしれませんが、
スタイルシートを一から解説しようとすれば、本が一冊できるくらいです。
ですから、簡単にArcadiaで使用しているスタイルだけを解説しました。
他は、前回で紹介した、とほほのWWW入門や、書籍で調べて利用してください。
フォントの指定や何かまで、すべてスタイルシートで設定するのなら、
まだまだ勉強しなければならないでしょうが、SSを書く程度でしたら、
舞のように、大本のスタイルだけをスタイルシートで指定して、
後の細々としたフォントの指定や、太字などは、タグで指定する……というので構わないと思います。
あと、言い訳を一つ。
SS作家の簡単HTMLをうたっているだけあって、SS書き専用として内容を書いています。
そのため、細かい説明をしていなかったり、本来の意味はそれだけではないのに、それだけのような書き方をしていたりします。
SSだけでなく、HP作成のためにこれを参考になさるのなら、そういうところを誤解されるかも……とも思ったのですが、
やはり、SS作家のための……と銘打っているので、そこまで踏み込んで説明する必要はないだろうということです。
ということで、その辺は見逃してくださいな。
HPを作成するためにこれを参照するのなら、他のHP作成講座のようなHPを閲覧することをおすすめします。
★注意★
・スタイルシートを外部ファイルで用意する関係上、念のため、投稿先の管理者様の許可をいただきましょう。
・Arcadiaに投稿する際は、問題ありません。
・背景画像を用意する場合は、やはり投稿先の管理者様の許可をいただきましょう。
・これも、やはり、Arcadiaに投稿する際には問題ありません。