初心者による初心者の為のスタイルシート覚え書き>スタイルシート、作り方がわかんない 

スタイルシート、作り方が分かんない

外部ファイルってどうやって作るの?

スタイルシートだけを書かれたファイル、つまりは「CSSファイル」というものを作らなくてはならないのですが
この方法はいたって簡単です。

ウインドウズなら プログラム→アクセサリ→メモ帳 を開きます。
そして「名前を付けて保存」の時に普通なら「○○○(好きなファイル名).txt」となっている拡張子(ドットの後の英文字)を
自分で「○○○.css」と入力するだけなんです。メモ帳でhtmlを書くときと一緒ですね。

メモ帳に書く実際のスタイルの中身についてはWeb Frontierさんの「スタイルシートの技」などを参考にしてくださいね。

CSSファイルを作った後、また後で中身を修正したい時
「メモ帳」を開いてください。そこで「ファイル」→「開く」
でもこのままだと以前作ったはずのファイルが見当たらなくて焦るはずです。(←一瞬焦った人)
「txt」のファイルしか「ファイルを開く」ウインドウには表示されないんです。
そこでファイル形式のところを「すべてのファイルを選択」すると前に作った「○○○.css」というファイルが表示されます。

▲ページの最初に戻る

外部ファイルはどこに置くの?

あなたのサイトなのでどこに置こうが自由なのですが、分かり易いのはやっぱりindexが置いてあるだろう一番上の階層でしょうね。
将来的に色んなスタイルシートのファイルを置くことを考えて「CSS」という名前のフォルダを作ってその中に上の要領で作ったファイルを保存します。
サイトの構造の一例を挙げます。
↑上 index.html css twins link
階層の深さ sample.css mie.html osusume.html
↓下 honban.css tomo.html friend.html

外部ファイルをどうやって反映させるの?

さぁ置き場所は決まりました。問題はこれをどうやって各ページに反映させるかです。
それは<LINK rel="stylesheet" href="htmlファイルから外部スタイルシート(CSS)ファイルへの相対パス" type="text/css">

「ん?その言葉の意味自体が分からない…」順番に説明しますね。

外部スタイルシート(css)ファイルをページで指定する方法は2つあります。
それは絶対パスと相対パスです。(本当は仮想パスの3つらしいのですが、私が理解していないので除外します)
さぁ、訳がわからなくなってきました(笑)

絶対パス
ハガキに書く住所みたいなものです。
 例)ウサギさんのお家は「やさい県こんさい市にんじん町1の2」
(その例えはなんだというツッコミはこの際おいといて)
どこから読んでもそこがどこかわかる書き方です。だから絶対?

最初はURL(http://〜〜〜)の事だと思ってたんですが、調べてみると違うようです。
でもそうやって説明してるところが多いですよね。

記入例)index.html → /○○○/◇◇◇/public_html/index.html
(○○○や◇◇◇は使われてるサーバーによって違うようです。)
相対パス
現在地からみた目的地みたいなものです。
 例)ウサギさんのお家は「クマさんの家から3軒となりを右に曲がって2軒目」

記入例)
下の表を例にとるとindex.htmlから見たsample.cssは
「同階層にある「css」フォルダの中にあるcssファイル」
(一階層下がる時はスラッシュ(/)、一階層上がるときはドット2つにスラッシュ(../)をつけます)
 css/sample.css

tomo.htmlから見たsample.cssは
「一階層上がった「css」フォルダの中にあるファイル」
../css/sample.css
(最初に一階層上がってるので「../」が最初についてます)

↑上 index.html css twins link
階層の深さ sample.css mie.html osusume
↓下 honban.css tomo.html   shop.html
  webring.html
friend
  oekaki.html
   mackey.html
上の様に絶対と相対の違いが分かった所で、最初は「絶対なら迷わないから絶対パスがいい」と思いました。
でも違うんです。
万が一、サーバーがお引越しになった場合(自分が引っ越すつもりがなかったとしてもサーバー業者さんの一方的な都合も考えられます)
絶対パスだとサーバー独自の名前がついているので、一から全ての箇所を書き直ししなくてはなりません。
その点、相対パスだったらサイトの中身をそのまま他のサーバーに移しても、サーバーの名前は入っていないフォルダの中身どうしのつながりなので書き換えることなくそのまま使うことが出来るんです。

最初に書いた「htmlファイルから外部スタイルシート(CSS)ファイルへの相対パス」
oekaki.htmlでsample.cssというスタイルシートをリンクしたい時は「oekaki.html」から見た「sample.css」への置き場所を書けばいいんですね。
上の表で言うと「../../css/sample.css」になるわけです。

外部ファイルのお約束?

実際にメモ帳でcssファイルを作っていくと、当たり前ですがスタイル指定の文字が1文字足りなかっただけで全くページに反映してくれません。
これも外部ファイルのお約束をちゃんと守らなかったからなんですが…。
色々な設定を意味する言葉を組立てていく時に忘れそうなお約束を(私自身が)忘れないように書いておこうと思います。
(実際の外部スタイルシート(.css)の言語についてはWeb Frontierさんの「スタイルシートの技」などを参考にして下さい。)

言語の中に日本語で注釈を入れておきたい時
最初は「/* 」、最後は「 */」で囲むこと。 例)/* 背景の色設定 */
書き込んだ言葉が何を意味する言葉だったのか一目でわかるように、それぞれの命令の上にこれをつけて書いておくと便利です。
それぞれの言語の最初と最後は「{」と「}」
一つの属性に対しての命令の最初と最後は「」と「 例)body○○○
本文ばかりに気を取られて、最後のカギ括弧を付け忘れたりしても反映されないので(←されなくて焦った人)、基本過ぎて見落とさないように…。
「何に対して」「どう指定するかの中身」の間は「:」で挟むこと。
ドットが縦に並んだ「(コロン)」で挟みます。 例)font-size:small;
「何に対して」「どう指定するかの中身」のひとかたまりの最後は「;」で終わること。
ドットの下にカンマが並んだ「;(セミコロン)」で終わります。 例)font-size:small;
罫線やコンテンツボックスなど4方向に対して設定する時の順番は「上・右・下・左」。
例で言うと罫線の幅は上から1px、右が2px、下が3px、左が4px。 例)border-width: 1px 2px 3px 4px;
後で見た時に「どれがどの方向のことだったっけ?」と混乱しそうなので「/* 上・右・下・左 */」など中身に書いておくと後で役立ちそうです。

▲ページの最初に戻る

「スタイルシート、ここがわかんない」へ トップに戻る 「画像の設定がわかんない」へ