インターネット初心者のページ、ウェブサイト製作、SEOまで
-MENU-
-Begining-
-入門-
Webサイト製作の基本
スタイルシート
CSSその１
PHP
-AboutThis-
-BBS-
-筆者お気に入り-
推奨ブラウザ＆メーラー
"Mozilla"
FireFox3.0
ThunderBird2.0
"Mozilla"
FireFox3.0
ThunderBird2.0
-MainWindow-
スタイルシートとは？
さて、スタイルシート（以下CSS）の解説です。HTMLと何が違うのか？
CSSではHTMLで書き出した文書にデザインを施すことが出来ます。
こればっかりは実際にやってみないとピンとこないと思うので実践を交えてやってみたいと思います。
まずは以下のような”HTML”ファイルを用意してください。
<html> <head> <link rel="stylesheet" href="CSS/base.css" type="text/css"> <title>CSSの練習</title> </head> <body> あいうえお<br> かきくけこ<br> さしすせそ<br> たちつてと<br> なにぬねの<br> はひふへほ<br> まみむめも<br> やゆよ<br> らりるれろ<br> わを<br> ん<br> </body> </html>（３〜５行目は１行で記述しても大丈夫です。
ページのデザイン上改行されているだけです。）
解説
上記のように記述したHTMLファイルはブラウザで開くと”あいうえお”から”ん”までが１行づつ表示されるシンプルなページになると思います。
これがサンプル結果 <head>内の３〜５行目、このタグはスタイルシートを適用するタグです。
４行目のhref="CSS/base.css"←この部分でスタイルシートのファイルの場所を指定しています。
上記の場合スタイルを適用したいHTMLファイルから見て”CSSフォルダの中のbaseと言う名前のcssファイルですよ”と指定しているわけですね。
拡張子”css”はスタイルシートの拡張子です。
適用したいCSSファイルが同じ階層にある場合は
”href="base.css"”とこれで良いわけです。
もちろんファイル名は自由につけて構いません。覚えやすい、分かり易い名前を付けてあげてください。
さて、これでこのHTMLファイルにスタイルシートを使う準備は万端です。
具体的にスタイルの適用のさせ方、そしてスタイルシートでどんな事が出来るのか、は次回にします。
実は俺はスタイルシートを覚える前までは
「スタイルシートなんていらないんじゃないか」
と思っていました。
何故なら”スタイルシートで何が出来るのか?”を具体的に知らなかったせいでした。
この”○○で何が出来るのか？”を知ることと言うのは実はとても重要な事です。
HTMLやCSSに限らずWebプログラムやC言語に代表されるコンピュータプログラムについても同じ事が言えると思います。
例えば日曜大工で犬小屋を作りたいとします。
犬小屋を作るには木材等の材料はもちろん、のこぎり、とんかち、釘、なんかの道具が必要ですよね？
俺はその”のこぎり”や”とんかち”が何をするための道具かを知っています。
のこぎりは材料を切る事が出来る道具、とんかちは釘を叩いて材料同士を繋ぎあわせる事の出来る道具ですよね。
なので犬小屋を作るときにはのこぎりをもちろん準備すると思います。 所がのこぎりが一体何をするどんな道具であるか、を知らなかったら犬小屋を作るときにのこぎりをホームセンターでお金を出して買うでしょうか。
多分買わないですよね。
そういうわけでCSSで何ができるのか？は次回！