Webページ(HTML)の見た目を定義するものです。
IDを付けて、文字の大きさはこれ、色はこれ、高さや幅はこれ…とCSSに定義しておくと、
そのIDを付けたHTMLのタグの見た目は皆、共通でCSSで決めたスタイルになります。
また、リンクの下線は出さないとか、テーブルの枠は赤にするとか、タグ自体の定義もできます。
あなたが見てるこのウェブページなどに
文字の色や大きさを変えるなど
飾り付けをするためのものです。
(1)スタイルシートって?
「大きさや位置、色などの見た目に関する項目を記した書」です
(2)使い方は?
HTMLでパーツに役割や名前を与えておいて、
スタイルシートで見た目を調整します
HTMLに繋いで使うのでカスケード(繋ぐ/連なる)スタイルシートと呼ばれています
(3)具体的には?
まずは簡単なHTMLを書いてみます
<p id="p1">この段落は左寄せで文字を小さく</p> <p id="p2">この段落はは右寄せで文字を大きく</p>
結果は以下のようになります
この段落は左寄せで文字を小さく
この段落はは右寄せで文字を大きく
<style> #p1 { font-size:small; text-align:left; } #p2 { font-size:large; text-align:right; } </style> <p id="p1">この段落は左寄せで文字を小さく</p> <p id="p2">この段落はは右寄せで文字を大きく</p>
結果は以下のようになります
この段落は左寄せで文字を小さく
この段落はは右寄せで文字を大きく
CSSとは、カスケーディング・スタイル・シートの略。
ホームページなど、インターネットで表示させる物を作る時に使います。
もう少し詳しくいうなら、ホームページなどの設計図を書く時に使う、コンピュータ言語の一種…みたいなものです。
たとえば、ホームページに「いらっしゃいませ」と書くとします。
この時、文字の大きさや種類、色などを決めることができますが…
昔はこれを、「タグ」と呼ばれるコンピュータ言語のようなもので、いちいち設定していました。
「いらっしゃいませ」 ←赤い字で大きく
「ごゆっくりどうぞ」 ←黒字で中くらいに
「ここは私のホームページです」 ←いらっしゃいませと同じ色と大きさで
上の三行のみたいな文章を書く場合となると、一行ごとに「タグ」というのをつける必要があったのです。
CSSは、こういう作業をもっと簡単にするための便利なテクニックです。
(A=赤の大きな字 B=黒の中くらいの字)
「いらっしゃいませ」 ←A
「ごゆっくりどうぞ」 ←B
「ここは私のホームページです」 ←A
というように、自分の使いたい文字のタイプや色の組み合わせを最初に「A」「B」…と決めておいて、この文章は「A」タイプで、次はB、その次はAで、最後はCでというように当てはめていく方式。
これが初歩的なCSSのしくみであり、基本的なルールになっています。
応用の幅も広くて、タグを補助したり、タグと同じように使ったり、タグではできないかざりつけなどにも使われます。
今ではCSSとその表示機能も発達していて、写真を派手に表示することや、ホームページを変わったデザインにしたり、文章をたて書きにしたり…という変わったことにも使えます。
ここまでくると複雑で高度な知識・技術が必要になりますが、タグでは無理だったり、同じ事をやろうとしたら何倍も大変であったりするので、やはり便利であることに変わりはありません。
スタイルシートはホームページなどのデザインを設定するものですが、ホームページと分離して設定出来るので便利です。
ホームページが100ページあっても、スタイルシートを編集するだけで、全てのページのデザインを変える事が出来ます。
Aページ→デザインは「Z」
Bページ→デザインは「Z」
Cページ→デザインは「z」
のようにしておく事で、「z」を編集すると、A、B、Cの全てのページのデザインを変得る事が出来ます。
スタイルシートが無い場合、A、B、Cページと、全てのページを1ページづつ個別に編集しなければなりません。
ページ数が多くなると、とても大変な作業になります。
その他、スタイルシートを使用するとPCからアクセスした時、携帯からアクセスした時、スマートフォンの時で、デザインを変えて見やすくする事も出来ます。
スタイルシートは文字色や文字サイズ、背景色、共通するメニューなど、様々な事を設定出来るので、多くのページやシステムなどを管理する時に大変便利です。
ホームページを作る時は、スタイルシートを別に作成すると良いと思います。