はじめにリンクお問い合わせ

スタイルシートとは

スタイルシートとは

スタイルシートとは、ホームページのデザインを定義する規格です。スタイルシートは「css」(Cascading Style Sheets)と表すこともあります。

「デザインを定義する規格」と書くとむずかしそうですが、つまりはホームページの色とか大きさとかをスタイルシートで設定できると考えてください。

個人的な意見ですが、スタイルシートでホームページを作れるようになったくらいから、ホームページ作成の初心者卒業かなと思います。(^^)

「html+css」はメリットがいっぱい!

ホームページはいろいろな作り方がありますが、「html+css」で作るとシンプルで管理しやすい構成になります。

html・・・文章構造
css・・・デザイン

と役割を分けることで、htmlファイルの中身に余計なソースコードを書く必要がなくなるので、SEOにも効果的です。

またスタイルシートにデザインを指定しておくと、ホームページのデザインを一括で変更できて大変便利です。

例えば「表の背景は黄色」と設定するとします。
スタイルシートを使わない場合はそれぞれの表に色を指定するので、色を変更するときは全ての表の設定を修正しなければいけません。

一方、スタイルシートを使って指定した場合は、スタイルシートの一行を修正するだけでホームページ内のすべての表の色を変更することができます。

外部スタイルシートを使おう

スタイルシートは、

・html内に埋め込む方法
・外部スタイルシートを作りリンクを貼る方法

の2つがあります。外部スタイルシートを使った方がメリットが多いので、ここでは外部スタイルシートの使い方を紹介しましょう。

1.テキストエディタで「style.css」というファイルを作成
2.すべてのhtmlファイルのヘッダ(~)内に、「style.css」へのリンクを貼る
例:<link href=”style.css” rel=”stylesheet” type=”text/css” />

これで外部スタイルシート「style.css」の準備は完成です。
あとはこの外部スタイルシート「style.css」内にデザインを指定していきます。

スタイルシートは奥が深い

スタイルシートをマスターすると、デザインの幅がぐんと広がります。
しかし慣れないうちは、思うようにデザインできなかったり、ブラウザ特有のバグに悩まされたりと覚える知識はたくさんあります。

スタイルシートのことを書くと1つのサイトができあがってしまうため、ここでは全てを紹介することはできません。

スタイルシートを勉強するなら一冊は本を買うことをおすすめします。また、ネット上にもスタイルシートを教えてくれるホームページがたくさんあるのでそちらをご参照ください。

おすすめサイト

とほほのスタイルシート入門(基礎知識)

おすすめ書籍

セオリー・オブ・スタイルシート (Quick Master of Web Technique) セオリー・オブ・スタイルシート
スタイルシートの基礎についてくわしく書かれた本です。内容はとてもよいのですが、スタイルシートの超入門書ではありません。2冊めくらいにおすすめです。
速習Webテクニック スタイルシート 上級レイアウト (Quick Master of Web Technique) 速習Webテクニック スタイルシート 上級レイアウト
実践で使えるスタイルシートのテクニックが書かれています。フローとを使った段組や、リストを使ったナビゲーションなど、スタイルシートでつまずきやすいポイントを丁寧に書いてくれています。
Design.Yアドセンスジブリアートセラピーセカンドライフ奈良資格おいしいもんオーロラ色彩中学受験